:root{
        /* Tema claro */
        --bg: #eef2f7;          /* fondo global */
        --panel:#ffffff;        /* cards */
        --panel-2:#ffffff;      /* header */
        --text:#111827;         /* texto principal */
        --muted:#6b7280;        /* texto secundario */
        --border:#e5e7eb;       /* bordes */
        --accent:#FE5E22;       /* acento de marca */
        --ok:#16a34a;
        --ok-bg:#dcfce7;
        --warn:#d97706;
        --warn-bg:#fff7ed;
        --danger:#ef4444;
        --radius:16px;
        --shadow:0 8px 24px rgba(0,0,0,.06);
      }
      *{box-sizing:border-box}
      body{
        margin:0;
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        background:
          radial-gradient(900px 600px at 12% -10%, rgba(254,94,34,.05) 0%, transparent 55%),
          var(--bg);
        color:var(--text);
      }
      a{color:inherit}

      /* Header */
      .header{background:var(--panel-2); border-bottom:1px solid var(--border);}
      .header .inner{max-width:1100px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:14px; justify-content:space-between;}
      .brand{display:flex; align-items:center; gap:10px;}
      .brand img{height:28px; width:auto; display:block;}
      .brand .name{font-weight:700; letter-spacing:.2px}

      /* Containers */
      .wrap{max-width:1100px; margin:24px auto; padding:0 16px;}
      .card{
        background:var(--panel);
        border:1px solid var(--border);
        border-radius:var(--radius);
        padding:18px;
        box-shadow:var(--shadow);
      }
      .muted{color:var(--muted)}
      .pill{border:1px solid var(--border); background:#fff; padding:6px 10px; border-radius:999px; font-size:12px; color:var(--muted)}

      /* Inputs & buttons */
      input{
        width:100%; background:#fff; color:var(--text);
        border:1px solid var(--border); border-radius:12px; padding:12px; outline:none
      }
      input::placeholder{color:#9ca3af}
      .btn{appearance:none; border:1px solid var(--border); background:#fff; color:var(--text);
           padding:10px 14px; border-radius:12px; cursor:pointer; transition:.15s border-color, .15s transform}
      .btn:hover{border-color:#d4d8e0}
      .btn:active{transform:translateY(1px)}
      .btn-primary{background:var(--accent); border-color:var(--accent); color:#111; font-weight:600}
      .btn-ghost{background:transparent}
      .btn-danger{border-color:#fca5a5; background:#fff; color:#b91c1c}
      .btn-primary-soft {
    background-color: #fff3ed; /* Un fondo naranja muy pálido */
    border-color: #fed7aa;     /* Un borde naranja claro */
    color: var(--accent);      /* Texto en el color naranja principal */
    font-weight: 600;          /* Mantenemos el peso para que se destaque */
}
.btn-primary-soft:hover {
    background-color: #fee9dd; /* Un poco más oscuro al pasar el cursor */
    border-color: #fdbf83;
}

      /* Login */
      #login{max-width:460px; margin:72px auto}
      #login h1{margin:0 0 8px}
      .logo-login{display:flex; align-items:center; gap:12px; margin-bottom:8px}
      .logo-login img{height:34px}

      /* Top bar (dentro) */
      .topbar{display:flex; align-items:center; justify-content:space-between; margin:16px 0}
      .group{display:flex; align-items:center; gap:10px}

      /* Tabs (fix de contraste: texto siempre var(--text)) */
      .tabs{display:flex; gap:8px; margin:12px 0}
      .tab{
        padding:8px 12px; border:1px solid var(--border); background:#fff; border-radius:999px; cursor:pointer;
        color:var(--text);
      }

      /* Catálogo */
      .search{display:flex; gap:8px; align-items:center; margin-bottom:12px}
      .grid{display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(280px,1fr));}
      .item{display:flex; gap:10px; justify-content:space-between; align-items:flex-start}
      .item-title{font-weight:800}
      .badge{border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-size:12px}
      .instant{border-color:#86efac; background:var(--ok-bg); color:var(--ok)}
      .slow{border-color:#fed7aa; background:var(--warn-bg); color:var(--warn)}

      /* Tabla pedidos */
      table{width:100%; border-collapse:separate; border-spacing:0 8px}
      td,th{text-align:left; padding:10px 12px}
      th{color:#374151; font-weight:600}
      .row{background:var(--panel); border:1px solid var(--border); border-radius:12px}
      .chip{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--border)}
      .chip.ok{border-color:#86efac; background:var(--ok-bg); color:var(--ok)}
      .chip.pending{border-color:#fed7aa; background:var(--warn-bg); color:var(--warn)}

      /* Modal */
      .modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; align-items:center; justify-content:center; padding:16px; z-index:50}
      .modal{width:100%; max-width:580px; background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); padding:18px}
      .modal h3{margin:0 0 8px}
      .modal pre{background:#f3f4f6; padding:12px; border-radius:10px; max-height:50vh; overflow:auto; color:#111827}
#modalBody, 
body.geek-zone-theme #modalBody {
    padding-top: 0 !important;   /* Mata el espacio de 65px */
    margin-top: 10px !important; /* Un margen pequeño y normal */
    max-height: none !important; /* Deja que crezca lo necesario */
}
      .modal .actions{display:flex; gap:8px; justify-content:flex-end; margin-top:10px}

      /* Toast */
      .toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#111827; color:#e5e7eb; border:1px solid #111827;
           padding:10px 14px; border-radius:999px; display:none; z-index:60}
          
      /* Spinner minimalista que usa el color actual del botón */
      .spinner {
        width: 16px; height: 16px;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        display: inline-block;
        animation: spin .8s linear infinite;
        vertical-align: -2px;
        margin-left: 0px;
      }
      @keyframes spin {
        to { transform: rotate(360deg); }
      }
      
      /* Estado disabled un toque más apagado */
      .btn[disabled] { opacity: .6; cursor: not-allowed; }
    /* Modal un toque más chico y denso */
    #modalBody{ white-space:normal; line-height:1.2; font-size:14px; }

    /* Lista compacta: una fila = una variación */
    .details-list{
      display:grid;
      grid-template-columns: 1fr auto auto; /* variación | precio | botón */
      align-items:center;
      gap:6px 12px;          /* poco espacio vertical */
    }
    .details-list .header{
      color:var(--muted); font-size:12px; font-weight:600;
      padding-bottom:4px; border-bottom:1px solid var(--border);
    }
    .details-list .row{ display:contents; }   /* cada .row ocupa una línea del grid */
    .details-list .var{
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .details-list .price{
      font-weight:700; text-align:right; white-space:nowrap;
    }
    .details-list .buy{ text-align:right; }

    /* Badge más chiquita e inline */
    .details-list .badge{
      display:inline-block; margin-left:8px; padding:2px 8px;
      border-radius:999px; font-size:11px; line-height:1;
      vertical-align:middle;
    }

    /* Botón chico para que quepa en la línea */
    .btn-sm{ padding:6px 10px; border-radius:10px; font-size:13px; }

    /* Fijar cabecera a la 1ª fila y columnas correctas */
    .details-list { grid-auto-rows: auto; }
    .details-list > .header { grid-row: 1; /* ... (tus estilos existentes) ... */
    position: sticky; /* Fija el header en la parte superior */
    top: 0;
    z-index: 50; /* Asegura que esté por encima del contenido */
    background-color: rgba(255, 255, 255, 0.7); /* Fondo semi-transparente */
    backdrop-filter: blur(10px); /* El efecto "vidrio esmerilado" */
}}
    .details-list > .header:nth-of-type(1){ grid-column: 1; text-align: left; }
    .details-list > .header:nth-of-type(2){ grid-column: 2; text-align: right; }
    .details-list > .header:nth-of-type(3){ grid-column: 3; text-align: right; }

    /* Dots compactos y tags cortos */
    .dot { display:inline-block; width:8px; height:8px; border-radius:999px; margin-right:6px; }
    .dot.ok{  background:#16a34a; }        /* verde */
    .dot.slow{ background:#d97706; }        /* ámbar */
    .var .muted-tag{ color:var(--muted); font-size:12px; margin-left:8px; }

    /* Botones según disponibilidad */
    .btn-ok{  background:#16a34a; border-color:#16a34a; color:#fff; }
    .btn-warn{ background:#f59e0b; border-color:#f59e0b; color:#111; }
    .btn-ok:hover, .btn-warn:hover{ filter:brightness(.95); }

    /* Evitar que el texto “PS5 • 1° …” se corte por la badge larga */
    .details-list .var{ min-width:0; }  /* permite ellipsis sin romper columnas */

/* --- SKELETON (theme-aware) --- */
:root{
  --sk-1:#eef2f7;
  --sk-2:#e0e5eb;
  --sk-3:#eef2f7;
}

/* Si usás html.geekzone-theme para dark */
html.geekzone-theme{
  --sk-1:#242428;
  --sk-2:#52525b;   /* más contraste para que se note */
  --sk-3:#2d2d32;
}

.skeleton {
  opacity: .75;
  background: linear-gradient(
    90deg,
    var(--sk-1) 25%,
    var(--sk-2) 50%,
    var(--sk-3) 75%
  );
  background-size: 300% 100%;   /* ⬅ recorrido largo */
  animation: shimmer 3.8s linear infinite; /* ⬅ más lento */
}
span.skeleton{ display:inline-block; }

@keyframes shimmer {
  0%   { background-position: 300% 0; }
  100% { background-position: -300% 0; }
}


    /* Helpers para anchos */
    .w-100 { width: 100%; }
    .w-75 { width: 75%; }
    .w-50 { width: 50%; }
    .w-40 { width: 40%; }
    /* Puedes añadir esto al final de tu bloque <style> */
.details-list .buy .btn {
    padding-left: 12px;
    padding-right: 12px;
}
/* Reduce el espacio ENTRE los botones */
.details-list .buy .group {
    gap: 2px; /* Antes era 6px, ahora es más pequeño */
}

/* Reduce el espacio A LOS LADOS dentro de cada botón */
.details-list .buy .btn-sm {
    padding-left: 3px;   /* Menos espacio a la izquierda */
    padding-right: 3px;  /* Menos espacio a la derecha */
}
/* Reduce el tamaño de todo el texto en la línea de la variación */
.details-list .var {
    font-size: 13px; /* El tamaño por defecto suele ser 14px o 16px, ajústalo a tu gusto */
}
/* Dots compactos y tags cortos */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  margin-right: 6px;
  transition: background-color 0.2s, transform 0.2s; /* Añade transición suave */
}
/* Verde brillante por defecto (stock alto) */
.dot.ok{ background: #16a34a; }
/* Amarillo para stock bajo (nuevo) */
.dot.low-stock { background: #facc15; /* Amarillo */ }
/* Naranja/Ámbar para sin stock inmediato (como antes) */
.dot.slow{ background: #d97706; }

/* Opcional: Hacer el punto un poco más grande si hay bajo stock */
/* .dot.low-stock { transform: scale(1.2); } */
/* --- ESTILOS PARA LA TABLA RESPONSIVA EN MÓVILES --- */
/* --- NUEVOS ESTILOS PARA TARJETAS DE PEDIDOS EN MÓVILES --- *//* --- ESTILOS PARA LA LISTA DE PEDIDOS --- */
/* Los estilos de tabla se aplican por defecto (escritorio) */

/* (Tus estilos de .table, .th, .td, .row, .chip ya existen y están bien) */

/* --- Media Query para Móviles --- */
/* Estos estilos SÓLO se aplican en pantallas de 768px o menos */
@media (max-width: 768px) {
    /* 1. Ocultamos la tabla de escritorio y preparamos el contenedor */
    #ordersBox table {
        display: none;
    }
    .orders-grid-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* 2. La Tarjeta de Pedido */
    .order-card {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 16px;
        box-shadow: var(--shadow);
        display: flex;
        flex-direction: column;
    }

    /* 3. Secciones de la Tarjeta */
    .order-card__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 12px;
        margin-bottom: 12px;
        border-bottom: 1px solid var(--border);
    }
    .order-card__title {
        font-weight: 700;
        font-size: 1.1em;
    }
    .order-card__details {
        font-size: 0.9em;
        flex-grow: 1;
    }
    .order-card__details p {
        display: flex;
        justify-content: space-between;
        margin: 0 0 8px;
        color: #4b5563;
    }
    .order-card__details strong {
        font-weight: 600;
        color: var(--muted);
    }
    .order-card__total {
        font-weight: 700;
        font-size: 1.1em;
        color: var(--accent);
    }
    .order-card__actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 16px;
    }
}

/* +2px a la tarjeta para que no se sienta apretada */
.card{
  padding-top: 16px;  /* antes 14px */
  padding-bottom: 16px;
}

/* Botón de Comprar un poquito más alto en catálogo */
.details-list .buy .btn-sm{
  padding-top: 6px;    /* antes 4px */
  padding-bottom: 6px; /* +2px por lado = +4px totales */
  min-height: 30px;    /* asegura “cuerpo” aun si cambia la tipografía */
  line-height: 1.1;    /* evita que se vea “finitito” */
}

/* En móvil, apenas más cómodo al dedo sin exagerar */
@media (max-width: 768px){
  .details-list .buy .btn-sm{
    min-height: 34px;  /* +2px extra en touch */
  }
}

/* --- Media Query para Escritorio --- */
/* === Desktop layout cómodo (sobrescribe lo actual) === */
@media (min-width: 780px) {
  /* Ancho de columna central más generoso */
  .header .inner,
  .wrap { 
    max-width: 1100px;   /* antes 1100px */
  }

  /* 3 columnas exactas en PC, con buenas tarjetas */
  .grid {
    grid-template-columns: repeat(3, minmax(320px, 1fr));
    gap: 12px; /* un pelín más de aire */
  }
}

/* Ajustes finos para que no se sienta apretado dentro de la tarjeta */
.card { padding: 20px; }
.details-list { gap: 6px 12px; }        /* más aire entre columnas */
.details-list .var { font-size: 14px; } /* lee mejor en PC */



/* --- NUEVOS ESTILOS PARA LA BARRA DE NAVEGACIÓN "TIENDA" --- */

/* 1. Ajustes al contenedor principal y al título */
.topbar {
    margin-bottom: 0; /* Quitamos el margen inferior para unirlo al card */
    padding: 0 4px;   /* Damos un poco de aire a los lados */
}
.topbar h2 {
    font-size: 1.5em; /* Hacemos el título "Tienda" un poco menos dominante */
}

/* 2. Estilo base para las pestañas (inactivas) */
.tab {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 12px 4px; /* Más espacio vertical, menos horizontal */
    margin: 0 8px;     /* Espacio entre pestañas */
    font-size: 1em;
    font-weight: 500;
    color: var(--muted); /* Color gris para las inactivas */
    position: relative; /* Necesario para el subrayado */
    transition: color 0.2s ease-in-out;
}
.tab:hover {
    color: var(--text); /* Se oscurece al pasar el cursor */
}

/* 3. Estilo para la pestaña ACTIVA */
.tab.active {
    color: var(--text);
    font-weight: 700; /* Texto más grueso para destacarla */
}

/* 4. La "magia": el subrayado indicador */
.tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;         /* Se posiciona en la parte inferior */
    left: 0;
    right: 0;
    height: 3px;       /* Grosor del subrayado */
    background-color: var(--accent); /* Usa tu color de acento naranja */
    border-radius: 3px;
}

/* --- ESTILOS PARA HEADER UNIFICADO --- */

/* Contenedor principal de acciones */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 1. Estilo base para todos los bloques */
.header-block {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: transparent; /* Quitamos el fondo gris */
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 13px;
    height: 38px;
    color: var(--text);
    font-weight: 500;
}

/* 2. Ajustes específicos para el Carrito */
#btnCart {
    padding: 0;
    width: 38px; /* Cuadrado para que sea circular con border-radius */
    border-radius: 10px;
    justify-content: center;
    color: var(--muted);
    transition: background-color 0.2s, color 0.2s;
    position: relative;
}
#btnCart:hover {
    background-color: #e5e7eb;
    color: var(--text);
}
#btnCart .cart-badge{ pointer-events: none; }

.cart-badge {
    position: absolute;
    top: 0; /* Posición en la esquina superior derecha */
    right: 0;
    transform: translate(30%, -30%); /* Lo mueve un poco hacia afuera */
    background-color: var(--accent); /* Color naranja principal */
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    width: 18px; /* Un poco más grande para mejor legibilidad */
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--panel-2); /* Borde blanco para separarlo del ícono */
}
/* 3. Ajustes específicos para el Saldo */
#saldoBox {
    padding-right: 6px;
}
.saldo-label {
    color: var(--muted);
}
#btnRefreshWallet {
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--muted);
    transition: background-color 0.2s, color 0.2s, transform 0.3s;
}
#btnRefreshWallet:hover {
    background-color: #e5e7eb;
    color: var(--text);
    transform: rotate(90deg);
}

