/* Capa utilidades (06-04, QA-01): preferencias del usuario sobre todo el shell.
   Va última en capas.css y es la última hoja de la cabecera del shell, así que sus reglas ganan a las
   de cualquier otra capa sin !important. La clásica no la enlaza.
   - Movimiento reducido: sin transiciones en ningún elemento ni pseudoelemento. Las animaciones no se
     tocan: el anillo del cargador sigue girando, en su versión lenta de base.css (2,4 s), porque es el
     único aviso de que la página está cargando y quieto parecería colgado.
   Solo tokens fuera de los bloques de alto contraste; dentro de forced-colors, solo colores del sistema. */
@layer utilidades{
  @media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{transition-duration:0s;transition-delay:0s}
    html{scroll-behavior:auto}
  }

  /* Alto contraste del sistema (forced-colors: active, p. ej. Contraste alto de Windows). El navegador
     cambia fondos, colores y bordes por los del sistema y quita las sombras: se pierden el fondo del ítem
     activo, el filete del riel, las pastillas de cuentas e insignias y el fondo de chips y filas pendientes,
     y los bordes transparentes de pestañas y cajón se vuelven visibles en todos los ítems.
     Aquí solo colores del sistema (Canvas, CanvasText, LinkText, ButtonText, ButtonFace, ButtonBorder,
     Highlight, HighlightText, GrayText), ningún token de color. El anillo de foco no se toca. */
  @media (forced-colors: active){
    /* Límites del chrome: el degradado del riel y del cajón es una imagen de fondo y el navegador la quita;
       sin un fondo propio el cajón queda transparente sobre el contenido. */
    .riel{background-color:Canvas;border-right:1px solid CanvasText}
    .cajon.abierto,
    .cajon:target:not(.con-js){background-color:Canvas;border-right:1px solid CanvasText}

    /* Íconos: el svg viene con forced-color-adjust:preserve-parent-color, así que un color propio (p. ej.
       .cajon-enlace .ico en --riel-icono, claro) no se fuerza y queda blanco sobre Canvas. Heredan el del ítem. */
    .ico{color:inherit}

    /* Bordes que hoy son transparentes: sin color propio el navegador los pinta en todos los ítems. */
    .pestana,
    .app:has(#por-asignar:target) .pestana[data-seccion="resumen"],
    .app:has(#sin-atender:target) .pestana[data-seccion="resumen"],
    .app:has(#por-rtc:target) .pestana[data-seccion="resumen"]{border-bottom-color:Canvas}
    .cajon-enlace{border-left-color:Canvas}

    /* Ítem activo del riel, del flyout, del cajón, de la barra inferior y del selector de unidades:
       fondo Highlight con texto HighlightText. Con forced-color-adjust:none: si no, Chrome pinta detrás
       del texto una placa en Canvas y el HighlightText (claro) desaparece sobre ella. La propiedad se
       hereda, así que los hijos llevan también sus colores del sistema (los de abajo ganan por capa). */
    .riel-boton[aria-current],
    .riel-item:hover > .riel-boton[aria-current],
    .riel-item:focus-within > .riel-boton[aria-current],
    .riel-fila > a[aria-current],
    .cajon-enlace.activo,
    .cajon-enlace[aria-current="page"],
    .barra-inferior-item.activo,
    .barra-inferior-item[aria-current="page"],
    .inicio-selector-item[aria-current="page"]{forced-color-adjust:none;background-color:Highlight;color:HighlightText;border-color:Highlight}
    :is(.riel-boton[aria-current], .riel-fila > a[aria-current], .cajon-enlace.activo, .cajon-enlace[aria-current="page"],
      .barra-inferior-item.activo, .barra-inferior-item[aria-current="page"], .inicio-selector-item[aria-current="page"]) *{color:HighlightText;background-color:transparent;border-color:HighlightText;box-shadow:none}
    /* Cuentas e insignias dentro del activo: pastilla invertida. */
    :is(.riel-boton[aria-current], .riel-fila > a[aria-current], .cajon-enlace.activo, .cajon-enlace[aria-current="page"],
      .barra-inferior-item.activo, .barra-inferior-item[aria-current="page"]) :is(.riel-insignia, .riel-cuenta, .cajon-cuenta, .barra-inferior-cuenta){background-color:HighlightText;color:Highlight}
    /* Con forced-color-adjust:none el anillo usaría el token de foco: en el activo va en color del sistema
       (afuera sobre Canvas, adentro sobre Highlight). */
    :is(.riel-boton[aria-current], .inicio-selector-item[aria-current="page"]):focus-visible{outline-color:CanvasText}
    :is(.riel-fila > a[aria-current], .cajon-enlace.activo, .cajon-enlace[aria-current="page"],
      .barra-inferior-item.activo, .barra-inferior-item[aria-current="page"]):focus-visible{outline-color:HighlightText}
    /* Filete del botón activo del riel. */
    .riel-boton[aria-current]::before{background-color:Highlight}

    /* Pestaña activa: subrayado de 3 px en Highlight (la del ancla, con :has(:target)). */
    .pestana[aria-current="page"],
    .app:has(#por-asignar:target) .pestana[data-seccion="por-asignar"],
    .app:has(#sin-atender:target) .pestana[data-seccion="sin-atender"],
    .app:has(#por-rtc:target) .pestana[data-seccion="por-rtc"]{border-bottom-color:Highlight;color:LinkText}

    /* Insignias, cuentas y chips: sin fondo ni anillo de sombra, un borde de 1 px los separa del texto. */
    .riel-insignia,
    .riel-cuenta,
    .cajon-cuenta,
    .pestana-cuenta,
    .barra-inferior-cuenta,
    .etapa,
    :is(.espejo,.tabla-personal) .chip{border:1px solid CanvasText}
    .etapa::before{background-color:CanvasText}
    .inicio-tarjeta-numero{border:1px solid CanvasText;padding:0 var(--esp-2)}

    /* Botones sin borde propio (fondo de marca): con el fondo del sistema necesitan su contorno. */
    button{border:1px solid ButtonText}

    /* Fila pendiente de la tabla de escritorio: hoy solo cambia el fondo; borde izquierdo como en tarjeta. */
    .tabla tr.pendiente > td:first-child{border-left:4px solid CanvasText}
    @media (max-width:719.98px){
      /* En tarjeta el borde ya lo lleva el tr (componentes-vistas.css). */
      .tabla-tarjetas > table.tabla > tbody > tr.pendiente > td:first-child{border-left:0}
    }
  }
}