/* =========================================================================
   light.css · Capa visual "ligera" del ERP Reyna Tarwi
   -------------------------------------------------------------------------
   Continuación coherente de public/assets/brand.css: vino #a9192c, dorado
   #f5d477/#e1b747, carbón #231f25, tinta #29262b, papel #f5f5f8 y línea
   #e6e3e8. No redefine la identidad ni los colores de estado (los pills
   verde/rojo/ámbar son semánticos y quedan intactos): solo reduce el ruido,
   abre el aire y ordena la jerarquía tipográfica.

   Reglas de integración
   · Se enlaza al final (después de brand.css) para resolver por orden de
     archivo sin usar Selectores de ID hacks.
   · Todo lo visual vive dentro de @media screen: la impresión conserva el
     comportamiento actual y solo suma los dos ajustes de @media print.
   · No fija anchos de columna ni min-width de tablas, no usa position:fixed
     y no introduce scroll horizontal.
   · No añade JavaScript: el interruptor de densidad es un atributo en <body>
     (data-density="comfy" | "compact").
   ========================================================================= */

:root{
  /* Paleta de marca (alias estables de brand.css) */
  --airy-wine:#a9192c;
  --airy-gold:#e1b747;
  --airy-ink:#29262b;
  --airy-ink-soft:#3a333d;
  --airy-paper:#f5f5f8;
  --airy-text-soft:#6b6270;   /* gris secundario: 5.8:1 sobre blanco (AA) */
  --airy-line:#e9e6ec;        /* línea más fina que #e6e3e8 */
  --airy-line-soft:#f1eff3;
  --airy-line-strong:#ded9e2;

  /* Forma y profundidad: nunca más de 0 1px 2px rgba(35,31,37,.05) */
  --airy-radius:10px;
  --airy-radius-sm:7px;
  --airy-shadow:0 1px 2px rgba(35,31,37,.05);
  --airy-row-hover:#faf7fa;   /* hover de fila discreto, sin tocar el texto */

  /* Ritmo vertical */
  --airy-gap:18px;
  --airy-gap-sm:8px;
  --airy-gap-lg:26px;

  /* Tipografía */
  --airy-font-table:13px;
  --airy-font-label:10px;
  --airy-label-tracking:1.4px;
  --airy-label-tracking-sm:.8px;
  --airy-line-height:1.55;

  /* Controles */
  --airy-focus:var(--airy-wine);
  --airy-focus-width:2px;
  --airy-focus-offset:2px;
  --airy-btn-height:36px;
  --airy-btn-height-touch:44px;
  --airy-btn-radius:8px;
}