/* 4. Separador vertical para el bloque de usuario */
.separator {
    width: 1px;
    height: 16px;
    background-color: var(--border);
    margin: 0 4px;
}

/* 5. Botón de Salir */
.btn-icon-danger {
    padding: 0;
    width: 26px;
    height: 26px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.btn-icon-danger:hover {
    background-color: #fee2e2;
    color: var(--danger);
}
.btn-icon.btn-icon-danger {
    color: #991b1b; /* Un rojo oscuro para el ícono */
}
.btn-icon.btn-icon-danger:hover {
    background-color: #fee2e2; /* Fondo rojo muy pálido */
    color: var(--danger);      /* Ícono en rojo brillante */
}
/* Oculta la burbuja por defecto */
/* El botón como contenedor de referencia */
#btnCart { position: relative; }

/* Badge siempre visible; animación suave */
.cart-badge{
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(30%, -30%);
  background-color: var(--accent);
  color: white;
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--panel-2);
  transition: transform .2s ease, opacity .2s ease, background-color .2s ease, color .2s ease;
  pointer-events: none; /* no bloquea el click */
}

/* (Opcional) estilo más tenue cuando está en cero */
.cart-badge.empty{
  background-color: #e5e7eb; /* gris claro */
  color: #6b7280;            /* gris medio */
  border-color: var(--panel-2);
}

/* Muestra la burbuja cuando tiene la clase 'visible' */
.cart-badge.visible {
    transform: scale(1) translate(30%, -30%); /* Vuelve a su tamaño normal */
    opacity: 1;
}
/* --- MIS PEDIDOS DESKTOP PRO --- */
.orders-toolbar{
  display:flex; align-items:center; gap:10px; margin:0 0 12px 0;
}
.orders-toolbar .input, .orders-toolbar .select{
  height:36px; border:1px solid var(--border); background:#fff; color:var(--text);
  border-radius:10px; padding:0 10px; font-size:14px; outline:none;
}
.orders-toolbar .spacer{ flex:1; }
.btn-ghost-sm{ height:36px; padding:0 10px; border-radius:10px; }

.row-actions{ display:flex; justify-content:flex-end; gap:6px; }
.btn-smooth{
  height:30px; padding:0 10px; border-radius:10px; font-size:12px;
}
.orders-toolbar .input, .orders-toolbar .select{
  height:36px; border:1px solid var(--border); background:#fff; color:var(--text);
  border-radius:10px; padding:0 10px; font-size:14px; outline:none;
}
.orders-toolbar .spacer{ flex:1; }
.btn-ghost-sm{ height:36px; padding:0 10px; border-radius:10px; }
/* === Compactar tarjeta/filas de catálogo === */
.card { padding: 14px; }                     /* antes 18-20 */
.item { gap: 8px; }
.item-title { font-weight: 800; line-height: 1.1; }

.details-list{
  gap: 4px 10px;                             /* menos separación */
}
.details-list .header{
  padding-bottom: 2px;
  font-size: 11px;
}
.details-list .var{
  font-size: 12.5px;                         /* más chico */
}
.details-list .price{
  font-weight: 700;
  font-size: 13px;
}
.btn-sm{
  padding: 4px 8px;                          /* botones compactos */
  border-radius: 8px;
  font-size: 12.5px;
}
.details-list .buy .group{ gap: 2px; }

/* Punto de color + emoji alineados y mínimos */
.dot{ width: 7px; height: 7px; margin-right: 6px; }
.status-tag{
  margin-left: 6px;
  font-size: 12px;
  line-height: 1;
  color: var(--muted);
}

/* Badges de stock aún más chicas */
.stock-badge{ padding: 1px 5px; font-size: 9.5px; }

