/* Tema Retro (piloto tras la bandera ninegigs.apariencia.retro, 30-10-2026). Propuesta aprobada en
   claude.ai/artifact/EVdmxPvcpUojruYWHLzSGL. Sigue al dispositivo: html[data-ng-scheme=light] → Mac 1984 (1 bit, trama,
   sombras duras); dark → terminal CRT 1982 (negro puro, fósforo verde o ámbar con brillo y líneas de barrido).
   Redefine los tokens --cv-* y --ui-* en html y en body (body los vuelve a fijar para el color de empresa) y en .ev360.
   El color de empresa no tiñe acciones en Retro: 1 bit no tiene color y el CRT tiene un solo fósforo. Los logos de 9Gigs
   y de la empresa no se filtran. Los colores fijos viven solo en tokens --rt-*; no hay degradados: la trama, las rayas
   y el barrido son mosaicos SVG de 1 bit. Botones: la misma lista y exclusiones que la capa T5 de duet-global-hxm, con
   la misma prioridad de id para ganar a las reglas de módulo. Fuentes OFL autoalojadas en resources/fonts (subconjunto
   latino de Google Fonts; licencias junto a cada archivo). */

/* 0 · Fuentes. Solo se descargan si una regla Retro las usa. */
@font-face{font-family:"IBM Plex Mono";src:url('/9Gigs/resources/fonts/IBMPlexMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url('/9Gigs/resources/fonts/IBMPlexMono-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Pixelify Sans";src:url('/9Gigs/resources/fonts/PixelifySans-Variable.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"VT323";src:url('/9Gigs/resources/fonts/VT323-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* 1 · Tokens propios */
html[data-ng-mode="retro"]{
  --rt-blanco:#FFFFFF;
  --rt-negro:#000000;
  --rt-trama-50:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z'/%3E%3C/svg%3E");
  --rt-trama-12:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM2 2h1v1H2z'/%3E%3C/svg%3E");
  --rt-rayas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v1H0z'/%3E%3C/svg%3E");
  --rt-barrido:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='3' shape-rendering='crispEdges'%3E%3Cpath d='M0 2h4v1H0z' fill-opacity='.4'/%3E%3C/svg%3E");
  --rt-font-ui:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --rt-font-titulo:"Pixelify Sans","IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --rt-font-cifra:"VT323","IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
html[data-ng-mode="retro"][data-ng-scheme="dark"]{
  --rt-fosforo:#33FF66;          /* 15,6:1 sobre negro */
  --rt-fosforo-tenue:#22B04A;    /* 7,4:1 */
  --rt-rejilla:#1E8A3C;          /* 4,8:1 */
  --rt-fosforo-fondo:#0A2A12;
  --rt-brillo:#33FF6673;
  --rt-foco:#B3FFC8;
  --rt-vineta:#000000A6;
}
html[data-ng-mode="retro"][data-ng-scheme="dark"][data-ng-fosforo="ambar"]{
  --rt-fosforo:#FFB000;          /* 11,5:1 */
  --rt-fosforo-tenue:#B87F00;    /* 6,1:1 */
  --rt-rejilla:#8A5F00;          /* 3,7:1 */
  --rt-fosforo-fondo:#2A1D00;
  --rt-brillo:#FFB00073;
  --rt-foco:#FFE0A3;
}

/* 2 · Tokens de 9Gigs. :not(#rt-sin-id) gana a body:has(#ng-all-roles), que fija radios en Puestos. */
:is(html[data-ng-mode="retro"], html[data-ng-mode="retro"] :is(body,.ev360)):not(#rt-sin-id){
  --font-sf:var(--rt-font-ui);--ui-font:var(--rt-font-ui);
  --cv-radius-3:0;--cv-radius-5:0;--cv-radius-8:0;--cv-radius-13:0;--cv-radius-21:0;--ui-radius:0;
}
:is(html[data-ng-mode="retro"][data-ng-scheme="light"], html[data-ng-mode="retro"][data-ng-scheme="light"] :is(body,.ev360)):not(#rt-sin-id){
  --cv-canvas:var(--rt-blanco);--cv-surface:var(--rt-blanco);--cv-ink:var(--rt-negro);--cv-ink-muted:var(--rt-negro);
  --cv-line:var(--rt-negro);--cv-line-strong:var(--rt-negro);--cv-primary:var(--rt-negro);--cv-on-primary:var(--rt-blanco);
  --cv-wash:var(--rt-blanco);--cv-focus:var(--rt-negro);--cv-brand:var(--rt-negro);
  --cv-success:var(--rt-negro);--cv-warning:var(--rt-negro);--cv-danger:var(--rt-negro);
  --cv-shadow-reposo:none;--cv-shadow-portal:2px 2px 0 var(--rt-negro);
  --ui-canvas:var(--rt-blanco);--ui-surface:var(--rt-blanco);--ui-ink:var(--rt-negro);--ui-muted:var(--rt-negro);
  --ui-line:var(--rt-negro);--ui-primary:var(--rt-negro);--ui-wash:var(--rt-blanco);--ui-shadow:2px 2px 0 var(--rt-negro);
  --ui-success:var(--rt-negro);--ui-warning:var(--rt-negro);--ui-danger:var(--rt-negro);
  color-scheme:light;
}
:is(html[data-ng-mode="retro"][data-ng-scheme="dark"], html[data-ng-mode="retro"][data-ng-scheme="dark"] :is(body,.ev360)):not(#rt-sin-id){
  --cv-canvas:var(--rt-negro);--cv-surface:var(--rt-negro);--cv-ink:var(--rt-fosforo);--cv-ink-muted:var(--rt-fosforo-tenue);
  --cv-line:var(--rt-rejilla);--cv-line-strong:var(--rt-fosforo);--cv-primary:var(--rt-fosforo);--cv-on-primary:var(--rt-negro);
  --cv-wash:var(--rt-fosforo-fondo);--cv-focus:var(--rt-foco);--cv-brand:var(--rt-fosforo);
  --cv-success:var(--rt-fosforo);--cv-warning:var(--rt-fosforo);--cv-danger:var(--rt-fosforo);
  --cv-shadow-reposo:none;--cv-shadow-portal:0 0 0 1px var(--rt-fosforo),0 0 13px var(--rt-brillo);
  --ui-canvas:var(--rt-negro);--ui-surface:var(--rt-negro);--ui-ink:var(--rt-fosforo);--ui-muted:var(--rt-fosforo-tenue);
  --ui-line:var(--rt-rejilla);--ui-primary:var(--rt-fosforo);--ui-wash:var(--rt-fosforo-fondo);--ui-shadow:0 0 13px var(--rt-brillo);
  --ui-success:var(--rt-fosforo);--ui-warning:var(--rt-fosforo);--ui-danger:var(--rt-fosforo);
  color-scheme:dark;
}

/* 3 · Base común: sin suavizado; iconos con borde duro; la marca queda fuera */
html[data-ng-mode="retro"]:not(#rt-sin-id) body{
  -webkit-font-smoothing:none;-moz-osx-font-smoothing:unset;font-smooth:never;
  & *{border-radius:0!important}   /* también los radios fijos de los módulos; las fotos quedan cuadradas, como en 1984 */
  & :is(h1,h2,h3){font-family:var(--rt-font-titulo);letter-spacing:0}
  & svg:not(:is(.ng-global-brand,.ng-official-brands,.ng-company-mark,.ng-3d-brand,.ng-company-source) *){shape-rendering:crispEdges}
  & :is(.ui-button,.ui-inputfield,.ui-widget,button,input,select,textarea){font-family:var(--rt-font-ui)}
}

/* 4 · Mac 1984 */
html[data-ng-mode="retro"][data-ng-scheme="light"]:not(#rt-sin-id) body{
  background:var(--rt-trama-12) 0 0/4px 4px repeat var(--rt-blanco)!important;
  color:var(--rt-negro);
  & ::selection{background:var(--rt-negro);color:var(--rt-blanco)}

  /* Ventanas: diálogos, menús y paneles flotantes con borde de 1 px y sombra dura de 2 px */
  & :is(.ui-dialog,.ui-overlaypanel,.ui-menu,.ng-hb-panel,.ng-ir-caja,.duet-pop){background:var(--rt-blanco)!important;border:1px solid var(--rt-negro)!important;box-shadow:2px 2px 0 var(--rt-negro)!important}
  & .ui-dialog-titlebar{background:var(--rt-rayas) 0 0/2px 2px repeat content-box,var(--rt-blanco)!important;padding-block:var(--cv-space-5)!important;border-bottom:1px solid var(--rt-negro)!important}
  & .ui-dialog-title{padding:0 var(--cv-space-8);background:var(--rt-blanco);color:var(--rt-negro)}

  /* Botones (lista T5): rectángulo de 1 px, se invierte al pulsar */
  & :is(.ui-button:not(.ui-button-icon-only):not(.ui-selectonemenu-trigger):not(.ui-autocomplete-dropdown):not(.ui-datepicker-trigger),a.ng-action,button.ng-action,.sel-action-button,.cw-button,.af-button,.cv-btn):not(:is(.ng-global-nav,.ng-global-levels,.ng-identity,.ui-datepicker,.ui-paginator,.ui-dialog-titlebar,#ng-duet,.ng-appearance-options,.ui-tabs-nav,[role=tablist]) *){
    background:var(--rt-blanco)!important;color:var(--rt-negro)!important;border:1px solid var(--rt-negro)!important;box-shadow:none!important;filter:none!important;
    &:active{background:var(--rt-negro)!important;color:var(--rt-blanco)!important}
    /* Anidados: la lista T5 pesa un id por sus exclusiones; fuera de ella, principal e inactivo perderían */
    &:is(.cv-btn--primary,.ng-primary-action,.ng-action-primary,.ng-process-action-primary,.ng-cierre-primario,.cw-primary,.touch.primary){box-shadow:0 0 0 1px var(--rt-blanco),0 0 0 3px var(--rt-negro)!important}
    &:is(:disabled,.ui-state-disabled,[disabled]){
      opacity:1!important;border-style:dotted!important;color:transparent!important;
      background:var(--rt-trama-50) 0 0/2px 2px repeat!important;-webkit-background-clip:text!important;background-clip:text!important;
      & :is(.ui-button-text,.ui-icon){color:transparent!important}
    }
  }
  /* Principal: el anillo grueso del botón por defecto del Mac */
  & :is(.cv-btn--primary,.ng-primary-action,.ng-action-primary,.ng-process-action-primary,.ng-cierre-primario,.cw-primary,.touch.primary):not(:is(.ng-global-nav,.ng-global-levels,.ng-identity) *){
    background:var(--rt-blanco)!important;color:var(--rt-negro)!important;border:1px solid var(--rt-negro)!important;box-shadow:0 0 0 1px var(--rt-blanco),0 0 0 3px var(--rt-negro)!important;filter:none!important;
  }
  /* Inactivo: texto tramado al 50 % y borde punteado, sin opacidad (1 bit no tiene gris) */
  & :is(.ui-button.ui-state-disabled,.ui-button:disabled,button:disabled,.cv-btn[disabled]){
    opacity:1!important;border-style:dotted!important;color:transparent!important;
    background:var(--rt-trama-50) 0 0/2px 2px repeat!important;-webkit-background-clip:text!important;background-clip:text!important;
    & :is(.ui-button-text,.ui-icon){color:transparent!important}
  }
  & :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:1px dotted var(--rt-negro)!important;outline-offset:2px}

  /* Activo y selección: vídeo inverso */
  & :is([aria-current="page"],.ui-state-active,.ui-state-highlight,.ng-ir-lista [aria-selected="true"]){background:var(--rt-negro)!important;color:var(--rt-blanco)!important}
  & .ng-hb-boton[aria-current="page"] .ng-hb-aro{background:transparent}

  /* Campos de texto */
  & :is(.ui-inputfield,textarea,select,input:is([type="text"],[type="email"],[type="search"],[type="number"],[type="password"],[type="date"],[type="tel"],:not([type]))){background:var(--rt-blanco)!important;color:var(--rt-negro)!important;border:1px solid var(--rt-negro)!important;box-shadow:none!important}

  /* Tablas: rejilla de 1 px, regla de 2 px bajo la cabecera y trama al pasar el cursor */
  & .ui-datatable :is(thead th,tbody td){border:1px solid var(--rt-negro)!important;background:var(--rt-blanco)!important;color:var(--rt-negro)!important}
  & .ui-datatable thead th{border-bottom-width:2px!important;font-weight:600}
  & .ui-datatable tbody tr:hover > td{background:var(--rt-trama-12) 0 0/4px 4px repeat var(--rt-blanco)!important}
  & .ui-datatable tbody tr.ui-state-highlight > td{background:var(--rt-negro)!important;color:var(--rt-blanco)!important}

  /* Chips y estados: el signo y la forma dicen el estado, no el color */
  & :is(.ng-filtro,.cap-badge,.td-chip,.ng-module-period,.cv-chip):not(:is(.selected,[aria-pressed="true"])){background:var(--rt-blanco)!important;color:var(--rt-negro)!important;border:1px solid var(--rt-negro)!important}
  & :is(.ng-filtro,.cap-badge,.td-chip,.ng-module-period,.cv-chip):is(.selected,[aria-pressed="true"]):not(#rt-sin-id){background:var(--rt-negro)!important;color:var(--rt-blanco)!important;border:1px solid var(--rt-negro)!important;& *{color:inherit!important}}
}

/* 5 · CRT 1982 */
html[data-ng-mode="retro"][data-ng-scheme="dark"]:not(#rt-sin-id) body{
  background:var(--rt-negro)!important;
  color:var(--rt-fosforo);
  text-shadow:0 0 1px var(--rt-fosforo),0 0 6px var(--rt-brillo);
  caret-color:var(--rt-fosforo);
  & ::selection{background:var(--rt-fosforo);color:var(--rt-negro);text-shadow:none}
  /* El puente de pantallas heredadas (apariencia-v4.js) mezcla el color de empresa en texto y fondos y apaga el brillo:
     en CRT el texto toma el fósforo de su contenedor y el fondo vuelve a la superficie negra. Va antes del vídeo
     inverso para que este gane con la misma prioridad. */
  & .ng-tone-ink{color:inherit!important;text-shadow:inherit!important}
  & .ng-tone-surface{background-color:var(--ui-surface)!important}
  & :is(h1,h2,h3){font-family:var(--rt-font-cifra);font-weight:400}
  & :is(.ng-hb-ic,.ui-icon,.cv-ic){filter:drop-shadow(0 0 2px var(--rt-brillo))}

  & :is(.ui-dialog,.ui-overlaypanel,.ui-menu,.ng-hb-panel,.ng-ir-caja,.duet-pop){background:var(--rt-negro)!important;border:1px solid var(--rt-fosforo)!important;box-shadow:0 0 13px var(--rt-brillo),inset 0 0 8px var(--rt-brillo)!important}
  & .ui-dialog-titlebar{background:var(--rt-fosforo)!important;color:var(--rt-negro)!important;text-shadow:none;border-bottom:0!important}
  & .ui-dialog-titlebar :is(.ui-dialog-title,.ui-icon,a){color:var(--rt-negro)!important}

  & :is(.ui-button:not(.ui-button-icon-only):not(.ui-selectonemenu-trigger):not(.ui-autocomplete-dropdown):not(.ui-datepicker-trigger),a.ng-action,button.ng-action,.sel-action-button,.cw-button,.af-button,.cv-btn):not(:is(.ng-global-nav,.ng-global-levels,.ng-identity,.ui-datepicker,.ui-paginator,.ui-dialog-titlebar,#ng-duet,.ng-appearance-options,.ui-tabs-nav,[role=tablist]) *){
    background:transparent!important;color:var(--rt-fosforo)!important;border:1px solid var(--rt-fosforo)!important;box-shadow:none!important;filter:none!important;
    transition:box-shadow var(--cv-dur-233,233ms) ease-out;   /* el fósforo se apaga despacio */
    &:hover{background:var(--rt-fosforo-fondo)!important;box-shadow:0 0 8px var(--rt-brillo)!important;transition:none}
    &:is(.cv-btn--primary,.ng-primary-action,.ng-action-primary,.ng-process-action-primary,.ng-cierre-primario,.cw-primary,.touch.primary){background:var(--rt-fosforo)!important;color:var(--rt-negro)!important;text-shadow:none!important;box-shadow:0 0 8px var(--rt-brillo)!important}
    &:is(:disabled,.ui-state-disabled,[disabled]){opacity:1!important;color:var(--rt-fosforo-tenue)!important;border:1px dashed var(--rt-rejilla)!important;background:transparent!important;text-shadow:none!important;box-shadow:none!important}
  }
  & :is(.cv-btn--primary,.ng-primary-action,.ng-action-primary,.ng-process-action-primary,.ng-cierre-primario,.cw-primary,.touch.primary):not(:is(.ng-global-nav,.ng-global-levels,.ng-identity) *){
    background:var(--rt-fosforo)!important;color:var(--rt-negro)!important;border:1px solid var(--rt-fosforo)!important;text-shadow:none!important;box-shadow:0 0 8px var(--rt-brillo)!important;filter:none!important;
  }
  & :is(.ui-button.ui-state-disabled,.ui-button:disabled,button:disabled,.cv-btn[disabled]){opacity:1!important;color:var(--rt-fosforo-tenue)!important;border:1px dashed var(--rt-rejilla)!important;background:transparent!important;text-shadow:none!important;box-shadow:none!important}
  & :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:1px solid var(--rt-foco)!important;outline-offset:2px}

  & :is([aria-current="page"],.ui-state-active,.ui-state-highlight,.ng-ir-lista [aria-selected="true"]){background:var(--rt-fosforo)!important;color:var(--rt-negro)!important;text-shadow:none!important}
  & .ng-hb-boton[aria-current="page"] .ng-hb-aro{background:transparent!important}
  /* «Tu ambiente» (Duet) y Apariencia en la cuenta: sin el relleno propio del modo oscuro */
  & :is(#ng-duet .duet-pop button:not(.duet-close),.ng-appearance-options button){background:transparent!important;color:var(--rt-fosforo)!important;border:1px solid var(--rt-rejilla)!important;box-shadow:none!important}
  & :is(#ng-duet .duet-pop button:not(.duet-close),.ng-appearance-options button)[aria-pressed="true"]{background:var(--rt-fosforo)!important;color:var(--rt-negro)!important;border-color:var(--rt-fosforo)!important;text-shadow:none!important}

  & :is(.ui-inputfield,textarea,select,input:is([type="text"],[type="email"],[type="search"],[type="number"],[type="password"],[type="date"],[type="tel"],:not([type]))){background:var(--rt-negro)!important;color:var(--rt-fosforo)!important;border:1px solid var(--rt-rejilla)!important;box-shadow:none!important}
  & :is(.ui-inputfield,textarea,input):focus{border-color:var(--rt-fosforo)!important;background:var(--rt-fosforo-fondo)!important}
  & ::placeholder{color:var(--rt-fosforo-tenue);opacity:1}

  & .ui-datatable :is(thead th,tbody td){border:1px solid var(--rt-rejilla)!important;background:var(--rt-negro)!important;color:var(--rt-fosforo)!important}
  & .ui-datatable thead th{border-bottom:3px double var(--rt-fosforo)!important;text-transform:uppercase;letter-spacing:.08em;font-weight:400}
  & .ui-datatable tbody tr:hover > td{background:var(--rt-fosforo-fondo)!important}
  & .ui-datatable tbody tr.ui-state-highlight > td{background:var(--rt-fosforo)!important;color:var(--rt-negro)!important;text-shadow:none}

  & :is(.ng-filtro,.cap-badge,.td-chip,.ng-module-period,.cv-chip):not(:is(.selected,[aria-pressed="true"])){background:transparent!important;color:var(--rt-fosforo)!important;border:1px solid var(--rt-rejilla)!important}
  & :is(.ng-filtro,.cap-badge,.td-chip,.ng-module-period,.cv-chip):is(.selected,[aria-pressed="true"]):not(#rt-sin-id){background:var(--rt-fosforo)!important;color:var(--rt-negro)!important;border:1px solid var(--rt-fosforo)!important;text-shadow:none!important;& *{color:inherit!important}}
}

/* Líneas de barrido y viñeta del tubo: una capa encima que no recibe clics */
html[data-ng-mode="retro"][data-ng-scheme="dark"] body::after{
  content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;
  background:var(--rt-barrido) 0 0/4px 3px repeat;
  box-shadow:inset 0 0 144px 21px var(--rt-vineta);
}

/* 6 · Colores forzados e impresión: sin efectos; se imprime en negro sobre blanco */
@media (forced-colors:active){
  html[data-ng-mode="retro"] body::after{display:none}
  html[data-ng-mode="retro"]:not(#rt-sin-id) body{text-shadow:none}
}
@media print{
  html[data-ng-mode="retro"] body::after{display:none}
  html[data-ng-mode="retro"][data-ng-scheme="dark"]{
    --rt-fosforo:#000000;--rt-fosforo-tenue:#000000;--rt-rejilla:#000000;--rt-negro:#FFFFFF;--rt-fosforo-fondo:#FFFFFF;--rt-brillo:#FFFFFF00;
  }
  html[data-ng-mode="retro"][data-ng-scheme]:not(#rt-sin-id) body{background:var(--rt-blanco)!important;text-shadow:none}
}