/* Intranet Casa Moda — estilo mínimo, sin dependencias externas. */
:root {
  --ink: #1a1a1a; --muted: #6b7280; --line: #e5e7eb;
  --bg: #f8f7f5; --card: #ffffff; --accent: #8a6d3b; --accent-soft: #f3ede2;
  --ok: #15803d; --warn: #b45309; --bad: #b91c1c;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
       color: var(--ink); background: var(--bg); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { background: #171310; color: #f5f0e8; }
.topbar-inner { max-width: 1100px; margin: 0 auto; padding: 10px 20px;
                display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.logo { display: flex; align-items: baseline; gap: 8px; }
/* Wordmark negro sobre transparente -> invertido queda blanco en el header oscuro. */
.logo-img { height: 16px; filter: invert(1); opacity: .95; display: block;
            align-self: center; }
.logo-sub { font-weight: 300; letter-spacing: 1px; color: #c9b58a; font-size: 13px; }
.login-logo { display: block; max-width: 250px; width: 100%; margin: 6px auto 2px; }
.topbar nav { display: flex; gap: 18px; flex: 1; }
.topbar nav a { color: #e9e2d4; }
.user-box { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #b6ad9c; }
.linklike { background: none; border: none; color: #c9b58a; cursor: pointer;
            font: inherit; padding: 0; text-decoration: underline; }
.inline-form { display: inline; }
.inline-form .linklike { color: var(--accent); font-size: 14px; }

.impersonation-banner { background: #fef3c7; color: #78350f;
    border-bottom: 1px solid #f5d78e; padding: 8px 20px; display: flex;
    justify-content: center; align-items: center; gap: 16px; font-size: 14px; }
.impersonation-banner .linklike { color: #92400e; font-weight: 600; }

.content { max-width: 1100px; margin: 28px auto; padding: 0 20px; }
/* T-024: las pantallas de administración tienen tablas anchas (liquidaciones,
   vendedoras, estadísticas) y con 1100px sobraba espacio muerto a los lados.
   Se ensancha el contenido Y el header juntos para que no queden desalineados.
   Las vistas de marca no llevan esta clase: se quedan como estaban. */
body.admin-ancho .content,
body.admin-ancho .topbar-inner { max-width: 1500px; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 26px 0 10px; }
.sub { color: var(--muted); margin: 0 0 20px; font-size: 14px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 14px; margin: 18px 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
        padding: 16px 18px; }
.card .k { font-size: 13px; color: var(--muted); }
.card .v { font-size: 26px; font-weight: 700; margin-top: 2px; }
.card .v.neg { color: var(--bad); }

table { width: 100%; border-collapse: collapse; background: var(--card);
        border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line);
         font-size: 14px; }
th { background: var(--accent-soft); font-weight: 600; font-size: 13px; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.neg { color: var(--bad); }
h2 .neg { color: var(--bad); }

.bars { display: flex; align-items: flex-end; gap: 3px; height: 120px;
        background: var(--card); border: 1px solid var(--line); border-radius: 10px;
        padding: 14px; margin: 10px 0 4px; }
.bar { flex: 1; background: var(--accent); opacity: .85; border-radius: 2px 2px 0 0;
       min-height: 1px; position: relative; }
.bar:hover { opacity: 1; }
.bar .tip { display: none; position: absolute; bottom: 105%; left: 50%;
            transform: translateX(-50%); background: #171310; color: #f5f0e8;
            font-size: 11px; padding: 3px 7px; border-radius: 5px; white-space: nowrap; z-index: 2; }
.bar:hover .tip { display: block; }
.axis { display: flex; justify-content: space-between; color: var(--muted);
        font-size: 12px; padding: 0 4px; }

.config-form { background: var(--card); border: 1px solid var(--line);
               border-radius: 10px; padding: 16px 18px; }
.config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
               gap: 12px; }
.config-grid label { display: flex; flex-direction: column; font-size: 13px;
                     color: var(--muted); gap: 4px; }
.config-grid input { font: inherit; padding: 6px 9px; border: 1px solid var(--line);
                     border-radius: 8px; color: var(--ink); }
.brand-check { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.brand-check label { display: flex; align-items: center; gap: 5px; }

tfoot .fila-total td { border-top: 2px solid var(--line); background: var(--accent-soft);
                       border-bottom: none; }

/* Heatmap hora x día: intensidad por --i (0-100). */
.heat-wrap { overflow-x: auto; }
.heat { min-width: 640px; }
.heat th { font-size: 12px; padding: 6px 4px; text-align: center; }
.heat .heat-dia { text-align: left; text-transform: capitalize;
                  background: var(--accent-soft); white-space: nowrap; }
.heat-cell { text-align: center; font-size: 11px; padding: 8px 4px;
             color: color-mix(in srgb, var(--ink) calc(var(--i) * 1%), var(--muted));
             background: color-mix(in srgb, var(--accent) calc(var(--i) * 0.85%),
                                   transparent); }
.barra-h { height: 10px; border-radius: 5px; background: var(--accent);
           width: calc(var(--w) * 1%); min-width: 2px; }

.var { font-size: 13px; font-weight: 600; white-space: nowrap; }
.var-up { color: var(--ok); }
.var-down { color: var(--bad); }
.var-neutral { color: var(--muted); font-weight: 400; }
.card .v .var { font-size: 14px; margin-left: 6px; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; }
.badge.ok { background: #dcfce7; color: var(--ok); }
.badge.error { background: #fee2e2; color: var(--bad); }
.badge.running { background: #fef3c7; color: var(--warn); }
/* T-037: los controles de arriba (selector de mes en Detalle de ventas,
   filtro de stock en Inventario) comparten margen y tipografía, para que
   las dos pantallas separen igual los filtros del contenido. Antes cada
   una seguía su propio criterio. */
.mes-form, .filtros { margin: -8px 0 16px; font-size: 14px; color: var(--muted); }
/* La clase `.tabla-larga` (Inventario) queda como marcador de "tabla de una
   sola pieza, larga". NO lleva encabezado fijo por la misma razón que la
   tabla de Liquidaciones: el `overflow: hidden` global de las tablas
   impide que `position: sticky` se ancle al viewport. Detalle de ventas
   tampoco lo llevaría: son varias tablas, una por día. */
.mes-form select, .mes-form input[type=text] { font: inherit; padding: 4px 8px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--card);
    color: var(--ink); }
.btn-buscar { font: inherit; padding: 4px 14px; border: none; border-radius: 8px;
              background: var(--accent); color: #fff; cursor: pointer; }
.pill-select { margin: 0 0 16px; }
.pill-select a { display: inline-block; padding: 3px 11px; border: 1px solid var(--line);
                 border-radius: 999px; margin: 0 6px 6px 0; font-size: 13px; background: var(--card); }
.pill-select a.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.login-wrap { max-width: 360px; margin: 80px auto; background: var(--card);
              border: 1px solid var(--line); border-radius: 12px; padding: 30px; }
.login-wrap h1 { text-align: center; letter-spacing: 2px; }
.login-wrap label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 4px; }
.login-wrap input { width: 100%; padding: 9px 11px; border: 1px solid var(--line);
                    border-radius: 8px; font: inherit; }
.login-wrap button[type=submit] { width: 100%; margin-top: 20px; padding: 10px;
    background: var(--accent); color: #fff; border: none; border-radius: 8px;
    font: inherit; font-weight: 600; cursor: pointer; }
.errorlist { color: var(--bad); font-size: 13px; padding-left: 18px; }
.empty { color: var(--muted); padding: 30px; text-align: center; }

/* --- Condiciones y liquidación (T-018 / T-019) --- */
tr.historial td { font-size: 12px; color: var(--muted); background: #fafafa; }
.form-box { margin: 14px 0; border: 1px solid var(--line); border-radius: 10px;
            background: var(--card); padding: 10px 14px; }
.form-box summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.form-box form { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end;
                 margin-top: 12px; }
.form-box label { display: flex; flex-direction: column; font-size: 12px;
                  color: var(--muted); gap: 3px; }
.form-box input, .form-box select { font: inherit; padding: 5px 8px;
    border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.form-box button, .acciones button { font: inherit; padding: 6px 16px; border: none;
    border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; }
.form-box button:disabled, .acciones button:disabled { background: #cbd5e1; cursor: not-allowed; }
.acciones { display: flex; gap: 14px; align-items: flex-end; margin: 18px 0;
            flex-wrap: wrap; }
.acciones label { display: flex; flex-direction: column; font-size: 12px;
                  color: var(--muted); gap: 3px; }
.acciones input { font: inherit; padding: 5px 8px; border: 1px solid var(--line);
                  border-radius: 8px; min-width: 260px; }
.estado-cuenta { max-width: 620px; }
.estado-cuenta th[colspan] { background: #f1f5f9; text-align: left; padding-top: 14px; }
.estado-cuenta tr.subtotal td { border-top: 1px solid var(--line); }
.estado-cuenta tr.total-final td { border-top: 2px solid var(--ink);
                                   border-bottom: 2px solid var(--ink); font-size: 16px; }
/* T-024: columna con el ciclo del mes (cerrada → publicada → aprobada →
   pagada). Los badges se apilan para que se lean como pasos, no como una
   fila de etiquetas sueltas.
   ⚠ T-037 la reemplazó por cinco columnas propias en Liquidaciones; esta
   regla queda porque el estado de cuenta de la marca la sigue usando. */
td.estado-ciclo { line-height: 1.9; max-width: 240px; }
td.estado-ciclo .badge { margin-right: 5px; }
td.estado-ciclo .inline-form { margin-left: 2px; }

/* T-038: chips de filtro rápido con su contador. El contador se calcula
   sobre el mes completo, así que un chip en 0 significa "no hay ninguna",
   no "el filtro activo las esconde". */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--card);
    color: var(--ink); text-decoration: none; font-size: 13px; }
.chip:hover { border-color: var(--accent); }
.chip.activo { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip .n { font-variant-numeric: tabular-nums; opacity: .75; font-size: 12px; }
.chip.activo .n { opacity: .9; }
/* La columna Pago apila su estado y su acción sin ensanchar la tabla. */
td.celda-pago .badge { margin-bottom: 3px; }
td.celda-pago .linklike { display: block; font-size: 12px; }

/* T-037: barra de acciones única sobre la tabla de Liquidaciones. Es
   pegajosa porque la tabla tiene 19 filas y las acciones se usan DESPUÉS
   de recorrerla: si quedan arriba, hay que volver a subir a ciegas. */
.barra-acciones { position: sticky; top: 0; z-index: 5; align-items: center;
    background: var(--bg); padding: 10px 0; border-bottom: 1px solid var(--line); }
.barra-acciones button.secundario { background: #fff; color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent); }
.barra-acciones button.secundario:disabled { background: #fff; color: #94a3b8;
    box-shadow: inset 0 0 0 1px var(--line); }
/* Mismo alto y mismos márgenes entre los dos botones: antes eran dispares. */
.barra-acciones button { min-height: 34px; }
/* Las cinco columnas de estado se leen de un vistazo; el ancho fijo evita
   que una fila con badge largo desalinee la lectura vertical. */
.tabla-ciclo th:nth-child(-n+2), .tabla-ciclo td:nth-child(-n+2) { white-space: nowrap; }
.tabla-ciclo td .badge { white-space: nowrap; }

/* ⚠️ ACÁ NO VA UN ENCABEZADO PEGAJOSO, y conviene saber por qué antes de
   volver a intentarlo. La regla global de arriba le pone a TODA tabla
   `border-radius: 10px` + `overflow: hidden` para recortar las esquinas, y
   un `position: sticky` dentro de un ancestro con `overflow: hidden` no se
   ancla al viewport: queda clavado a la caja de la tabla. El encabezado no
   solo no se pegaba —se iba de pantalla igual que el resto— sino que
   pintaba una franja con el borde de una fila justo sobre los títulos, que
   es lo que Rodrigo vio en producción.
   Medirlo en el navegador fue lo que lo destapó: el estilo computado decía
   `sticky` y eso NO prueba que esté funcionando.
   Para tener encabezado fijo de verdad hay que cambiar la estructura —
   envolver la tabla en un contenedor con scroll propio, o sacar el
   `overflow: hidden` global y recortar las esquinas de otra forma—, y eso
   es una tarea aparte, no un ajuste al pasar. */
.checklist { list-style: none; padding: 0; font-size: 14px; }
.checklist li { padding: 4px 0; }
@media print {
  .no-print, .topbar, .impersonation-banner { display: none !important; }
  .estado-cuenta { max-width: 100%; }
  body { background: #fff; }
}

/* --- Nómina de pagos (T-020) --- */
table.nomina { font-size: 13px; }
table.nomina input[type=date] { font: inherit; padding: 3px 5px; width: 128px;
    border: 1px solid var(--line); border-radius: 6px; background: #fff; }
table.nomina td.folios label { display: block; font-size: 11px; color: var(--muted); }
table.nomina td.folios input { font: inherit; width: 92px; padding: 2px 5px;
    border: 1px solid var(--line); border-radius: 6px; background: #fff; }

/* --- Detalle de ventas dentro de la liquidación (T-022) ---
   T-024: el resumen quedó arriba y el detalle abajo, a lo ancho. */
.liq-detalle { margin-top: 30px; }
.liq-detalle-cab { display: flex; justify-content: space-between;
                   align-items: baseline; gap: 16px; }
.liq-detalle-cab h2 { margin-bottom: 4px; }
.liq-scroll { max-height: 620px; overflow: auto; border: 1px solid var(--line);
              border-radius: 10px; background: var(--card); }
.liq-scroll table { margin: 0; font-size: 12.5px; }
.liq-scroll thead th { position: sticky; top: 0; background: #f1f5f9; z-index: 1; }

/* --- Instrucciones de pago cuando la marca queda en deuda (T-023) --- */
.caja-pago { max-width: 620px; margin: 22px 0; padding: 20px 24px;
             border: 2px solid var(--ink); border-radius: 12px;
             background: var(--card); }
.caja-pago-titulo { margin: 0 0 2px; font-size: 15px; font-weight: 600; }
.caja-pago-monto { margin: 0 0 16px; font-size: 30px; font-weight: 700;
                   letter-spacing: -0.5px; }
.caja-pago-datos { margin: 0; display: grid; gap: 8px 20px;
                   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.caja-pago-datos > div { display: flex; flex-direction: column; gap: 1px; }
.caja-pago-datos dt { font-size: 11.5px; color: var(--muted);
                      text-transform: uppercase; letter-spacing: .4px; }
.caja-pago-datos dd { margin: 0; font-size: 17px; font-weight: 600;
                      cursor: pointer; }
.caja-pago-pie { margin: 16px 0 0; font-size: 14px; }
.caja-pago-pie a { font-weight: 600; cursor: pointer; }
@media print { .caja-pago { border-color: #000; } }