/* En desktop mantengo 3 columnas pero con cartas un poco más angostas */
@media (min-width: 800px){
  .header .inner, .wrap{ max-width: 1200px; }
  .grid{ grid-template-columns: repeat(3, minmax(340px, 1fr)); gap: 12px; }
}
/* Cabecera sticky */
.table-pro{ width:100%; border-collapse:separate; border-spacing:0 8px; }
.table-pro thead th{
  position: sticky; top: 0; z-index: 1;
  background: var(--panel);
  color: var(--text);
  padding: 10px 12px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}

/* Truco: estilamos los TD (no el TR) para lograr “fila-capsula” perfecta */


/* Truco: estilamos los TD (no el TR) para lograr “fila-capsula” perfecta */
.table-pro tbody tr > td{
  background:var(--panel); /* <--- ESTA ES LA CLAVE: Usar la variable */
  padding:12px; vertical-align:middle;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.table-pro tbody tr > td:first-child{
  border-left:1px solid var(--border);
  border-radius:12px 0 0 12px;
}
.table-pro tbody tr > td:last-child{
  border-right:1px solid var(--border);
  border-radius:0 12px 12px 0;
}

/* Hover elegante en toda la fila */
.table-pro tbody tr:hover > td{
  background: var(--panel-2);
}
/* Zebra suave sin romper esquinas porque cae sobre los TD */
.table-pro tbody tr:nth-child(2n) > td{
  background: color-mix(in srgb, var(--panel) 92%, var(--text) 8%);
}
/* Números alineados y monoespaciados */
.table-pro td.num{ font-variant-numeric: tabular-nums; text-align:right; }


/* Badges estado */
.badge-pill{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  font-size:12px; border:1px solid var(--border); white-space:nowrap;
}
.badge-pill.ok{ background:var(--ok-bg); border-color:#86efac; color:var(--ok); }
.badge-pill.pending{ background:var(--warn-bg); border-color:#fed7aa; color:var(--warn); }

/* Botonera de acciones consistente y sin saltos */
.row-actions{ display:flex; justify-content:flex-end; gap:6px; white-space:nowrap; }
.btn-smooth{ height:30px; padding:0 10px; border-radius:10px; font-size:12px; }

.stock-badge {
  display: inline-block;
  margin-left: 6px;      /* Espacio respecto al tag anterior */
  padding: 2px 6px;      /* Más chico que el tag normal */
  border-radius: 999px;
  font-size: 10px;       /* Texto más pequeño */
  line-height: 1;
  vertical-align: middle;
  font-weight: 600;      /* Un poco más grueso */
  border: 1px solid transparent; /* Borde transparente por defecto */
}

/* Colores según cantidad */
.stock-badge.stock-ok { /* Verde para > 5 unidades (ejemplo) */
  border-color: #a7f3d0;   /* Borde verde muy pálido */
  background-color: #dcfce7; /* Fondo verde pálido */
  color: #047857;         /* Texto verde oscuro */
}

.stock-badge.stock-low { /* Amarillo/Naranja para 1-5 unidades (ejemplo) */
  border-color: #fed7aa;   /* Borde naranja pálido */
  background-color: #fffbeb; /* Fondo amarillo muy pálido */
  color: #b45309;         /* Texto naranja oscuro */
}
/* Las cards grandes del catálogo no ocupan layout hasta entrar en viewport */
.card{
  content-visibility: auto;
  contain-intrinsic-size: 260px; /* altura aproximada para reservar espacio y evitar salto */
}

/* =========================================
   ESTÉTICA SMOOTH & MODERN UI (Agregado)
   ========================================= */

/* 1. Transiciones Base Suaves */
.btn, .tab, input, .header-block, .btn-icon {
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 2. Inputs Modernos (Glow naranja al escribir) */
input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(254, 94, 34, 0.15); /* Tu color naranja difuminado */
    transform: translateY(-1px);
}

/* 3. Tarjeta de Login: Levantar y Sombra profunda */
#login {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#login:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* 4. Tarjetas del Catálogo (.grid .card) */
/* IMPORTANTE: Solo aplicamos esto a las cards DENTRO de la grid para no afectar al contenedor grande */
.grid .card {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), 
                box-shadow 0.25s ease,
                border-color 0.2s ease;
    cursor: default; /* O pointer si quisieras que toda la carta sea clickeable */
}

.grid .card:hover {
    transform: translateY(-5px); /* Se levanta 5 pixeles */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* Sombra más difusa abajo */
    border-color: rgba(254, 94, 34, 0.3); /* Borde sutil naranja */
    z-index: 10; /* Se pone por encima de las otras */
}

/* 5. Tarjetas de Pedidos en Móvil */
.order-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.order-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* 6. Filas de la Tabla en PC */
/* Hacemos que la fila resalte un poco más al pasar el mouse */
.table-pro tbody tr {
    transition: transform 0.15s ease;
}
.table-pro tbody tr:hover td {
    background-color: #fff7ed !important; /* Fondo naranja muy muy suave */
    border-color: #fed7aa;
}
/* Pequeño desplazamiento a la derecha para indicar interactividad en la lista */
.table-pro tbody tr:hover {
    transform: translateX(4px); 
}

/* 7. Botones: Efecto click "hacia adentro" */
.btn:active {
    transform: scale(0.96) translateY(1px);
}

/* 8. Pestañas (Tabs) */
.tab:hover {
    background-color: rgba(0,0,0,0.02);
}
/* =========================================
   HEADER STICKY & ANIMACIÓN CARRITO
   ========================================= */

/* 1. Header Fijo con efecto Vidrio (Glassmorphism) */
.header {
    position: sticky;
    top: 0;
    z-index: 1000; /* Muy alto para tapar todo lo que pasa por debajo */
    background: rgba(255, 255, 255, 0.85); /* Blanco al 85% de opacidad */
    backdrop-filter: blur(12px); /* Difumina lo que pasa por atrás */
    box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 4px 24px rgba(0,0,0,0.05); /* Borde sutil + sombra suave */
    transition: all 0.3s ease;
}

/* Aseguramos que el botón permita que el número "se escape" de sus bordes */
.btn {
    position: relative; /* Para que el +1 se posicione respecto al botón */
    overflow: visible;  /* IMPORTANTE: Para que el número no se corte al salir */
}

/* 2. Animación del "+1" flotante */
@keyframes floatUpFadeLocal {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.5); /* Empieza centrado y pequeño */
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -25px) scale(1.3); /* Sube rápido y crece (Pop!) */
    }
    60% {
        opacity: 1;
        transform: translate(-50%, -35px) scale(1.3); /* Se mantiene un rato arriba (Feedback visual) */
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50px) scale(1); /* Se desvanece subiendo más */
    }
}

.cart-plus-one-local {
    position: absolute;
    top: 0;             /* Inicia en el borde superior del botón */
    left: 50%;          /* Centrado horizontalmente */
    color: var(--accent); /* Tu color naranja */
    font-weight: 800;
    font-size: 15px;    /* Un poco más grande para que se vea bien */
    pointer-events: none; 
    z-index: 100;
    white-space: nowrap;
    text-shadow: 
        -1px -1px 0 #fff,  
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff; /* Borde blanco sólido para contraste máximo sobre cualquier fondo */
    animation: floatUpFadeLocal 1.2s ease-out forwards; /* 1.5 SEGUNDOS DE DURACIÓN */
}

/* =========================================
   AJUSTES DE GRILLA MÓVIL Y SEPARADOR
   ========================================= */

/* 1. Forzar una sola tarjeta por fila en celulares */
@media (max-width: 640px) {
    .grid {
        grid-template-columns: 1fr !important; /* Una sola columna obligatoria */
    }
}

/* 2. Estilo del Separador "Elegante" entre plataformas */
.platform-separator {
    grid-column: 1 / -1;       /* Ocupa todo el ancho */
    height: 2px;               /* Aumentado a 2px para mejor visibilidad */
    
    /* Degradado: transparente en puntas, sólido en el centro */
    background: linear-gradient(90deg, transparent 0%, var(--border) 15%, var(--border) 85%, transparent 100%);
    
    /* Márgenes pequeños para equilibrar el nuevo grosor */
    margin: 3px 0;             
    
    /* Más opaco para que se note bien */
    opacity: 0.8; 
    border-radius: 99px;       /* Bordes redondeados para suavidad */
}

/* Mantener filas pegadas */
.details-list {
    row-gap: 0px !important;
}
/* Ajuste para que los items respiren un poquito internamente pero no entre ellos */
.details-list .item, .details-list .price, .details-list .buy {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* =========================================
   ESTILOS NUEVOS: Ojo Pass + Filtros
   ========================================= */

/* --- Wrapper del Input Password --- */
.input-wrapper {
    position: relative;
    width: 100%;
}
.btn-eye {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}
.btn-eye:hover { color: var(--text); }


/* =========================================
   FILTROS MODERNOS UI (2025/2026)
   ========================================= */

.filters-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    background: #fff;
    padding: 10px 14px;
    border-radius: 16px; /* Bordes muy redondeados */
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); /* Sombra flotante sutil */
}

/* Divisor visual entre grupos */
.vertical-divider {
    width: 1px;
    height: 24px;
    background-color: var(--border);
    margin: 0 4px;
}

/* --- CHIPS (BOTONES DE FILTRO) --- */
.filter-group {
    display: flex;
    gap: 6px;
}