@media screen{
  /* ---------------------------------------------------------------------
     1. Menos ruido: sombras suaves y bordes finos
     --------------------------------------------------------------------- */
  .card{
    border-color:var(--airy-line);
    border-radius:var(--airy-radius);
    box-shadow:var(--airy-shadow);
  }
  .table-wrap{
    border:1px solid var(--airy-line);
    border-radius:var(--airy-radius);
    box-shadow:var(--airy-shadow);
  }
  /* Las listas planas ya dibujan sus propias filas: no las encerramos. */
  #content .table-wrap:has(.simple-list){border:0}
  .ux-metric{
    border:1px solid var(--airy-line);
    border-radius:var(--airy-radius);
    box-shadow:var(--airy-shadow);
  }
  #content .beginner-records{
    border:1px solid var(--airy-line);
    border-radius:var(--airy-radius);
    box-shadow:var(--airy-shadow);
  }
  .premium-section-header{
    border-color:var(--airy-line);
    border-radius:var(--airy-radius);
    box-shadow:var(--airy-shadow);
  }
  .ux-welcome{
    border-color:#7e2b3c;
    box-shadow:var(--airy-shadow);
  }
  /* Las tarjetas reales de la interfaz comparten el mismo tratamiento. */
  .ux-card.is-summary,.ux-product.is-summary{box-shadow:var(--airy-shadow)}
  .ux-card.is-summary:hover,.ux-product.is-summary:hover{box-shadow:var(--airy-shadow)}
  /* El borde vino del botón principal se suaviza sin perder el color. */
  .button:not(.secondary):not(.danger){box-shadow:0 1px 2px rgba(169,25,44,.16)}

  /* ---------------------------------------------------------------------
     2. Hover de fila discreto (solo fondo; el texto no cambia de color)
     --------------------------------------------------------------------- */
  #content .beginner-records tbody tr:hover{background:var(--airy-row-hover)}
  #content .simple-list tbody tr:hover>td,
  #content .simple-list tbody tr:focus-within>td{background:var(--airy-row-hover)}
  #content .table-wrap tbody tr:hover>td,
  #content .table-wrap tbody tr:focus-within>td{
    background:var(--airy-row-hover);
    border-top-color:var(--airy-line);
    border-bottom-color:var(--airy-line);
  }

  /* ---------------------------------------------------------------------
     3. Foco visible y uniforme en todos los controles
     --------------------------------------------------------------------- */
  .button:focus-visible,
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible{
    outline:var(--airy-focus-width) solid var(--airy-focus)!important;
    outline-offset:var(--airy-focus-offset)!important;
  }

  /* ---------------------------------------------------------------------
     4. Botones compactos y ordenados
     --------------------------------------------------------------------- */
  .button{
    min-height:var(--airy-btn-height);
    border-radius:var(--airy-btn-radius);
    gap:var(--airy-gap-sm);
  }
  .button.secondary{
    background:#fff;
    border-color:var(--airy-line-strong);
    color:var(--airy-ink-soft);
  }
  .button.secondary:hover{
    background:var(--airy-row-hover);
    border-color:#e2d6db;
    color:#8d1527;
  }
  .row-actions{gap:var(--airy-gap-sm)}
  .table-wrap .row-actions{gap:var(--airy-gap-sm)}
  .modal-footer{gap:var(--airy-gap-sm)}
  .guide-buttons{gap:var(--airy-gap-sm)}
  .list-pagination{gap:var(--airy-gap-sm)}

  /* ---------------------------------------------------------------------
     5. Más aire en las tablas (solo vertical: no altera anchos de columna)
     --------------------------------------------------------------------- */
  .table-wrap th{padding-top:16px;padding-bottom:16px}
  .table-wrap td{
    font-size:var(--airy-font-table);
    line-height:var(--airy-line-height);
  }
  .table-wrap td strong{font-size:var(--airy-font-table)}
  .table-wrap td small{line-height:var(--airy-line-height)}

  #content .beginner-records thead th{
    padding-top:15px;
    padding-bottom:15px;
    line-height:var(--airy-line-height);
  }
  #content .beginner-records td{
    padding-top:17px;
    padding-bottom:17px;
    font-size:var(--airy-font-table);
    line-height:var(--airy-line-height);
  }
  #content .beginner-records td>strong{line-height:var(--airy-line-height)}

  #content .simple-list th{
    padding-top:15px;
    padding-bottom:15px;
    line-height:var(--airy-line-height);
  }
  #content .simple-list td,
  #content .simple-list tbody tr:last-child>td{
    padding-top:17px;
    padding-bottom:17px;
    font-size:var(--airy-font-table);
    line-height:var(--airy-line-height);
  }
  /* La columna ancla conserva 14px (regla de legibilidad del módulo lists);
     el resto de la tabla baja a 13px. */
  #content .simple-list tr>td:first-child{font-size:14px}
  #content .simple-list td strong{font-size:var(--airy-font-table)}
  #content .simple-list td:first-child>strong{font-size:14px}
  #content .simple-list td small{
    font-size:11px;
    line-height:var(--airy-line-height);
  }

  /* ---------------------------------------------------------------------
     6. Jerarquía tipográfica
     --------------------------------------------------------------------- */
  .page-head h1{font-size:30px;letter-spacing:-1px}
  .ux-screen .page-head h1{font-size:30px;letter-spacing:-1px}
  .eyebrow{
    font-size:var(--airy-font-label);
    letter-spacing:var(--airy-label-tracking);
  }
  .ux-card-top .eyebrow,
  .is-summary .ux-card-top .eyebrow,
  .is-summary .ux-product-body>.eyebrow{
    font-size:var(--airy-font-label);
    letter-spacing:var(--airy-label-tracking-sm);
  }
  .premium-section-header>strong{
    font-size:var(--airy-font-label);
    letter-spacing:var(--airy-label-tracking);
  }
  /* Texto secundario: gris más suave pero con contraste AA sobre fondo claro.
     Se excluyen las superficies oscuras (bienvenida, reporte, login). */
  .muted,.subtitle{color:var(--airy-text-soft)}
  #content small:not(:where(.ux-welcome small,.report-hero small,.hero small,.login-story small)){
    color:var(--airy-text-soft);
  }

  /* ---------------------------------------------------------------------
     7. Separación entre bloques
     --------------------------------------------------------------------- */
  .ux-screen>*{margin-bottom:var(--airy-gap)}
  .ux-screen>*:last-child{margin-bottom:0}

  /* ---------------------------------------------------------------------
     8. Modo "ligero" opcional (atributo en <body>, sin JavaScript aquí)
     --------------------------------------------------------------------- */
  /* Base: aire por defecto (comfy). */
  @media(min-width:721px){
    body{--workspace-row-pad:22px}
    body[data-density="comfy"]{--workspace-row-pad:22px;--workspace-cell-pad:18px}
    body[data-density="compact"]{--workspace-row-pad:18px;--workspace-cell-pad:17px}
  }
  @media(max-width:720px){
    body[data-density="compact"]{--workspace-row-pad:16px;--workspace-cell-pad:14px}
  }
  body[data-density="comfy"] .table-wrap th{padding-top:16px;padding-bottom:16px}
  body[data-density="comfy"] #content .beginner-records thead th{padding-top:15px;padding-bottom:15px}
  body[data-density="comfy"] #content .beginner-records td{padding-top:17px;padding-bottom:17px}
  body[data-density="comfy"] #content .simple-list th{padding-top:15px;padding-bottom:15px}
  body[data-density="comfy"] #content .simple-list td,
  body[data-density="comfy"] #content .simple-list tbody tr:last-child>td{padding-top:17px;padding-bottom:17px}
  body[data-density="comfy"] .ux-screen>*{margin-bottom:var(--airy-gap)}
  body[data-density="comfy"] .button{min-height:var(--airy-btn-height)}

  /* Compacto: espaciados y tipografía ~8% más ceñidos. */
  body[data-density="compact"] .table-wrap th{padding-top:13px;padding-bottom:13px}
  body[data-density="compact"] .table-wrap td{font-size:12px;line-height:1.5}
  body[data-density="compact"] #content .beginner-records thead th{padding-top:12px;padding-bottom:12px}
  body[data-density="compact"] #content .beginner-records td{padding-top:14px;padding-bottom:14px;font-size:12px}
  body[data-density="compact"] #content .simple-list th{padding-top:12px;padding-bottom:12px}
  body[data-density="compact"] #content .simple-list td,
  body[data-density="compact"] #content .simple-list tbody tr:last-child>td{padding-top:14px;padding-bottom:14px;font-size:12px}
  body[data-density="compact"] #content .simple-list tr>td:first-child{font-size:13px}
  body[data-density="compact"] .ux-screen>*{margin-bottom:14px}
  body[data-density="compact"] .ux-metric{padding:15px 18px}
  body[data-density="compact"] .card-body{padding:19px}
  body[data-density="compact"] .button{min-height:32px}

  /* Puente con la preferencia "Espacio de trabajo · Compacto" ya existente:
     conserva sus espaciados y solo alinea la tipografía de tabla. */
  body[data-workspace-density="compact"] .table-wrap td,
  body[data-workspace-density="compact"] #content .simple-list td,
  body[data-workspace-density="compact"] #content .beginner-records td{font-size:12px}

  /* ---------------------------------------------------------------------
     9. Tamaños táctiles y ajustes de móvil
     --------------------------------------------------------------------- */
  @media(max-width:720px){
    .page-head h1{font-size:25px}
    .ux-screen .page-head h1{font-size:25px;letter-spacing:-.6px}
    .button{min-height:var(--airy-btn-height-touch)}
    .table-wrap .button{min-height:var(--airy-btn-height-touch)}
    #content .simple-list .button{min-height:var(--airy-btn-height-touch)!important}
    #content .beginner-records .button{min-height:var(--airy-btn-height-touch)}
    #content .simple-list th{padding-top:13px;padding-bottom:13px}
    #content .simple-list td,
    #content .simple-list tbody tr:last-child>td{padding-top:14px;padding-bottom:14px}
    #content .beginner-records td{padding-top:16px;padding-bottom:16px}
    /* En móvil el aire por defecto se mantiene igual; el modo compacto
       aprieta un poco más sin tocar los anchos de columna. */
    body[data-density] #content .simple-list th{padding-top:13px;padding-bottom:13px}
    body[data-density] #content .simple-list td,
    body[data-density] #content .simple-list tbody tr:last-child>td{padding-top:14px;padding-bottom:14px}
    body[data-density] #content .beginner-records td{padding-top:16px;padding-bottom:16px}
    body[data-density="compact"] #content .simple-list th{padding-top:11px;padding-bottom:11px}
    body[data-density="compact"] #content .simple-list td,
    body[data-density="compact"] #content .simple-list tbody tr:last-child>td{padding-top:12px;padding-bottom:12px}
    body[data-density="compact"] #content .beginner-records td{padding-top:14px;padding-bottom:14px}
    body[data-density="compact"] .button{min-height:36px}
  }
}

/* -----------------------------------------------------------------------
   10. Impresión: no cambia el comportamiento actual, solo agrega estos
       dos ajustes globales y compatibles con las reglas ya existentes.
   ----------------------------------------------------------------------- */
@media print{
  thead{display:table-header-group}
  tr,td,th{break-inside:avoid}
}

/* -----------------------------------------------------------------------
   11. Movimiento reducido: sin animaciones ni transiciones.
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  #content *,
  #content *::before,
  #content *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  #content .ux-screen{animation:none!important}
}