.filter-chip {
    background: transparent;
    border: 1px solid transparent; /* Invisible por defecto */
    color: var(--muted);
    padding: 6px 14px;
    border-radius: 99px; /* Píldora perfecta */
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.filter-chip:hover {
    background: #f9fafb;
    color: var(--text);
}

/* Estado ACTIVO (La magia visual) */
.filter-chip.active {
    background: var(--text); /* Fondo negro/oscuro elegante */
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

/* Opcional: Si quieres que los chips de plataforma sean Naranjas al activarse */
/* Chips de Plataforma Y Licencia: Naranjas al activarse */
#groupPlatform .filter-chip.active,
#groupLicense .filter-chip.active {
    background: var(--accent); /* Naranja */
    box-shadow: 0 4px 12px rgba(254, 94, 34, 0.25);
    color: #fff; /* Forzamos blanco para que se lea bien sobre naranja */
}

/* --- CÁPSULA DE PRECIO (REIMAGINADA) --- */
.price-capsule {
    display: flex;
    align-items: center;
    background: #f3f4f6; /* Fondo gris muy suave */
    border-radius: 12px;
    padding: 4px 8px;
    margin-left: auto; /* Empuja el precio a la derecha en PC */
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.price-capsule:focus-within {
    background: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(254, 94, 34, 0.1);
}

.price-icon {
    color: var(--muted);
    margin-right: 6px;
    display: flex;
    align-items: center;
}

.price-capsule input {
    background: transparent;
    border: none;
    width: 60px; /* Ancho fijo para números */
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    padding: 4px 0;
    margin: 0;
    border-radius: 0;
    outline: none;
    box-shadow: none !important; /* Quita el glow predeterminado */
}

.price-capsule input::placeholder { color: #9ca3af; font-weight: 400; }

.price-sep {
    width: 8px;
    height: 2px;
    background: #d1d5db;
    margin: 0 4px;
    border-radius: 99px;
}
/* =========================================
   FIX MÓVIL: FILTROS Y BUSCADOR COMPACTOS
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. Contenedor de filtros: Vertical y compacto */
    .filters-container {
        flex-direction: column;
        align-items: stretch; /* Que ocupen todo el ancho */
        gap: 12px;
        padding: 12px;
    }
    
    
    /* 2. Ocultar el divisor vertical en móvil */
    .vertical-divider { display: none; }

    /* 3. Grupos de Botones (Chips) */
    .filter-group {
        width: 100%;
        justify-content: space-between; /* Distribuye el espacio */
        background: #f9fafb;
        padding: 4px;
        border-radius: 12px;
    }

    .filter-chip {
        flex: 1; /* Todos los botones del mismo ancho */
        text-align: center;
        padding: 8px 0; /* Más área táctil vertical */
        font-size: 12px;
    }

    /* 4. CÁPSULA DE PRECIO (El arreglo principal) */
    .price-capsule {
        margin-left: 0;
        width: 100%;
        margin-top: 0;
        /* FORZAR FILA HORIZONTAL */
        flex-direction: row !important; 
        justify-content: space-between;
        gap: 0;
    }

    /* Forzar que los inputs de precio NO ocupen el 100% cada uno */
    .price-capsule input {
        width: 40% !important; /* 40% para min, 40% para max */
        text-align: center;
        padding: 8px 0;
        font-size: 14px; /* Texto legible */
        background: transparent;
        border: none; /* Asegurar que no tenga bordes feos */
    }

    /* El separador del medio (-) */
    .price-sep {
        flex-shrink: 0;
        width: 10px;
        margin: 0 5px;
    }

    /* El ícono de etiqueta en móvil puede estorbar o quedar bien, lo ajustamos */
    .price-icon {
        padding-left: 8px;
    }

}

/* === LAYOUT BUSCADOR + MONEDA (DESKTOP) === */
.search {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.search input#q {
  flex: 1;
  min-width: 0;  /* permite que se achique sin romper layout */
}

#currencyLabel {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;  /* que no se corte en varias líneas */
}

#btnCurrencyToggle {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === LAYOUT BUSCADOR + MONEDA (MÓVIL) === */
@media (max-width: 768px) {
  .search {
    flex-wrap: wrap;        /* permite que baje de línea */
    align-items: flex-start;
  }

  /* El buscador ocupa la fila de arriba completa */
  .search input#q {
    order: 1;
    width: 100%;
  }

  /* Debajo, a la izquierda, el texto de moneda */
  #currencyLabel {
    order: 2;
    font-size: 11px;
  }

  /* Debajo, a la derecha, el botón de cambio de divisa */
  #btnCurrencyToggle {
    order: 3;
    align-self: center;
  }
}

/* --- TOGGLE SWITCH PRO --- */
.toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--muted);
    user-select: none;
}
.toggle-wrapper:hover {
    color: var(--text);
}

/* El Switch en sí */
.switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

#modalSubUser h3 {
    font-size: 20px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

#modalSubUser .actions {
    padding-top: 15px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Botón Crear más destacado */
#btnCreateSub {
    min-width: 100px;
    font-weight: 600;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #e5e7eb; /* Gris apagado */
    transition: .3s;
    border-radius: 34px;
    border: 1px solid #d1d5db;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .3s cubic-bezier(0.4, 0.0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Estado Activado */
input:checked + .slider {
    background-color: var(--ok); /* Verde éxito */
    border-color: var(--ok);
}

input:checked + .slider:before {
    transform: translateX(16px);
}

/* Estado Cargando (opcional, para feedback visual) */
.switch.loading .slider {
    opacity: 0.6;
    pointer-events: none;
}

/* --- SWITCH CON FEEDBACK ASERTIVO (ESTADO CARGANDO - AMARILLO) --- */

/* 1. Definimos la animación de latido (Brillo Amarillo) */
@keyframes pulse-yellow {
    0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.6); } /* Amarillo */
    70% { box-shadow: 0 0 0 6px rgba(250, 204, 21, 0); }
    100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); }
}

/* 2. Configuración del contenedor cuando está cargando */
.switch.loading {
    pointer-events: none; /* Bloquea clics extra */
    opacity: 1; /* Mantenemos opacidad total para que el amarillo se vea bien */
}

/* 3. El slider se vuelve Amarillo y late */
.switch.loading .slider {
    background-color: #facc15; /* Amarillo intenso */
    border-color: #ca8a04;     /* Amarillo oscuro/Ocre para el borde */
    animation: pulse-yellow 1.5s infinite; /* Aplica la animación */
    cursor: wait;
}

/* 4. El puntito blanco se mantiene blanco puro para contrastar con el amarillo */
.switch.loading .slider:before {
    background-color: #ffffff;
}

/* Ajustes para tabla de pedidos */
.table-pro th {
    white-space: nowrap; /* Evita que los títulos se rompan */
}

/* Columna de correo */
.table-pro td:nth-child(3) { /* La 3ra columna es el Correo */
    max-width: 140px; /* Límite de ancho */
    overflow: hidden;
    text-overflow: ellipsis; /* Pone "..." si es muy largo */
    white-space: nowrap;
}

/* Columna de producto */
.table-pro td:nth-child(2) {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- BOTÓN DE ACTUALIZAR PRO (2025 STYLE) --- */
.btn-icon-anim {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

/* Estado Cargando: El botón se deshabilita visualmente y el ícono gira */
.btn-icon-anim.loading {
    color: var(--muted);
    pointer-events: none; /* Evita doble clic */
    background: rgba(0,0,0,0.02);
}

.btn-icon-anim.loading .refresh-icon {
    animation: spin 0.8s infinite linear;
}

/* Reutilizamos tu keyframe spin, o lo definimos si no existe */
@keyframes spin { 
    from { transform: rotate(0deg); } 
    to { transform: rotate(360deg); } 
}


/* --- ANIMACIÓN DE ENTRADA PARA PEDIDOS NUEVOS --- */

/* 1. Definimos la animación: Entra desde abajo + Brillo Naranja que se apaga */
@keyframes slideInHighlight {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
        background-color: rgba(254, 94, 34, 0.15); /* Naranja suave */
        border-color: var(--accent);
    }
    40% {
        opacity: 1;
        transform: translateY(0) scale(1);
        background-color: rgba(254, 94, 34, 0.1); /* Mantiene el brillo un poco */
    }
    100% {
        background-color: #fff; /* Vuelve a blanco (o el color de fila normal) */
        border-color: var(--border);
    }
}

/* 2. Clase que JS le pondrá a los elementos nuevos */
.new-entry-anim {
    animation: slideInHighlight 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    position: relative;
    z-index: 10; /* Para que brille por encima de los otros */
}

.toast {
    z-index: 20000 !important; 
}

/* El fondo negro del modal suele estar en 1000-9000, esto asegura que el toast gane */
.modal-backdrop {
    z-index: 10000; 
}

/* Selector de Moneda Moderno (Chips) */
.currency-selector-group {
    display: flex;
    gap: 10px;
    margin-top: 5px;
    background: #f3f4f6;
    padding: 4px;
    border-radius: 12px;
    width: fit-content;
}

.currency-chip {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    background: transparent;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.currency-chip.active{
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
.currency-chip{
  border: 1px solid transparent; /* se mantiene */
}
.currency-chip:hover:not(.active) {
    background: rgba(0,0,0,0.03);
}

/* Iconos para monedas */
.icon-usdt, .icon-ars {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
}
.icon-usdt { background: #26A17B; } /* Verde Tether */
.icon-ars { background: #74ACDF; }  /* Celeste Argentina */

/* Ajuste Input Monto (Corregido para que entre U$S) */
.input-amount-wrapper {
    position: relative;
    margin-top: 15px;
}
.input-amount-wrapper .symbol {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text);
    font-weight: 700;
    font-size: 18px;
    pointer-events: none; /* Para que el clic pase al input */
    z-index: 2;
}
.input-amount-wrapper input {
    /* Aumentamos de 35px a 55px para que entre "U$S " cómodo */
    padding-left: 55px !important; 
    font-size: 24px !important; /* Número más grande y legible */
    font-weight: 700;
    height: 55px;
    border: 2px solid var(--border);
    border-radius: 12px;
}
.input-amount-wrapper input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
}
/* Fix para el Modal de Crear Revendedor */
#modalSubUser form {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espacio uniforme entre campos */
}

#modalSubUser label {
    margin-top: 0 !important; /* Quitamos margin-top manual */
    margin-bottom: 4px;
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
}

/* Asegurar que los botones ocupen todo el ancho disponible en el modal */
#modalSubUser .currency-selector-group {
    width: 100%;
    display: flex;
    box-sizing: border-box;
}

/* Alinear verticalmente el input de al lado */
#newSubPhone {
    height: 44px; /* Misma altura visual que el grupo de botones */
}
/* Fila para Moneda y Whatsapp */
.form-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: start;
}

@media (max-width: 480px) {
    .form-row-split {
        grid-template-columns: 1fr; /* En móvil uno abajo del otro */
    }
}

@keyframes fadeOutDot { 0%{opacity:1} 90%{opacity:1} 100%{opacity:0} }

/* Opcional: Un pequeño punto naranja temporal al lado del título */
.new-entry-anim td:first-child::before, 
.new-entry-anim .order-card__header::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    animation: fadeOutDot 3s forwards;
}

/* 2. Asegurar que el precio no empuje de más */
[data-field="price"] {
    margin-left: auto !important; /* Empuja el precio a la derecha, separándose del stock */
    text-align: right;
    min-width: fit-content;
}
.stock-badge {
    display: inline-flex !important; /* Asegura que se comporte como bloque visible */
    align-items: center;
    justify-content: center;
    /* Ajuste de márgenes para que no se pegue */
    margin-left: 5px !important; 
    margin-right: 5px !important;
}

/* 3. (Opcional) Ajustar el contenedor de la fila si es necesario */
.details-list > div {
    display: flex !important;
    flex-wrap: nowrap !important; /* Prohibido bajar de renglón */
    align-items: center !important;
    width: 100%;
    gap: 4px; /* Espacio pequeño entre elementos */
    overflow: hidden; /* Ocultar lo que se salga del contenedor general */
}
[data-field="platform-license"] {
    flex-shrink: 1 !important; /* Permite encogerse */
    min-width: 0 !important;   /* Permite hacerse muy pequeño si es necesario */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;   /* Agrega '...' si se corta */
}
/* 2. ELEMENTOS INTOCABLES (No se encogen jamás) */
.dot, 
[data-field="status-tag"], 
.stock-badge, 
[data-field="price"], 
[data-field="btn-buy"], 
[data-field="btn-cart"] {
    flex-shrink: 0 !important; /* No permitir que se aplasten */
    white-space: nowrap !important;
}
/* ==========================================================================
   TEMA: GEEK ZONE (VERSIÓN FINAL CORREGIDA - TABLAS, CARRITO Y FILTROS)
   ========================================================================== */

body.geek-zone-theme {
    /* Paleta oscura */
    --bg: #1a1a1d;
    --panel: #242428;
    --panel-2: #2a2a2e;
    --text: #ffffff;
    --muted: #a1a1aa;
    --border: #3f3f46;
    --accent: #FFD700;      /* Amarillo Oro */

    /* Fondo Gamer de Puntos */
    background-color: var(--bg);
    background-image: radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px);
    background-size: 24px 24px;
    background-attachment: fixed;
}
body.geek-zone-theme .table-pro thead th {
  background-color: var(--panel-2) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* --- ELEMENTOS BASE OSCUROS --- */
body.geek-zone-theme input,
body.geek-zone-theme .select,
body.geek-zone-theme .orders-toolbar input,
body.geek-zone-theme .orders-toolbar select {
    background: #2d2d32 !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

body.geek-zone-theme .header {
    background: rgba(36, 36, 40, 0.95);
    border-bottom-color: var(--border);
}

body.geek-zone-theme .modal {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
}

/* Contenedores secundarios */
body.geek-zone-theme .filter-group,
body.geek-zone-theme .price-capsule,
body.geek-zone-theme .filters-container,
body.geek-zone-theme .currency-selector-group {
    background: var(--panel-2);
    border-color: var(--border);
}

/* --- ARREGLO 1: CARRITO DE COMPRAS (.row) --- */
/* Forzamos fondo oscuro en las filas del carrito para que el texto blanco se vea */
body.geek-zone-theme .row {
    background-color: var(--panel-2) !important;
    border: 1px solid var(--border) !important;
    color: #ffffff !important;
}
/* Asegurar que el texto dentro del carrito sea blanco */
body.geek-zone-theme .row div {
    color: #ffffff !important;
}
/* Texto secundario en el carrito (ej: PS4 • Primaria) */
body.geek-zone-theme .row .muted,
body.geek-zone-theme .muted {
    color: #a1a1aa !important;
}


/* --- ARREGLO 2: TABLA "MIS PEDIDOS" (.table-pro) --- */
/* 1. Fondo oscuro base para todas las celdas */
body.geek-zone-theme .table-pro tbody tr > td {
  background-color: var(--panel-2) !important;
  color: var(--text) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}
body.geek-zone-theme .table-pro tbody tr:nth-child(2n) > td,
body.geek-zone-theme .table-pro tbody tr:nth-child(even) > td {
  background-color: var(--panel-2) !important;
  color: var(--text) !important;
}

/* 3. Arreglo hover: Gris oscuro al pasar el mouse */
body.geek-zone-theme .table-pro tbody tr:hover > td,
body.geek-zone-theme .table-pro tbody tr:hover td {
  background-color: #3f3f46 !important;
  border-color: var(--border) !important;
}

/* 4. Forzar títulos en negrita a blanco */
body.geek-zone-theme .table-pro td strong,
body.geek-zone-theme .table-pro td b {
  color: var(--text) !important;
}
body.geek-zone-theme .table-pro td div[style*="font-weight:600"] {
    color: #ffffff !important;
}

/* Cada item del carrito como tarjeta oscura */
body.geek-zone-theme #cartItemsList .row {
  background-color: var(--panel-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
}

body.geek-zone-theme #cartItemsList .row .muted {
  color: var(--muted) !important;
}

/* --- ARREGLO 3: FILTROS (Hover) --- */
/* Evita que se pongan blancos al pasar el mouse */
body.geek-zone-theme .filter-chip:hover {
    background-color: #3f3f46 !important;
    color: #ffffff !important;
    border-color: #71717a !important;
}
/* El filtro activo se mantiene amarillo */
body.geek-zone-theme .filter-chip.active,
body.geek-zone-theme .filter-chip.active:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #000000 !important;
}


/* --- BOTONES ESPECÍFICOS --- */

/* Botón Cerrar Sesión (Rojo visible) */
body.geek-zone-theme .btn-icon-danger {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
}
body.geek-zone-theme .btn-icon-danger:hover {
    background-color: #ef4444;
    color: white;
}

/* Botones Comprar (Mantener colores originales de stock) */
body.geek-zone-theme .btn-ok {
    background-color: #2f9e68 !important;   /* verde suave que resalta */
    color: #ffffff !important;
    font-weight: 600 !important;
    border: none !important;
}
/* Hover del botón Comprar (ligeramente más claro) */
body.geek-zone-theme .btn-ok:hover {
    background-color: #36b77a !important;   /* un toque más brillante */
    color: #ffffff !important;
}
body.geek-zone-theme .btn-warn {
    background-color: #eab308 !important;  /* amarillo tenue, no fuerte */
    color: #000 !important;
    border: none !important;
    font-weight: 600 !important;
}
body.geek-zone-theme .btn-warn:hover {
    background-color: #facc15 !important; /* brillo suave */
    color: #000 !important;
}
/* Botón Primario General */
body.geek-zone-theme .btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #000000 !important;
}
/* Botones genéricos (Cancelar, etc) */
body.geek-zone-theme .btn:not(.btn-primary):not(.btn-ok):not(.btn-warn):not(.btn-icon-danger) {
    background: var(--panel-2);
    border-color: var(--border);
    color: var(--text);
}

/* =========================================================
   GEEK ZONE – HOVER SUAVE SOLO PARA TARJETAS DEL CATÁLOGO
   (sobrescribe el hover naranja de .grid .card en modo oscuro)
   ========================================================= */
body.geek-zone-theme .cart-badge {
    background-color: var(--accent);
    color: #000000 !important;
    border: 1px solid #000;
}
body.geek-zone-theme .grid .card {
    transition: transform 0.15s ease-out,
                box-shadow 0.15s ease-out,
                border-color 0.15s ease-out;
}

/* Hover: solo contorno + glow muy leve */
body.geek-zone-theme .grid .card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 215, 0, 0.18) !important; /* leve */
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.35),
        0 0 4px rgba(255, 215, 0, 0.08); /* glow casi imperceptible */
}
body.geek-zone-theme .grid .card .stock-badge,
body.geek-zone-theme .stock-badge {
    background-color: #166534 !important;   /* verde oscuro elegante */
    color: #bbf7d0 !important;              /* verde pastel suave */
    font-weight: 600 !important;
    border: none !important;
    box-shadow: none !important;
}
/* Chrome, Edge, Safari */
body.geek-zone-theme input[type="number"]::-webkit-outer-spin-button,
body.geek-zone-theme input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Firefox */
body.geek-zone-theme input[type="number"] {
    -moz-appearance: textfield !important;
}

body.geek-zone-theme .badge-pill {
    font-weight: 600 !important;
    border-width: 0 !important; /* sin contorno */
}

/* Entregado */
body.geek-zone-theme .badge-pill.ok {
    background-color: #166534 !important;  /* verde uniforme */
    color: #bbf7d0 !important;             /* texto suave */
    border: none !important;
}

/* Pendiente */
body.geek-zone-theme .badge-pill.pending {
    background-color: #78350f !important;  /* naranja/marrón oscuro */
    color: #ffedd5 !important;             /* crema */
}
/* Estado OFF */
body.geek-zone-theme .switch .slider {
    background-color: #27272a !important;  /* gris oscuro */
    border-color: #52525b !important;      /* gris medio */
}

/* Estado ON */
body.geek-zone-theme .switch input:checked + .slider {
    background-color: #22c55e !important;  /* verde brillante */
    border-color: #22c55e !important;
    box-shadow: none !important;           /* sin halo */
}
/* ==========================
   Cartel "Datos de la compra"
   ========================== */

/* Card principal del modal */
body.geek-zone-theme #backdrop .modal {
  background: #1f1f23;
  border-radius: 14px;
  padding: 18px 20px 16px;
  border: 1px solid #3f3f46;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.75);
  color: #f9fafb;

  /* Nuevo: ancho más “humano” */
  width: auto;                          /* que tome el ancho del contenido */
  max-width: 420px;                     /* tope máximo en desktop */
  min-width: 320px;                     /* que no se achique demasiado */
  margin: 0 auto;                       /* centrado dentro del backdrop */
}

/* Título (Entrega / Datos de la compra / etc.) */
body.geek-zone-theme #modalTitle {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 600;
}

/* Bloque donde imprimís
   juego + CORREO + CONTRASEÑA + CÓDIGO */
body.geek-zone-theme #modalBody {
  background: #242428 !important;          /* gris acorde a los paneles */
  border-radius: 10px !important;
  border: 1px solid #3f3f46 !important;
  padding: 10px 12px !important;
  max-height: 50vh !important;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.4;
  color: #e5e7eb !important;
}

/* Contenedor de botones */
body.geek-zone-theme #backdrop .modal .actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

/* Botón COPIAR – acción principal (amarillo Geek Zone) */
body.geek-zone-theme #modalCopyBtn {
  background: var(--accent);
  color: #000000;
  border: none;
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.08s ease-out,
              box-shadow 0.08s ease-out,
              filter 0.08s ease-out;
}

body.geek-zone-theme #modalCopyBtn:hover {
  filter: brightness(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  transform: translateY(-1px);
}

/* Botón CERRAR – secundario, gris neutro */
body.geek-zone-theme #backdrop .modal .btn.btn-primary {
  background: #303036;
  color: #e5e7eb;
  border: 1px solid #4b4b55;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.08s ease-out,
              border-color 0.08s ease-out,
              transform 0.08s ease-out;
}

body.geek-zone-theme #backdrop .modal .btn.btn-primary:hover {
  background: #3a3a42;
  border-color: #6b6b75;
  transform: translateY(-1px);
}

#backdrop .modal {
    max-width: 650px !important;
    width: 95%;
    padding: 15px 20px;
}
#backdrop .modal .actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

/* Estilo unificado de los botones Copiar / Cerrar */
#backdrop .modal .actions .btn,
#backdrop .modal .actions .btn-primary {
    background: #f3f4f6;           /* color neutro */
    color: #1f2937;                /* gris oscuro */
    border: 1px solid #d1d5db;
    padding: 8px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    min-width: 110px;
    cursor: pointer;
    transition: background 0.12s ease-out,
                transform 0.12s ease-out;
}

/* Hover */
#backdrop .modal .actions .btn:hover,
#backdrop .modal .actions .btn-primary:hover {
    background: #e5e7eb;
    transform: translateY(-1px);
}
#modalBody {
    max-width: 420px !important;
}

.det-history-list{
  max-height: 200px;
  overflow-y: auto;
  background: var(--panel-2);
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text);
}

/* Botón cruz del modal detalle revendedor */
.btn-icon{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}
.btn-icon:hover{
  filter: brightness(1.08);
}

.table-responsive{
  width: 100%;
  overflow-x: auto;
}
.ws-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ws-header-actions{
  display: flex;
  gap: 8px;
}

/* ==============================
   FIX: Scrollbar feo en tablas (desktop)
   ============================== */

/* Desktop: no permitir scroll horizontal => no aparece la barra al hover */
#viewWholesale .table-responsive{
  overflow-x: hidden;
}

/* Mobile/tablet: permitir scroll horizontal (necesario) */
@media (max-width: 900px){
  #viewWholesale .table-responsive{
    overflow-x: auto;
  }
}

/* Si igual aparece scrollbar, lo hacemos sutil (especialmente en dark) */
#viewWholesale .table-responsive{
  scrollbar-width: thin;                 /* Firefox */
  scrollbar-color: rgba(255,255,255,.25) transparent;
}
#viewWholesale .table-responsive::-webkit-scrollbar{ height: 8px; }
#viewWholesale .table-responsive::-webkit-scrollbar-track{ background: transparent; }
#viewWholesale .table-responsive::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}
#viewWholesale .table-responsive::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.28);
}

/* Dual Row Layout */
.stat-dual-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

/* Valor Primario (ARS) - Grande y Claro */
.val-primary {
    font-size: 24px;
    font-weight: 800;
    color: var(--text); /* O color accent si prefieres */
    line-height: 1.1;
}
.val-primary.ars { color: #3b82f6; } /* Azul financiero para ARS */
.val-primary.text-danger { color: #ef4444; }

/* Valor Secundario (USDT) - Sutil */
.val-secondary {
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
    display: flex;
    align-items: center;
}
.val-secondary.usdt { color: #10b981; } /* Verde crypto para USDT */
.val-secondary.text-danger-soft { color: #f87171; }

/* Unidades pequeñas */
.stat-dual-row .curr {
    font-size: 10px;
    margin-left: 4px;
    opacity: 0.7;
    text-transform: uppercase;
    font-weight: normal;
}
  .text-custom-percent {
    color: #FFD700 !important; /* Gold/Amarillo */
    font-weight: bold;
}


/* --- DISEÑO MODAL DE ENTREGA (FINAL PULIDO) --- */

/* --- MODAL DE ENTREGA: COMPACTO Y EN UNA LÍNEA --- */

/* 1. Modal más ancho para que entre todo en un renglón */
#backdrop .modal {
    max-width: 650px !important;
    width: 95%;
    padding: 15px 20px;
}

/* 2. Cabecera Pegada */
.delivery-product-header {
    margin-bottom: 8px; /* Antes 12px o 20px */
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.delivery-product-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.delivery-product-meta { font-size: 0.8rem; color: var(--muted); }

/* 3. Contenedor de lista sin aire extra */
.delivery-credentials-list {
    display: flex;
    flex-direction: column;
    gap: 0; /* Quitamos el gap general */
    margin-bottom: 5px; /* Quitamos el aire gigante antes de los botones */
}

/* 4. FILA: Grid estricto de una línea */
.credential-row {
    display: grid;
    grid-template-columns: 90px 1fr 35px; /* 90px para que entre "CONTRASEÑA" a la izq */
    gap: 8px; /* Menos espacio horizontal */
    align-items: center;
    margin-bottom: 2px; /* Las filas casi se tocan */
}

/* Etiqueta: AHORA A LA IZQUIERDA */
.credential-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    text-align: left; /* <--- CAMBIO SOLICITADO */
    padding-left: 2px;
}

/* Valor: Una sola línea obligatoria */
.credential-value {
    font-family: monospace;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--panel-2); 
    border: 1px solid var(--border);
    border-radius: 4px;
    height: 100%; /* Llena la altura de la fila (32px) */
    padding: 0 10px; /* Padding solo lateral */
    
    /* Flexbox para centrar el texto verticalmente dentro de la caja */
    display: flex;
    align-items: center;
    
    /* TRUCOS ANTI-RUPTURA DE LINEA */
    min-width: 0; /* CRÍTICO para que el grid no se ensanche */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Pone "..." si el correo es kilométrico */
    user-select: all;
}

/* Botón Icono */
.btn-copy-icon {
    width: 32px; /* Mismo tamaño que la altura de fila */
    height: 32px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
}
.btn-copy-icon:hover {
    border-color: var(--border);
    color: var(--text);
}
.btn-copy-icon svg {
    width: 16px; 
    height: 16px;
}

/* 4. Contenedor de Botones (Pegado arriba) */
.modal-actions-delivery {
    margin-top: 10px; /* Antes 25px -> Esto sube los botones */
    padding-top: 10px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Botón Cerrar */
.btn-delivery-close {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
}
.btn-delivery-close:hover {
    background: rgba(128, 128, 128, 0.1);
}



/* Ajuste óptico del icono dentro del botón amarillo */

.btn-delivery-copy svg {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
    margin: 0;
}

.btn-delivery-copy:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* Fix Geek Zone */
html.geekzone-theme .credential-value {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}
/* ===== FIX: Icono + texto alineados en "Copiar todo" ===== */
#backdrop .modal .actions #modalCopyBtn{
  display: inline-flex;
  align-items: center;          /* centra vertical */
  justify-content: center;      /* centra horizontal */
  gap: 8px;                     /* espacio entre icono y texto */
  line-height: 1;               /* evita “bajada” por métricas de fuente */
  white-space: nowrap;
}

/* si el icono es SVG o IMG, que no “baile” por baseline */
#backdrop .modal .actions #modalCopyBtn svg,
#backdrop .modal .actions #modalCopyBtn img{
  display: block;
}

/* opcional (si tu icono es font-icon o span) */
#backdrop .modal .actions #modalCopyBtn .icon,
#backdrop .modal .actions #modalCopyBtn i{
  display: block;
  line-height: 0;
}
/* =======================================================
   Modal – Botón "Copiar todo" (alineación perfecta)
   ======================================================= */
#modalCopyBtn{
  display: inline-flex;
  align-items: center;      /* centra vertical icono + texto */
  justify-content: center;  /* centra el conjunto */
  gap: 8px;

  line-height: 1;           /* mata el desplazamiento vertical */
  white-space: nowrap;
}

/* El SVG no debe participar del baseline de texto */
#modalCopyBtn svg{
  display: block;
  flex-shrink: 0;
}

/* FIX definitivo: icono y texto perfectamente alineados en Copiar todo */
utton#modalCopyBtn.btn-delivery-copy {
  /* display: inline-flex !important;  <--- BORRA ESTA LÍNEA */
  
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

button#modalCopyBtn.btn-delivery-copy svg{
  display: block !important;
  flex-shrink: 0 !important;
  margin: 0 !important;     /* mata el -2px y cualquier otro margen */
  transform: none !important;
}

/* =========================================================
   FIX DEFINITIVO MODAL ENTREGA (MODO CLARO + OSCURO)
   ========================================================= */

/* 1. CONTENEDOR MODAL */
#backdrop .modal {
    max-width: 600px !important;
    width: 95%;
    padding: 20px 25px;
    border-radius: 12px;
    background: var(--panel); /* Se adapta a blanco o negro según tema */
    color: var(--text);
}

/* 2. CABECERA (Compacta) */
.delivery-product-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.delivery-product-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}
.delivery-product-meta {
    font-size: 0.85rem;
    color: var(--muted);
}

/* 3. LISTA (Sin márgenes extra) */
.delivery-credentials-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 10px;
}

/* 4. FILA HORIZONTAL (GRID ROBUSTO) */
.credential-row {
    display: grid;
    /* 90px etiqueta | Espacio flexible | 36px botón */
    grid-template-columns: 90px 1fr 36px; 
    gap: 10px;
    align-items: center;
    margin-bottom: 6px;
    height: 40px; /* Altura fija para evitar saltos */
}

/* Etiqueta (Izquierda) */
.credential-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

/* Valor (Centro - Caja Gris) */
.credential-value {
    font-family: monospace;
    font-size: 0.95rem;
    color: var(--text);
    /* Fondo gris claro por defecto para modo blanco */
    background: #f3f4f6; 
    border: 1px solid var(--border);
    border-radius: 6px;
    height: 100%;
    padding: 0 12px;
    
    display: flex;
    align-items: center;
    
    min-width: 0; /* CRÍTICO: Evita que el texto largo rompa el grid */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: all;
}

/* Botón Icono (Derecha) */
.btn-copy-icon {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}
.btn-copy-icon:hover {
    background: rgba(0,0,0,0.05);
    color: var(--text);
}
.btn-copy-icon svg {
    width: 18px;
    height: 18px;
}

/* 5. BOTONES INFERIORES */
.modal-actions-delivery {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Botón Cerrar (Estilo Neutro visible en ambos modos) */
.btn-delivery-close {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text); /* Texto oscuro en modo claro, blanco en oscuro */
    padding: 8px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
}
.btn-delivery-close:hover {
    background: rgba(0,0,0,0.05);
}


.btn-delivery-copy:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

/* =========================================================
   OVERRIDES ESPECÍFICOS PARA MODO OSCURO (GEEK ZONE)
   ========================================================= */
body.geek-zone-theme .credential-value {
    background: rgba(255,255,255,0.05); /* Fondo oscuro translúcido */
    border-color: rgba(255,255,255,0.1);
}

body.geek-zone-theme .btn-copy-icon:hover {
    background: rgba(255,255,255,0.1);
}

body.geek-zone-theme .btn-delivery-close:hover {
    background: rgba(255,255,255,0.1);
}
/* =================================================================
   FIX FINAL Y DEFINITIVO - MODAL ENTREGA (LIGHT & DARK)
   ================================================================= */

/* 1. ESTRUCTURA BASE (MODO BLANCO POR DEFECTO) */
#backdrop .modal {
    max-width: 600px !important;
    width: 95% !important;
    padding: 20px 25px !important;
    border-radius: 12px !important;
    margin: 0 auto;
    
    /* Forzamos fondo BLANCO y texto NEGRO para modo normal */
    background-color: #ffffff !important;
    color: #111827 !important; 
    border: 1px solid #e5e7eb !important;
}

/* 2. GRILLA HORIZONTAL (LA CLAVE DE QUE SE VEA EN UNA LINEA) */
.credential-row {
    display: grid !important;
    grid-template-columns: 90px 1fr 36px !important; 
    gap: 10px !important;
    align-items: center !important;
    margin-bottom: 6px !important;
    height: 40px !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* 3. ETIQUETAS */
.credential-label {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: #6b7280 !important; /* Gris medio */
    text-transform: uppercase !important;
    text-align: left !important;
    white-space: nowrap !important;
}

/* 4. VALORES (CAJA DEL DATO) */
.credential-value {
    font-family: monospace !important;
    font-size: 0.95rem !important;
    
    /* Color explícito para modo blanco */
    color: #111827 !important;
    background-color: #f3f4f6 !important; 
    border: 1px solid #e5e7eb !important;
    
    border-radius: 6px !important;
    height: 100% !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 5. BOTÓN COPIAR CHICO (ICONO) */
.btn-copy-icon {
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: 1px solid #e5e7eb !important;
    color: #6b7280 !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
}
.btn-copy-icon:hover {
    background-color: #f9fafb !important;
    color: #111827 !important;
}

/* 6. BOTONES INFERIORES */
.modal-actions-delivery {
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid #e5e7eb !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* BOTÓN CERRAR (FIX MODO BLANCO) */
.btn-delivery-close {
    background: transparent !important;
    border: 1px solid #d1d5db !important;
    
    /* COLOR EXPLÍCITO NEGRO PARA QUE SE VEA EN BLANCO */
    color: #374151 !important; 
    
    padding: 8px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
}
.btn-delivery-close:hover {
    background-color: #f3f4f6 !important;
}


/* =================================================================
   OVERRIDES PARA MODO OSCURO (GEEK ZONE)
   ================================================================= */
/* Aquí invertimos los colores manualmente para asegurar contraste */

html.geekzone-theme #backdrop .modal,
body.geek-zone-theme #backdrop .modal {
    background-color: #242428 !important;
    color: #ffffff !important;
    border-color: #3f3f46 !important;
}

html.geekzone-theme .credential-value,
body.geek-zone-theme .credential-value {
    background-color: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}

html.geekzone-theme .credential-label,
body.geek-zone-theme .credential-label {
    color: #a1a1aa !important;
}

html.geekzone-theme .btn-copy-icon,
body.geek-zone-theme .btn-copy-icon {
    border-color: rgba(255,255,255,0.1) !important;
    color: #a1a1aa !important;
}
html.geekzone-theme .btn-copy-icon:hover,
body.geek-zone-theme .btn-copy-icon:hover {
    background-color: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}

html.geekzone-theme .btn-delivery-close,
body.geek-zone-theme .btn-delivery-close {
    border-color: #52525b !important;
    color: #e5e7eb !important; /* Blanco hueso para que se lea */
}
html.geekzone-theme .btn-delivery-close:hover,
body.geek-zone-theme .btn-delivery-close:hover {
    background-color: rgba(255,255,255,0.05) !important;
}

/* Titulos en oscuro */
html.geekzone-theme .delivery-product-title,
body.geek-zone-theme .delivery-product-title {
    color: #ffffff !important;
}
html.geekzone-theme .delivery-product-header,
body.geek-zone-theme .delivery-product-header,
html.geekzone-theme .modal-actions-delivery,
body.geek-zone-theme .modal-actions-delivery {
    border-color: #3f3f46 !important;
}

#modalBody, 
body.geek-zone-theme #modalBody {
    max-width: none !important; /* Libera el ancho para que llene la caja */
    width: 100% !important;
}

/* =================================================================
   FIX FINAL Y DEFINITIVO - MODAL ENTREGA (CONTORNOS VISIBLES)
   ================================================================= */

/* 1. ESTRUCTURA BASE (MODO BLANCO POR DEFECTO) */
#backdrop .modal {
    max-width: 600px !important;
    width: 95% !important;
    padding: 20px 25px !important;
    border-radius: 12px !important;
    margin: 0 auto;
    
    /* Fondo BLANCO y texto NEGRO para modo normal */
    background-color: #ffffff !important;
    color: #111827 !important; 
    border: 1px solid #d1d5db !important; /* Borde exterior más definido */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

/* 2. GRILLA HORIZONTAL */
.credential-row {
    display: grid !important;
    grid-template-columns: 90px 1fr 36px !important; 
    gap: 10px !important;
    align-items: center !important;
    margin-bottom: 6px !important;
    height: 40px !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* 3. ETIQUETAS */
.credential-label {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: #4b5563 !important; /* Gris un poco más oscuro para leer mejor */
    text-transform: uppercase !important;
    text-align: left !important;
    white-space: nowrap !important;
}

/* 4. VALORES (CAJA DEL DATO) - AQUÍ ESTÁ EL CAMBIO CLAVE */
.credential-value {
    font-family: monospace !important;
    font-size: 0.95rem !important;
    
    /* MODO BLANCO: Fondo gris suave pero BORDE FUERTE */
    color: #111827 !important;
    background-color: #f3f4f6 !important; 
    border: 1px solid #cbd5e1 !important; /* <--- GRIS MÁS OSCURO PARA CONTORNO CLARO */
    
    border-radius: 6px !important;
    height: 100% !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    user-select: all;
}

/* 5. BOTÓN COPIAR CHICO (ICONO) - TAMBIÉN CON BORDE FUERTE */
.btn-copy-icon {
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: 1px solid #cbd5e1 !important; /* <--- MISMO BORDE FUERTE */
    color: #6b7280 !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
}
.btn-copy-icon:hover {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
    border-color: #9ca3af !important; /* Aún más oscuro al pasar el mouse */
}

/* 6. BOTONES INFERIORES */
.modal-actions-delivery {
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid #e5e7eb !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* BOTÓN CERRAR (FIX MODO BLANCO) */
.btn-delivery-close {
    background: transparent !important;
    border: 1px solid #cbd5e1 !important; /* Borde visible */
    color: #374151 !important; 
    padding: 8px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
}
.btn-delivery-close:hover {
    background-color: #f3f4f6 !important;
}

/* BOTÓN COPIAR TODO (AMARILLO) */
/* BOTÓN COPIAR TODO (AMARILLO) */
.btn-delivery-copy {
    background-color: #FFD700 !important;
    color: #000000 !important;
    border: none !important;
    padding: 8px 24px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    
    /* --- CORRECCIÓN AQUÍ --- */
    /* Quitamos el !important para que JS pueda ponerle display:none cuando quiera */
    display: inline-flex; 
    /* ----------------------- */
    
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

/* =================================================================
   OVERRIDES PARA MODO OSCURO (GEEK ZONE)
   ================================================================= */
/* Aquí restauramos los bordes sutiles para el modo oscuro, ya que ahí el blanco resalta solo */

html.geekzone-theme #backdrop .modal,
body.geek-zone-theme #backdrop .modal {
    background-color: #242428 !important;
    color: #ffffff !important;
    border-color: #3f3f46 !important;
}

html.geekzone-theme .credential-value,
body.geek-zone-theme .credential-value {
    background-color: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.1) !important; /* Borde sutil es suficiente en negro */
    color: #ffffff !important;
}

html.geekzone-theme .credential-label,
body.geek-zone-theme .credential-label {
    color: #a1a1aa !important;
}

html.geekzone-theme .btn-copy-icon,
body.geek-zone-theme .btn-copy-icon {
    border-color: rgba(255,255,255,0.1) !important;
    color: #a1a1aa !important;
}
html.geekzone-theme .btn-copy-icon:hover,
body.geek-zone-theme .btn-copy-icon:hover {
    background-color: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}

html.geekzone-theme .btn-delivery-close,
body.geek-zone-theme .btn-delivery-close {
    border-color: #52525b !important;
    color: #e5e7eb !important;
}
html.geekzone-theme .btn-delivery-close:hover,
body.geek-zone-theme .btn-delivery-close:hover {
    background-color: rgba(255,255,255,0.05) !important;
}

/* Titulos en oscuro */
html.geekzone-theme .delivery-product-title,
body.geek-zone-theme .delivery-product-title {
    color: #ffffff !important;
}
html.geekzone-theme .delivery-product-header,
body.geek-zone-theme .delivery-product-header,
html.geekzone-theme .modal-actions-delivery,
body.geek-zone-theme .modal-actions-delivery {
    border-color: #3f3f46 !important;
}

/* Ajuste fino: Reducimos un poco el margen superior del cuerpo para que no quede doble espacio */
#modalBody, 
body.geek-zone-theme #modalBody {
    margin-top: 5px !important; 
}

/* =========================================================
   NUEVO CONTENEDOR "PERÍMETRO GRIS" PARA DATOS DE ENTREGA
   ========================================================= */

/* 1. La caja que envuelve Titulo + Datos */
.delivery-card-box {
    border: 1px solid #cbd5e1; /* Borde gris visible (Modo Blanco) */
    border-radius: 12px;       /* Bordes redondeados */
    padding: 20px;             /* Espacio interno para que no toque los bordes */
    background-color: transparent;
    margin-bottom: 5px;
}

/* 2. Ajustes internos para que encajen en la caja */
.delivery-product-header {
    border-bottom: 1px dashed var(--border) !important; /* Cambiamos a linea punteada sutil adentro */
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
}

.delivery-credentials-list {
    margin-bottom: 0 !important; /* Quitamos margen extra al final */
}

/* 3. Modo Oscuro (Geek Zone): Borde sutil */
body.geek-zone-theme .delivery-card-box {
    border-color: rgba(255,255,255,0.15); /* Borde claro sutil */
    background-color: rgba(255,255,255,0.02); /* Fondo apenas visible */
}

/* =========================================================
   FIX DEFINITIVO DARK: unificar hook + eliminar blancos
   Pegar al FINAL de style.css
   ========================================================= */

/* 1) Alias: si el tema se activa por html.geekzone-theme,
      también aplicamos la paleta al body aunque falte la clase */
html.geekzone-theme body {
  --bg: #1a1a1d;
  --panel: #242428;
  --panel-2: #2a2a2e;
  --text: #ffffff;
  --muted: #a1a1aa;
  --border: #3f3f46;
  --accent: #FFD700;
}

/* 2) Fondo global (evita “franjas” por backgrounds blancos) */
html.geekzone-theme body,
body.geek-zone-theme {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* 3) Mata hardcodes blancos en UI base */
html.geekzone-theme .card,
html.geekzone-theme .header,
html.geekzone-theme .modal,
html.geekzone-theme .filters-container,
html.geekzone-theme .price-capsule,
html.geekzone-theme .currency-selector-group,
html.geekzone-theme .filter-group,
html.geekzone-theme .order-card,
body.geek-zone-theme .card,
body.geek-zone-theme .header,
body.geek-zone-theme .modal,
body.geek-zone-theme .filters-container,
body.geek-zone-theme .price-capsule,
body.geek-zone-theme .currency-selector-group,
body.geek-zone-theme .filter-group,
body.geek-zone-theme .order-card {
  background: var(--panel) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* 4) Inputs / pills / tabs / y botones SECUNDARIOS (Excluyendo el botón primario) */
html.geekzone-theme input,
html.geekzone-theme select,
html.geekzone-theme .pill,
html.geekzone-theme .tab,
html.geekzone-theme .btn:not(.btn-primary):not(.btn-ok):not(.btn-warn),

body.geek-zone-theme input,
body.geek-zone-theme select,
body.geek-zone-theme .pill,
body.geek-zone-theme .tab,
body.geek-zone-theme .btn:not(.btn-primary):not(.btn-ok):not(.btn-warn)
  background: var(--panel-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* 4.5) Asegurar que el botón PRIMARIO (Login/Comprar) sea Amarillo/Accent */
html.geekzone-theme .btn-primary,
body.geek-zone-theme .btn-primary {
  background-color: var(--accent) !important; /* Amarillo */
  color: #000000 !important; /* Texto negro para contraste */
  border-color: var(--accent) !important;
  font-weight: 700;
}

/* 5) Header sticky: evita vidrio blanco */
html.geekzone-theme .header,
body.geek-zone-theme .header {
  background: rgba(36, 36, 40, 0.95) !important;
  backdrop-filter: blur(12px);
}

/* 6) Detalles list header: hoy está en rgba(255,255,255,0.7) */
html.geekzone-theme .details-list > .header,
body.geek-zone-theme .details-list > .header {
  background-color: rgba(36, 36, 40, 0.85) !important;
  border-bottom-color: var(--border) !important;
}

/* Tabs superiores: sin pastilla/fondo. Solo texto + underline */
html.geekzone-theme .tabs,
body.geek-zone-theme .tabs{
  background: transparent !important;
  border: 0 !important;
}

html.geekzone-theme .tab,
body.geek-zone-theme .tab{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Hover y activo correctos desde el primer paint */
html.geekzone-theme .filter-chip:hover{
  background-color: #3f3f46 !important;
  color: #ffffff !important;
  border-color: #71717a !important;
}
html.geekzone-theme .filter-chip.active,
html.geekzone-theme .filter-chip.active:hover{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #000 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
}

/* Stock badge en dark (Geek Zone) */
html.geekzone-theme .stock-badge.stock-ok,
body.geek-zone-theme .stock-badge.stock-ok{
  background-color: #166534 !important;
  border-color: #22c55e !important;
  color: #bbf7d0 !important;
}
html.geekzone-theme .stock-badge.stock-low,
body.geek-zone-theme .stock-badge.stock-low{
  background-color: #854d0e !important;
  border-color: #f59e0b !important;
  color: #ffedd5 !important;
}
html.geekzone-theme .stock-badge.stock-out,
body.geek-zone-theme .stock-badge.stock-out{
  background-color: #3f3f46 !important;
  border-color: #71717a !important;
  color: #e5e7eb !important;
}

/* Comprar con stock (verde) */
html.geekzone-theme .btn-ok,
body.geek-zone-theme .btn-ok{
  background-color: #22c55e !important;+
  color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
}
html.geekzone-theme .btn-ok:hover,
body.geek-zone-theme .btn-ok:hover{
  background-color: #36b77a !important;
}

/* Comprar sin stock / warning (amarillo) */
html.geekzone-theme .btn-warn,
body.geek-zone-theme .btn-warn{
  background-color: #eab308 !important;
  color: #000 !important;
  border: none !important;
  font-weight: 600 !important;
}
html.geekzone-theme .btn-warn:hover,
body.geek-zone-theme .btn-warn:hover{
  background-color: #facc15 !important;
  color: #000 !important;
}

/* Capa global para FX (siempre arriba del header y sin recortes) */
#fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999999;
}

/* Estilo del +1 */
#fx-layer .fx-plusone {
  position: absolute;
  transform: translate(-50%, 0);
  font-weight: 800;
  font-size: 14px;
  color: var(--accent);
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  animation: fxPlusOneUp 900ms ease-out forwards;
}

@keyframes fxPlusOneUp {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(.9); }
  15%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -26px) scale(1.05); }
}
.pill-psplus{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.pill-psplus .psplus-ico{
  width:16px; height:16px;
  display:block;
}

/* Estado activo */
.pill-psplus.is-active{
  background: var(--accent) !important;
  color: #000 !important;
  border-color: var(--accent) !important;
  font-weight: 800;
}
.pill-psplus.is-active .psplus-ico{
  filter: brightness(0);
}

/* ===============================
   PS PLUS – BOTÓN BASE (ELEVADO)
   =============================== */

.psplus-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;

  background: #FFD700;               /* Amarillo PS Plus */
  color: #000;
  border: 1px solid #e6c200;

  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;

  /* Estado elevado */
  box-shadow:
    0 2px 0 #c9a800,
    0 6px 14px rgba(0,0,0,0.25);

  transition:
    box-shadow 0.15s ease,
    transform 0.12s ease,
    filter 0.15s ease;
}

.psplus-btn img {
  width: 18px;
  height: 18px;
}

/* Hover: apenas más vivo */
.psplus-btn:hover {
  filter: brightness(1.04);
}

/* ===============================
   PS PLUS – ACTIVO (APRETADO)
   =============================== */

.psplus-btn.active {
  /* se “mete” */
  transform: translateY(1px);

  /* sombra INTERNA (pressed) */
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.35),
    inset 0 -1px 0 rgba(255,255,255,0.15);

  border-color: #c9a800;
  filter: brightness(0.97);
}

/* Feedback físico al click */
.psplus-btn:active {
  transform: translateY(2px);
}

/* =========================================================
   SKELETON LOADER (VISUAL MEJORADO - GRIS LIMPIO)
   ========================================================= */

/* Animación de pulso suave */
@keyframes skeleton-pulse {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

.skeleton-row .skeleton-box {
  border-radius: 6px; /* Bordes un poco más suaves */
  animation: skeleton-pulse 1.5s infinite ease-in-out;
}

/* --- MODO CLARO (EPICODES) --- */
/* Usamos un gris claro sólido en lugar de negro transparente */
html:not(.geekzone-theme) .skeleton-row .skeleton-box {
  background-color: #e5e7eb !important; /* Gris 'Tailwind 200' */
  opacity: 1; /* Quitamos la opacidad base para que el color sea puro */
}

/* --- MODO OSCURO (GEEK ZONE) --- */
/* Aquí sí usamos transparencia blanca porque el fondo es variable */
html.geekzone-theme .skeleton-row .skeleton-box {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Opcional: Si quieres que las filas del skeleton también tengan 
   el efecto "cebra" (una blanca, una gris) mientras cargan */
html:not(.geekzone-theme) .table-pro tbody tr.skeleton-row:nth-child(even) {
    background-color: #f9fafb; /* Gris muy muy tenue para la fila par */
}

/* --- OCULTAR FLECHAS EN INPUTS DE PRECIO --- */

/* Chrome, Safari, Edge, Opera */
.price-capsule input[type=number]::-webkit-outer-spin-button,
.price-capsule input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.price-capsule input[type=number] {
  -moz-appearance: textfield;
}

/* =========================================================
   FIX Z-INDEX: ALERTAS SIEMPRE ARRIBA DEL CARRITO
   ========================================================= */

/* 1. El Carrito: Nivel alto, pero no el máximo */
#cartModalBackdrop {
    z-index: 900 !important; 
}

/* 2. El Modal Genérico (Errores, Alertas, Entregas): Nivel SUPERIOR */
/* Esto asegura que si salta un error, se vea encima del carrito */
#backdrop {
    z-index: 1000 !important; 
}

/* Opcional: Aseguramos que otros modales también estén alto por si acaso */
.modal-backdrop {
    z-index: 900; /* Valor base por defecto */
}

/* --- NOTAS DE PEDIDO --- */

/* Estilo para el Textarea en ambos modos */
textarea.input {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panel-2); /* Gris claro en light, oscuro en dark */
    color: var(--text);
    outline: none;
    transition: border-color 0.2s;
}
textarea.input:focus {
    border-color: var(--accent);
}

/* Botón de Nota en la tabla (Icono) */
.btn-note {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 4px;
    transition: all 0.2s;
}

.btn-note:hover {
    background: var(--panel-2);
    color: var(--text);
}

/* Si la nota tiene contenido, pintamos el icono de acento para avisar */
.btn-note.has-note {
    color: var(--accent); /* Naranja/Amarillo */
    border-color: var(--accent);
    background: rgba(255, 215, 0, 0.1); /* Sutil fondo amarillo */
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* Estilo para el editor de rangos */
.ranges-editor {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    margin-top: 5px;
}
.range-row {
    display: grid;
    grid-template-columns: 1fr 1fr 0.8fr 1fr auto;
    gap: 5px;
    margin-bottom: 8px;
    align-items: center;
}
.range-row input, .range-row select {
    width: 100%;
    padding: 6px;
    font-size: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 4px;
}
.btn-mini-del {
    color: #ef4444;
    cursor: pointer;
    font-weight: bold;
    padding: 0 5px;
}