/* Portal - AdOps RCN
 *
 * Diseno: diseno-ui/design-system/adops-rcn/MASTER.md (v2 «Azul + movimiento»).
 * Tema oscuro por defecto y claro elegible por persona: los mismos tokens con otros
 * valores en :root[data-tema="claro"]. Todo color sale de un token; el movimiento,
 * de portal/movimiento.css.
 */

:root {
  /* Superficies, del fondo hacia arriba */
  --fondo:        #090E1A;
  --hundido:      #0C1222;   /* inputs, paneles internos, barra lateral */
  --superficie:   #10172A;   /* tarjetas y paneles */
  --superficie-2: #151D33;   /* tarjeta dentro de una tarjeta */
  --aviso-fondo:  #121A2E;
  --pastilla:     #172038;   /* pestaña activa, hover de filas, botón suave */
  --relleno-control:       rgba(232, 237, 248, .06);
  --relleno-control-hover: rgba(232, 237, 248, .11);

  /* Bordes, de más sutil a más marcado */
  --borde-tenue:  #151D33;
  --borde-fila:   #18213A;
  --borde:        #1F2944;
  --borde-input:  #243050;
  --divisor:      #2A3656;
  --borde-fuerte: #313E62;
  --vidrio-luz:       rgb(255 255 255 / .16);
  --vidrio-luz-suave: rgb(255 255 255 / .06);
  --borde-linea:  #1C2540;

  /* Texto, de más a menos contraste (sobre --fondo: 16.4 · 10.8 · 6.9 · 5.4) */
  --texto:    #E8EDF8;
  --texto-2:  #B7C2DA;
  --texto-3:  #8E9BBA;
  --texto-4:  #7A87A6;

  /* Acento: la acción principal, lo activo, lo seleccionado, «en curso» */
  --acento:        #93B4FF;   /* 9.4:1 sobre --fondo */
  --acento-claro:  #B5CBFF;   /* hover del botón principal */
  --acento-suave:  rgb(147 180 255 / .10);
  --acento-borde:  rgb(147 180 255 / .35);
  --sobre-acento:  #090E1A;
  --marca:        #86FDC4;

  /* Éxito: «Listo». Ya no comparte color con el acento */
  --exito:        #4ADE80;
  --exito-fondo:  #0D2A18;
  --exito-borde:  #1E6B3A;

  /* Atención: «Con avisos», borradores, lo que falta */
  --ambar:        #D99A3F;
  --ambar-texto:  #EAB470;
  --ambar-fondo:  #2A2010;
  --ambar-borde:  #4D3A17;
  --aviso-borde:  #24304A;

  /* Error: «Falló» y acciones destructivas */
  --error-fondo:  #22101A;
  --error-borde:  #4A2033;
  --error-texto:  #F2A6C0;
  --rojo:         #E5484D;
  --rojo-lleno:   #C9303A;
  --sobre-rojo:   #FFFFFF;
  --fondo-favicon: #FFFFFF;
  --rojo-fondo:   #24101A;
  --rojo-borde:   #5A2130;
  --rojo-texto:   #FF8F94;

  /* Cuentas (solo chips, logos y etiquetas de cuenta; nunca estados ni acciones) */
  --canal-fondo:  #10203C;  --canal-borde: #2F5A94;  --canal-activo: #3D74C0;
  --canal-punto:  #5B9BF0;  --canal-texto: #A3C4EC;  --canal-logo:   #6F98E0;
  --radio-fondo:  #101C16;  --radio-borde: #26402F;  --radio-punto:  #3F9C6B;
  --radio-texto:  #8FD3AD;  --radio-logo:  #5CC48C;
  --ntn24-fondo:  #1B1636;  --ntn24-borde: #4B3A85;  --ntn24-punto:  #A78BFA;
  --ntn24-texto:  #C8B6FF;  --ntn24-logo:  #B39DFF;

  --serie-venta:  #1FA3BF;  --serie-uso:   #D9608C;  --serie-bono:  #A8B83C;
  --serie-vacio:  #2E3A58;  --serie-vacio-trama: #4A5674;
  --calor-1: color-mix(in srgb, var(--serie-uso) 12%, transparent);  --calor-2: color-mix(in srgb, var(--serie-uso) 24%, transparent);
  --calor-3: color-mix(in srgb, var(--serie-uso) 36%, transparent);  --calor-4: color-mix(in srgb, var(--serie-uso) 50%, transparent);
  --calor-v-1: color-mix(in srgb, var(--serie-venta) 14%, var(--superficie));  --calor-v-2: color-mix(in srgb, var(--serie-venta) 30%, var(--superficie));
  --calor-v-3: color-mix(in srgb, var(--serie-venta) 50%, var(--superficie));  --calor-v-4: color-mix(in srgb, var(--serie-venta) 75%, var(--superficie));
  --lr:           #C51A1B;  --lr-fondo:    #2A1012;  --lr-borde:     #7A2226;  --lr-texto: #F5A3A4;
  --accesos:      #22D3EE;  --accesos-fondo: #0F2A33; --accesos-borde: #155E6E;  --accesos-texto: #67E8F9;
  --tono-rojo:    #F07A74;  --tono-rojo-texto:   #F7ACA7;
  --tono-azul:    #5AA9F0;  --tono-azul-texto:   #9CCBF6;
  --tono-morado:  #B08CF6;  --tono-morado-texto: #CDB6FA;
  --tono-tinte: 9%;  --tono-tinte-borde: 32%;
  --pdf-claro-fondo:  #FFFFFF;  --pdf-claro-texto:  #131A2C;  --pdf-claro-borde:  #C3CDE0;
  --pdf-oscuro-fondo: #10172A;  --pdf-oscuro-texto: #E8EDF8;  --pdf-oscuro-borde: #313E62;

  /* Tipografía */
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --pildora: 999px;
  --ancho-lateral: 308px;

  color-scheme: dark;
}

:root[data-tema="claro"] {
  --fondo:        #F3F6FB;
  --hundido:      #F6F8FC;
  --superficie:   #FFFFFF;
  --superficie-2: #F2F5FA;
  --aviso-fondo:  #EEF3FF;
  --pastilla:     #E8EEFA;
  --relleno-control:       rgba(19, 26, 44, .05);
  --relleno-control-hover: rgba(19, 26, 44, .09);

  --borde-tenue:  #E9EEF6;
  --borde-fila:   #E6EBF4;
  --borde:        #DCE3EF;
  --borde-input:  #D0D8E6;
  --divisor:      #C3CDE0;
  --borde-fuerte: #C3CDE0;
  --vidrio-luz:       rgb(255 255 255 / .7);
  --vidrio-luz-suave: rgb(255 255 255 / .25);
  --borde-linea:  #DDE4F0;

  --texto:    #131A2C;   /* 16.0:1 */
  --texto-2:  #3A4560;   /*  8.8:1 */
  --texto-3:  #5A6683;   /*  5.3:1 */
  --texto-4:  #636F8C;   /*  4.6:1 */

  --acento:        #2F5BEA;   /* 5.1:1 sobre --fondo, 5.5:1 blanco encima */
  --acento-claro:  #2650D4;
  --acento-suave:  rgb(47 91 234 / .07);
  --acento-borde:  rgb(47 91 234 / .35);
  --sobre-acento:  #FFFFFF;
  --marca:        #0B7A52;

  --exito:        #15773A;
  --exito-fondo:  #DCFCE7;
  --exito-borde:  #86D9A3;

  --ambar:        #B87A1C;
  --ambar-texto:  #7A4F0C;
  --ambar-fondo:  #FBF1DE;
  --ambar-borde:  #E2BF7F;
  --aviso-borde:  #DCE3F3;

  --error-fondo:  #FDECEE;
  --error-borde:  #EFB3B8;
  --error-texto:  #A3202A;
  --rojo:         #C9303A;
  --rojo-lleno:   #C9303A;
  --sobre-rojo:   #FFFFFF;
  --fondo-favicon: #FFFFFF;
  --rojo-fondo:   #FDECEE;
  --rojo-borde:   #EFB3B8;
  --rojo-texto:   #A3202A;

  --canal-fondo:  #E8F0FC;  --canal-borde: #A9C3EA;  --canal-activo: #4570B6;
  --canal-punto:  #2F6FD0;  --canal-texto: #1D4F99;  --canal-logo:   #4570B6;
  --radio-fondo:  #E6F4EC;  --radio-borde: #9FD0B4;  --radio-punto:  #2F8A5C;
  --radio-texto:  #1F6B45;  --radio-logo:  #2F8A5C;
  --ntn24-fondo:  #F2EDFD;  --ntn24-borde: #C9B6F3;  --ntn24-punto:  #7C4DDE;
  --ntn24-texto:  #5A2DB5;  --ntn24-logo:  #6D3FD0;
  --serie-venta:  #0A86A3;  --serie-uso:   #C8467F;  --serie-bono:  #677A0E;
  --serie-vacio:  #E3E8F1;  --serie-vacio-trama: #B8C3D6;
  --lr:           #C51A1B;  --lr-fondo:    #FCEBEB;  --lr-borde:     #EEB0B1;  --lr-texto: #9E1416;
  --accesos:      #0E7490;  --accesos-fondo: #E0F7FB; --accesos-borde: #8FD3E0;  --accesos-texto: #0E7490;
  --tono-rojo:    #D2463F;  --tono-rojo-texto:   #A8302A;
  --tono-azul:    #2B7FD0;  --tono-azul-texto:   #1C5FA3;
  --tono-morado:  #8452DE;  --tono-morado-texto: #6A3BC4;
  --tono-tinte: 7%;  --tono-tinte-borde: 30%;

  color-scheme: light;
}

* { box-sizing: border-box; }

/* `hidden` vale display:none en la hoja del navegador, que pierde contra cualquier
   display que definamos aca. Sin esto, todo lo que empieza oculto y es flex aparece. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); }
a:hover { color: var(--acento-claro); }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

::placeholder { color: var(--texto-4); }

/* ── Armazon: barra lateral, barra superior y lienzo ────────────
   La barra lateral, en todas las pantallas, lleva el perfil, el Inicio, la herramienta
   elegida y los ajustes. Se colapsa a iconos (84 px) y la eleccion se recuerda por
   persona. Arriba del lienzo va el selector de herramienta, solo para quien tiene mas
   de una. En pantallas angostas la barra lateral se vuelve un menu. */

.app {
  display: grid;
  grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--dur-media) var(--curva-salida);
  --alto-barra: 64px;
}
.app[data-colapsado] { --ancho-lateral: 84px; }
@media not all and (max-width: 900px) {
  .app { --alto-barra: 0px; }
  html { scroll-padding-top: 24px; }
}
.app > .lateral { grid-column: 1; grid-row: 1 / -1; }
.app > .lienzo { grid-column: 2; grid-row: 2; }

.barra-superior {
  grid-column: 2; grid-row: 1;
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  height: var(--alto-barra); padding: 0 16px;
  background: color-mix(in srgb, var(--fondo) 94%, transparent);
  border-bottom: 1px solid var(--borde);
}
.barra-superior { display: none; }

.desplegable { position: relative; min-width: 0; }
.menu-flotante {
  position: absolute; z-index: 60; top: calc(100% + 8px); left: 0;
  width: max-content; min-width: 280px; max-width: min(360px, calc(100vw - 32px));
  padding: 8px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .35);
}
.menu-flotante__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.menu-flotante .nav-item > svg { width: 20px; height: 20px; flex: none; }
.menu-flotante .nav-item > svg:not(.icono-marca) { stroke: currentColor; }
.menu-flotante .nav-item:hover { background: var(--pastilla); }
.menu-flotante .nav-item.activa { background: var(--pastilla); }

.selector-herr {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 360px; height: 40px; padding: 0 12px 0 10px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--pildora); background: var(--pastilla);
  font: 600 14px/20px var(--sans); color: var(--texto); cursor: pointer;
  transition: border-color var(--transicion);
}
.selector-herr:hover, .selector-herr[aria-expanded="true"] { border-color: var(--texto-4); }
.selector-herr__icono { display: grid; place-items: center; flex: none; color: var(--texto-2); }
.selector-herr__icono svg { stroke: currentColor; }
.selector-herr__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector-herr[data-marca="larepublica"] .selector-herr__txt { color: var(--lr-texto); }
.selector-herr[data-identidad="accesos"] .selector-herr__icono { color: var(--accesos-texto); }
.selector-herr__flecha { width: 16px; height: 16px; flex: none; color: var(--texto-3); }
.lateral .desplegable { margin-bottom: 4px; }
.lateral .selector-herr { width: 100%; max-width: none; height: 44px; border-radius: 10px; }
.lateral .selector-herr__txt { flex: 1; text-align: left; }
.lateral .menu-flotante { position: static; width: auto; min-width: 0; max-width: none; margin-top: 6px; box-shadow: none; }
.lateral .menu-flotante > .nav-titulo { display: none; }
.lateral[data-con-selector] .nav-grupo > .nav-item { display: none; }
.lateral[data-con-selector] .nav-subs { margin-top: 4px !important; }

.lateral {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px 16px 24px;
  background: radial-gradient(120% 40% at 0% 100%, color-mix(in srgb, var(--acento) 9%, transparent), transparent 70%), var(--hundido);
  border-right: 1px solid var(--borde);
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
}

.boton-icono {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px;
  border: 0; border-radius: 10px; background: var(--relleno-control);
  color: var(--texto-2); cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.boton-icono svg { stroke: currentColor; }
.boton-icono:hover { background: var(--relleno-control-hover); color: var(--texto); }
.boton-icono:disabled, .boton-icono:disabled:hover { background: var(--relleno-control); color: var(--texto-4); cursor: not-allowed; }

.lateral__cab { display: flex; align-items: center; gap: 12px; min-height: 44px; }

/* Logo RCN (menta) + "AdOps" */
.logo { display: block; flex-shrink: 0; fill: var(--marca); }
.logo-marca { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.logo-marca .logo { width: 62px; height: 36px; }
.logo-marca__producto {
  padding-left: 12px; border-left: 1px solid var(--borde-fuerte);
  font: 700 20px/1 var(--sans); letter-spacing: -.01em; color: var(--texto); white-space: nowrap;
}
.logo-marca--chico .logo { width: 42px; height: 24px; }
.logo-marca--chico .logo-marca__producto { font-size: 16px; padding-left: 8px; }
.logo-marca__producto--largo { font-size: 16px; }

/* Perfil centrado, sin foto */
.perfil-lateral { display: grid; justify-items: center; gap: 2px; padding: 8px 8px 0; text-align: center; }
.perfil-lateral p { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-lateral__nombre { font: 700 18px/24px var(--sans); color: var(--texto); }
.perfil-lateral__correo { font-size: 13px; line-height: 18px; color: var(--texto-3); }
.perfil-lateral__rol {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  height: 24px; padding: 0 10px; border-radius: var(--pildora);
  background: var(--superficie); border: 1px solid var(--borde-fuerte);
  font: 600 12px/16px var(--sans); color: var(--texto);
}
.perfil-lateral__punto { width: 7px; height: 7px; border-radius: 50%; background: var(--acento); }

/* Navegacion: "Herramientas" arriba y "Perfil y ajustes" siempre abajo */
.nav { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.nav > ul:first-of-type { margin-bottom: 16px; }
#nav-herramientas { margin-bottom: 24px; }
.nav-titulo {
  margin: 8px 12px; font: 700 12px/16px var(--sans);
  letter-spacing: .06em; text-transform: uppercase; color: var(--texto); white-space: nowrap;
}
.nav-separador { margin: auto 12px 12px; border: 0; border-top: 1px solid var(--borde-fuerte); }

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 10px; background: none;
  font: 500 14px/20px var(--sans); color: var(--texto-3);
  text-align: left; white-space: nowrap; cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.nav-item .icono, .nav-item .icono-marca { width: 20px; height: 20px; flex: none; }
.icono { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-item:hover { color: var(--texto); background: var(--superficie); }
/* Activo: texto e icono en acento, sin fondo */
.nav-item.activa { color: var(--acento); font-weight: 600; }
.nav-item[aria-disabled="true"] { color: var(--texto-4); cursor: default; }
.nav-item[aria-disabled="true"]:hover { background: none; }
.nav-item[data-marca="larepublica"] .nav-item__txt { color: var(--lr-texto); }
.nav-item[data-identidad="accesos"]:not(.activa):not([aria-disabled="true"]) > svg:first-child { color: var(--accesos-texto); }
.nav-item__txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.prox {
  display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none;
  border: 1px solid var(--borde-fuerte); border-radius: var(--pildora); color: var(--texto-3);
}
.prox svg { stroke: currentColor; }
.nav-item[data-marca="larepublica"] .prox { color: var(--lr-texto); border-color: var(--lr-borde); background: var(--lr-fondo); }
#tema .icono-luna { margin-left: calc(-20px - 12px); }
@media (prefers-reduced-motion: reduce) {
  .escalonar > * { animation-delay: 0s !important; }
}
.boton-estado .be svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; }
.pasos-compactos { display: none; }
.pasos-compactos p { margin: 0; font-size: 13px; color: var(--texto-3); }
.pasos-compactos b { font-weight: 600; color: var(--texto); }
.pasos-compactos__barra { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pasos-compactos__barra > span { height: 4px; border-radius: var(--pildora); background: var(--borde); overflow: hidden; }
.pasos-compactos__barra i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--acento); }
.pasos-compactos__barra > .completo i { width: 100%; }
.reparto { display: grid; gap: 8px; }
#lr-f-aside .panel__cuerpo { row-gap: 0; }
#lr-f-aside .panel__cuerpo > * + * { margin-top: 16px; }
.reparto .ayuda { margin: 0; }
.reparto .progreso__barra > i { background: var(--texto-3); }
@media (max-width: 1100px) {
  #lr-f-pasos { display: none; }
  .pasos-compactos:not([hidden]) { display: grid; gap: 10px; grid-area: pasos; padding: 16px 20px; border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie); }
}
@media (prefers-reduced-motion: no-preference) {
  html.cambiando-tema #tema .icono-sol, html.cambiando-tema #tema .icono-luna { transition-property: transform, opacity !important; }
}

/* Subitems de una herramienta */
.nav-grupo:has(> .nav-item[hidden]) { display: none; }
.nav-subs { margin: 2px 0 8px 21px !important; padding-left: 16px !important; border-left: 1px solid var(--borde-fuerte); gap: 2px !important; }
.nav-sub {
  position: relative; display: flex; align-items: center;
  width: 100%; min-height: 38px; padding: 0 12px;
  border: 0; border-radius: 10px; background: none;
  font: 500 14px/20px var(--sans); color: var(--texto-3);
  text-align: left; white-space: nowrap; cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.nav-sub:hover { color: var(--texto); background: var(--superficie); }
.nav-sub.activa { color: var(--texto); font-weight: 600; }
.nav-sub.activa::before {
  content: ""; position: absolute; left: -17px; top: 8px; bottom: 8px;
  width: 2px; border-radius: 2px; background: var(--acento);
}

/* Colapsada: solo iconos; el nombre sale al pasar el mouse (title) */
.app[data-colapsado] .lateral { padding-inline: 12px; }
.app[data-colapsado] .lateral__cab { flex-direction: column; gap: 16px; }
.app[data-colapsado] .lateral .logo-marca__producto,
.app[data-colapsado] .lateral .perfil-lateral,
.app[data-colapsado] .lateral .nav-titulo,
.app[data-colapsado] .lateral .nav-item__txt,
.app[data-colapsado] .lateral .prox,
.app[data-colapsado] .lateral .nav-subs { display: none; }
.app[data-colapsado] .lateral .logo-marca .logo { width: 44px; height: 26px; }
.app[data-colapsado] .lateral .nav-item { justify-content: center; padding: 0; }
.app[data-colapsado] .lateral .selector-herr { justify-content: center; padding: 0; }
.app[data-colapsado] .lateral .selector-herr__txt,
.app[data-colapsado] .lateral .selector-herr__flecha { display: none; }
.app[data-colapsado] .lateral .menu-flotante { padding: 4px; }
.app[data-colapsado] .lateral .nav-separador { margin: auto 8px 16px; }

.velo { display: none; }

.lienzo {
  width: 100%; max-width: 1104px;
  margin: 0 auto;
  padding: 40px 48px 96px;
}
.lienzo:has(> .vista.ancha:not([hidden])) { max-width: 1440px; }
/* Formularios y seguimiento: una columna comoda de leer */
#v-progreso { max-width: 812px; }

.solo-lector {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Pantallas angostas: la barra lateral es un menu que entra desde la izquierda */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); --alto-barra: 56px; }
  .app > .lienzo, .barra-superior { grid-column: 1; }
  .barra-superior { gap: 8px; padding: 0 12px; }
  .barra-superior { display: flex; }
  .barra-superior .barra-superior__menu { display: grid; }
  .barra-superior .barra-superior__logo { display: inline-flex; margin-right: 4px; }
  html { scroll-padding-top: 72px; }
  .lateral {
    position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; height: auto;
    width: min(308px, 86vw);
    transform: translateX(-100%);
    transition: transform var(--dur-media) var(--curva-salida);
    box-shadow: 0 8px 24px rgb(0 0 0 / .35);
  }
  .app[data-menu-abierto] .lateral { transform: none; }
  .velo { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / .45); }
  .app[data-menu-abierto] .velo { display: block; }
  /* En el menu del celular siempre se ve completo, aunque en escritorio este colapsado */
  .lateral__colapsar { display: none; }
  .app[data-colapsado] .lateral { padding-inline: 16px; }
  .app[data-colapsado] .lateral__cab { flex-direction: row; }
  .app[data-colapsado] .lateral .logo-marca__producto { display: inline; }
  .app[data-colapsado] .lateral .perfil-lateral { display: grid; }
  .app[data-colapsado] .lateral .logo-marca .logo { width: 62px; height: 36px; }
  .app[data-colapsado] .lateral .nav-titulo { display: block; }
  .app[data-colapsado] .lateral .nav-item__txt { display: inline; }
  .app[data-colapsado] .lateral .prox { display: inline-grid; }
  .app[data-colapsado] .lateral .nav-subs { display: grid; }
  .app[data-colapsado] .lateral .nav-item { justify-content: flex-start; padding: 0 12px; }
  .app[data-colapsado] .lateral .selector-herr { justify-content: flex-start; padding: 0 12px 0 10px; }
  .app[data-colapsado] .lateral .selector-herr__txt { display: inline; }
  .app[data-colapsado] .lateral .selector-herr__flecha { display: block; }
  .app[data-colapsado] .lateral .menu-flotante { padding: 8px; }
  .lienzo { padding: 28px 24px 80px; }
}

/* Pestanas de los conmutadores (Todos / Mios, rol, origen del video) */
.pestana {
  height: 30px; padding: 0 13px;
  display: flex; align-items: center;
  font: 500 13px var(--sans);
  color: var(--texto-3);
  background: transparent; border: none; border-radius: 7px;
  cursor: pointer;
  transition: color var(--transicion), background var(--transicion);
}
.pestana:hover { color: var(--texto-2); }
.pestana.activa { color: var(--texto); background: var(--pastilla); }

/* ── Estructura ─────────────────────────────────────────────── */

.vista { display: flex; flex-direction: column; gap: 18px; animation: entrar var(--dur-entrada) var(--curva-salida); }

.titulo-vista { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.titulo-vista h1 {
  margin: 0; font-size: 25px; font-weight: 600;
  color: var(--texto); letter-spacing: -.4px;
  min-width: 0; overflow-wrap: anywhere;
}

.tarjeta {
  padding: 30px 32px 32px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 26px;
}
.tarjeta.compacta { padding: 24px 26px; gap: 22px; border-radius: 12px; }
.marco-documento {
  display: block; width: 100%;
  height: calc(100vh - 240px); min-height: 560px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
}

/* ── Pantalla completa: login y sin acceso ──────────────────── */

.plena {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 90px 24px;
}

/* Marca suelta del login y de "sin acceso" */
.marca { display: flex; align-items: center; gap: 12px; }
.marca .logo { width: 34px; height: 20px; }
.regla { width: 1px; height: 14px; background: var(--divisor); display: block; }
.marca-nombre { font-size: 13px; font-weight: 500; color: var(--texto-2); white-space: nowrap; }
.marca-area { font-family: var(--mono); font-size: 11px; color: var(--texto-3); letter-spacing: .6px; }
.marca-suelta { position: absolute; top: 28px; left: 32px; }

.acceso { width: 300px; display: flex; flex-direction: column; gap: 24px; }
.acceso .logo { width: 76px; height: 44px; }
.acceso-nombre { display: flex; align-items: baseline; gap: 9px; }
.acceso-nombre .marca-nombre { font-size: 14px; font-weight: 600; color: var(--texto); letter-spacing: -.1px; }
.linea { height: 1px; background: var(--borde-tenue); }

.negado {
  width: 352px;
  padding: 30px 30px 28px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 20px;
}
.negado h1 { margin: 0; font-size: 17px; font-weight: 600; color: var(--texto); letter-spacing: -.1px; }
.negado p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--texto-3); }

.tira-error {
  padding: 12px 14px;
  background: var(--error-fondo);
  border: 1px solid var(--error-borde);
  border-radius: 8px;
  display: flex; gap: 10px; align-items: flex-start;
}
.tira-error svg { flex-shrink: 0; margin-top: 1px; stroke: var(--error-texto); }
.tira-error p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--error-texto); }
.tira-error a { color: var(--error-texto); }

/* ── Botones ────────────────────────────────────────────────── */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 500 14px var(--sans);
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background var(--transicion), border-color var(--transicion),
              color var(--transicion), opacity var(--transicion);
}
.boton[disabled] { opacity: .5; cursor: not-allowed; }

.menta {
  height: 50px; padding: 0 20px;
  background: var(--acento); border-color: var(--acento);
  color: var(--sobre-acento);
  font-size: 15px; font-weight: 600;
  border-radius: 9px;
}
.menta:hover:not([disabled]) { background: var(--acento-claro); border-color: var(--acento-claro); }

.contorno {
  height: 44px; padding: 0 16px;
  background: var(--relleno-control);
  border-color: var(--borde-fuerte);
  color: var(--texto);
}
.contorno:hover:not([disabled]) { background: var(--relleno-control-hover); }

.suave {
  height: 44px; padding: 0 16px;
  background: var(--pastilla);
  border-color: var(--borde-fuerte);
  color: var(--texto);
}
.suave:hover:not([disabled]) { border-color: var(--divisor); }

.menudo { height: 30px; padding: 0 13px; font-size: 12.5px; border-radius: 7px; }
.mediano { height: 34px; padding: 0 15px; font-size: 13px; }
.lleno { width: 100%; }

.boton svg { flex-shrink: 0; }
.contorno svg, .suave svg, .menudo svg { stroke: var(--texto-3); }

/* ── Campos ─────────────────────────────────────────────────── */

.campo { display: flex; flex-direction: column; gap: 4px; }
.campo > label, .campo > .etiqueta {
  font-size: 13.5px; font-weight: 600; color: var(--texto);
  display: flex; align-items: baseline; gap: 8px;
}
.opcional { font-size: 11.5px; font-weight: 400; color: var(--texto-4); }
.ayuda { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--texto-3); }
.ayuda.ahorro { display: flex; align-items: flex-start; gap: 6px; color: var(--exito); }
.ayuda.ahorro svg { flex: none; width: 14px; height: 14px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.en-curso { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 14px; border: 1px solid var(--acento-borde); border-radius: 10px; background: var(--acento-suave); color: var(--texto); font-size: 13px; line-height: 1.5; }
.ayuda code, .pista code { font-family: var(--mono); font-size: 11.5px; color: var(--texto-2); }

input[type="text"], input[type="url"], input[type="date"], textarea, select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  margin-top: 10px;
  background: var(--hundido);
  border: 1px solid var(--borde-input);
  border-radius: 8px;
  color: var(--texto);
  font: 400 14px var(--sans);
  transition: border-color var(--transicion);
}
textarea { height: auto; padding: 12px 14px; min-height: 64px; resize: vertical; line-height: 1.55; }
input:hover, textarea:hover, select:hover { border-color: var(--borde-fuerte); }
input.mono { font-family: var(--mono); letter-spacing: .3px; }

.pista { margin: 8px 0 0; font-size: 12px; color: var(--texto-4); }
.pista.ok { color: var(--exito); }
.pista.contador { text-align: right; font-family: var(--mono); }

/* Cuentas */
.cuentas { display: flex; gap: 14px; margin-top: 10px; }

.cuenta {
  flex: 1 1 0; min-width: 0;
  padding: 15px 18px;
  background: var(--hundido);
  border: 1px solid var(--borde-input);
  border-radius: 10px;
  text-align: left; cursor: pointer;
  font: inherit;
  display: flex; align-items: center; gap: 9px;
  transition: background var(--transicion), border-color var(--transicion);
}
.logo-cuenta { display: block; flex: none; width: auto; height: 12px; aspect-ratio: 44664 / 25420; fill: currentColor; }
.cuenta .logo-cuenta { height: 14px; color: var(--texto-4); }
[data-cuenta="canal"] .logo-cuenta { color: var(--canal-logo); }
[data-cuenta="radio"] .logo-cuenta { color: var(--radio-logo); }
[data-cuenta="ntn24"] .logo-cuenta { color: var(--ntn24-logo); aspect-ratio: 1; }
.cuenta .nombre { font-size: 15px; font-weight: 600; color: var(--texto-3); }
.cuenta .marca-check { margin-left: auto; opacity: 0; }


.cuenta[aria-pressed="true"] .nombre { color: var(--texto); }
.cuenta[aria-pressed="true"] .marca-check { opacity: 1; }
.cuenta[data-cuenta="canal"][aria-pressed="true"] { background: var(--canal-fondo); border-color: var(--canal-activo); }
.cuenta[data-cuenta="canal"][aria-pressed="true"] .marca-check { stroke: var(--canal-texto); }
.cuenta[data-cuenta="radio"][aria-pressed="true"] { background: var(--radio-fondo); border-color: var(--radio-borde); }
.cuenta[data-cuenta="radio"][aria-pressed="true"] .marca-check { stroke: var(--radio-texto); }

/* Chip de cuenta en las cabeceras */
.chip-cuenta {
  flex-shrink: 0; height: 28px; padding: 0 12px 0 10px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--borde); border-radius: var(--pildora);
  font-size: 12.5px; font-weight: 500; color: var(--texto-3);
}
.chip-cuenta[data-cuenta="canal"] { background: var(--canal-fondo); border-color: var(--canal-borde); color: var(--canal-texto); }
.chip-cuenta[data-cuenta="radio"] { background: var(--radio-fondo); border-color: var(--radio-borde); color: var(--radio-texto); }
.chip-cuenta[data-cuenta="ntn24"] { background: var(--ntn24-fondo); border-color: var(--ntn24-borde); color: var(--ntn24-texto); }

/* IDs de linea como fichas */
.fichas {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  margin-top: 10px; padding: 8px 10px; min-height: 46px;
  background: var(--hundido);
  border: 1px solid var(--borde-input);
  border-radius: 8px;
}
.fichas:focus-within { border-color: var(--borde-fuerte); }
.fichas input { flex: 1; min-width: 130px; height: 28px; margin: 0; padding: 0 2px; border: none; background: none; }
.fichas input:hover { border: none; }

.ficha {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 5px 3px 10px;
  background: var(--pastilla);
  border: 1px solid var(--borde-fuerte);
  border-radius: 7px;
  font-family: var(--mono); font-size: 12.5px; color: var(--texto-2);
}
.ficha button {
  border: none; background: none; cursor: pointer; padding: 0 2px;
  color: var(--texto-4); font-size: 14px; line-height: 1; border-radius: 4px;
}
.ficha button:hover { color: var(--error-texto); }

/* Pestanas internas (archivo / URL) */
.conmutador {
  display: inline-flex; gap: 3px; padding: 3px; margin-top: 10px;
  align-self: flex-start; max-width: 100%; overflow-x: auto;
  background: var(--hundido);
  border: 1px solid var(--borde-input);
  border-radius: 9px;
}
.conmutador .pestana { height: 28px; padding: 0 14px; font-size: 12.5px; border-radius: 6px; }
.conmutador .pestana.activa { background: var(--pastilla); }

/* Zona de archivo */
.zona {
  display: block; margin-top: 10px; width: 100%;
  background: var(--hundido);
  border: 1px dashed var(--borde-fuerte);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--transicion);
}
.zona:hover, .zona.encima { border-color: var(--acento); }

.zona-vacia {
  min-height: 172px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 24px;
}
.zona-vacia svg { stroke: var(--acento); }
.zona-titulo { font-size: 14.5px; font-weight: 600; color: var(--texto); }
.zona-formatos { font-family: var(--mono); font-size: 11.5px; color: var(--texto-3); letter-spacing: .5px; }

.zona-lleno { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.archivo-icono {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--exito-fondo); border: 1px solid var(--exito-borde);
  border-radius: 9px;
}
.archivo-icono svg { stroke: var(--exito); }
.archivo-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.archivo-nombre { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archivo-peso { font-family: var(--mono); font-size: 11.5px; color: var(--texto-3); }

/* Trackers */
.fila-tracker { display: grid; grid-template-columns: 210px 1fr 40px; gap: 8px; margin-top: 10px; }
.fila-tracker select, .fila-tracker input { margin-top: 0; }
.fila-tracker select {
  padding: 0 30px 0 10px; font-size: 13px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-3) 50%),
                    linear-gradient(135deg, var(--texto-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 21px, calc(100% - 11px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.fila-tracker select option, .fila-tracker select optgroup { background: var(--superficie); color: var(--texto); }
.fila-tracker button {
  background: transparent; border: 1px solid var(--borde-input); border-radius: 8px;
  color: var(--texto-4); font-size: 16px; cursor: pointer;
}
.fila-tracker button:hover { color: var(--error-texto); border-color: var(--error-borde); }

/* Desplegable de avanzadas */
.avanzado { padding: 0; }
.avanzado summary {
  height: 48px; padding: 0 16px;
  display: flex; align-items: center; gap: 9px;
  background: transparent;
  border: 1px solid var(--borde-input);
  border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--texto-2);
  cursor: pointer; list-style: none;
}
.avanzado summary::-webkit-details-marker { display: none; }
.avanzado summary svg { stroke: var(--texto-3); transition: transform var(--transicion); }
.avanzado[open] summary svg { transform: rotate(90deg); }
.avanzado[open] { display: flex; flex-direction: column; gap: 26px; }
/* Chrome envuelve el contenido de <details> en ::details-content: el espacio va ahi. */
.avanzado[open]::details-content { display: flex; flex-direction: column; gap: 26px; }

/* ── Avisos ─────────────────────────────────────────────────── */

.avisos { display: flex; flex-direction: column; gap: 10px; }
.avisos:empty { display: none; }
.avisos > * { margin: 0; }

.aviso {
  padding: 13px 16px 14px 15px;
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  border-left: 3px solid var(--ambar);
  border-radius: 9px;
  display: flex; flex-direction: column; gap: 3px;
}
.aviso-bloqueador { margin-bottom: 24px; }
.aviso .codigo {
  flex-shrink: 0;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  color: var(--ambar-texto); letter-spacing: .7px;
}
.aviso p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--texto-2); }
.aviso .titulo { font-size: 13.5px; font-weight: 600; color: var(--ambar-texto); }
/* Informativo: el trafficker no tiene que hacer nada. Mas apagado para que lo que si
   pide accion resalte. */
/* Impide la entrega: el creativo no va a salir al aire en esa linea. La alerta se ve
   igual, aunque el creativo si sale: la linea puede no cumplir su meta. */
.aviso.bloquea, .aviso.alerta {
  background: var(--rojo-fondo);
  border-color: var(--rojo-borde);
  border-left-color: var(--rojo);
}
.aviso.bloquea .titulo, .aviso.alerta .titulo { color: var(--rojo-texto); }
.aviso.bloquea p, .aviso.alerta p { color: var(--texto); }
.aviso.info { border-left-color: var(--borde-fuerte); }
.aviso.info .titulo { color: var(--texto-2); }
.aviso.info p { color: var(--texto-3); }

.alerta {
  padding: 14px 16px;
  background: var(--error-fondo);
  border: 1px solid var(--error-borde);
  border-radius: 9px;
  font-size: 13px; line-height: 1.55; color: var(--error-texto);
}
.alerta ul { margin: 8px 0 0; padding-left: 18px; }
.alerta li + li { margin-top: 4px; }

/* ── Sugerencia de reuso: el video ya esta publicado ────────── */

.sugerencia {
  padding: 20px 22px;
  background: var(--hundido);
  border: 1px solid var(--acento-borde);
  border-left: 3px solid var(--acento);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 16px;
}
.sugerencia[hidden] { display: none; }
.sugerencia h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--texto); letter-spacing: -.1px; }
.sugerencia .bajada { margin: -8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--texto-2); }
.sugerencia .datos { grid-template-columns: 130px minmax(0, 1fr); row-gap: 8px; }

@media (max-width: 560px) {
  .sugerencia .datos { grid-template-columns: 1fr; row-gap: 2px; }
  .sugerencia .datos dd { margin-bottom: 8px; }
  .sugerencia .acciones { flex-direction: column; align-items: stretch; }
  .sugerencia .acciones .boton { flex: none; }
}

/* ── Datos y acciones (sugerencia de reuso) ─────────────────── */

.datos {
  margin: 0;
  display: grid; grid-template-columns: 170px minmax(0, 1fr);
  row-gap: 12px; column-gap: 16px; align-items: baseline;
}
.datos dt { font-size: 13px; color: var(--texto-3); }
.datos dd { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--texto); overflow-wrap: anywhere; }

.acciones { display: flex; gap: 12px; align-items: center; }
.acciones .menta { flex: 1; height: 46px; font-size: 14.5px; }
.acciones .contorno { height: 46px; padding: 0 22px; font-size: 14.5px; color: var(--texto-2); }

.detalle { margin: 0; }
.detalle summary { font-size: 12.5px; color: var(--texto-3); cursor: pointer; padding: 4px 0; }
.detalle pre {
  margin: 10px 0 0; padding: 14px;
  background: var(--hundido);
  border: 1px solid var(--borde-fila);
  border-radius: 9px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
  color: var(--texto-3);
  white-space: pre-wrap; word-break: break-word;
  max-height: 260px; overflow: auto;
}

/* ── Historial ──────────────────────────────────────────────── */

.lista { padding: 0; gap: 0; overflow: hidden; }
.renglon {
  padding: 14px 26px;
  border: none; border-bottom: 1px solid var(--borde-fila);
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  transition: background var(--transicion);
  background: none;
  width: 100%; text-align: left; font: inherit; color: inherit;
}
.renglon:last-child { border-bottom: none; }
.renglon:hover { background: var(--pastilla); }
.renglon .titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.renglon .titulo b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.renglon:not(.herramienta) .titulo span { font-family: var(--mono); font-size: 11.5px; color: var(--texto-4); }

.insignia {
  flex-shrink: 0;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .6px;
  text-transform: uppercase; white-space: nowrap;
  padding: 4px 10px; border-radius: var(--pildora);
  background: var(--pastilla); border: 1px solid var(--borde); color: var(--texto-3);
}
.insignia.ok    { background: var(--exito-fondo); border-color: var(--exito-borde); color: var(--exito); }
.insignia.curso { background: var(--ambar-fondo); border-color: var(--ambar-borde); color: var(--ambar-texto); }
.insignia.malo  { background: var(--error-fondo); border-color: var(--error-borde); color: var(--error-texto); }

.vacio { padding: 48px 26px; text-align: center; font-size: 13px; color: var(--texto-3); }

.bajada { margin: -12px 0 0; font-size: 13px; color: var(--texto-3); }

pre.registro {
  margin: 0; padding: 16px 18px;
  max-height: 60vh; overflow: auto;
  background: var(--hundido); border: 1px solid var(--borde); border-radius: 10px;
  font: 400 12px/1.65 var(--mono); color: var(--texto-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.renglon .quien { font-size: 12px; color: var(--texto-4); }
.renglon:not(.herramienta):hover .titulo span, .renglon:hover .quien { color: var(--texto-3); }
@media (max-width: 760px) {
  .renglon:not(.herramienta) { flex-wrap: wrap; row-gap: 8px; }
  .renglon:not(.herramienta) > .titulo { flex-basis: 100%; }
  .renglon > .insignia { max-width: 100%; white-space: normal; }
}

/* ── Nuevo creativo: bloques numerados y resumen lateral ────────
   El formulario va por bloques (donde se publica, el creativo, destino y opciones) y
   a la derecha un resumen en vivo con lo que falta. En pantallas angostas el resumen
   baja y publicar va en una barra fija abajo. */

#v-formulario { gap: 24px; }
#v-formulario .migas + .titulo-vista { margin-top: -12px; }
.nuevo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }

.formulario {
  display: grid; gap: 32px; min-width: 0;
  padding: 32px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px;
}
.bloque-form { display: grid; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid var(--borde); min-width: 0; }
.bloque-form:last-of-type { border-bottom: 0; padding-bottom: 0; }
.bloque-form > h2 { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; color: var(--texto); }
.paso-num {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--hundido); border: 1px solid var(--borde-fuerte);
  font: 600 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--texto-2);
}
.asistente { grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "lado form"; }
.asistente > * { min-width: 0; }
.asistente__lado {
  grid-area: lado; display: grid; gap: 32px; align-content: start; min-width: 0;
  position: sticky; top: calc(var(--alto-barra, 0px) + 72px);
  max-height: calc(100vh - var(--alto-barra, 0px) - 96px); overflow: hidden auto; overscroll-behavior: contain;
  margin: -4px; padding: 4px;
}
.asistente__lado > * { min-width: 0; }
.asistente > .formulario { grid-area: form; }
.asistente .bloque-form { grid-template-columns: minmax(0, 1fr); }
.asistente__lado > .resumen { position: static; }
.asistente .formulario .acciones-trabajo { grid-area: auto; }
.asistente .semana-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--texto-3); }
.asistente .semana-barra > span { margin-left: 8px; }
.asistente .semana-barra > span:first-child { margin-left: 0; }
.asistente .semana-barra .boton[aria-pressed="true"] { border-color: var(--acento-borde); background: var(--acento-suave); color: var(--acento); }
.asistente .panel__cuerpo[inert] { opacity: .6; }
.asistente .semana { width: 0; min-width: 100%; overflow-x: auto; margin-top: 12px; padding-bottom: 4px; }
.asistente .semana-grilla { display: grid; grid-template-columns: 36px repeat(24, minmax(0, 1fr)); gap: 2px; min-width: 460px; user-select: none; -webkit-user-select: none; touch-action: none; }
.asistente .semana-grilla.medias { grid-template-columns: 36px repeat(48, minmax(18px, 1fr)); min-width: 1000px; }
.asistente .semana-grilla button { background: none; border: 0; font: inherit; color: var(--texto-3); cursor: pointer; padding: 0; border-radius: 4px; }
.asistente .semana-grilla button:hover { background: var(--pastilla); color: var(--texto); }
.asistente .semana-grilla .semana-banda { height: 24px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 2px solid var(--borde); border-radius: 4px 4px 0 0; }
.asistente .semana-grilla .semana-banda.sel { background: var(--acento); color: var(--sobre-acento); border-bottom-color: var(--acento); }
.asistente .semana-grilla .semana-hora { height: 26px; font-family: var(--mono); font-size: 10.5px; }
.asistente .semana-grilla.medias .semana-hora { font-size: 10px; }
.asistente .semana-grilla .semana-dia { text-align: left; padding-left: 4px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.asistente .semana-celda { height: 28px; background: var(--hundido); border: 1px solid var(--borde-input); border-radius: 4px; cursor: crosshair; }
.asistente .semana-celda:hover { border-color: var(--texto-4); }
.asistente .semana-celda:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.asistente .semana-celda.on { background: var(--acento); border-color: var(--acento); }
.asistente .semana-celda.suma { background: var(--acento-suave); border-color: var(--acento); }
.asistente .falta-paso { color: var(--ambar-texto); }
.asistente .vg { --vg-bg: var(--fondo); --vg-field: var(--hundido); --vg-panel: var(--superficie); --vg-line: var(--borde-input); --vg-line-strong: var(--borde-fuerte); --vg-text: var(--texto); --vg-muted: var(--texto-3); --vg-dim: var(--texto-4); --vg-off: var(--divisor); --vg-accent: var(--acento); --vg-on-accent: var(--sobre-acento); --vg-error: var(--rojo-texto); --vg-hover: var(--pastilla); --vg-mono: var(--mono); }
@media (min-width: 601px) { .asistente .vg-trigger { grid-template-columns: minmax(max-content, 1fr) minmax(0, 150px) minmax(max-content, 1fr); } }
@media (min-width: 1101px) { .asistente .vg-panel { left: auto; right: 0; } }
.asistente .semana-celda.resta { background: var(--rojo-fondo); border-color: var(--rojo-borde); }
.asistente .detalle > .grid-res { margin-top: 10px; }
.asistente .frecuencia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; color: var(--texto-2); }
.asistente .frecuencia input { width: 88px; margin-top: 0; }
.asistente .frecuencia select { width: auto; margin-top: 0; }
.asistente .creativos { display: grid; gap: 16px; margin-top: 4px; }
.asistente .zip-zona { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 12px; border: 1.5px dashed var(--borde-fuerte); background: transparent; color: var(--texto); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--transicion), background var(--transicion); }
.asistente .zip-zona:hover, .asistente .zip-zona.sobre { border-color: var(--acento); background: var(--acento-suave); }
.asistente .zip-zona * { pointer-events: none; }
.asistente .zip-zona__icono { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--acento-suave); color: var(--acento); }
.asistente .zip-zona__icono .icono { width: 18px; height: 18px; }
.asistente .zip-zona__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.asistente .zip-zona__txt b { font-size: 14px; font-weight: 600; }
.asistente .zip-zona__accion { color: var(--acento); }
.asistente .zip-leyendo { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 12px; border: 1px solid var(--borde); background: var(--hundido); font-size: 13px; color: var(--texto-2); }
.asistente .zip-revision { border-radius: 14px; border: 1px solid var(--acento-borde); overflow: hidden; }
.asistente .zip-revision__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 16px; background: var(--acento-suave); }
.asistente .zip-revision__cab h3 { margin: 0; font-size: 14px; font-weight: 600; }
.asistente .zip-archivo { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 230px); align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--borde-fila); }
.asistente .zip-archivo__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.asistente .zip-archivo__nombre { font: 13px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asistente .zip-archivo__det { font-size: 12px; color: var(--texto-3); }
.asistente .zip-archivo.no-usable .zip-archivo__nombre { color: var(--texto-3); }
.asistente .zip-archivo select { width: 100%; height: 36px; margin-top: 0; font-size: 13px; }
.asistente .silueta { display: grid; place-items: center; width: 40px; height: 32px; }
.asistente .silueta i { display: block; border-radius: 2px; border: 1.5px solid var(--borde-fuerte); background: var(--hundido); }
.asistente .silueta.activa i { border-color: var(--acento); }
.asistente .zip-revision__nota { margin: 0; padding: 8px 16px; border-top: 1px solid var(--borde-fila); }
.asistente .zip-revision__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--borde); }
.asistente .zip-revision__botones { display: flex; gap: 8px; }
.asistente .zip-hecho, .asistente .zip-error { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; font-size: 13px; }
.asistente .zip-hecho { border: 1px solid var(--exito-borde); background: var(--exito-fondo); }
.asistente .zip-hecho svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--exito); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.asistente .zip-error { border: 1px solid var(--error-borde); background: var(--error-fondo); color: var(--error-texto); }
.asistente .zip-hecho > span, .asistente .zip-error > span { flex: 1; min-width: 180px; }
.asistente .tam { border: 1px solid var(--borde-input); border-radius: 14px; overflow: hidden; background: var(--superficie-2); }
.asistente .tam__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 48px; padding: 8px 10px 8px 16px; background: var(--pastilla); border-bottom: 1px solid var(--borde-input); }
.asistente .tam__medida { font: 500 13px var(--mono); color: var(--texto); }
.asistente .tam__resumen { font-size: 12.5px; color: var(--texto-3); }
.asistente .tam__resumen.falta { color: var(--ambar-texto); }
.asistente .tam__botones { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; }
.asistente .tam__botones .icono { width: 14px; height: 14px; stroke-width: 2; }
.asistente .creativo { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--borde); }
.asistente .creativo__alcance { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin: 0; padding: 8px 10px 0 16px; font-size: 12px; font-weight: 600; color: var(--texto-3); border-top: 1px solid var(--borde); }
.asistente .creativo__alcance .icono { width: 14px; height: 14px; stroke-width: 2; }
.asistente .creativo__alcance > span { flex: 1 1 0; min-width: 160px; }
.asistente .tam__cab + .creativo, .asistente .tam__cab + .creativo__alcance, .asistente .creativo__alcance + .creativo { border-top: 0; }
.asistente .creativo__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
.asistente .creativo__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.asistente .creativo__nombre { font: 13px var(--mono); color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asistente .creativo__meta { font: 12px var(--mono); color: var(--texto-3); }
.asistente .creativo .insignia { display: inline-flex; align-items: center; gap: 6px; }
.asistente .creativo .insignia svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.asistente .creativo .insignia.curso { background: var(--acento-suave); border-color: var(--acento-borde); color: var(--acento); }
.asistente .creativo .insignia .punto-vivo { width: 6px; height: 6px; margin: 0 2px; }
.asistente .creativo__acciones { display: flex; gap: 2px; }
.asistente .creativo__acciones .boton-icono { width: 36px; height: 36px; border-radius: 8px; color: var(--texto-3); }
.asistente .creativo__acciones .boton-icono:hover { background: var(--pastilla); color: var(--texto); }
.asistente .creativo__acciones .icono { width: 16px; height: 16px; }
.asistente .tam .boton.fantasma:hover, .asistente .tam .boton-icono:hover { background: var(--borde-input); color: var(--texto); }
.asistente .creativo__motivo { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--rojo-texto); }
.asistente .escena { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--borde); background-color: var(--hundido); background-image: radial-gradient(var(--borde) 1px, transparent 1px); background-size: 12px 12px; font: inherit; color: inherit; transition: border-color var(--transicion); }
.asistente button.escena { cursor: zoom-in; }
.asistente button.escena:hover { border-color: var(--borde-fuerte); }
.asistente .escena__marco { position: relative; display: block; max-width: 100%; }
.asistente .escena__pieza { position: absolute; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--acento); border-radius: 2px; background: var(--superficie); font: 11.5px var(--mono); color: var(--texto-3); }
.asistente .escena__pieza img { display: block; width: 100%; height: 100%; object-fit: contain; }
.asistente .escena__pieza span { padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asistente .escena.mal .escena__pieza { border-color: var(--rojo-texto); }
.asistente .escena__pedida { position: absolute; display: flex; justify-content: flex-end; align-items: flex-start; padding: 2px 4px; border: 1.5px dashed var(--rojo-texto); border-radius: 2px; font: 10.5px var(--mono); color: var(--rojo-texto); pointer-events: none; }
.asistente .creativo__linea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.asistente .creativo__linea input { flex: 1; min-width: 0; margin-top: 0; height: 36px; font-size: 13px; }
.asistente .creativo .casilla-herr { min-height: 32px; width: fit-content; font-size: 12.5px; color: var(--texto-2); }
.asistente .creativo .casilla-herr input { width: 16px; height: 16px; }
.asistente .guardada { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--exito); white-space: nowrap; }
.asistente .guardada svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.asistente .creativo__linea .suelta { flex: 1; width: auto; }
.asistente .suelta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 8px 12px; border-radius: 10px; border: 1.5px dashed var(--borde-fuerte); background: transparent; color: var(--texto-2); font: inherit; font-size: 13px; text-align: center; cursor: pointer; transition: border-color var(--transicion), background var(--transicion); }
.asistente .suelta:not([aria-disabled="true"]):hover, .asistente .suelta.sobre { border-color: var(--acento); background: var(--acento-suave); }
.asistente .suelta[aria-disabled="true"] { cursor: not-allowed; color: var(--texto-4); border-color: var(--borde); }
.asistente .tam [aria-disabled="true"] .icono { opacity: .5; }
.asistente .tam .boton-icono[aria-disabled="true"], .asistente .tam .boton.fantasma[aria-disabled="true"] { cursor: not-allowed; color: var(--texto-4); background: transparent; }
.asistente .tam .boton-icono[aria-disabled="true"] { background: var(--relleno-control); }
.asistente .suelta b { color: var(--acento); font-weight: 600; }
.asistente .suelta .icono { width: 16px; height: 16px; flex: none; }
.asistente .suelta * { pointer-events: none; }
.asistente #lr-dlg-aparte { width: min(880px, calc(100vw - 32px)); }
@media (max-width: 600px) {
  .asistente .zip-archivo { grid-template-columns: 40px minmax(0, 1fr); }
  .asistente .zip-archivo > :last-child { grid-column: 1 / -1; }
  .asistente .creativo__fila { grid-template-columns: minmax(0, 1fr) auto; }
  .asistente .creativo__acciones { grid-column: 1 / -1; justify-content: flex-end; }
}
.pasos {
  list-style: none; margin: 0; padding: 8px; display: grid; gap: 4px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px;
}
.pasos button {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 0; border-radius: 12px; background: none; font: inherit; text-align: left;
  color: var(--texto-2); cursor: pointer; transition: background var(--transicion);
}
.pasos button:hover:not(:disabled) { background: var(--hundido); }
.pasos button:disabled { cursor: default; color: var(--texto-4); }
.pasos button[aria-current="step"] { background: var(--pastilla); color: var(--texto); }
.pasos b { display: block; font-size: 14px; font-weight: 600; }
.pasos small { display: block; font-size: 12px; color: var(--texto-3); }
.pasos button[aria-current="step"] .paso-num { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.pasos .hecho .paso-num { background: var(--acento-suave); border-color: var(--acento-borde); color: var(--acento); }
.pasos .paso-num svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; }
#lr-f-navegar, #lr-n-navegar { justify-content: space-between; }
#lr-f-navegar > .menta, #lr-n-navegar > .menta { margin-left: auto; }
fieldset.campo { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.campo > legend { padding: 0; margin-bottom: 4px; font-size: 13.5px; font-weight: 600; color: var(--texto); }
fieldset.campo > .ayuda { margin-top: 8px; }
fieldset.campo > legend + .ayuda { margin-top: 0; }
fieldset.campo > .campo, fieldset.campo > legend + .grid-res { margin-top: 10px; }
fieldset.campo > .campo > input { margin-top: 4px; }

/* Cuenta: tarjeta con su logo, nombre y para que sirve */
.cuenta { padding: 14px 16px; gap: 12px; }
.cuenta .logo-cuenta { height: 22px; }
.cuenta__textos { display: grid; gap: 2px; min-width: 0; }
.cuenta__desc { font-size: 12.5px; color: var(--texto-3); }

/* Video: archivo o enlace */
.segmentado {
  display: inline-flex; gap: 4px; padding: 4px; margin-top: 10px; align-self: flex-start;
  background: var(--hundido); border: 1px solid var(--borde-input); border-radius: var(--pildora);
}
.segmentado .pestana {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px;
  border: 0; border-radius: var(--pildora); background: none; cursor: pointer;
  font: 500 13.5px var(--sans); color: var(--texto-3);
}
.segmentado .pestana:hover { color: var(--texto); }
.segmentado .pestana.activa { background: var(--superficie); color: var(--texto); box-shadow: 0 0 0 1px var(--borde-fuerte); }
.segmentado .pestana--listo.activa  { background: var(--exito-fondo); color: var(--exito); box-shadow: 0 0 0 1px var(--exito-borde); }
.segmentado .pestana--avisos.activa { background: var(--ambar-fondo); color: var(--ambar-texto); box-shadow: 0 0 0 1px var(--ambar-borde); }
.segmentado .icono { width: 16px; height: 16px; }

.resumen-avanzadas { margin-left: 4px; font-weight: 400; color: var(--texto-3); }
.resumen-avanzadas:empty { display: none; }

/* Resumen lateral */
.resumen { position: sticky; top: calc(var(--alto-barra, 0px) + 24px); min-width: 0; }
.estado-resumen { font-size: 12.5px; font-weight: 600; color: var(--ambar-texto); }
.estado-resumen[data-listo="true"] { color: var(--exito); }
.resumen .panel__cuerpo { display: grid; gap: 16px; padding: 20px; }
.resumen__datos {
  margin: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px;
  font-size: 13.5px; line-height: 20px;
}
.resumen__datos dt { color: var(--texto-3); }
.resumen__datos dd { margin: 0; min-width: 0; display: grid; gap: 2px; justify-items: start; color: var(--texto); }
.resumen__datos .recorte { max-width: 100%; }
.resumen__datos .tenue { font-size: 12.5px; }
.resumen__datos .chip-cuenta { height: 26px; }
.falta { color: var(--texto-4); }
.resumen .pista { margin: -8px 0 0; text-align: center; }
.resumen .alerta ul { padding-left: 18px; }
.resumen .alerta a { color: var(--error-texto); }
.resumen .alerta:focus { outline: none; }

/* Barra fija para publicar: solo en pantallas angostas */
.barra-publicar { display: none; }
.barra-publicar__estado { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ambar-texto); }
.barra-publicar__estado[data-listo="true"] { color: var(--exito); }

/* Confirmacion antes de publicar */
.dialogo {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde-fuerte); border-radius: 16px;
  box-shadow: 0 24px 64px rgb(0 0 0 / .45);
}
.dialogo::backdrop { background: rgb(0 0 0 / .6); }
.dialogo[open] { display: flex; flex-direction: column; animation: entrar var(--dur-corta) var(--curva-salida); }
.dialogo__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 16px 24px; border-bottom: 1px solid var(--borde); }
.dialogo__cab h2 { margin: 0; font-size: 16px; font-weight: 600; }
.dialogo__cuerpo { display: grid; gap: 16px; padding: 20px 24px; overflow: auto; }
.dialogo__pie { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--borde); }
.frase-confirmar { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--texto-2); }
.frase-confirmar strong { color: var(--texto); font-weight: 600; }
.frase-confirmar .mono { font-family: var(--mono); color: var(--texto); overflow-wrap: anywhere; }
.confirmar-lineas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.confirmar-lineas li {
  padding: 4px 12px; border: 1px solid var(--borde-fuerte); border-radius: var(--pildora);
  background: var(--hundido); font-family: var(--mono); font-size: 13px; color: var(--texto);
}
.dialogo .datos-trabajo { grid-template-columns: 110px minmax(0, 1fr); column-gap: 16px; }
.dialogo--chico { width: min(440px, calc(100vw - 32px)); }
.dialogo--vista { width: min(1040px, calc(100vw - 32px)); height: calc(100vh - 48px); }
.estado-guardado { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--texto-3); }
.estado-guardado .icono { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.estado-guardado .girador { --tam: 14px; --grosor: 2px; }
.estado-guardado[data-estado="guardado"] { color: var(--exito); }
.estado-guardado[data-estado="pendiente"] { color: var(--ambar-texto); }
.estado-guardado[data-estado="error"] { color: var(--rojo-texto); }
.dialogo--vista .dialogo__cab h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialogo--vista .dialogo__cuerpo { flex: 1; min-height: 0; padding: 0; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; background: var(--fondo); }
.dialogo--vista .dialogo__cuerpo:has(> p + *) { grid-template: auto minmax(0, 1fr) / minmax(0, 1fr); }
.dialogo--vista .dialogo__cuerpo > p { padding: 24px; }
.dialogo--vista img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dialogo--vista iframe { width: 100%; height: 100%; border: 0; }

@media (max-width: 1100px) {
  .nuevo { grid-template-columns: minmax(0, 1fr); }
  .asistente { grid-template-areas: "pasos" "form" "resumen"; grid-template-rows: none; }
  .asistente__lado { display: contents; }
  .asistente__lado > .pasos { grid-area: pasos; }
  .asistente__lado > .resumen { grid-area: resumen; }
  .pasos { grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; }
  .pasos small { display: none; }
  .resumen { position: static; }
  .resumen [data-publicar], .resumen .pista { display: none; }
  .barra-publicar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: sticky; bottom: 0; z-index: 30;
    margin: 0 -48px -96px; padding: 12px 48px max(12px, env(safe-area-inset-bottom));
    background: var(--superficie); border-top: 1px solid var(--borde-fuerte);
  }
}
@media (max-width: 900px) {
  .barra-publicar { margin: 0 -24px -80px; padding-inline: 24px; }
}
@media (max-width: 760px) {
  .formulario { padding: 20px 16px; gap: 24px; }
  .bloque-form { gap: 20px; padding-bottom: 24px; }
  .barra-publicar { margin: 0 -18px -72px; padding-inline: 18px; }
  .barra-publicar .boton { flex: none; }
  .dialogo .datos-trabajo { grid-template-columns: 1fr; }
  .dialogo__pie .boton { flex: 1 1 auto; }
}

/* ── Un trabajo: cabecera, desenlace, etapas y resultado ────────
   Arriba lo que mas importa al terminar (el desenlace); despues las etapas, que
   cuentan como se llego ahi, y abajo el detalle. */

#v-progreso { gap: 24px; }

/* Migas: de donde cuelga el trabajo */
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--texto-3); }
.migas li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.migas li + li::before { content: "/"; color: var(--texto-4); }
.migas a { color: var(--texto-3); text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; }
.migas a:hover { color: var(--texto); text-decoration: underline; }
.migas [aria-current] { color: var(--texto-2); font-family: var(--mono); font-size: 12.5px; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.migas + .cab-trabajo { margin-top: -12px; }

.cab-trabajo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "titulo acciones" "meta meta"; gap: 12px 24px; align-items: start;
}
.titulo-trabajo { grid-area: titulo; display: grid; gap: 4px; min-width: 0; }
.antetitulo { font-size: 12.5px; font-weight: 500; color: var(--texto-3); }
.titulo-trabajo__fila { display: flex; align-items: center; gap: 6px; min-width: 0; }
.titulo-trabajo h1 {
  margin: 0; min-width: 0; overflow-wrap: anywhere;
  font: 500 22px/1.3 var(--mono); letter-spacing: -.2px; color: var(--texto);
}
.acciones-trabajo { grid-area: acciones; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.meta-trabajo { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.meta-trabajo__texto { font-size: 13px; color: var(--texto-3); }
.meta-trabajo__id { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; color: var(--texto-3); }
.meta-trabajo__id .mono { font-family: var(--mono); }
.copiar--visible { opacity: 1; }

.boton.contorno.compacto {
  height: 40px; padding: 0 18px; font-size: 14px; border-radius: var(--pildora); color: var(--texto-2);
}
.boton.compacto .icono { width: 16px; height: 16px; }
.boton.contorno.compacto .icono { stroke: var(--texto-3); }

/* Estado en capsula: icono + nombre, del mismo color que en la lista */
.pildora-estado {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 8px;
  border: 1px solid; border-radius: var(--pildora); font-size: 12.5px; font-weight: 600;
}
.pildora-estado .icono { width: 15px; height: 15px; stroke-width: 2; }
.pildora-estado .punto-vivo { margin: 0 3px; }
.pildora-estado--listo  { color: var(--exito); background: var(--exito-fondo); border-color: var(--exito-borde); }
.pildora-estado--avisos { color: var(--ambar-texto); background: var(--ambar-fondo); border-color: var(--ambar-borde); }
.pildora-estado--fallo  { color: var(--rojo-texto); background: var(--error-fondo); border-color: var(--error-borde); }
.pildora-estado--info   { color: var(--texto-3); background: var(--hundido); border-color: var(--borde-fuerte); }
.pildora-estado--curso  { color: var(--acento); background: var(--acento-suave); border-color: var(--acento-borde); }

/* Desenlace: listo, con avisos o en curso */
.desenlace {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start;
  padding: 16px 24px; border: 1px solid; border-left-width: 3px; border-radius: 12px;
}
.desenlace > .icono { width: 20px; height: 20px; margin-top: 1px; }
.desenlace h2 { margin: 0 0 4px; font-size: 15px; font-weight: 600; line-height: 22px; color: var(--texto); }
.desenlace p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--texto-2); }
.desenlace--exito  { background: var(--exito-fondo); border-color: var(--exito-borde); border-left-color: var(--exito); }
.desenlace--exito > .icono { color: var(--exito); }
.desenlace--avisos { background: var(--ambar-fondo); border-color: var(--ambar-borde); border-left-color: var(--ambar); }
.desenlace--avisos > .icono { color: var(--ambar-texto); }
.desenlace--info   { background: var(--hundido); border-color: var(--borde-fuerte); border-left-color: var(--texto-4); }
.desenlace--info > .icono { color: var(--texto-3); }
#desenlace:empty { display: none; }

/* Paneles */
.panel { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; }
.panel__cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 16px 24px; border-bottom: 1px solid var(--borde);
}
.panel__cab h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--texto); }
.panel__cuerpo { padding: 24px; }
.grid-res { display: grid; gap: 24px; }
.grid-res > * { min-width: 0; }
.grid-res__bloque { display: grid; gap: 12px; min-width: 0; }
.grid-res__bloque h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--texto); }
.tenue { color: var(--texto-3); }
.recorte { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ident { display: inline-flex; align-items: center; gap: 2px; }
.ident .copiar { width: 28px; height: 28px; }
tr:hover .copiar, .datos-trabajo dd:hover .copiar { opacity: 1; }

.datos-trabajo { grid-template-columns: minmax(140px, max-content) minmax(0, 1fr); row-gap: 12px; column-gap: 32px; align-items: center; }
.datos-trabajo dt { font-size: 14px; }
.datos-trabajo dd { font-family: var(--sans); font-size: 14px; min-width: 0; }
.datos-trabajo dd .mono, .datos-trabajo .ident.mono { font-family: var(--mono); font-size: 13px; }

/* Etapas: seis nodos unidos por una linea que se llena */
.contador-etapas { font-size: 13px; font-weight: 500; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.etapa { position: relative; display: grid; justify-items: center; gap: 8px; padding: 0 4px; text-align: center; }
.etapa__nodo {
  position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--superficie); border: 2px solid var(--borde-fuerte); color: var(--texto-4);
}
.etapa__nodo .icono { width: 14px; height: 14px; stroke-width: 2.4; }
.etapa__nombre { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--texto-3); }
.etapa__det { min-height: 16px; font-size: 12px; line-height: 16px; color: var(--texto-4); }
.etapa__linea {
  position: absolute; top: 13px; left: calc(50% + 18px); right: calc(-50% + 18px);
  height: 2px; border-radius: 2px; background: var(--borde-fuerte); overflow: hidden;
}
.etapa__linea::after {
  content: ""; position: absolute; inset: 0; background: var(--acento);
  transform: scaleX(var(--avance, 0)); transform-origin: left; transition: transform var(--dur-larga) var(--curva-salida);
}
.etapa:last-child .etapa__linea { display: none; }
.etapa[data-estado="hecha"] .etapa__nodo { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.etapa[data-estado="hecha"] .etapa__nombre { color: var(--texto-2); }
.etapa[data-estado="activa"] .etapa__nodo { border-color: var(--acento); color: var(--acento); }
.etapa[data-estado="activa"] .etapa__nombre { color: var(--texto); font-weight: 600; }
.etapa[data-estado="fallo"] .etapa__nodo { background: var(--error-fondo); border-color: var(--rojo); color: var(--rojo-texto); }
.etapa[data-estado="fallo"] .etapa__nombre, .etapa[data-estado="fallo"] .etapa__det { color: var(--rojo-texto); }
.etapa[data-estado="aviso"] .etapa__nodo { background: var(--ambar-fondo); border-color: var(--ambar); color: var(--ambar-texto); }
.etapa[data-estado="aviso"] .etapa__nombre, .etapa[data-estado="aviso"] .etapa__det { color: var(--ambar-texto); }
.etapa[data-estado="omitida"] .etapa__nodo { border-style: dashed; }
.etapa[data-estado="omitida"] .etapa__nombre { color: var(--texto-4); text-decoration: line-through; }

.proceso { display: grid; gap: 28px; }
.proceso > * { min-width: 0; }
.migas + #zona-lr-ticket { margin-top: -12px; }
.proceso__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.proceso__cab .titulo-trabajo { gap: 6px; }
.proceso__cab .titulo-trabajo__fila { flex-wrap: wrap; gap: 12px; }
.proceso__sub { font-size: 13px; color: var(--texto-2); }
.proceso__sub .mono { font-family: var(--mono); }
.proceso__cab .pildora-estado .punto-vivo { background: currentColor; }
.proceso__avance { display: grid; justify-items: end; gap: 6px; font-size: 12.5px; color: var(--texto-3); }
.proceso__avance b { font-weight: 600; color: var(--texto); }
.proceso__barra { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; width: 220px; }
.proceso__barra i { height: 4px; border-radius: var(--pildora); background: var(--borde); }
.proceso__barra i.hecha { background: var(--exito); }
.proceso__barra i.actual { background: var(--ambar-texto); }
.proceso__barra i.fallo { background: var(--rojo); }
.proceso__cuerpo { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: flex-start; gap: 20px 24px; container-type: inline-size; }
.proceso__principal { flex: 999 1 520px; min-width: 0; }
.proceso__lateral { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
@container (min-width: 824px) {
  .proceso__lateral {
    position: sticky; top: calc(var(--alto-barra, 0px) + 72px);
    max-height: calc(100vh - var(--alto-barra, 0px) - 96px); overflow: hidden auto; overscroll-behavior: contain;
    margin: calc(var(--desfase-lateral, 0px) - 4px) -4px -4px; padding: 4px;
  }
  .proceso__lateral[data-alineado] { transition: margin-top var(--dur-media) var(--curva-salida); }
}
@media (prefers-reduced-motion: reduce) { .proceso__lateral { transition: none; } }
.siguiente { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
.siguiente__antetitulo { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.siguiente__titulo { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; color: var(--texto); text-wrap: balance; }
.siguiente__texto { margin: 0; font-size: 13px; line-height: 1.55; color: var(--texto-2); }
.siguiente__cita { margin: 0; padding: 8px 10px; border-left: 3px solid var(--ambar-borde); border-radius: 0 8px 8px 0; background: var(--hundido); font-size: 12.5px; line-height: 1.5; color: var(--texto-2); overflow-wrap: anywhere; }
.siguiente__cita.mal { border-left-color: var(--error-borde); }
.siguiente__accion { width: 100%; margin-top: 4px; }
.siguiente__anillo { align-self: center; margin: 4px 0; }
.siguiente--vivo { align-items: center; text-align: center; min-height: 320px; }
.siguiente--vivo > .siguiente__anillo { margin-top: auto; }
.siguiente--vivo > :last-child { margin-bottom: auto; }
.siguiente--vivo .siguiente__titulo { justify-content: center; }
.siguiente__accion.boton-estado:not([data-estado="listo"]) { align-self: center; }
.siguiente__accion .icono { width: 14px; height: 14px; }
.proceso__principal-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.proceso__titulo { margin: 0; font-size: 16px; font-weight: 600; color: var(--texto); }

.etapas-ticket { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.etapa-t { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; }
.etapa-t__linea { position: absolute; left: 13px; top: 44px; bottom: -14px; width: 2px; border-radius: 2px; background: var(--borde); overflow: hidden; }
.etapa-t__linea i { display: block; width: 100%; height: 0; background: var(--exito); }
.etapa-t:last-child .etapa-t__linea { display: none; }
.etapa-t[data-estado="hecha"] .etapa-t__linea i { height: 100%; }
.etapa-t.llenando .etapa-t__linea i { height: 0; }
.etapa-t__nodo {
  position: relative; z-index: 1; width: 28px; height: 28px; margin-top: 12px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto-3);
}
.etapa-t__nodo .icono { width: 14px; height: 14px; stroke-width: 2.4; }
.etapa-t[data-estado="hecha"] .etapa-t__nodo { border-color: var(--exito); background: var(--exito); color: var(--fondo); }
.etapa-t[data-estado="hecha"] .etapa-t__nodo .icono { stroke-width: 2.8; }
.etapa-t__nodo .trazo { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.etapa-t[data-estado="actual"] .etapa-t__nodo { border-color: var(--ambar-texto); background: var(--ambar-fondo); color: var(--ambar-texto); }
.etapa-t[data-estado="bloqueada"] .etapa-t__nodo { border-style: dashed; }
.etapa-t[data-estado="fallo"] .etapa-t__nodo { border-color: var(--rojo); background: var(--error-fondo); color: var(--rojo-texto); }
.etapa-t__caja { min-width: 0; overflow: hidden; }
.etapa-t[data-estado="actual"] .etapa-t__caja { border-color: var(--ambar-borde); }
.etapa-t[data-estado="bloqueada"] .etapa-t__caja { border-style: dashed; border-color: var(--borde-fuerte); }
.etapa-t[data-estado="fallo"] .etapa-t__caja { border-color: var(--error-borde); }
.etapa-t__h { margin: 0; font: inherit; }
.etapa-t__fila { display: flex; align-items: center; transition: background-color var(--transicion); }
.etapa-t__fila > .etapa-t__h { flex: 1; min-width: 0; }
.etapa-t__fila:has(.etapa-t__cab:hover) { background: var(--pastilla); }
.etapa-t__rapida { flex: none; margin-right: 20px; }
.etapa-t__rapida .icono { width: 18px; height: 18px; }
.etapa-t__cab {
  width: 100%; min-height: 52px; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 20px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--transicion);
}
.etapa-t__cab.sin-pastilla { grid-template-columns: auto minmax(0, 1fr) auto; }
.etapa-t__cab:hover { background: var(--pastilla); }
.etapa-t__cab:focus-visible { outline-offset: -2px; }
.etapa-t__cab .pildora-estado { height: 24px; padding: 0 10px; font-size: 12px; }
.etapa-t__titulo { font-size: 15px; font-weight: 600; color: var(--texto); }
.etapa-t__resumen { min-width: 0; font-size: 12.5px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etapa-t__chev { width: 16px; height: 16px; color: var(--texto-3); transition: transform var(--dur-media) var(--curva-salida); }
.etapa-t__cab[aria-expanded="true"] .etapa-t__chev { transform: rotate(180deg); }
.etapa-t__cuerpo { border-top: 1px solid var(--borde); }
.etapa-t[data-estado="bloqueada"] .etapa-t__titulo { color: var(--texto-2); }
.etapa-t__acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 0; }
.etapa-t__cuerpo > .lista + .etapa-t__acciones { padding-top: 16px; }
.etapa-t__cuerpo > .panel__cuerpo + .panel__cuerpo:not(.etapa-t__acciones) { padding-top: 0; }

@media (max-width: 760px) {
  .proceso__avance { justify-items: start; }
  .etapa-t { gap: 10px; }
  .etapa-t__cab, .etapa-t__cab.sin-pastilla { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding: 12px 16px; }
  .etapa-t__titulo { grid-column: 1; grid-row: 1; }
  .etapa-t__cab .pildora-estado { grid-column: 1; grid-row: 2; justify-self: start; }
  .etapa-t__chev { grid-column: 2; grid-row: 1 / span 2; }
  .etapa-t__resumen { display: none; }
  .etapa-t__rapida { margin-right: 12px; }
  .etapa-t__caja .datos { grid-template-columns: 1fr; row-gap: 4px; }
  .etapa-t__caja .datos dd + dt { margin-top: 8px; }
}

.aud-cab-derecha { display: grid; justify-items: end; gap: 12px; }
.aud-bloques { display: flex; flex-direction: column; gap: 18px; }
.aud-seccion { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.aud-seccion + .aud-seccion { padding-top: 18px; border-top: 1px solid var(--borde); }
.aud-subtitulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; color: var(--texto); }
.aud-subtitulo--menor { margin-top: 6px; font-size: 14px; }
.aud-etiqueta { font-size: 13.5px; font-weight: 600; color: var(--texto); }
.aud-id { font-family: var(--mono); font-size: 13px; color: var(--texto-2); }
.aud-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--texto-3); }
.aud-entradilla { margin: 0; max-width: 72ch; font-size: 14px; line-height: 1.6; color: var(--texto-2); }
.aud-pie { margin: 0; text-align: center; }
.aud-lista { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.55; color: var(--texto-2); }
.aud-datos dd { font-family: var(--sans); font-size: 13.5px; color: var(--texto-2); }
.aud-bloques p, .aud-hallazgo__cuerpo p { margin: 0; }
.aud-veredicto { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border: 1px solid var(--borde); border-radius: 14px; background: var(--hundido); }
.aud-veredicto h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; text-wrap: balance; color: var(--texto); }
.aud-veredicto p { font-size: 14px; line-height: 1.6; color: var(--texto-2); }
.aud-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.aud-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border: 1px solid var(--borde); border-radius: 12px; background: var(--hundido); }
.aud-kpi__valor { font: 500 22px/1.25 var(--mono); font-variant-numeric: tabular-nums; color: var(--texto); }
.aud-kpi__label { font-size: 13px; line-height: 1.4; color: var(--texto-2); }
.aud-severidad { display: grid; gap: 10px; }
.aud-severidad__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.aud-franja { display: flex; gap: 2px; height: 10px; }
.aud-franja__parte { border-radius: 2px; }
.aud-franja__parte:first-child { border-radius: 4px 2px 2px 4px; }
.aud-franja__parte:last-child { border-radius: 2px 4px 4px 2px; }
.aud-franja__parte--critico, .aud-franja__parte--alto { background: var(--rojo); }
.aud-franja__parte--medio { background: var(--ambar); }
.aud-franja__parte--observacion { background: var(--borde-fuerte); }
.aud-franja__parte--fortaleza { background: var(--exito); }

.aud-logo { flex: none; width: 63px; height: 36px; background: var(--aud-logo) center / contain no-repeat; }
.favicon-sitio { flex: none; width: 16px; height: 16px; border-radius: 4px; background: var(--fondo-favicon); object-fit: contain; }
.aud-ficha { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--borde); }
.aud-ficha__cuerpo { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 16px 20px; align-items: start; }
.aud-ficha__datos { display: grid; gap: 12px; min-width: 0; }
@media (max-width: 760px) { .aud-ficha__cuerpo { grid-template-columns: 1fr; } }

.aud-hallazgos { display: grid; gap: 8px; }
.aud-hallazgo { border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); scroll-margin-top: calc(var(--alto-barra, 0px) + 72px); }
.aud-hallazgo > summary { list-style: none; }
.aud-hallazgo > summary::-webkit-details-marker { display: none; }
.aud-hallazgo__cab { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; cursor: pointer; border-radius: 12px; transition: background-color var(--transicion); }
.aud-hallazgo__cab:hover { background: var(--pastilla); }
.aud-hallazgo__cab .pildora-estado { height: 24px; padding: 0 10px; font-size: 12px; }
.aud-hallazgo__titulo { min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--texto); }
.aud-hallazgo[open] > .aud-hallazgo__cab { border-bottom: 1px solid var(--borde); border-radius: 12px 12px 0 0; }
.aud-hallazgo[open] .etapa-t__chev { transform: rotate(180deg); }
.aud-hallazgo__cuerpo { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
.aud-campo { display: grid; gap: 4px; font-size: 13.5px; line-height: 1.6; color: var(--texto-2); }
.aud-campo--reco { padding-left: 12px; border-left: 3px solid var(--acento-borde); }
.aud-campo--evidencia { padding: 12px 14px; border-radius: 10px; background: var(--hundido); border: 1px solid var(--borde); font-size: 13px; }
.aud-ref { font: inherit; font-size: 12px; cursor: pointer; }
.aud-ref:hover { border-color: var(--acento-borde); color: var(--texto); }

.aud-tecnico { border: 1px solid var(--borde); border-radius: 10px; }
.aud-tecnico > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 14px; cursor: pointer; }
.aud-tecnico__cuerpo { display: flex; flex-direction: column; gap: 14px; padding: 4px 14px 14px; }
.aud-codigo { display: grid; gap: 8px; }
.aud-codigo__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aud-codigo__par { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.aud-codigo__lado { display: grid; gap: 6px; min-width: 0; }
.aud-codigo__rot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.aud-codigo pre { margin: 0; max-height: 360px; overflow: auto; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 10px; background: var(--hundido); font: 12px/1.55 var(--mono); color: var(--texto-2); }
.aud-codigo__propuesto { border-color: var(--exito-borde); }

.aud-vc { border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie-2); overflow: hidden; }
.aud-vc__cab, .aud-vc__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 20px; background: var(--hundido); }
.aud-vc__cab { border-bottom: 1px solid var(--borde-fila); }
.aud-vc__pie { border-top: 1px solid var(--borde-fila); font-size: 12.5px; line-height: 1.5; color: var(--texto-3); }
.aud-vc__pregunta { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.aud-vc__fecha { font-size: 13px; color: var(--texto-3); }
.aud-vc__cuerpo { display: grid; gap: 18px; padding: 20px; }
.aud-vc__veredicto { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--borde); border-radius: 12px; background: var(--hundido); color: var(--texto-2); }
.aud-vc__veredicto[data-tono="pend"], .aud-vc__pill[data-tono="pend"] { background: var(--ambar-fondo); border-color: var(--ambar-borde); color: var(--ambar-texto); }
.aud-vc__veredicto[data-tono="ok"], .aud-vc__pill[data-tono="ok"] { background: var(--exito-fondo); border-color: var(--exito-borde); color: var(--exito); }
.aud-vc__veredicto[data-tono="curso"] { background: var(--acento-suave); border-color: var(--acento-borde); color: var(--acento); }
.aud-vc__ico { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: var(--pildora); background: var(--superficie); }
.aud-vc__ico .icono { width: 22px; height: 22px; }
.aud-vc__txt { display: grid; gap: 4px; min-width: 0; }
.aud-vc__titulo { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.aud-vc__frase { margin: 0; font-size: 14px; line-height: 1.5; color: var(--texto-2); }
.aud-vc__avance { display: flex; align-items: center; gap: 14px; }
.aud-vc__barra { flex: 1; display: flex; gap: 4px; }
.aud-vc__barra i { flex: 1; height: 10px; border-radius: var(--pildora); background: var(--borde); }
.aud-vc__barra i.si { background: var(--exito); }
.aud-vc__cifra { font-size: 13.5px; font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aud-vc__lista-t { margin: 0 0 6px; font-size: 14.5px; font-weight: 600; color: var(--texto); }
.aud-vc__lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--borde); border-radius: 12px; }
.aud-vc__item { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--borde-fila); }
.aud-vc__item:first-child { border-top: 0; }
.aud-vc__pill { display: inline-flex; align-items: center; gap: 6px; justify-self: start; height: 28px; padding: 0 12px; border: 1px solid var(--borde); border-radius: var(--pildora); background: var(--hundido); color: var(--texto-3); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.aud-vc__pill .icono { width: 14px; height: 14px; }
.aud-vc__que { display: grid; gap: 3px; min-width: 0; }
.aud-vc__que b { font-size: 14px; font-weight: 600; color: var(--texto); }
.aud-vc__donde { font-size: 13px; color: var(--texto-3); overflow-wrap: anywhere; }
.aud-vc__sigue { margin: 0; font-size: 13.5px; color: var(--texto-2); }
.aud-vc__sigue b { color: var(--texto); }
@media (max-width: 560px) { .aud-vc__item { grid-template-columns: minmax(0, 1fr); gap: 8px; } .aud-vc__avance { flex-wrap: wrap; } }
.aud-evento__cab .pildora-estado { height: 22px; padding: 0 8px; font-size: 11.5px; }

.aud-tabla .n { text-align: right; white-space: nowrap; }
.aud-tabla td { vertical-align: top; }

.aud-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--texto-3); }
.aud-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.aud-leyenda i { display: inline-block; width: 14px; height: 8px; border-radius: 2px; }
.aud-leyenda .aud-leyenda__bigote { height: 2px; background: var(--texto-3); }
.aud-leyenda .aud-leyenda__umbral { width: 0; height: 12px; border-left: 2px dashed var(--texto-3); border-radius: 0; }
.aud-barra--actual { background: var(--serie-uso); }
.aud-barra--mejora { background: var(--serie-venta); }
.aud-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.aud-ux { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--borde); border-radius: 12px; }
.aud-ux__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.aud-ux__linea { display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(90px, auto); align-items: center; gap: 10px; font-size: 12.5px; color: var(--texto-3); }
.aud-ux__valor { font: 500 12.5px var(--mono); color: var(--texto); text-align: right; }
.aud-carril { position: relative; height: 12px; border-radius: 3px; background: var(--pastilla); }
.aud-barra { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; }
.aud-bigote { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--texto-3); }
.aud-umbral { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dashed var(--texto-2); }
.aud-carril--cero::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; border-left: 1px solid var(--borde-fuerte); }
.aud-ing { display: grid; gap: 6px; }
.aud-ing__fila { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 1.6fr) 170px; align-items: center; gap: 12px; padding: 6px 0; font-size: 13px; color: var(--texto-2); }
.aud-ing__fila--total { border-top: 1px solid var(--borde); padding-top: 10px; font-weight: 600; color: var(--texto); }
.aud-ing__valor { display: grid; justify-items: end; font: 500 12.5px var(--mono); color: var(--texto); }
.aud-ing__valor span { font-size: 11.5px; color: var(--texto-3); }
.aud-recorte { position: absolute; left: 2px; top: -18px; font-size: 11px; color: var(--texto-3); }

.aud-propuesta { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border: 1px solid var(--borde); border-radius: 12px; }
.aud-propuesta__cab, .aud-opt__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.aud-propuesta__titulo, .aud-opt__titulo { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--texto); }
.aud-propuesta p { font-size: 13.5px; line-height: 1.6; color: var(--texto-2); }
.aud-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.aud-figura { margin: 0; display: grid; gap: 6px; min-width: 0; }
.aud-figura figcaption { font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.aud-figura__marco { border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; background: var(--hundido); }
.aud-figura__marco--tira { max-height: 560px; overflow-y: auto; }
.aud-figura img { display: block; width: 100%; height: auto; }

.aud-prioridades { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aud-prioridades li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border: 1px solid var(--borde); border-radius: 12px; }
.aud-prioridades__n { font: 500 18px/1.3 var(--mono); color: var(--texto-3); }
.aud-prioridades__cuerpo { display: grid; gap: 8px; min-width: 0; }
.aud-prioridades h4 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--texto); }

.aud-decisiones { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px 24px; }
.aud-decisiones section { display: grid; align-content: start; gap: 6px; }
.aud-decisiones__lista { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 12px; font-size: 13.5px; line-height: 1.55; color: var(--texto-2); }
.aud-decisiones__lista li { display: grid; gap: 6px; }

.aud-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 12px; }
.aud-opt { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--borde); border-radius: 12px; min-width: 0; }
.aud-tramo { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.aud-tramo > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--hundido); min-width: 0; }
.aud-tramo b { font: 500 12.5px/1.4 var(--mono); color: var(--texto); overflow-wrap: anywhere; word-break: break-word; }
.aud-evento { display: grid; gap: 6px; min-width: 0; }
.aud-evento__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

.casos { display: grid; gap: 12px; }
.caso { border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); scroll-margin-top: calc(var(--alto-barra, 0px) + 72px); }
.caso__cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 12px 20px; border-bottom: 1px solid var(--borde-fila); }
.caso__id { font: 500 13px var(--mono); color: var(--texto-2); }
.caso__titulo { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--texto); }
.caso__cab .pildora-estado, .caso--fortalezas > summary .pildora-estado { height: 24px; padding: 0 10px; font-size: 12px; }
.caso__cuerpo { display: grid; gap: 16px; padding: 16px 24px 20px; }
.caso__tres { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 14px; line-height: 1.5; }
.caso__tres dt { padding-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--texto-3); }
.caso__tres dd { margin: 0; color: var(--texto); }
.caso__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.caso__figura { margin: 0; min-width: 0; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie-2); overflow: hidden; }
.caso__figura figcaption { padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.caso__marco { display: flex; justify-content: center; padding: 8px 0; background: var(--hundido); }
.caso__marco img { display: block; width: auto; max-width: 100%; height: 440px; object-fit: contain; }
.caso__decide { display: grid; gap: 8px; padding: 12px 16px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie-2); }
.caso__pregunta { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--texto-2); }
.caso__pregunta b { color: var(--texto); }
.caso__opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.caso__opcion { padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); font-size: 13px; line-height: 1.5; color: var(--texto-2); }
.caso__opcion b { display: block; margin-bottom: 2px; color: var(--texto); }
.caso__plegados { display: grid; gap: 6px; }
.caso__plegado { border: 1px solid var(--borde-fila); border-radius: 8px; }
.caso__plegado > summary, .caso--fortalezas > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--texto); transition: background-color var(--transicion); }
.caso__plegado > summary::-webkit-details-marker, .caso--fortalezas > summary::-webkit-details-marker { display: none; }
.caso__plegado > summary { min-height: 40px; padding: 8px 14px; border-radius: 8px; }
.caso__plegado > summary:hover, .caso--fortalezas > summary:hover { background: var(--pastilla); }
.caso__plegado > summary span { margin-left: auto; font-weight: 500; color: var(--texto-3); }
.caso__plegado > summary .etapa-t__chev, .caso--fortalezas > summary .etapa-t__chev { flex: none; }
.caso--fortalezas > summary .etapa-t__chev { margin-left: auto; }
.caso__plegado[open] > summary .etapa-t__chev, .caso--fortalezas[open] > summary .etapa-t__chev { transform: rotate(180deg); }
.caso__dentro { display: grid; gap: 6px; padding: 0 14px 12px; font-size: 13px; line-height: 1.55; color: var(--texto-2); }
.caso__dentro > pre { margin: 0; padding: 10px 12px; border-radius: 6px; background: var(--hundido); font: 12px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.caso--fortalezas > summary { min-height: 48px; padding: 10px 20px; border-radius: 12px; }
details.caso > summary.caso__cab { grid-template-columns: auto minmax(0, 1fr) auto auto; list-style: none; cursor: pointer; border-radius: 12px; transition: background-color var(--transicion); }
details.caso > summary.caso__cab::-webkit-details-marker { display: none; }
details.caso > summary.caso__cab:hover { background: var(--pastilla); }
details.caso:not([open]) > summary.caso__cab { border-bottom-color: transparent; }
details.caso[open] > summary.caso__cab { border-radius: 12px 12px 0 0; }
details.caso[open] > summary.caso__cab .etapa-t__chev { transform: rotate(180deg); }
.caso__fortalezas { margin: 0; padding: 0 20px 16px 20px; list-style: none; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.55; color: var(--texto-2); }
.caso__fortalezas li { display: flex; gap: 8px; align-items: flex-start; }
.caso__fortalezas .icono { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--exito); }

@media (max-width: 760px) {
  .aud-cab-derecha { justify-items: start; }
  .aud-hallazgo__cab { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .aud-hallazgo__cab .aud-id { grid-column: 1; grid-row: 1; }
  .aud-hallazgo__cab .pildora-estado { grid-column: 1; grid-row: 2; justify-self: start; }
  .aud-hallazgo__titulo { grid-column: 1; grid-row: 3; }
  .aud-hallazgo__cab .etapa-t__chev { grid-column: 2; grid-row: 1 / span 3; }
  .aud-ing__fila { grid-template-columns: 1fr; }
  .aud-ing__valor { justify-items: start; }
  .aud-opts { grid-template-columns: 1fr; }
  .aud-ux__linea { grid-template-columns: 80px minmax(0, 1fr); }
  .aud-ux__valor { grid-column: 1 / -1; text-align: left; }
  .caso__cab { grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; padding: 12px 16px; }
  .caso__cab .pildora-estado { grid-column: 2; justify-self: start; }
  details.caso > summary.caso__cab { grid-template-columns: auto minmax(0, 1fr) auto; }
  details.caso > summary.caso__cab .etapa-t__chev { grid-column: 3; grid-row: 1 / span 2; }
  .caso__cuerpo { padding: 14px 16px 18px; }
  .caso__tres { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .caso__tres dd + dt { margin-top: 8px; }
  .caso__par { grid-template-columns: minmax(0, 1fr); }
  .caso__marco img { height: auto; max-height: 440px; }
}

.franja-7x24 { display: grid; gap: 6px; }
.franja-7x24__grilla { display: grid; grid-template-columns: 18px repeat(24, minmax(0, 1fr)); gap: 2px; font: 10.5px var(--mono); color: var(--texto-3); }
.franja-7x24__grilla > span { height: 12px; line-height: 12px; text-align: center; border-radius: 2px; }
.franja-7x24__grilla .on { background: var(--acento); }
.franja-7x24__grilla .parte { background: var(--acento-borde); }
.franja-7x24__grilla .off { background: var(--pastilla); }
.franja-7x24__grilla .franja-7x24__h { height: auto; overflow: visible; white-space: nowrap; }
.franja-7x24__nota { font-size: 12px; color: var(--texto-3); }

.arbol { max-height: 420px; overflow-y: auto; padding: 6px; border-radius: 10px; background: var(--hundido); border: 1px solid var(--borde); }
.arbol :where(ul) { margin: 0; padding: 0; list-style: none; }
.arbol__lista { display: flex; flex-direction: column; gap: 2px; }
.arbol button { width: 100%; display: grid; align-items: center; gap: 8px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--texto); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--transicion); }
.arbol button:hover { background: var(--pastilla); }
.arbol button:focus-visible { outline-offset: -2px; }
.arbol__chev { width: 14px; height: 14px; color: var(--texto-3); transition: transform var(--dur-media) var(--curva-salida); }
.arbol button[aria-expanded="true"] > .arbol__chev { transform: rotate(90deg); }
.arbol__sitio > button { grid-template-columns: 16px auto minmax(0, 1fr) auto; min-height: 34px; font-size: 13.5px; }
.arbol__sitio > button b { font-weight: 600; }
.arbol__cod { padding: 1px 6px; border-radius: 4px; background: var(--acento-suave); color: var(--acento); font: 500 12px var(--mono); }
.arbol__cifra { font: 12px var(--mono); color: var(--texto-3); text-align: right; white-space: nowrap; }
.arbol__grupo { display: flex; flex-direction: column; gap: 1px; margin-left: 15px; padding-left: 12px; border-left: 1px solid var(--borde); }
.arbol__seccion > button { grid-template-columns: 16px minmax(0, 1fr) 70px 40px; min-height: 30px; font-size: 13px; }
.arbol__mezcla { display: flex; gap: 1px; height: 6px; border-radius: 999px; overflow: hidden; background: var(--borde); }
.arbol__mezcla i:first-child { background: var(--acento); }
.arbol__mezcla i:nth-child(2) { background: var(--acento-borde); }
.arbol__mezcla i:nth-child(3) { background: var(--texto-4); }
.arbol__unidades { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px 31px; }
.arbol__unidades a, .arbol__unidades span { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--borde); background: var(--superficie); font: 11.5px var(--mono); color: var(--texto-2); text-decoration: none; transition: border-color var(--transicion), color var(--transicion); }
.arbol__unidades a:hover { border-color: var(--acento-borde); color: var(--acento); }

.sim { display: flex; flex-direction: column; gap: 20px; }
.sim-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 13px; color: var(--texto-2); }
.sim-cab b { color: var(--texto); font-weight: 600; }
.sim-cab .boton { margin-left: auto; }
.sim-cab .boton .icono { width: 14px; height: 14px; }
.sim-seccion { display: flex; flex-direction: column; gap: 8px; }
.sim-seccion__titulo { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
.sim-ok { color: var(--exito); }
.sim-ambar { color: var(--ambar-texto); }
.sim-mal { color: var(--rojo-texto); }

.revisiones { border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
.revision { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-top: 1px solid var(--borde-fila); background: transparent; color: inherit; font: inherit; text-align: left; }
.revisiones > :first-child { border-top: 0; }
button.revision { cursor: pointer; transition: background-color var(--transicion); }
button.revision:hover { background: var(--pastilla); }
button.revision:focus-visible { outline-offset: -2px; }
.revision .estado-icono { width: 28px; height: 28px; }
.revision .estado-icono .icono { width: 14px; height: 14px; }
.revision__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.revision__txt > b { font-size: 13.5px; font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.revision__txt > span { font-size: 12.5px; line-height: 1.5; color: var(--texto-3); overflow-wrap: anywhere; }
.revision__valor { font-size: 12px; color: var(--texto-3); white-space: nowrap; }
.revision__barra { display: flex; flex-direction: column; gap: 6px; width: 220px; }
.revision__cifras { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.revision__cifras span:last-child { color: var(--texto-3); }
.sim-chev { width: 16px; height: 16px; color: var(--texto-3); transition: transform var(--dur-media) var(--curva-salida); }
[aria-expanded="true"] > .sim-chev { transform: rotate(180deg); }
.revision__mas { display: flex; flex-direction: column; gap: 10px; padding: 4px 14px 14px 54px; font-size: 12.5px; }
.revision__mas p, .revision__mas ul { margin: 0; }
.revision__txt > .revision__sugerencia { font-weight: 600; color: var(--texto); }
.barra-meta { position: relative; display: block; height: 6px; border-radius: 999px; background: var(--borde); }
.barra-meta > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; }
.barra-meta > i.si { background: var(--exito); }
.barra-meta > i.no { background: var(--rojo-texto); }
.barra-meta > b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--texto); }
.escalon { display: grid; grid-template-columns: 64px minmax(0, 1fr) 96px; align-items: center; gap: 12px; }
.escalon > span:first-child { color: var(--texto-3); }
.escalon.elegido > span:first-child { color: var(--texto); font-weight: 600; }
.escalon > span:last-child { text-align: right; }

.gam-orden { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--borde); border-radius: 12px; background: var(--hundido); }
.gam-orden__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.gam-orden__po { margin-left: auto; font-size: 12px; color: var(--texto-2); }
.gam-orden__cab a { font-size: 12.5px; }
.gam-orden__nombre { display: flex; align-items: flex-start; gap: 8px; }
.gam-orden__nombre > span { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; }
.gam-orden__nombre .copiar { opacity: 1; }
.gam-etiqueta { font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); white-space: nowrap; }
.gam-hijos { display: flex; flex-direction: column; gap: 12px; margin-left: 14px; padding-left: 14px; border-left: 2px solid var(--borde); }
.gam-linea { display: flex; flex-direction: column; gap: 14px; padding: 14px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); }
.gam-linea__cab { display: flex; align-items: baseline; gap: 10px; }
.gam-linea__cab > :last-child { margin-left: auto; font-size: 12px; text-align: right; min-width: 0; }
.gam-bloque { display: flex; flex-direction: column; gap: 8px; }
.gam-bloque__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-size: 13.5px; }
.gam-bloque__cab b, b.gam-bloque__cab { font-weight: 600; }
.gam-bloque__cab .tenue { font-size: 12px; }
.chips-datos { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-dato { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--borde); background: var(--pastilla); font-size: 12px; color: var(--texto-3); text-decoration: none; }
.chip-dato b { font: 500 12px var(--mono); color: var(--texto); }
a.chip-dato:hover { border-color: var(--acento-borde); }
a.chip-dato b { color: var(--acento); }
.sim-reparto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sim-reparto > div { display: flex; flex-direction: column; gap: 6px; }
.sim-reparto__cab { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--texto-3); }
.sim-reparto__cab b { font-weight: 500; color: var(--texto-2); }
.sim-reparto__barra { display: flex; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden; }
.sim-reparto__barra i:nth-child(1) { background: var(--acento); }
.sim-reparto__barra i:nth-child(2) { background: var(--acento-borde); }
.sim-reparto__barra i:nth-child(3) { background: var(--texto-4); }
.gam-ver { align-self: flex-start; }
.gam-ver .sim-chev { width: 14px; height: 14px; }
.leyenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--texto-3); }
.leyenda i { display: inline-block; width: 10px; height: 6px; margin-right: 6px; border-radius: 2px; vertical-align: middle; }
.leyenda .robapagina { background: var(--acento); }
.leyenda .banner { background: var(--acento-borde); }
.leyenda .otros { background: var(--texto-4); }
.sim-creativo { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); }
.sim-creativo .revision__txt > b { font-size: 12.5px; font-weight: 500; }
.sim-creativo__silueta { display: grid; place-items: center; width: 56px; height: 40px; border-radius: 8px; border: 1px solid var(--borde); background: var(--hundido); }
.sim-creativo__silueta i { display: block; border-radius: 2px; border: 1px solid var(--acento); background: var(--superficie); }
@media (max-width: 760px) {
  .sim-creativo { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 10px; }
  .sim-creativo__silueta { width: 40px; grid-row: span 2; }
  .sim-creativo > .insignia { grid-column: 2; justify-self: start; }
}

.etapa-t__consecuencia { flex: 1 1 260px; align-self: center; }
.flow { display: flex; flex-direction: column; gap: 16px; }
.flow-envio, .etapa-origen { margin: 0; font-size: 12px; color: var(--texto-3); text-align: right; }
.flow-resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; font-size: 13px; }
.flow-resumen > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.flow-resumen dt { font-size: 12px; color: var(--texto-3); }
.flow-resumen dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.flow-resumen dd.mono { font-size: 12.5px; }
.flow-extra { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13px; }
.flow-extra dt { font-size: 12px; color: var(--texto-3); }
.flow-extra dd { margin: 0; overflow-wrap: anywhere; }
.flow-valor { display: flex; flex-direction: column; gap: 6px; }
.flow-valor__cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 12.5px; color: var(--texto-3); }
.flow-valor__cab .mono { color: var(--texto-2); }
.progreso.cuadra .progreso__barra > i { background: var(--exito); }
.flow-campana { border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
.flow-campana.descartada { border-style: dashed; }
.flow-campana__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; background: var(--hundido); }
.flow-campana__cab b { margin-right: 4px; font-size: 13.5px; font-weight: 600; }
.flow-campana__fechas { margin-left: auto; font-size: 12px; color: var(--texto-2); }
.flow-linea { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 14px; border-top: 1px solid var(--borde-fila); }
.flow-campana__cab + .flow-linea { border-top: 0; }
.flow-linea__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.flow-linea__cab b { font-size: 13.5px; font-weight: 600; }
.flow-linea__cab .mono { font-size: 13px; }
.flow-atributos { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 10px 14px; margin: 0; font-size: 13px; }
.flow-atributos dt { font-size: 12px; color: var(--texto-3); }
.flow-atributos dt.arriba { align-self: start; padding-top: 2px; }
.flow-atributos dd { margin: 0; min-width: 0; }
.flow-creativos { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--borde-fila); }
.flow-creativos__grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.flow-creativo { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--borde); border-radius: 10px; min-width: 0; }
.flow-creativo--falta { border-style: dashed; border-color: var(--ambar-borde); }
.flow-creativo__vista { display: grid; place-items: center; height: 84px; padding: 0; border: 1px solid var(--borde); border-radius: 8px; color: var(--texto-3); font: 10.5px var(--mono);
  background-color: var(--hundido); background-image: radial-gradient(var(--borde) 1px, transparent 1px); background-size: 10px 10px; }
button.flow-creativo__vista { cursor: zoom-in; }
button.flow-creativo__vista:hover { border-color: var(--acento-borde); }
.flow-creativo__vista i { display: grid; place-items: center; overflow: hidden; border-radius: 2px; border: 1px solid var(--acento); background: var(--superficie); font-style: normal; }
.flow-creativo__vista img { width: 100%; height: 100%; object-fit: contain; display: block; }
.flow-creativo__fila { display: flex; align-items: center; gap: 8px; }
.flow-creativo__txt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.flow-creativo__txt b { font-size: 12.5px; font-weight: 500; overflow-wrap: anywhere; }
.flow-creativo__txt span { font-size: 12px; color: var(--texto-3); }
.flow-creativo__motivo { margin: 0; font-size: 12px; color: var(--rojo-texto); }
.flow-creativo__aviso { margin: 0; font-size: 12px; color: var(--ambar-texto); }
.flow-descartadas { align-self: flex-start; color: var(--texto-3); }
.flow-descartadas .sim-chev { width: 14px; height: 14px; }
.flow-descartadas__lista { display: flex; flex-direction: column; gap: 6px; }
.flow-descartado { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: 8px; background: var(--hundido); font-size: 12.5px; color: var(--texto-3); }
.flow-descartado .mono { text-decoration: line-through; overflow-wrap: anywhere; }

.etapa-origen--aviso { color: var(--ambar-texto); }
.pedido, .soporte, .en-gam { display: flex; flex-direction: column; gap: 16px; }
.soporte > .aviso, .en-gam > .aviso { margin: 0; }
.pedido-bloques { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.pedido-bloque { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: 10px; background: var(--hundido); }
.pedido-bloque--ancho { grid-column: 1 / -1; }
.pedido-bloque strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.pedido-bloque__etiqueta, .pedido-bloque__pie { font-size: 12px; color: var(--texto-3); }
.pedido-bloque__pie .mono { color: var(--texto-2); }
.pedido-bloque__cifra { font: 500 16px var(--mono); color: var(--texto); white-space: nowrap; }
.pedido-bloque__cifra--larga { white-space: normal; overflow-wrap: anywhere; }
.pedido-bloque__cifra.tenue { font: 400 13px var(--sans); color: var(--texto-3); }
.pedido-bloque__oc--exito { color: var(--exito); }
.pedido-bloque__oc--ambar { color: var(--ambar-texto); }
.pedido-pares { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 24px; margin: 0; font-size: 13px; }
.pedido-pares > div { display: flex; justify-content: space-between; gap: 12px; min-width: 0; padding-bottom: 8px; border-bottom: 1px solid var(--borde-fila); }
.pedido-pares dt { color: var(--texto-3); white-space: nowrap; }
.pedido-pares dd { margin: 0; min-width: 0; text-align: right; overflow-wrap: break-word; }
.soporte__fila { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.soporte__marco { width: 120px; height: 90px; grid-auto-flow: row; align-content: center; gap: 4px; }
.soporte__marco .icono { width: 22px; height: 22px; color: var(--texto-3); }
.soporte__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.soporte__txt b { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.soporte__acciones { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.soporte__anterior .boton { margin-left: auto; }
.soporte__anterior .mono { text-decoration: none; }
.en-gam__vacio { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.en-gam__icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--pastilla); color: var(--texto-3); }
.en-gam__icono .icono { width: 18px; height: 18px; }
.en-gam__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.en-gam__txt b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.en-gam__txt b.mono { font-size: 13px; font-weight: 500; }
.en-gam__txt > span { font-size: 12px; color: var(--texto-3); }
.en-gam__txt > .texto-peligro { color: var(--rojo-texto); }
.en-gam__lista { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--borde); border-radius: 12px; }
.en-gam__orden { display: grid; grid-template-columns: minmax(0, 1fr) auto 180px auto; align-items: center; gap: 12px 16px; padding: 12px 14px; border-top: 1px solid var(--borde-fila); }
.en-gam__orden:first-child { border-top: 0; }
.en-gam__orden.doble { box-shadow: inset 3px 0 0 var(--rojo); }
.en-gam__entrega { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.en-gam__entrega .mono { font-size: 12px; color: var(--texto-2); }
.en-gam__abrir { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.en-gam__abrir .icono { width: 14px; height: 14px; }

.montaje { display: flex; flex-direction: column; gap: 14px; }
.montaje > .aviso { margin: 0; }
.flow-campana__fecha-corta { font-size: 12px; color: var(--texto-2); }
.montaje-campana__resumen { margin-left: auto; font-size: 12px; color: var(--texto-3); }
.pasos-montaje { display: flex; flex-direction: column; margin: 0; padding: 6px 14px 10px; list-style: none; }
.pasos-montaje li { display: grid; grid-template-columns: 24px minmax(0, 1fr) fit-content(50%); align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--borde-fila); }
.pasos-montaje li:first-child { border-top: 0; }
.pasos-montaje__nodo { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--borde-fuerte); color: var(--texto-3); }
.pasos-montaje__nodo .icono { width: 13px; height: 13px; stroke-width: 2.6; }
.pasos-montaje__nodo .girador { --tam: 14px; --grosor: 2px; }
.pasos-montaje li[data-estado="corriendo"] .pasos-montaje__nodo { border-color: var(--acento); color: var(--acento); }
.pasos-montaje li[data-estado="hecho"] .pasos-montaje__nodo, .pasos-montaje li[data-estado="armada"] .pasos-montaje__nodo { border-color: var(--exito-borde); background: var(--exito-fondo); color: var(--exito); }
.pasos-montaje li[data-estado="fallo"] .pasos-montaje__nodo { border-color: var(--error-borde); background: var(--error-fondo); color: var(--rojo-texto); }
.pasos-montaje__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pasos-montaje__txt b { font-size: 13px; font-weight: 600; }
.pasos-montaje__txt span { font-size: 12px; color: var(--texto-3); overflow-wrap: anywhere; }
.pasos-montaje__txt .pasos-montaje__error { color: var(--rojo-texto); }
.pasos-montaje__nota { margin: 0; padding: 0 14px 10px; font-size: 12px; }
.pasos-montaje__enlaces { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; font-size: 12.5px; white-space: nowrap; }
.pasos-montaje__checks { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.montaje-campana__gam { margin: 0; font-size: 12.5px; }
.montaje__pedido { justify-content: flex-end; margin-bottom: 12px; }
.check-portal__detalle { flex-basis: 100%; font-size: 12px; color: var(--rojo-texto); overflow-wrap: anywhere; }
.pasos-montaje__txt .pasos-montaje__comentario { color: var(--texto-2); white-space: pre-line; }
.check-doble__marca { display: grid; place-items: center; width: 22px; height: 18px; flex: none; }
.check-doble__marca .icono { width: 22px; height: 18px; stroke-width: 2.4; }
.check-doble__uno, .check-doble__dos { stroke: var(--borde-fuerte); transition: stroke var(--dur-micro) var(--curva-estandar), opacity var(--dur-micro) var(--curva-estandar); }
.check-doble__dos { opacity: 0; }
.check-doble[data-portal="ok"] .check-doble__uno { stroke: var(--texto-3); }
.check-doble[data-portal="mal"] .check-doble__uno { stroke: var(--rojo-texto); }
.pasos-montaje li .pasos-montaje__nodo.nodo-visto { padding: 0; font: inherit; border-color: var(--exito-borde); background: var(--exito-fondo); color: var(--exito); transition: border-color var(--dur-micro) var(--curva-estandar); }
.nodo-visto .icono { width: 16px; height: 16px; stroke-width: 2.4; }
.pasos-montaje li button.pasos-montaje__nodo.nodo-visto { cursor: pointer; }
.pasos-montaje li button.pasos-montaje__nodo.nodo-visto:hover { border-color: var(--exito); }
.nodo-visto:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.montaje-campana__pie { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--borde-fila); }
.montaje-campana__pie:not(:has(> *)) { display: none; }
.montaje-campana__pie p, .montaje-campana__pie .aviso { margin: 0; }
.montaje-campana__cuando { font-size: 12px; }
.montaje-campana__acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.lineas-gam { grid-column: 2 / -1; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.lineas-gam > li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--borde-fila); }
.lineas-gam > li:first-child { border-top: 0; }
.lineas-gam__n { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--texto-4); text-align: right; }
.lineas-gam__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lineas-gam__txt b { font-size: 13px; font-weight: 600; color: var(--texto); }
.lineas-gam__txt span { font-size: 12px; color: var(--texto-3); }
.lineas-gam__cifra { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--texto-3); white-space: nowrap; }
.lineas-gam > li[data-estado="falta"] .lineas-gam__cifra { color: var(--ambar-texto); font-weight: 600; }
.lineas-gam__cifra .estado-icono .icono { width: 14px; height: 14px; }
.lineas-gam__gam { font-size: 12.5px; white-space: nowrap; }
.lineas-gam__nombres ol { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lineas-gam__nombres li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; font-size: 11.5px; color: var(--texto-3); }

@media (max-width: 760px) {
  .franja-7x24__grilla { font-size: 9px; }
  .revision { grid-template-columns: 28px minmax(0, 1fr) 16px; }
  .revision > .revision__valor, .revision > .revision__barra { grid-column: 2; grid-row: 2; }
  .revision > .sim-chev { grid-column: 3; grid-row: 1; }
  .revision__barra { width: 100%; }
  .revision__mas { padding-left: 14px; }
  .sim-reparto { grid-template-columns: 1fr; }
  .gam-hijos { margin-left: 4px; padding-left: 10px; }
  .gam-orden, .gam-linea { padding: 12px; }
  .gam-orden__po { margin-left: 0; }
  .escalon { grid-template-columns: 52px minmax(0, 1fr) 84px; gap: 8px; }
  .flow-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-atributos { grid-template-columns: 1fr; gap: 4px; }
  .flow-atributos dd + dt { margin-top: 8px; }
  .flow-creativos__grilla { grid-template-columns: 1fr; }
  .flow-campana__fechas { margin-left: 0; }
  .flow-envio { text-align: left; }
  .montaje-campana__resumen { margin-left: 0; flex-basis: 100%; }
  .pasos-montaje li { grid-template-columns: 24px minmax(0, 1fr); }
  .pasos-montaje__enlaces { grid-column: 2; justify-content: flex-start; }
  .lineas-gam > li { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .lineas-gam__cifra { grid-column: 2; grid-row: 2; }
  .lineas-gam__gam { grid-column: 3; grid-row: 1; }
  .arbol__seccion > button { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .arbol__seccion > button > span:not([class]) { min-width: 0; overflow-wrap: break-word; }
  .arbol__seccion .arbol__mezcla { display: none; }
  .arbol__sitio > button { grid-template-columns: 16px auto minmax(0, 1fr); padding-block: 4px; }
  .arbol__sitio > button > .arbol__cifra { grid-column: 2 / -1; text-align: left; }
  .etapa-origen { text-align: left; }
  .pedido-bloques, .pedido-pares { grid-template-columns: 1fr; }
  .soporte__fila { grid-template-columns: 96px minmax(0, 1fr); }
  .soporte__marco { width: 96px; height: 72px; }
  .soporte__acciones { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
  .en-gam__vacio { grid-template-columns: 40px minmax(0, 1fr); }
  .en-gam__vacio > .en-gam__abrir { grid-column: 2; justify-self: start; }
  .en-gam__orden { grid-template-columns: minmax(0, 1fr) auto; }
  .en-gam__entrega { grid-column: 1 / -1; }
  .en-gam__abrir { grid-column: 1 / -1; justify-self: end; }
}

.progreso-actual { display: grid; gap: 8px; margin-top: 24px; }
.progreso-actual__texto { display: flex; align-items: center; gap: 12px; }
.progreso-actual p { margin: 0; font-size: 13px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.barra { height: 4px; border-radius: 2px; background: var(--borde-fuerte); overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--acento); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform var(--dur-larga) var(--curva-salida); }

/* Fallo: una sola plantilla */
.plantilla-error { border-color: var(--error-borde); overflow: hidden; }
.plantilla-error__cab {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 20px 24px; background: var(--error-fondo); border-bottom: 1px solid var(--error-borde);
}
.plantilla-error__cab > .icono { width: 20px; height: 20px; margin-top: 2px; color: var(--rojo-texto); }
.plantilla-error__cab h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 24px; color: var(--texto); }
.plantilla-error__cab p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--texto-2); max-width: 70ch; }
.codigo-error {
  padding: 2px 10px; border: 1px solid var(--error-borde); border-radius: var(--pildora);
  font-size: 11.5px; color: var(--rojo-texto); white-space: nowrap;
}
.plantilla-error__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; padding: 20px 24px; }
.plantilla-error__grid:has(#fallo-salvo[hidden]) { grid-template-columns: 1fr; }
.plantilla-error__grid h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--texto); }
.tranquilo { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--texto-2); }
.tranquilo .icono { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--exito); }
.lista-pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-pasos li { counter-increment: paso; display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--texto-2); }
.lista-pasos li::before {
  content: counter(paso); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hundido); border: 1px solid var(--borde-fuerte);
  font: 600 11.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--texto);
}
.plantilla-error__registro { display: grid; gap: 12px; padding: 16px 24px 20px; border-top: 1px solid var(--borde); }
.botones-registro { display: flex; flex-wrap: wrap; gap: 8px; }

/* Tablas del trabajo */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--borde); border-radius: 12px; }
.tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabla th {
  padding: 10px 16px; text-align: left; background: var(--hundido); border-bottom: 1px solid var(--borde);
  font: 600 12px/16px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); white-space: nowrap;
}
.tabla th.derecha { text-align: right; }
.tabla td { padding: 12px 16px; border-bottom: 1px solid var(--borde); font-size: 13.5px; color: var(--texto-2); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla td.mono { font-family: var(--mono); font-size: 13px; color: var(--texto); white-space: nowrap; }
.tabla td a:not(.boton):not(.boton-gam) { color: var(--texto); text-decoration: underline; text-decoration-color: var(--texto-4); text-underline-offset: 3px; }
.tabla td a:not(.boton):not(.boton-gam):hover { text-decoration-color: currentColor; }
.tabla tr.fila-enlace { position: relative; cursor: pointer; }
.tabla tr.fila-enlace:hover td { background: var(--pastilla); }
.tabla tr.fila-enlace:hover a.fila-enlace__ir { text-decoration-color: currentColor; }
.tabla tr.fila-enlace a.fila-enlace__ir::after { content: ""; position: absolute; inset: 0; }
.tabla tr.fila-enlace td > span { position: relative; z-index: 1; }
.tabla .fila-hijas__alternar { display: inline-block; margin-top: 8px; }
.tabla tr.fila-hijas > td { padding: 14px 16px 18px; background: var(--hundido); }
.tabla-lineas__nombre { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linea-estado { display: inline-flex; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.linea-estado--si { color: var(--exito); }
.linea-estado--no { color: var(--rojo-texto); }
.boton-gam {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--texto-2); text-decoration: none; white-space: nowrap;
  background: var(--relleno-control);
}
.boton-gam .icono { width: 14px; height: 14px; }
.boton-gam:hover { background: var(--relleno-control-hover); color: var(--texto); }

/* Registro completo (admins y lectores) */
.registro-trabajo > summary { list-style: none; cursor: pointer; border-bottom: 0; }
.registro-trabajo > summary::-webkit-details-marker { display: none; }
.registro-trabajo > summary .icono { width: 18px; height: 18px; color: var(--texto-3); transition: transform var(--transicion); }
.registro-trabajo[open] > summary { border-bottom: 1px solid var(--borde); }
.registro-trabajo[open] > summary .icono { transform: rotate(90deg); }
.registro-trabajo__cuerpo { display: grid; gap: 12px; }

/* Formulario precargado desde un trabajo que fallo */
.nota-precarga {
  margin: 0; padding: 12px 16px; border: 1px solid var(--borde-fuerte); border-left: 3px solid var(--acento);
  border-radius: 10px; background: var(--hundido); font-size: 13.5px; line-height: 1.55; color: var(--texto-2);
}

@media (max-width: 760px) {
  .cab-trabajo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titulo" "meta" "acciones"; }
  .acciones-trabajo { justify-content: stretch; }
  .acciones-trabajo .boton { flex: 1 1 auto; }
  .titulo-trabajo h1 { font-size: 18px; }
  .panel__cab, .panel__cuerpo { padding-inline: 16px; }
  .desenlace { padding: 16px; }
  .plantilla-error__cab, .plantilla-error__grid, .plantilla-error__registro { padding-inline: 16px; }
  .plantilla-error__grid { grid-template-columns: 1fr; }
  .plantilla-error__cab { grid-template-columns: auto minmax(0, 1fr); }
  .codigo-error { grid-column: 2; justify-self: start; }
  .datos-trabajo { grid-template-columns: 1fr; row-gap: 2px; }
  .datos-trabajo dd { margin-bottom: 10px; }
  /* Etapas en vertical */
  .etapas { grid-template-columns: 1fr; }
  .etapa { grid-template-columns: 28px minmax(0, 1fr) auto; justify-items: start; align-items: center; gap: 12px; padding: 0 0 16px; text-align: left; }
  .etapa:last-child { padding-bottom: 0; }
  .etapa__linea { top: 30px; bottom: 2px; left: 13px; right: auto; width: 2px; height: auto; }
  .etapa__linea::after { transform: scaleY(var(--avance, 0)); transform-origin: top; }
  /* En movil las migas se reducen a volver al nivel anterior */
  /* Lineas como tarjetas: ID y enlace arriba, nombre y estado debajo */
  .tabla-lineas table, .tabla-lineas tbody { display: block; }
  .tabla-lineas thead { display: none; }
  .tabla-lineas tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--borde); }
  .tabla-lineas tr:last-child { border-bottom: 0; }
  .tabla-lineas td { display: block; padding: 0; border: 0; min-width: 0; }
  .tabla-lineas td:last-child { grid-column: 2; grid-row: 1; justify-self: end; }
  .tabla-lineas td:not(:first-child):not(:last-child) { grid-column: 1 / -1; }
  .tabla-lineas .tabla-lineas__nombre { width: auto; max-width: none; }
  .tabla-calidades th:nth-child(4), .tabla-calidades td:nth-child(4) { display: none; }
  .tabla-calidades th, .tabla-calidades td { padding-inline: 12px; }
  .migas li { display: none; }
  .migas li:nth-last-child(2) { display: inline-flex; }
  .migas li:nth-last-child(2)::before { content: "‹"; font-size: 18px; color: var(--texto-3); }
  .migas a { min-height: 44px; font-size: 14px; color: var(--texto-2); }
  .migas + .cab-trabajo { margin-top: -16px; }
}

/* ── Trabajos: lista con estado por icono y color ───────────────
   El estado de cada fila es un circulo de color con icono (su nombre va en
   aria-label y title); no se repite como texto en cada fila. */

#v-trabajos { gap: 20px; }
#v-trabajos .titulo-vista, #v-lr-tickets .titulo-vista, #v-lr-pedidos .titulo-vista { align-items: flex-start; flex-wrap: wrap; }
.bajada-titulo { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--texto-3); max-width: 70ch; }

/* Pestanas por estado, con su conteo */
.pestanas-estado { display: flex; gap: 8px; overflow-x: auto; border-bottom: 1px solid var(--borde); scrollbar-width: none; }
.pestanas-estado::-webkit-scrollbar { display: none; }
.pestanas-estado button {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 16px; border: 0; background: none;
  font: 500 14px var(--sans); color: var(--texto-3); white-space: nowrap; cursor: pointer;
}
.pestanas-estado button:hover, .pestanas-estado button[aria-selected="true"] { color: var(--texto); }
.pestanas-estado button[aria-selected="true"]::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px;
  height: 2px; border-radius: 2px; background: var(--acento);
}
.pestanas-estado .icono { width: 16px; height: 16px; }
.pestanas-estado [data-estado="curso"] .icono { color: var(--acento); }
.pestanas-estado [data-estado="fallo"] .icono { color: var(--rojo-texto); }
.pestanas-estado [data-estado="avisos"] .icono { color: var(--ambar-texto); }
.pestanas-estado [data-estado="listo"] .icono { color: var(--exito); }
.conteo {
  min-width: 24px; padding: 1px 8px; text-align: center;
  font: 500 12px/16px var(--sans); font-variant-numeric: tabular-nums; color: var(--texto-3);
  background: var(--hundido); border: 1px solid var(--borde); border-radius: var(--pildora);
}

/* Buscador y filtros en capsula */
.barra-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.barra-filtros > .segmentado { margin-top: 0; padding: 2px; }
.buscador { position: relative; flex: 1 1 280px; }
.buscador .icono { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--texto-3); pointer-events: none; }
.buscador .entrada {
  width: 100%; height: 40px; margin: 0; padding: 0 16px 0 44px;
  background: var(--superficie); border: 1px solid var(--borde-input); border-radius: var(--pildora);
  font: 14px var(--sans); color: var(--texto);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.buscador .entrada:hover { border-color: var(--texto-4); }
.buscador .entrada:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.barra-filtros .filtro, .seguimiento .filtro {
  width: auto; margin: 0; flex: 0 0 auto;
  height: 40px; padding: 0 40px 0 16px;
  appearance: none; background-color: var(--superficie);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a92ad' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  border: 1px solid var(--borde-input); border-radius: var(--pildora);
  font: 500 14px var(--sans); color: var(--texto-2); cursor: pointer;
}
.barra-filtros .filtro:hover, .seguimiento .filtro:hover { border-color: var(--texto-4); }
.barra-filtros .filtro[data-activo] { border-color: var(--acento); color: var(--texto); }
.filtro option { background: var(--superficie); color: var(--texto); }

.fila-resumen { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-height: 30px; margin-top: -8px; }
.resumen-conteo { margin: 0; font-size: 12.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.chips-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip-filtro {
  display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 4px 0 12px;
  background: var(--acento-suave); border: 1px solid var(--acento-borde);
  border-radius: var(--pildora); font-size: 13px; color: var(--texto);
}
.chip-filtro button {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 0; border-radius: 50%; background: none; color: var(--texto-3); cursor: pointer;
}
.chip-filtro button:hover { background: var(--hundido); color: var(--texto); }
.chip-filtro .icono { width: 14px; height: 14px; }
.enlace-boton { border: 0; background: none; padding: 4px; font: 500 13px var(--sans); color: var(--acento); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* La lista */
:root { --cols-trabajo: 32px minmax(0, 1fr) 132px 150px 112px; }
.lista-trabajos { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; }
.lista-trabajos ul { list-style: none; margin: 0; padding: 0; }
.lista-trabajos__cab {
  display: grid; grid-template-columns: var(--cols-trabajo); gap: 24px;
  padding: 12px 24px; background: var(--hundido); border-bottom: 1px solid var(--borde);
  font: 600 12px/16px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3);
}
.derecha { text-align: right; }
.fila-trabajo { border-bottom: 1px solid var(--borde); }
.fila-trabajo:last-child { border-bottom: 0; }
.fila-trabajo__main {
  position: relative; display: grid; grid-template-columns: var(--cols-trabajo);
  gap: 4px 24px; align-items: center; min-height: 76px; padding: 16px 24px;
  transition: background var(--transicion);
}
.fila-trabajo__main:hover { background: var(--hundido); }
.fila-trabajo__main:has(.fila-trabajo__enlace:focus-visible) { outline: 2px solid var(--acento); outline-offset: -2px; }
.fila-trabajo__nombre { display: grid; gap: 4px; min-width: 0; }
.fila-trabajo__titulo { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fila-trabajo__enlace {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 13.5px var(--mono); color: var(--texto); text-decoration: none;
}
.fila-trabajo__enlace::after { content: ""; position: absolute; inset: 0; }   /* toda la fila abre el trabajo */
.fila-trabajo__enlace:focus-visible { outline: none; }
.fila-trabajo .boton-gam:focus-visible { outline-offset: -2px; }
.fila-trabajo__sub { display: flex; min-width: 0; font-size: 13px; line-height: 18px; color: var(--texto-3); }
.fila-trabajo__sub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-trabajo__sub[data-tono="fallo"] { color: var(--rojo-texto); }
.fila-trabajo__sub[data-tono="avisos"] { color: var(--ambar-texto); }
.fila-trabajo__quien, .fila-trabajo__cuando {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; line-height: 18px; color: var(--texto-3);
}
.fila-trabajo__cuando { text-align: right; font-variant-numeric: tabular-nums; }
.fila-trabajo .copiar, .fila-trabajo .expandir, .fila-trabajo .boton-gam { position: relative; z-index: 1; }

.estado-icono {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid;
}
.estado-icono .icono { width: 16px; height: 16px; stroke-width: 2; }
.estado-icono--listo  { color: var(--exito); background: var(--exito-fondo); border-color: var(--exito-borde); }
.estado-icono--avisos { color: var(--ambar-texto); background: var(--ambar-fondo); border-color: var(--ambar-borde); }
.estado-icono--info   { color: var(--texto-3); background: var(--hundido); border-color: var(--borde-fuerte); }
.estado-icono--fallo  { color: var(--rojo-texto); background: var(--error-fondo); border-color: var(--error-borde); }
.estado-icono--curso  { color: var(--acento); background: var(--acento-suave); border-color: var(--acento-borde); }
.estado-icono--suelto { width: auto; height: auto; border: 0; background: none; }

.copiar {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px;
  border: 0; border-radius: 8px; background: var(--relleno-control); color: var(--texto-4); cursor: pointer;
  opacity: 0; transition: opacity var(--transicion), background var(--transicion), color var(--transicion);
}
.copiar .icono { width: 15px; height: 15px; }
.fila-trabajo__main:hover .copiar, .copiar:focus-visible, .copiar[data-copiado] { opacity: 1; }
.copiar:hover { background: var(--relleno-control-hover); color: var(--texto); }
.copiar[data-copiado] { color: var(--exito); }
.copiar--en-linea { display: inline-grid; vertical-align: middle; margin-left: 4px; opacity: 1; color: var(--texto-3); }

.expandir {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  min-height: 24px; padding: 0 10px 0 6px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--pildora); background: var(--superficie);
  font: 500 12px var(--sans); color: var(--texto-2); cursor: pointer;
}
.expandir::after { content: ""; position: absolute; inset: -6px -2px; }
.expandir:hover { color: var(--texto); border-color: var(--texto-4); }
.expandir .icono { width: 14px; height: 14px; transition: transform var(--dur-corta) var(--curva-salida); }
.expandir[aria-expanded="true"] > .icono:first-child { transform: rotate(90deg); }
.intentos { background: var(--hundido); border-top: 1px dashed var(--borde-fuerte); }
.intentos .fila-trabajo { border-bottom: 1px dashed var(--borde); }
.intentos .fila-trabajo__main { min-height: 56px; padding-left: 40px; }
.intentos .fila-trabajo__enlace { font-size: 12.5px; color: var(--texto-2); }
.intento-num { flex: none; font-size: 12.5px; font-weight: 600; color: var(--texto-3); }

.fila-esqueleto {
  display: grid; grid-template-columns: var(--cols-trabajo); gap: 24px; align-items: center;
  min-height: 76px; padding: 16px 24px; border-bottom: 1px solid var(--borde);
}
.esqueleto { display: block; height: 12px; }
.esqueleto.redondo { width: 32px; height: 32px; border-radius: 50%; }
.esqueleto.pildora { width: 88px; height: 22px; border-radius: var(--pildora); }
.esqueleto-textos { display: grid; gap: 8px; }

.lista-trabajos .vacio h2 { margin: 0 0 6px; font-size: 16px; color: var(--texto); }
.lista-trabajos .vacio p { margin: 0 auto 16px; max-width: 52ch; line-height: 1.5; }

@media (max-width: 760px) {
  .lista-trabajos__cab { display: none; }
  .fila-trabajo__main, .fila-esqueleto {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-areas: "estado nombre nombre" "estado cuenta cuando";
    gap: 8px 12px; align-items: start; padding: 16px;
  }
  .fila-trabajo__main > .estado-icono { grid-area: estado; }
  .fila-trabajo__main > .fila-trabajo__nombre { grid-area: nombre; }
  .fila-trabajo__main > .celda-cuenta { grid-area: cuenta; }
  .fila-trabajo__main > .fila-trabajo__quien { display: none; }
  .fila-trabajo__main > .fila-trabajo__cuando { grid-area: cuando; align-self: center; }
  .fila-trabajo .copiar { display: none; }   /* en movil se copia desde el trabajo */
  .fila-esqueleto > :nth-child(n+3) { display: none; }
  .intentos .fila-trabajo__main { padding-left: 24px; }
  .barra-filtros .filtro { flex: 1 1 calc(50% - 12px); min-width: 0; }
  .barra-filtros > .segmentado:not(.seg-empresa) { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .barra-filtros > .segmentado:not(.seg-empresa) .pestana { flex: 0 0 auto; white-space: nowrap; }
  .barra-filtros > .segmentado:not(.seg-empresa) .pestana:focus-visible { outline-offset: -2px; }
  .barra-filtros #f-fechas { flex-basis: 100%; }
  #nuevo-desde-trabajos { width: 100%; }
}

@media (pointer: coarse) {
  .copiar { opacity: 1; width: 44px; height: 44px; }
  .chip-filtro button { width: 36px; height: 36px; }
}

.lista-canales {
  --cols-trabajo: 32px minmax(200px, 1fr) repeat(2, 64px) 4px repeat(6, 64px) 80px;
  min-width: 960px;
}
.lista-canales .lista-trabajos__cab, .lista-canales .fila-trabajo__main { gap: 4px 8px; }
.lista-canales .lista-trabajos__cab { align-items: end; }
.lista-canales .fila-trabajo__titulo { flex-wrap: wrap; row-gap: 4px; }
.lista-canales .lista-trabajos__cab.lista-canales__grupos { padding-bottom: 0; border-bottom: 0; }
.lista-canales__grupo { padding-bottom: 6px; border-bottom: 1px solid var(--borde); text-align: center; }
.lista-canales__grupo--sitios { grid-column: 3 / span 2; }
.lista-canales__grupo--redes { grid-column: 6 / span 6; }
.canal {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font: 500 12px/1.2 var(--sans); letter-spacing: 0; text-transform: none; text-align: center; color: var(--texto-2);
}
.canal svg { width: 28px; height: 28px; }
.celda-estado { display: flex; justify-content: center; }
.leyenda-estados { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.apilado { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.apilado--junto { gap: 16px; }
.apilado > p, .apilado > .aviso { margin: 0; }
.apilado .barra-filtros .conmutador { margin-top: 0; }
.apilado .barra-filtros .conmutador .pestana { height: 32px; padding: 0 16px; }

.con-scroll-x:has(> .lista-canales) { container-type: inline-size; }
.lista-canales [data-detalle] { position: sticky; left: 0; width: 100cqw; }
.detalle-categoria { padding: 8px 24px 24px 64px; }
.detalle-categoria .datos-trabajo { row-gap: 24px; align-items: start; }
.detalle-categoria dd p { margin: 0; line-height: 1.6; }
.detalle-categoria dd p + p, .detalle-categoria dd p + div { margin-top: 8px; }
.detalle-categoria dd > .pestanas-estado { margin-bottom: 16px; }
.estado-con-texto { display: flex; align-items: flex-start; gap: 12px; }
.estado-con-texto + .estado-con-texto { margin-top: 12px; }
.estado-con-texto > .estado-icono { width: 24px; height: 24px; }
.estado-con-texto > .estado-icono .icono { width: 13px; height: 13px; }
.detalle-plataforma + .detalle-plataforma { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borde); }
.texto-legal + .texto-legal { margin-top: 16px; }
.texto-legal__fila { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; }
.texto-legal__fila > p { flex: 1 1 320px; }
.lista-fuentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 24px; margin: 0; padding: 0; list-style: none; }
.lista-fuentes a {
  display: inline-flex; align-items: center; gap: 8px; color: var(--texto);
  text-decoration: underline; text-decoration-color: var(--borde-fuerte); text-underline-offset: 3px;
}
.lista-fuentes a:hover { text-decoration-color: var(--texto-3); }
.lista-fuentes a > svg:first-child { flex: none; width: 16px; height: 16px; color: var(--texto-2); }
.lista-fuentes a > svg:last-child { flex: none; width: 14px; height: 14px; color: var(--texto-3); }
.lista-fuentes--columna { grid-template-columns: 1fr; }
.lista-fuentes li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lista-fuentes__caido a { color: var(--texto-3); text-decoration-style: dashed; }
.rejilla-paneles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px; align-items: start; }
.rejilla-paneles > .panel { margin: 0; }
.rejilla-paneles--llenar { grid-template-columns: minmax(0, 1fr); }
.grupo-logo { display: flex; align-items: center; gap: 12px; }
.grupo-logo__marcas { display: inline-flex; gap: 6px; flex: none; }
.grupo-logo__marcas svg { width: 28px; height: 28px; color: var(--texto); }
.aviso .lista-aviso { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.55; color: var(--texto-3); }

@media (max-width: 760px) {
  .lista-canales .lista-trabajos__cab { display: grid; padding: 12px 16px; }
  .lista-canales .lista-trabajos__cab.lista-canales__grupos { padding-bottom: 0; }
  .lista-canales .fila-trabajo__main { grid-template-columns: var(--cols-trabajo); grid-template-areas: none; align-items: center; padding: 16px; }
  .lista-canales .fila-trabajo__main > * { grid-area: auto; }
  .apilado .barra-filtros .conmutador { width: 100%; }
  .apilado .barra-filtros .conmutador .pestana { flex: 1 1 0; height: auto; min-height: 40px; padding: 6px 10px; line-height: 1.25; }
  .detalle-categoria { padding: 8px 16px 16px; }
  .detalle-categoria .datos-trabajo { grid-template-columns: 1fr; row-gap: 8px; }
  .detalle-categoria .datos-trabajo dd + dt { margin-top: 16px; }
}

/* ── Ajustes: accesos ───────────────────────────────────────────
   Personas agrupadas por rol (Administradores ambar, Lectores azul, Traffickers
   neutro), dar acceso en un cajon lateral y los ultimos cambios a demanda. */

#v-ajustes { gap: 24px; }
#v-ajustes .migas + .titulo-vista { margin-top: -12px; }
#v-ajustes .titulo-vista { align-items: flex-start; flex-wrap: wrap; }
.migas li:not(:has(a)):not([aria-current]) { color: var(--texto-3); }

.bloque-personas { display: grid; gap: 12px; }
.cab-seccion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cab-seccion h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--texto); }
.cab-seccion .barra-filtros { flex: 0 1 480px; }

.grupos-personas { overflow: hidden; }
.grupo-rol { --tono: transparent; --tono-texto: var(--texto-3); }
.grupo-rol--admin  { --tono: var(--ambar); --tono-texto: var(--ambar-texto); --tono-fondo: var(--ambar-fondo); --tono-borde: var(--ambar-borde); }
.grupo-rol--lector { --tono: var(--canal-punto); --tono-texto: var(--canal-texto); --tono-fondo: var(--canal-fondo); --tono-borde: var(--canal-borde); }
.grupo-rol + .grupo-rol { border-top: 1px solid var(--borde); }
.grupo-rol__titulo {
  margin: 0; padding: 14px 24px; display: flex; align-items: center; gap: 6px;
  background: var(--hundido); border-bottom: 1px solid var(--borde);
  font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tono-texto);
}
.lista-personas { list-style: none; margin: 0; padding: 0; }
.persona-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "ident ingreso acciones" "etiquetas ingreso acciones";
  align-items: center; gap: 8px 20px; padding: 16px 24px;
  box-shadow: inset 3px 0 0 var(--tono); transition: background-color var(--dur-larga) var(--curva-salida);
}
.persona-fila + .persona-fila { border-top: 1px solid var(--borde); }
.persona-fila:hover { background: var(--hundido); }
.persona-fila[data-nuevo] { background: var(--acento-suave); box-shadow: inset 3px 0 0 var(--acento); }
.persona-fila__ident { grid-area: ident; display: grid; grid-template-columns: auto 1fr; column-gap: 6px; min-width: 0; align-items: baseline; }
.persona-fila__correo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--texto); }
.persona-fila__nombre { grid-column: 1 / -1; font-size: 13px; color: var(--texto-3); }
.persona-fila__etiquetas { grid-area: etiquetas; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.persona-fila__acciones { grid-area: acciones; display: flex; gap: 4px; justify-content: flex-end; min-width: 88px; }
.persona-fila__ingreso {
  grid-area: ingreso; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 13px; color: var(--texto-3); font-variant-numeric: tabular-nums;
}
.persona-fila__ingreso .icono { width: 14px; height: 14px; }
.persona-fila__ingreso--nunca { color: var(--ambar-texto); }
.persona-fila__acciones .boton-icono .icono { width: 18px; height: 18px; }
.persona-fila--inactiva { box-shadow: none; }
.persona-fila--inactiva .persona-fila__correo { color: var(--texto-3); text-decoration: line-through; font-weight: 500; }
.texto-peligro { color: var(--rojo-texto); }
.texto-peligro:hover { background: var(--error-fondo); color: var(--rojo-texto); }
.boton.contorno.texto-peligro { color: var(--rojo-texto); border-color: var(--error-borde); }
.boton.contorno.texto-peligro:hover { background: var(--error-fondo); color: var(--rojo-texto); }

.lista-compartir {
  list-style: none; margin: 8px 0 0; padding: 0;
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 12px; overflow: hidden;
}
.lista-compartir li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 8px 8px 16px; }
.lista-compartir li + li { border-top: 1px solid var(--borde); }
.lista-compartir__ident { display: grid; flex: 1; min-width: 0; }
.lista-compartir__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--texto); }
.lista-compartir__detalle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--texto-3); }
.lista-compartir .icono { flex: none; width: 18px; height: 18px; color: var(--texto-3); }
.lista-compartir .vacio-mini { padding: 16px; font-size: 13px; }
.campo > .buscador { flex: none; margin-top: 8px; }
.dialogo--lateral .campo > .buscador .entrada { margin-top: 0; }

.etiqueta-rol {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; max-width: 100%;
  border-radius: var(--pildora); border: 1px solid var(--tono-borde, var(--borde-fuerte));
  background: var(--tono-fondo, var(--hundido)); color: var(--tono-texto, var(--texto));
  font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.etiqueta-rol--sin { --tono-fondo: var(--error-fondo); --tono-borde: var(--error-borde); --tono-texto: var(--rojo-texto); }

/* Herramientas de un trafficker: fichas que se prenden y apagan */
.etiqueta-herr {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--pildora); background: none;
  font: 500 13px var(--sans); color: var(--texto-3); white-space: nowrap; cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.etiqueta-herr:hover:not([disabled]) { border-color: var(--texto-4); color: var(--texto-2); }
.etiqueta-herr--si { color: var(--exito); background: var(--exito-fondo); border-color: var(--exito-borde); font-weight: 600; }
.etiqueta-herr--si[data-marca="larepublica"] { color: var(--lr-texto); background: var(--lr-fondo); border-color: var(--lr-borde); }
.etiqueta-herr[disabled] { cursor: default; opacity: .7; }
span.etiqueta-herr { cursor: default; }
.etiqueta-herr .icono-marca { height: 14px; width: auto; }

/* Ultimos cambios: plegable, cerrado por defecto */
.cambios > summary { list-style: none; }
.cambios > summary::-webkit-details-marker { display: none; }
.cambios__cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 12px 24px; cursor: pointer; border-radius: 16px;
}
.cambios__cab:hover { background: var(--hundido); }
.cambios__titulo { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; color: var(--texto); }
.cambios__titulo .icono { width: 18px; height: 18px; color: var(--texto-3); }
.cambios__accion { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--texto-3); }
.cambios__accion .icono { width: 16px; height: 16px; transition: transform var(--transicion); }
.cambios[open] .cambios__accion .icono { transform: rotate(90deg); }
.cambios__ocultar, .cambios[open] .cambios__ver { display: none; }
.cambios[open] .cambios__ocultar { display: inline; }
.cambios[open] > .cambios__cab { border-bottom: 1px solid var(--borde); border-radius: 16px 16px 0 0; }
.historial { list-style: none; margin: 0; padding: 0; }
.historial li { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: baseline; padding: 14px 24px; border-bottom: 1px solid var(--borde); }
.historial li:last-child { border-bottom: 0; }
.historial p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--texto-2); overflow-wrap: anywhere; }
.historial strong { font-weight: 600; color: var(--texto); }
.historial__cuando { font-size: 12.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }

/* Opciones de rol y herramientas (cajon y dialogo de cambio de rol) */
.opciones-rol { display: grid; gap: 8px; margin-top: 10px; }
.opcion {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; padding: 12px 16px;
  border: 1px solid var(--borde-input); border-radius: 12px; background: var(--hundido); cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.opcion:hover { border-color: var(--borde-fuerte); }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion__marca { width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--borde-fuerte); background: var(--superficie); box-shadow: inset 0 0 0 7px var(--superficie); transition: box-shadow var(--dur-corta) var(--curva-salida), background-color var(--dur-corta) var(--curva-estandar), border-color var(--dur-micro) var(--curva-estandar); }
.opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.opcion:has(input:checked) .opcion__marca { border-color: var(--acento); box-shadow: inset 0 0 0 3px var(--superficie); background: var(--acento); }
.opcion:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.opcion__titulo { display: block; font-size: 14px; font-weight: 600; color: var(--texto); }
.opcion__desc { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--texto-3); }
.opciones-herr { display: grid; gap: 4px; margin-top: 10px; }
.casilla-herr { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; color: var(--texto); cursor: pointer; }
.casilla-herr input { width: 18px; height: 18px; margin: 0; accent-color: var(--acento); }
.casilla-herr[data-marca="larepublica"] input { accent-color: var(--lr); }
.casilla-herr > svg:not(.icono-marca) { flex: none; stroke: var(--texto-3); }
.casilla-herr > .icono-marca { height: 18px; width: auto; }
.secciones { display: flex; flex-direction: column; gap: 12px; }
.secciones > .ayuda { margin: 0; }
.secciones__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.secciones__titulo { display: flex; align-items: baseline; gap: 10px; }
.secciones__titulo .etiqueta { margin: 0; }
.secciones__cuenta, .grupo-secciones__cuenta { font-size: 13px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.buscador.buscar-secciones { flex: none; max-width: 360px; }
.secciones__cuerpo { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; }
.grupo-secciones { display: flex; flex-direction: column; gap: 12px; }
.grupo-secciones + .grupo-secciones { padding-top: 20px; border-top: 1px solid var(--borde-fila); }
.grupo-secciones__cab { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.grupo-secciones__nombre { font-size: 15px; font-weight: 600; color: var(--texto); }
.grupo-secciones__cab .boton { margin-left: auto; }
.capsulas-marca { display: flex; flex-wrap: wrap; gap: 8px; }
.campo > .ayuda + .capsulas-marca, .campo > legend + .capsulas-marca { margin-top: 10px; }
.opcion-capsula__codigo { font: 500 11px var(--mono); letter-spacing: .6px; color: var(--texto-4); }
.opcion-capsula { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 8px; border-radius: var(--pildora); background: var(--hundido); border: 1px solid var(--borde-input); color: var(--texto-2); font-size: 13.5px; font-weight: 500; cursor: pointer; user-select: none; transition: background-color var(--dur-micro) var(--curva-estandar), border-color var(--dur-micro) var(--curva-estandar), color var(--dur-micro) var(--curva-estandar), transform var(--dur-micro) var(--curva-estandar); }
.opcion-capsula:hover { border-color: var(--borde-fuerte); color: var(--texto); }
.opcion-capsula:active { transform: scale(.97); }
.opcion-capsula input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.opcion-capsula:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.opcion-capsula__marca { width: 18px; height: 18px; flex: none; border-radius: var(--pildora); border: 1.5px solid var(--borde-fuerte); display: grid; place-items: center; color: var(--sobre-acento); transition: background-color var(--dur-micro) var(--curva-estandar), border-color var(--dur-micro) var(--curva-estandar); }
.opcion-capsula__marca .icono { width: 12px; height: 12px; stroke-width: 3; opacity: 0; transform: scale(.5); transition: opacity var(--dur-micro) var(--curva-estandar), transform var(--dur-corta) var(--curva-resorte); }
.opcion-capsula:has(input:checked) { background: var(--acento-suave); border-color: var(--acento-borde); color: var(--texto); }
.opcion-capsula:has(input:checked):hover { border-color: var(--acento); }
.opcion-capsula:has(input:checked) .opcion-capsula__marca { background: var(--acento); border-color: var(--acento); }
.opcion-capsula:has(input:checked) .opcion-capsula__marca .icono { opacity: 1; transform: none; }
.opcion-capsula:has(input:disabled), .opcion-capsula:has(input:disabled):hover { opacity: .45; cursor: not-allowed; border-color: var(--borde-input); color: var(--texto-2); }
.opcion-capsula:has(input:disabled):active { transform: none; }
.secciones__sin { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px; border-radius: 12px; border: 1px dashed var(--borde-fuerte); }
.secciones__sin p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--texto-2); }
.aviso.secciones__ignoradas { flex-direction: row; align-items: flex-start; gap: 12px; }
.aviso.secciones__ignoradas p { flex: 1; }
@media (prefers-reduced-motion: reduce) {
  .opcion-capsula, .opcion-capsula__marca .icono { transition: opacity var(--dur-quieta); }
  .opcion-capsula:active { transform: none; }
  .opcion-capsula__marca .icono { transform: none; }
}

/* Cajon lateral */
.dialogo--lateral {
  margin: 0 0 0 auto; width: min(480px, 100vw); height: 100vh; max-height: 100vh;
  border-radius: 0; border-width: 0 0 0 1px;
}
.dialogo--lateral[open] { animation: entrar-lado var(--dur-media) var(--curva-salida); }
.dialogo--lateral form { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.dialogo--lateral .dialogo__cuerpo { flex: 1; gap: 20px; align-content: start; }
.dialogo--lateral .dialogo__cab { align-items: flex-start; }
.dialogo--lateral .dialogo__cab .ayuda { margin-top: 4px; }
.dialogo--lateral .campo input { margin-top: 8px; }
#dlg-accion form { display: contents; }
.boton.peligro-lleno { height: 40px; padding: 0 18px; border-radius: var(--pildora); background: var(--rojo-lleno); border-color: var(--rojo-lleno); color: var(--sobre-rojo); font-weight: 600; }
.boton.peligro-lleno:not([disabled]):hover { filter: brightness(1.08); }

@media (max-width: 760px) {
  .grupo-rol__titulo { padding: 12px 16px; }
  .persona-fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ident ident" "etiquetas etiquetas" "ingreso acciones"; padding: 16px; }
  .persona-fila__acciones { min-width: 0; }
  .historial li { grid-template-columns: 1fr; gap: 2px; padding: 12px 16px; }
  .cambios__cab { padding-inline: 16px; }
  #abrir-dar-acceso { width: 100%; }
  .cab-seccion .barra-filtros { flex-basis: 100%; }
}

/* ── Girador ────────────────────────────────────────────────── */

.boton .girador { --tam: 16px; }
.centrado { display: grid; place-items: center; min-height: 40vh; }

/* ── Movil ──────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .lienzo { padding: 28px 18px 72px; }
  .tarjeta { padding: 22px 18px 24px; }
  .titulo-vista h1 { font-size: 21px; }
  #v-ac-personas .titulo-vista { flex-wrap: wrap; }
  .cuentas { flex-direction: column; }
  .datos { grid-template-columns: 1fr; row-gap: 2px; }
  .datos dd { margin-bottom: 10px; }
  .fila-tracker { grid-template-columns: 1fr 40px; }
  .fila-tracker select { grid-column: 1 / -1; }
  .acciones { flex-direction: column; align-items: stretch; }
  .acciones .contorno { justify-content: center; }
  .negado, .acceso { width: 100%; max-width: 352px; }
}

/* Aviso de sesion cerrada, en la pantalla de login. */
.nota-sesion {
  margin: 0; max-width: 280px; text-align: center;
  font-size: 12.5px; line-height: 1.5; color: var(--ambar-texto);
}

/* Un trabajo que fallo y despues se resolvio: el estado dice LISTO, pero la historia
   importa. Se marca en la lista de registros. */
.marca-tropiezo {
  align-self: flex-start;
  padding: 1px 7px; border-radius: 5px;
  background: var(--rojo-fondo); border: 1px solid var(--rojo-borde);
  font-size: 10.5px; letter-spacing: .3px; color: var(--rojo-texto);
}

/* ── Inicio: las herramientas de AdOps son lo principal ────────
   Tarjetas grandes con icono, nombre, estado, descripcion, cuentas y "Abrir". Una
   herramienta de otra marca del grupo lleva su logo y su color (La Republica, rojo). */

.herr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; }

.herramienta {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 24px; align-content: start;
  padding: 32px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px;
}
.herramienta::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--acento); }
.herramienta[data-marca="larepublica"]::before { background: var(--lr); }
.herramienta[aria-disabled="true"]::before { opacity: .6; }

.herramienta__icono {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--hundido); border: 1px solid var(--borde); color: var(--texto-2);
}
.herramienta__icono svg { stroke: currentColor; }
.herramienta[data-marca="larepublica"] .herramienta__icono { background: var(--lr-fondo); border-color: var(--lr-borde); }
.herramienta[data-identidad="accesos"]::before { background: var(--accesos); }
.herramienta[data-identidad="accesos"] .herramienta__icono { background: var(--accesos-fondo); border-color: var(--accesos-borde); color: var(--accesos-texto); }
.icono-marca { width: auto; aspect-ratio: 819 / 1024; }
.herramienta__icono .icono-marca { height: 30px; }

.herramienta__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.herramienta h2 {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  font-size: 18px; font-weight: 700; color: var(--texto); letter-spacing: -.01em;
}
.herramienta__desc { margin: 0; font-size: 14px; line-height: 1.55; color: var(--texto-3); max-width: 62ch; }
.herramienta__cuentas { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.herramienta .boton.menta { margin-top: 8px; }
.herramienta[aria-disabled="true"] .herramienta__icono { color: var(--texto-4); }

.boton.menta.compacto { height: 40px; padding: 0 18px; font-size: 14px; border-radius: var(--pildora); }
.boton.menta.compacto svg { stroke: var(--sobre-acento); }

@media (max-width: 640px) {
  .herramienta { padding: 24px; gap: 12px 16px; }
  .herramienta__icono { width: 44px; height: 44px; border-radius: 12px; }
}

.panel__pie { padding: 14px 24px; border-top: 1px solid var(--borde); font-size: 13.5px; }
.panel__pie a { color: var(--acento); font-weight: 500; text-decoration: none; }
.panel__pie a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vacio-mini { margin: 0; display: flex; align-items: center; gap: 8px; padding: 20px 24px; font-size: 14px; color: var(--texto-3); }
.vacio-mini .icono { width: 18px; height: 18px; color: var(--acento); }
.boton.fantasma { background: none; border-color: transparent; color: var(--texto-2); }
.boton.fantasma:hover { background: var(--relleno-control-hover); color: var(--texto); }
.boton.fantasma.compacto { height: 40px; padding: 0 16px; font-size: 14px; border-radius: var(--pildora); }

@media (max-width: 760px) {
  .panel__pie, .vacio-mini { padding-inline: 16px; }
}


/* Series del Informe de ocupación GAM: venta, uso propio y sin completar (MASTER.md 4.5). */
.marcador { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--texto-4); vertical-align: middle; }
.marcador--venta { background: var(--serie-venta); }
.marcador--uso { background: var(--serie-uso); }
.marcador--bono { background: var(--serie-bono); }
.marcador--vacio { background: var(--serie-vacio); box-shadow: inset 0 0 0 1.5px var(--serie-vacio-trama); }
.seg { display: block; min-width: 2px; flex: var(--parte, 0) 1 0; }
.seg--venta { background: var(--serie-venta); }
.seg--uso { background: var(--serie-uso); }
.seg--bono { background: var(--serie-bono); }
.seg--hueco { background: none; }
.seg--vacio { background-color: var(--serie-vacio); background-image: repeating-linear-gradient(135deg, var(--serie-vacio-trama) 0 1.5px, transparent 1.5px 6px); }
.barra-reparto { display: flex; gap: 2px; width: 120px; height: 8px; }
.barra-reparto .seg:first-child { border-radius: 4px 0 0 4px; }
.barra-reparto .seg:last-child { border-radius: 0 4px 4px 0; }
.barra-reparto .seg:only-child { border-radius: 4px; }
.barra-reparto--grande { width: 100%; height: 28px; }
.banda { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--e1), var(--filo); }
.banda__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.banda__titulo { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--texto-3); }
.banda__cifra { margin: 0; font: 500 30px/1.1 var(--mono); letter-spacing: -.5px; color: var(--texto); font-variant-numeric: tabular-nums; }
.banda__unidad { margin-left: 8px; font: 400 13px var(--sans); letter-spacing: 0; color: var(--texto-3); }
.banda__fill { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; color: var(--texto-3); }
.banda__fill strong { font: 500 20px var(--mono); color: var(--texto); }
.banda__leyenda { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.banda__leyenda li { display: flex; flex-direction: column; gap: 2px; }
.banda__nombre { display: flex; align-items: center; font-size: 13px; color: var(--texto-2); }
.banda__pct { font: 500 22px var(--mono); color: var(--texto); font-variant-numeric: tabular-nums; }
.banda__sub { font-size: 12.5px; color: var(--texto-3); }
.delta { display: inline-flex; align-items: center; gap: 4px; font: 500 12px var(--mono); color: var(--texto-2); }
.delta svg { color: var(--texto-3); }
.leyenda-serie { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12.5px; color: var(--texto-2); }
.leyenda-serie li { display: inline-flex; align-items: center; }
.boton-texto { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; border: 0; background: none; font: 500 13px var(--sans); color: var(--texto-2); cursor: pointer; }
.boton-texto:hover { color: var(--texto); }
.boton-texto svg { transition: transform var(--dur-corta) var(--curva-estandar); }
.boton-texto[aria-expanded="true"] svg { transform: rotate(90deg); }
.boton-texto--titulo { padding: 0; font: inherit; color: var(--texto); }
.grafico-mes { position: relative; padding: 8px 0 0 52px; }
.grafico-mes__guias { position: absolute; inset: 8px 0 28px 52px; pointer-events: none; }
.guia { position: absolute; left: 0; right: 0; top: calc((1 - var(--alto)) * 100%); border-top: 1px dashed var(--borde-linea); }
.guia span { position: absolute; right: 100%; top: -8px; margin-right: 10px; font: 400 11.5px var(--mono); color: var(--texto-4); white-space: nowrap; }
.guia--base { border-top: 1px solid var(--borde-fuerte); }
.grafico-mes__columnas { position: relative; height: 248px; display: grid; grid-template-columns: repeat(var(--columnas), minmax(0, 1fr)); gap: 10px; }
.col-mes { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; padding: 0; border: 0; border-radius: 8px; background: none; font: inherit; color: inherit; cursor: pointer; }
.col-pila { width: min(44px, 100%); height: calc(var(--alto) * 220px); display: flex; flex-direction: column; gap: 2px; transition: opacity var(--transicion); }
.col-pila .seg { min-height: 0; }
.col-pila .seg:first-child { border-radius: 4px 4px 0 0; }
.col-mes:hover .col-pila, .col-mes:focus-visible .col-pila { filter: brightness(1.12); }
.col-mes__mes { height: 20px; display: inline-flex; align-items: center; font: 500 12px var(--sans); color: var(--texto-3); }
.col-mes[aria-pressed="true"] .col-mes__mes { font-weight: 600; color: var(--texto); }
.col-mes[aria-pressed="true"]::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 16px; height: 2px; margin-left: -8px; border-radius: 2px; background: var(--acento); }
.grafico-mes--con-sel .col-mes[aria-pressed="false"] .col-pila { opacity: .35; }
.col-mes--parcial .col-pila { outline: 1.5px dashed var(--borde-fuerte); outline-offset: 3px; border-radius: 4px; }
.tooltip-mes { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 3; width: 210px; padding: 10px 12px; display: none; grid-template-columns: 1fr auto; gap: 4px 12px; text-align: left; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; box-shadow: var(--e3), var(--filo); font-size: 12.5px; color: var(--texto-2); pointer-events: none; }
.col-mes:hover .tooltip-mes, .col-mes:focus-visible .tooltip-mes { display: grid; }
.tooltip-mes strong { grid-column: 1 / -1; font-size: 13px; color: var(--texto); }
.tooltip-mes .v { font-family: var(--mono); color: var(--texto); text-align: right; }
.metodologia { display: flex; flex-direction: column; gap: 8px; }
.metodologia dl { margin: 0; padding: 16px 20px; display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; background: var(--hundido); border: 1px solid var(--borde); border-radius: 12px; font-size: 13px; }
.metodologia dt { font-weight: 600; color: var(--texto); }
.metodologia dd { margin: 0; color: var(--texto-2); }
.metodologia__cuerpo { display: flex; flex-direction: column; gap: 8px; }
.informe-gam :is(button, input) { scroll-margin-top: 200px; }
.filtros-informe :is(button, input) { scroll-margin-top: 0; }
.filtros-informe { position: sticky; top: var(--alto-barra, 0px); z-index: 20; margin: 0 -12px; padding: 12px 12px 10px; background: color-mix(in srgb, var(--fondo) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde-tenue); }
.tabla-reparto .tabla th, .tabla-reparto .tabla td { white-space: nowrap; }
.tabla-reparto .tabla tbody th { padding: 6px 8px; text-align: left; font: 500 13.5px var(--sans); letter-spacing: 0; text-transform: none; color: var(--texto); background: none; border-bottom: 1px solid var(--borde); }
.fila-boton { min-height: 36px; padding: 0 8px; display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 8px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.fila-boton:hover { background: var(--pastilla); }
.fila-nombre { display: inline-block; padding: 8px; }
.tabla-reparto .tabla tbody tr:last-child th { border-bottom: 0; }
.fila-boton .caja { opacity: 0; }
.fila-boton:hover .caja, .fila-boton:focus-visible .caja, .fila-sel .fila-boton .caja { opacity: 1; }
.tabla-reparto tr.fila-sel th, .tabla-reparto tr.fila-sel td { background: var(--acento-suave); }
.tabla-reparto tr.fila-tenue th, .tabla-reparto tr.fila-tenue td { opacity: .55; }

.filtros-informe { display: flex; flex-direction: column; gap: 12px; }
.filtros-informe .fila-resumen { margin-top: 0; }
.seg-empresa { margin-top: 0; max-width: 100%; }
.seg-empresa .pestana { flex: 0 0 auto; white-space: nowrap; }
.seg-empresa .logo-cuenta { height: 14px; }
.seg-empresa .pestana:not(.activa) .logo-cuenta { opacity: .8; }
.celda-cuenta { display: inline-flex; align-items: center; gap: 8px; color: var(--texto-2); }
.filtro-multi { position: relative; flex: 0 0 auto; }
.filtro-multi__boton {
  height: 40px; padding: 0 12px 0 16px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--superficie); border: 1px solid var(--borde-input); border-radius: var(--pildora);
  font: 500 14px var(--sans); color: var(--texto-2); white-space: nowrap; cursor: pointer;
  transition: border-color var(--transicion);
}
.filtro-multi__boton:hover { border-color: var(--texto-4); }
.filtro-multi__boton[data-activo], .filtro-multi__boton[aria-expanded="true"] { border-color: var(--acento); color: var(--texto); }
.filtro-multi__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.filtro-multi__flecha { flex: none; color: var(--texto-3); transition: transform var(--dur-corta) var(--curva-estandar); }
.filtro-multi__boton[aria-expanded="true"] .filtro-multi__flecha { transform: rotate(180deg); }
.conteo-filtro { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--pildora); background: var(--acento-suave); border: 1px solid var(--acento-borde); font: 500 11.5px var(--mono); color: var(--texto); }
.panel-multi {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  width: 300px; max-width: calc(100vw - 32px); min-inline-size: 0; margin: 0; padding: 6px;
  display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--e3), var(--filo);
}
.filtro-multi:last-child .panel-multi { left: auto; right: 0; }
.panel-multi__lista { max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.grupo-multi {
  width: 100%; min-height: 34px; margin-top: 4px; padding: 0 10px; display: flex; align-items: center; gap: 10px; flex: none;
  border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer;
  font: 600 12.5px var(--sans); color: var(--texto-3);
}
.grupo-multi:first-child { margin-top: 0; }
.grupo-multi:hover { background: var(--pastilla); color: var(--texto); }
.op-multi { position: relative; min-height: 36px; padding: 0 10px; display: flex; align-items: center; gap: 10px; flex: none; border-radius: 8px; cursor: pointer; font: 500 14px var(--sans); color: var(--texto-2); }
.op-multi--en-grupo { padding-left: 20px; }
.op-multi:hover { background: var(--pastilla); color: var(--texto); }
.op-multi input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.op-multi:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: -2px; }
.op-multi:has(input:checked) { color: var(--texto); }
.op-multi__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-multi__dato { margin-left: auto; font: 400 12px var(--mono); color: var(--texto-4); font-variant-numeric: tabular-nums; }
.caja { width: 16px; height: 16px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--borde-fuerte); border-radius: 4px; color: var(--sobre-acento); transition: background var(--transicion), border-color var(--transicion); }
.caja--si, .caja--parcial { background: var(--acento); border-color: var(--acento); }
.panel-multi__pie { margin-top: 6px; padding: 8px 4px 2px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--borde-fila); }
.insignia-parcial { margin-left: 6px; padding: 1px 6px; border-radius: var(--pildora); background: var(--pastilla); font: 500 10px var(--mono); letter-spacing: .6px; text-transform: none; color: var(--texto-3); vertical-align: 1px; }
.solo-imprimir { display: none; }
.estado-informe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fuente-gam { display: inline-flex; align-items: center; gap: 6px; }
.logo-gam { flex: none; width: 16px; height: 16px; fill: currentColor; color: var(--texto-3); }
.insignia-parcial--debajo { display: block; width: max-content; margin: 4px 0 -4px auto; }
.tabla-mes .tabla thead th.derecha:not(.col-total) { min-width: 124px; }

.tabla-mes .tabla th, .tabla-mes .tabla td { white-space: nowrap; }
.tabla-mes .tabla thead th:first-child, .tabla-mes .tabla tbody th { position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--borde-fila); }
.tabla-mes .tabla tbody th { min-width: 220px; padding: 12px 16px; text-align: left; font: 500 13.5px var(--sans); letter-spacing: 0; text-transform: none; color: var(--texto-2); background: var(--superficie); border-bottom: 1px solid var(--borde-fila); }
.tabla-mes .tabla td { padding: 12px 14px; border-bottom-color: var(--borde-fila); background: var(--superficie); }
.tabla-mes .tabla .fila-fuerte th, .tabla-mes .tabla .fila-fuerte td { font-weight: 600; color: var(--texto); }
.tabla-mes .tabla .fila-n1 th { padding-left: 46px; font-size: 13px; color: var(--texto-3); background: var(--hundido); }
.tabla-mes .tabla .fila-n1 td { font-size: 12.5px; color: var(--texto-3); background: var(--hundido); }
.tabla-mes .tabla .fila-sin-tipo th { color: var(--ambar-texto); }
.tabla-mes .tabla .fila-fill th, .tabla-mes .tabla .fila-fill td { border-top: 1px solid var(--borde); }
.tabla-mes .tabla .col-total { border-left: 1px solid var(--borde); font-weight: 600; color: var(--texto); }
.tabla-mes .tabla .col-sel { box-shadow: inset 0 0 0 100vmax var(--acento-suave); color: var(--texto); }
.tabla-mes .tabla tbody tr:last-child th, .tabla-mes .tabla tbody tr:last-child td { border-bottom: 0; }
.plegar-fila { width: 24px; height: 24px; margin: -4px 6px -4px -4px; display: inline-grid; place-items: center; vertical-align: middle; border: 0; border-radius: 6px; background: none; color: var(--texto-3); cursor: pointer; }
.plegar-fila:hover { background: var(--pastilla); color: var(--texto); }
.plegar-fila svg { transition: transform var(--dur-corta) var(--curva-estandar); }
.plegar-fila[aria-expanded="true"] svg { transform: rotate(90deg); }

@media (max-width: 760px) {
  .filtros-informe .barra-filtros > .seg-empresa { flex-basis: 100%; width: 100%; gap: 2px; }
  .seg-empresa .pestana { flex: 1 1 0; min-width: 0; padding: 0 8px; gap: 6px; justify-content: center; }
  .filtro-multi { flex: 1 1 calc(50% - 12px); min-width: 0; }
  .filtro-multi__boton { width: 100%; justify-content: space-between; }
  .panel-multi { position: fixed; top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; z-index: 60; }
  .panel-multi__lista { max-height: 55vh; }
}
@media (pointer: coarse) {
  .op-multi, .grupo-multi { min-height: 44px; }
}
@media (max-width: 760px) {
  .banda { padding: 18px; }
  .banda__cifra { font-size: 24px; }
  .banda__leyenda { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .banda__fill { align-items: flex-start; }
  .tabla-reparto .col-pct, .tabla-reparto .col-segunda { display: none; }
  .filtros-informe { position: static; margin: 0; padding: 0; background: none; backdrop-filter: none; border-bottom: 0; }
  .grafico-mes { padding-left: 0; }
  .grafico-mes__guias { left: 0; }
  .guia span { right: auto; left: 0; top: -16px; margin: 0; }
  .grafico-mes__columnas { gap: 4px; }
  .col-mes__mes { font-size: 11px; }
  .tooltip-mes { width: 180px; }
  .col-mes:nth-child(-n+3) .tooltip-mes { left: 0; transform: none; }
  .col-mes:nth-last-child(-n+3) .tooltip-mes { left: auto; right: 0; transform: none; }
  .informe-gam :is(button, input) { scroll-margin-top: 24px; }
  .metodologia dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .metodologia dd { margin-bottom: 8px; }
  .tabla-reparto .barra-reparto { width: 72px; }
  .tabla-reparto .tabla td, .tabla-reparto .tabla thead th { padding-left: 8px; padding-right: 8px; }
  .tabla-reparto .tabla tbody th { padding-left: 4px; padding-right: 4px; white-space: normal; }
  .fila-boton { gap: 8px; padding: 0 4px; }
}

/* Carga previa del informe: la caja guarda el alto; la ventana de carga (movimiento.css) tapa el lienzo.
   «Palabras» (Cargando + nombre de site que rota) es una de las animaciones de nucleo/carga.js. */
.carga-informe { min-height: 420px; }
.carga { margin: 0; height: 40px; display: flex; align-items: center; font: 600 20px var(--sans); color: var(--texto-3); }
.carga__palabras {
  position: relative; height: 40px; overflow: hidden;
  /* Difumina arriba y abajo sin depender del color de fondo (sirve en oscuro y en claro) */
  -webkit-mask-image: linear-gradient(transparent 10%, #000 30%, #000 70%, transparent 90%);
  mask-image: linear-gradient(transparent 10%, #000 30%, #000 70%, transparent 90%);
}
.carga__palabra {
  display: block; height: 100%; padding-left: 8px; line-height: 40px; white-space: nowrap;
  color: var(--acento);
  animation: carga-palabras calc(var(--ciclo-anillo) * 2.5) infinite; /* 12 s ≈ 1,2 s por site (10 sites) */
}
/* 10 sites + el primero repetido al final: cada paso sube 100 % con un sobrepaso de 2 % */
@keyframes carga-palabras {
  4%   { transform: translateY(-102%); }
  10%  { transform: translateY(-100%); }
  14%  { transform: translateY(-202%); }
  20%  { transform: translateY(-200%); }
  24%  { transform: translateY(-302%); }
  30%  { transform: translateY(-300%); }
  34%  { transform: translateY(-402%); }
  40%  { transform: translateY(-400%); }
  44%  { transform: translateY(-502%); }
  50%  { transform: translateY(-500%); }
  54%  { transform: translateY(-602%); }
  60%  { transform: translateY(-600%); }
  64%  { transform: translateY(-702%); }
  70%  { transform: translateY(-700%); }
  74%  { transform: translateY(-802%); }
  80%  { transform: translateY(-800%); }
  84%  { transform: translateY(-902%); }
  90%  { transform: translateY(-900%); }
  94%  { transform: translateY(-1002%); }
  100% { transform: translateY(-1000%); }
}
@media (prefers-reduced-motion: reduce) {
  .carga__palabra { animation: none; } /* queda quieto en el primer site */
}
@media (max-width: 760px) {
  .carga-informe { min-height: 300px; }
  .carga { font-size: 18px; }
}

/* Impresión pedida con «Exportar PDF» (data-imprimiendo en <html>): solo la vista, sin barras ni controles. Ctrl+P en otras pantallas no cambia. */
@media print {
  :root[data-imprimiendo] .barra-superior, :root[data-imprimiendo] .lateral, :root[data-imprimiendo] .migas,
  :root[data-imprimiendo] .barra-filtros, :root[data-imprimiendo] [data-no-imprimir] { display: none !important; }
  :root[data-imprimiendo] .app, :root[data-imprimiendo] .lienzo { display: block !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  :root[data-imprimiendo] .vista { animation: none !important; }
  :root[data-imprimiendo] .tabla-envoltura, :root[data-imprimiendo] .con-scroll-x { overflow: visible !important; }
  :root[data-imprimiendo] .tabla tr, :root[data-imprimiendo] .pedido-bloque { break-inside: avoid; }
  :root[data-imprimiendo] { background: var(--fondo); }
  :root[data-imprimiendo], :root[data-imprimiendo] * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  :root[data-imprimiendo] .grano { display: none; }
  :root[data-imprimiendo] .solo-imprimir { display: block !important; }
  :root[data-imprimiendo] .tabla-mes tr.fila-n1[hidden] { display: table-row !important; }
  :root[data-imprimiendo] .plegar-fila { display: none !important; }
  :root[data-imprimiendo] .banda { break-inside: avoid; box-shadow: none; }
  :root[data-imprimiendo] .metodologia__cuerpo[hidden] { display: flex !important; flex-direction: column; }
  :root[data-imprimiendo] .reparto-cuerpo[hidden] { display: block !important; }
  :root[data-imprimiendo] .tabla-reparto .boton-texto svg { display: none; }
  :root[data-imprimiendo] .metodologia .boton-texto svg { display: none; }
}

.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cifra { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--e1), var(--filo); }
.cifra__nombre { margin: 0; font-size: 13px; font-weight: 500; color: var(--texto-3); }
.cifra__valor { margin: 0; font: 500 30px/1.1 var(--mono); color: var(--texto); font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.cifra__sub { margin: 0; font-size: 12.5px; color: var(--texto-3); }
.frescura { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; color: var(--texto-3); }
.cab-vista-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.encabezado-bloque { margin: 0; font-size: 16px; font-weight: 600; color: var(--texto); }
.apilado--corto { gap: 12px; }
.apilado--minimo { gap: 4px; }
.tabla td.sin-corte { white-space: nowrap; }
.hallazgos { list-style: none; margin: 0; padding: 0; }
.hallazgo { display: grid; grid-template-columns: 32px minmax(0, 1fr) 210px 170px auto; align-items: center; gap: 16px 20px; padding: 18px 24px; border-top: 1px solid var(--borde-fila); }
.hallazgo:first-child { border-top: 0; }
.hallazgo--detalle { align-items: start; }
.hallazgo--detalle > .estado-icono { margin-top: 2px; }
.hallazgo__titulo a { color: inherit; text-decoration: none; }
.hallazgo__titulo a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hallazgo__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; color: var(--texto); }
.hallazgo__det { margin: 0; font-size: 13px; line-height: 1.5; color: var(--texto-3); overflow-wrap: anywhere; }
.hallazgo__det .mono { font-size: 12.5px; color: var(--texto-2); }
.hallazgo__det strong { font-weight: 600; color: var(--texto-2); }
.hallazgo__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.hallazgo__peso { display: flex; flex-direction: column; gap: 6px; }
.hallazgo__peso strong { font: 500 15px var(--mono); color: var(--texto); font-variant-numeric: tabular-nums; }
.hallazgo__peso span { font-size: 12px; color: var(--texto-3); }
.peso { position: relative; height: 8px; border-radius: 4px; background: var(--serie-vacio); overflow: hidden; }
.tabla td .peso { min-width: 96px; }
.tabla td.calor { color: var(--texto); }
.tabla td.calor[data-nivel="1"] { background: var(--calor-1); }
.tabla td.calor[data-nivel="2"] { background: var(--calor-2); }
.tabla td.calor[data-nivel="3"] { background: var(--calor-3); }
.tabla td.calor[data-nivel="4"] { background: var(--calor-4); font-weight: 600; }
.peso > i { position: absolute; inset: 0 auto 0 0; width: calc(var(--pct) * 1%); border-radius: 4px; background: var(--serie-uso); }

/* Informe de campaña (La República, MASTER.md 7.8): impresiones en --serie-venta, clics en --serie-uso, tasas neutras. */
.inf { display: flex; flex-direction: column; gap: 24px; }
.inf-campana { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.inf-campana + .inf-campana { padding-top: 24px; border-top: 1px solid var(--borde); }
.inf-cab { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.inf-cab__titular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.inf-cab__titulo { margin: 0; font-size: 16px; font-weight: 600; color: var(--texto); }
.inf-cab__tramo { margin-left: 4px; font-weight: 500; color: var(--texto-2); }
.inf-cab__datos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.inf-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 12px; border-block: 1px solid var(--borde); }
.inf-acciones > .boton-estado { margin-left: auto; }
.pdf-capsula { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 5px 0 14px; border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie-2); }
.pdf-capsula__nombre { margin-right: 4px; font-size: 13px; font-weight: 600; color: var(--texto); }
.pdf-capsula__edad { font-size: 12.5px; color: var(--texto-3); white-space: nowrap; }
.pdf-capsula__curso { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; color: var(--acento); }
.pdf-capsula__actualizar { width: 32px; height: 32px; border-radius: 999px; }
.pdf-capsula__corte { width: 1px; height: 20px; margin-inline: 2px; background: var(--borde); }
.boton.compacto.pdf-capsula__tema { width: 36px; height: 36px; min-height: 0; padding: 0; justify-content: center; border-radius: 999px; }
.inf-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.inf-filtros__campo { flex: 1 1 200px; min-width: 0; margin: 0; }
.inf-filtros__periodo { flex: 2 1 360px; min-width: 0; }
.inf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.inf-kpi { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 12px; }
.inf-kpi__etiqueta { font-size: 12.5px; color: var(--texto-3); }
.inf-kpi__valor { font-size: 24px; font-weight: 600; line-height: 1.15; color: var(--texto); font-variant-numeric: tabular-nums; }
.inf-kpi__nota { font-size: 12px; color: var(--texto-3); }
.inf-bloque { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px 22px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 12px; }
.inf-bloque__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.inf-bloque__titulo { margin: 0; font-size: 15px; font-weight: 600; color: var(--texto); }
.inf-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.inf-cumple { display: grid; grid-template-columns: minmax(120px, 1fr) 13em; align-items: center; gap: 8px 18px; }
.inf-cumple__nombre { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inf-cumple__nombre strong { font-size: 14px; font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.inf-cumple__dato { font-size: 13px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.inf-cumple__listo { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--exito); }
.inf-cumple__listo .icono { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.inf-pista { position: relative; height: 10px; border-radius: var(--pildora); background: var(--hundido); }
.inf-pista__relleno { position: absolute; inset: 0 auto 0 0; width: calc(var(--pct) * 1%); border-radius: inherit; background: var(--acento); }
.inf-pista__relleno--listo { background: var(--exito); }
.inf-pista__ritmo { position: absolute; top: -5px; left: calc(var(--pct) * 1%); width: 2px; height: 20px; background: var(--texto-3); }
.inf-svg { display: block; width: 100%; height: auto; overflow: visible; }
.inf-svg--dias { max-height: 240px; }
.inf-svg__base { stroke: var(--borde); stroke-width: 1; }
.inf-svg__barra { fill: var(--serie-venta); }
.inf-svg__clics { fill: none; stroke: var(--serie-uso); stroke-width: 2.5; stroke-linejoin: round; }
.inf-svg__punto { fill: var(--serie-uso); }
.inf-svg__eje { font-size: 11px; fill: var(--texto-3); }
.inf-svg__punto-tasa { fill: var(--texto-2); }
.inf-svg__tasa { fill: none; stroke: var(--texto-2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.inf-svg__referencia { stroke: var(--texto-3); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.inf-tasa { display: flex; flex-direction: column; gap: 4px; }
.inf-tasa .inf-svg { height: 80px; }
.inf-tasa__cab { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.inf-tasa__cab strong { font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.inf-calor { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); gap: 3px; font-variant-numeric: tabular-nums; }
.inf-calor__dia { font-size: 12px; font-weight: 600; text-align: center; color: var(--texto-3); }
.inf-calor__hora { display: flex; align-items: center; white-space: nowrap; font-size: 11px; color: var(--texto-3); }
.inf-calor__celda { display: flex; overflow: hidden; white-space: nowrap; align-items: center; justify-content: flex-end; height: 18px; padding: 0 6px; border-radius: 3px; font-size: 10.5px; color: var(--texto); background: var(--hundido); }
.inf-calor__celda[data-nivel="1"] { background: var(--calor-v-1); }
.inf-calor__celda[data-nivel="2"] { background: var(--calor-v-2); }
.inf-calor__celda[data-nivel="3"] { background: var(--calor-v-3); }
.inf-calor__celda[data-nivel="4"] { background: var(--calor-v-4); font-weight: 600; }
.inf-treemap { position: relative; width: 100%; aspect-ratio: 100 / 56; }
.inf-treemap__bloque { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; overflow: hidden; border: 3px solid transparent; border-radius: 12px; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--borde-fuerte); font-size: 13px; color: var(--texto); }
.inf-treemap__bloque strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.inf-treemap__pct { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.inf-treemap__cifra { font-size: 12.5px; color: var(--texto); font-variant-numeric: tabular-nums; }
.inf-treemap__bloque--depto { background-color: var(--calor-v-3); }
.inf-treemap__bloque--resto { background-color: var(--calor-v-1); }
.inf-treemap__bloque--fuera, .inf-treemap__bloque--sin, .inf-barra--trama > i { background-color: var(--serie-vacio); background-image: repeating-linear-gradient(135deg, var(--serie-vacio-trama) 0 1.5px, transparent 1.5px 6px); }
.inf-tabla { overflow-x: auto; }
.inf-barra { position: relative; display: block; min-width: 80px; height: 8px; overflow: hidden; border-radius: var(--pildora); background: var(--hundido); }
.inf-barra > i { position: absolute; inset: 0 auto 0 0; width: calc(var(--pct) * 1%); border-radius: inherit; background-color: var(--serie-venta); }
.inf-ranking { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(80px, 2fr) 90px 100px 100px; align-items: center; gap: 12px; min-height: 34px; font-size: 13.5px; }
.inf-ranking__nombre { color: var(--texto); overflow-wrap: anywhere; }
.inf-ranking__cifra { text-align: right; white-space: nowrap; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.inf-paises { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
@media (max-width: 760px) {
  .inf-dos { grid-template-columns: minmax(0, 1fr); }
  .inf-cumple { grid-template-columns: minmax(120px, 1fr) 8.5em; }
  .inf-bloque { padding: 16px; }
  .inf-ranking { grid-template-columns: minmax(0, 1fr) 90px; }
  .inf-ranking > :nth-child(2), .inf-ranking > :nth-child(4), .inf-ranking > :nth-child(5) { display: none; }
  .inf-treemap { aspect-ratio: 100 / 90; }
  .inf-calor__celda { padding: 0; font-size: 0; }
}
.actor { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--texto-3); }
.actor strong { font-size: 13px; font-weight: 600; color: var(--texto-2); }
a.enlace-texto { color: var(--texto); text-decoration: underline; text-decoration-color: var(--texto-4); text-underline-offset: 3px; }
a.enlace-texto:hover { text-decoration-color: currentColor; }
.seguimiento { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; font-size: 12.5px; color: var(--texto-3); }
.hallazgo__lineas { list-style: none; margin: 0; padding: 0; background: var(--superficie-2); border: 1px solid var(--borde-input); border-radius: 14px; }
.hallazgo-linea { display: grid; grid-template-columns: 28px minmax(0, 1fr) 210px auto; align-items: start; gap: 12px 20px; padding: 14px 16px; border-top: 1px solid var(--borde-fila); }
.hallazgo-linea:first-child { border-top: 0; }
.hallazgo-linea .estado-icono { width: 28px; height: 28px; }
.hallazgo-linea .estado-icono .icono { width: 14px; height: 14px; }
.hallazgo__titulo--linea { font-size: 13px; font-weight: 500; }
.hallazgo__titulo--linea .mono { color: var(--texto); }
.hallazgo__toggles { grid-column: 2 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.hallazgo__toggles > .plegable, .hallazgo__toggles > .desglose { align-self: stretch; }
.hallazgo__toggles .hallazgo__lineas { margin: 4px 0 8px; }
.hallazgo__hacer { padding: 4px 0 8px 20px; }
.desglose { list-style: none; margin: 0 0 4px; padding: 0; background: var(--superficie-2); border: 1px solid var(--borde-input); border-radius: 14px; }
.desglose > li + li { border-top: 1px solid var(--borde-fila); }
.desglose__fila { display: grid; grid-template-columns: 14px 40px minmax(0, 1fr) 72px 120px 52px 72px; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; border: 0; background: none; font: 400 13px var(--sans); color: var(--texto-2); text-align: left; cursor: pointer; }
.desglose__fila:hover { color: var(--texto); }
.desglose__fila:focus-visible { outline-offset: -2px; }
.hallazgo__toggles--suelto { gap: 0; }
.desglose__fila .icono { color: var(--texto-3); transition: transform var(--dur-corta) var(--curva-estandar); }
.desglose__fila[aria-expanded="true"] .icono { transform: rotate(90deg); }
.desglose__fila .mono { color: var(--texto); font-variant-numeric: tabular-nums; }
.desglose__que { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desglose__n { font-size: 12px; color: var(--texto-3); }
.desglose__lineas { list-style: none; margin: 0; padding: 0 16px 10px 42px; }
.desglose__linea { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 6px 0; font-size: 12.5px; color: var(--texto-3); border-top: 1px solid var(--borde-fila); }
.desglose__linea .mono { color: var(--texto-2); }
@media (max-width: 1100px) {
  .hallazgo { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .hallazgo__peso, .actor { grid-column: 2; }
  .hallazgo > .boton, .hallazgo > .boton-gam, .hallazgo > .hallazgo__acciones { grid-column: 3; grid-row: 1; }
  .hallazgo-linea { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .hallazgo-linea > .hallazgo__peso { grid-column: 2; }
  .hallazgo-linea > .hallazgo__acciones { grid-column: 3; grid-row: 1; }
  .desglose__fila { grid-template-columns: 14px 40px minmax(0, 1fr) auto auto; padding: 10px 12px; }
  .desglose__barra, .desglose__n { display: none; }
}
@media (max-width: 900px) { .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .cifras { grid-template-columns: minmax(0, 1fr); }
  .hallazgo { padding: 16px; gap: 12px; grid-template-columns: 32px minmax(0, 1fr); }
  .hallazgo > .boton, .hallazgo > .boton-gam, .hallazgo > .hallazgo__acciones { grid-column: 2; grid-row: auto; justify-self: start; }
  .hallazgo__toggles { grid-column: 1 / -1; }
  .desglose__lineas { padding: 0 12px 10px 12px; }
  .hallazgo-linea { padding: 12px; gap: 10px; grid-template-columns: 28px minmax(0, 1fr); }
  .hallazgo-linea > .hallazgo__acciones { grid-column: 2; grid-row: auto; justify-self: start; }
}

/* Roadmap de Recursos Digitales (tipo roadmap): franja del año, calendario por trimestre, novedades y productos */
.roadmap .favicon-sitio { vertical-align: -3px; }
.franja .panel__cab .chip-dato b { font-family: var(--sans); }
.franja__marco { position: relative; overflow-x: auto; padding: 8px 24px 0; }
.franja__lienzo { min-width: 760px; }
.franja__meses, .franja__carril { display: grid; grid-template-columns: 168px minmax(0, 1fr); }
.franja__meses > div, .franja__reja { display: grid; grid-template-columns: var(--meses); }
.franja__meses span { padding: 4px 0 8px 6px; font-size: 12px; color: var(--texto-4); }
.franja__meses .franja__inicio-t { color: var(--texto-3); font-weight: 600; }
.franja__cuerpo { position: relative; }
.franja__reja { position: absolute; inset: 0 0 0 168px; pointer-events: none; }
.franja__reja span { border-left: 1px solid var(--borde-fila); }
.franja__reja .franja__inicio-t { border-left-color: var(--borde-fuerte); }
.franja__hoy { position: absolute; top: -26px; bottom: 0; width: 0; border-left: 2px solid var(--acento); }
.franja__hoy span { position: absolute; top: 0; left: 4px; font-size: 12px; font-weight: 600; color: var(--acento); }
.franja__carril { position: relative; border-top: 1px solid var(--borde); transition: opacity var(--dur-micro) var(--curva-estandar); }
.franja__carril.es-tenue { opacity: .45; }
.franja__nombre { grid-row: span 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 12px 12px 12px 0; border: 0; background: none; text-align: left; font: 600 14px var(--sans); color: var(--texto-2); cursor: pointer; }
.franja__nombre:hover, .franja__nombre[aria-pressed="true"] { color: var(--texto); }
.franja__nombre[aria-pressed="true"] span:last-child { text-decoration: underline 2px var(--acento); text-underline-offset: 6px; }
.franja__iconos { display: flex; flex-wrap: wrap; gap: 4px; }
.franja__pista { position: relative; height: calc(var(--filas) * 12px + 20px); margin-top: 12px; }
.franja__marca { position: absolute; top: calc(var(--fila) * 12px); min-width: 6px; height: 8px; padding: 0; border: 0; border-radius: var(--pildora); background: var(--texto-4); cursor: pointer; transition: background-color var(--dur-micro) var(--curva-estandar), opacity var(--dur-micro) var(--curva-estandar); }
.franja__marca::before { content: ""; position: absolute; inset: -3px -2px; }
.franja__marca:hover, .franja__marca:focus-visible { background: var(--texto); }
.franja__marca--mes { height: 6px; margin-top: 1px; background: var(--borde-fuerte); }
.franja__marca.es-elegido { background: var(--acento); box-shadow: none; }
.franja__marca.es-tenue { background: var(--borde); box-shadow: none; }
.franja__pie { grid-column: 2; display: grid; grid-template-columns: 90fr 91fr 92fr 92fr; padding-bottom: 10px; }
.franja__pie span { display: flex; flex-wrap: wrap; gap: 4px 10px; padding-left: 6px; }
.franja__cuenta { padding: 0; border: 0; background: none; font: 400 12.5px var(--sans); color: var(--texto-3); text-decoration: underline 1px var(--texto-4); text-underline-offset: 3px; cursor: pointer; }
.franja__cuenta:hover { color: var(--texto); text-decoration-color: currentColor; }
.franja__cuenta--confirmar { font-style: italic; }
.franja__tip { position: absolute; z-index: 3; transform: translate(-50%, -100%); display: grid; gap: 2px; width: max-content; max-width: 220px; padding: 8px 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; box-shadow: var(--e3), var(--filo); font-size: 12.5px; color: var(--texto-3); pointer-events: none; }
.franja__tip strong { font-size: 13px; color: var(--texto); }
.franja__leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; padding: 12px 24px 16px; }
.franja__muestra { display: inline-block; width: 24px; height: 8px; border-radius: var(--pildora); background: var(--texto-4); }
.franja__muestra--mes { height: 6px; margin-left: 8px; background: var(--borde-fuerte); }
.roadmap .pestanas-estado .favicon-sitio { vertical-align: 0; }
.roadmap__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.roadmap__cuerpo > * { min-width: 0; }
.trimestres { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px 32px; }
.trimestre h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--texto); }
.trimestre h3 .conteo { margin-left: auto; }
.trimestre__lista { list-style: none; margin: 0; padding: 0; }
.evento-rm { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 8px; margin: 0 -8px; border-radius: 10px; border-bottom: 1px solid var(--borde-fila); }
.evento-rm:last-child { border-bottom: 0; }
.evento-rm:hover { background: var(--pastilla); }
.evento-rm__cuando { padding-top: 1px; font-size: 12.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.evento-rm__que { display: grid; gap: 3px; }
.evento-rm__titulo { font-size: 14px; font-weight: 500; color: var(--texto); }
.evento-rm--confirmar .evento-rm__cuando { font-style: italic; color: var(--texto-4); }
.evento-rm__meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12.5px; color: var(--texto-4); }
.evento-rm:hover .evento-rm__meta { color: var(--texto-3); }
.evento-rm__portales { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.evento-rm__acciones { display: flex; gap: 4px; opacity: 0; transition: opacity var(--dur-micro) var(--curva-estandar); }
.evento-rm:hover .evento-rm__acciones, .evento-rm:focus-within .evento-rm__acciones { opacity: 1; }
.novedades { position: sticky; top: 24px; }
.novedades .panel__cuerpo { max-height: calc(100vh - 160px); overflow-y: auto; padding: 16px 24px 24px; }
.novedades__lista, .novedades__lista ul { list-style: none; margin: 0; padding: 0; }
.novedades__dia + .novedades__dia { margin-top: 16px; }
.novedades__fecha { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 600; color: var(--texto-3); }
.novedad { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde-fila); }
.novedades__dia:last-child .novedad:last-child { border-bottom: 0; }
.novedad__icono { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pastilla); color: var(--texto-2); }
.novedad--quitado .novedad__icono { background: var(--hundido); color: var(--texto-4); }
.novedad__texto { display: grid; gap: 4px; min-width: 0; }
.novedad__texto p { margin: 0; font-size: 13.5px; color: var(--texto-2); }
.novedad__evento { padding: 0; border: 0; background: none; font: 500 13.5px var(--sans); color: var(--texto); text-align: left; text-decoration: underline 1px var(--texto-4); text-underline-offset: 3px; cursor: pointer; }
span.novedad__evento { text-decoration: line-through 1px var(--texto-4); cursor: default; }
button.novedad__evento:hover { text-decoration-color: currentColor; }
.novedad__cambios { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--texto-3); }
.novedad__cambios span { color: var(--texto-4); }
.novedad__cambios b { font-weight: 500; color: var(--texto); }
.novedad__nota { padding-left: 10px; border-left: 2px solid var(--borde-fuerte); font-style: italic; }
.segmentado--marcas { flex-wrap: wrap; margin-top: 0; border-radius: 22px; }
.productos-rm { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.productos-rm > li { display: flex; }
.producto-rm { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 16px 18px; border: 1px solid var(--borde-input); border-radius: 14px; background: var(--superficie-2); text-align: left; font: inherit; color: var(--texto); cursor: pointer; transition: border-color var(--dur-micro) var(--curva-estandar); }
.producto-rm:hover { border-color: var(--borde-fuerte); }
.producto-rm__marca { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texto-3); }
.dialogo__cab h2 .producto-rm__marca { display: flex; margin-bottom: 4px; font-weight: 400; }
.producto-rm__nombre { font-size: 15px; font-weight: 600; line-height: 1.3; }
.producto-rm__datos { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 12.5px; }
.producto-rm__datos dt { color: var(--texto-4); }
.producto-rm__datos dd { margin: 0; color: var(--texto-2); }
.producto-rm__ver { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.producto-rm:hover .producto-rm__ver { color: var(--texto); }
.producto-rm__ver .icono { width: 16px; height: 16px; transition: transform var(--dur-micro) var(--curva-estandar); }
.producto-rm:hover .producto-rm__ver .icono { transform: translateX(2px); }
.fechas-rm { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fecha-rm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 12px; align-items: end; }
.formulario-rm .segmentado { flex-wrap: wrap; margin-top: 0; }
.formulario-rm .segmentado .pestana { cursor: pointer; }
.formulario-rm .segmentado .pestana:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.formulario-rm textarea { resize: vertical; }
.formatos-rm { display: grid; margin: 12px 0 0; padding: 0; list-style: none; }
.formato-rm { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--borde-fila); }
.formato-rm:last-child { border-bottom: 0; }
.formato-rm__que { display: grid; gap: 2px; min-width: 0; }
.formato-rm__nombre { font-size: 14px; font-weight: 500; color: var(--texto); }
.formato-rm__url { overflow-wrap: anywhere; }
.tono-rojo   { --tono: var(--tono-rojo);   --tono-texto: var(--tono-rojo-texto); }
.tono-azul   { --tono: var(--tono-azul);   --tono-texto: var(--tono-azul-texto); }
.tono-morado { --tono: var(--tono-morado); --tono-texto: var(--tono-morado-texto); }
.punto-tono { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--tono); vertical-align: 1px; }
.franja__carril[class*="tono-"] .franja__marca { background: color-mix(in srgb, var(--tono) 85%, transparent); }
.franja__carril[class*="tono-"] .franja__marca--mes { background: color-mix(in srgb, var(--tono) 40%, var(--borde-fuerte)); }
.franja__carril[class*="tono-"] .franja__marca:hover, .franja__carril[class*="tono-"] .franja__marca:focus-visible { background: var(--tono); }
.franja__carril[class*="tono-"] .franja__marca.es-elegido { background: var(--tono); }
.franja__carril[class*="tono-"] .franja__marca.es-tenue { background: var(--borde); }
.evento-rm[class*="tono-"] { box-shadow: inset 3px 0 0 var(--tono); border-radius: 0 10px 10px 0; }
.evento-rm[class*="tono-"]:hover { background: color-mix(in srgb, var(--tono) var(--tono-tinte), var(--superficie)); }
.evento-rm[class*="tono-"] .evento-rm__categoria { color: var(--tono-texto); }
.producto-rm[class*="tono-"] { box-shadow: inset 0 3px 0 var(--tono); }
.roadmap__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.roadmap__cab .resumen-conteo { margin: 0; }
.roadmap__cab .segmentado { margin-top: 0; }
.saltos-rm { position: sticky; top: var(--alto-barra, 0px); z-index: 20; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; background: var(--fondo); }
.salto-rm { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border: 1px solid var(--borde); border-radius: var(--pildora); background: var(--relleno-control); font: 600 14px var(--sans); color: var(--texto); cursor: pointer; transition: border-color var(--dur-micro) var(--curva-estandar), background-color var(--dur-micro) var(--curva-estandar); }
.salto-rm:hover { border-color: var(--borde-fuerte); background: var(--relleno-control-hover); }
.categoria-rm { scroll-margin-top: calc(var(--alto-barra, 0px) + 72px); }
.categoria-rm h2:focus { outline: none; }
.categoria-rm h2:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.categoria-rm__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.categoria-rm__cab h2 { display: flex; align-items: center; margin: 0 0 4px; font-size: 26px; font-weight: 700; letter-spacing: -.015em; }
.categoria-rm__cab h2 .punto-tono { width: 10px; height: 10px; margin-right: 10px; }
.categoria-rm__cab p { margin: 0; max-width: 72ch; }
.categoria-rm__cab p.categoria-rm__pendiente { margin-top: 4px; font-style: italic; }
.categoria-rm__marcas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.categoria-rm__sub { margin: 8px 0 0; font-size: 16px; font-weight: 600; color: var(--texto); }
.cuartos-rm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cuarto-rm { padding: 16px 18px; border: 1px solid var(--borde-input); border-radius: 14px; background: var(--superficie-2); box-shadow: inset 0 3px 0 var(--tono, var(--borde-fuerte)); }
.cuarto-rm h3 { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tono-texto, var(--texto-3)); }
.cuarto-rm__lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cuarto-rm__lista li { position: relative; padding-left: 16px; font-size: 13.5px; color: var(--texto-2); }
.cuarto-rm__lista li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--tono, var(--texto-4)); }
.cuarto-rm__lista li span { color: var(--texto-4); }
.cuarto-rm__lista .cuarto-rm__confirmar { font-style: italic; color: var(--texto-3); }
.cuarto-rm__lista .cuarto-rm__confirmar::before { background: none; box-shadow: inset 0 0 0 1.5px var(--tono, var(--texto-4)); }
@media (max-width: 1180px) {
  .roadmap__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .cuartos-rm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .novedades { position: static; order: -1; }
  .novedades .panel__cuerpo { max-height: 360px; }
}
@media (max-width: 760px) {
  .franja__marco { padding: 8px 0 0; }
  .franja__lienzo { min-width: 700px; padding-right: 16px; }
  .franja__meses, .franja__carril { grid-template-columns: 128px minmax(0, 1fr); }
  .franja__reja { left: 128px; }
  .franja__nombre, .franja__meses > span { position: sticky; left: 0; z-index: 2; padding-left: 16px; background: var(--superficie); }
  .franja__leyenda { padding: 12px 16px 16px; }
  .cuartos-rm { grid-template-columns: minmax(0, 1fr); }
  .evento-rm { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .evento-rm__acciones { opacity: 1; }
}
@media (pointer: coarse) { .evento-rm__acciones { opacity: 1; } }

/* Testigos de publicación de La República: etapa del ticket y página pública /verificar (MASTER.md 7.7 y 8) */
.campanas-testigos { display: flex; flex-direction: column; gap: 24px; }
.grupo-testigos { display: flex; flex-direction: column; gap: 10px; }
.grupo-testigos__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.linea-testigos { border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie-2); }
.linea-testigos__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 16px; }
.linea-testigos__titulo { flex: 1; min-width: 200px; font-size: 14px; }
.linea-testigos__cuerpo { display: flex; flex-direction: column; gap: 14px; padding: 0 16px 16px; }
.linea-testigos__acciones { display: flex; justify-content: flex-end; }
.testigos-descargas { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.boton.contorno.boton-pdf--claro { background: var(--pdf-claro-fondo); border-color: var(--pdf-claro-borde); color: var(--pdf-claro-texto); }
.boton.contorno.boton-pdf--oscuro { background: var(--pdf-oscuro-fondo); border-color: var(--pdf-oscuro-borde); color: var(--pdf-oscuro-texto); }
.boton.contorno.boton-pdf--claro .icono { stroke: var(--pdf-claro-texto); }
.boton.contorno.boton-pdf--oscuro .icono { stroke: var(--pdf-oscuro-texto); }
.boton.contorno.boton-pdf--claro:hover:not([disabled]), .boton.contorno.boton-pdf--oscuro:hover:not([disabled]) { border-color: var(--acento); }
.linea-testigos__titulo .mono { font-family: var(--mono); }
.galeria-testigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.testigo-mini { display: flex; flex-direction: column; width: 100%; padding: 0; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--texto); font: inherit; text-align: left; overflow: hidden; cursor: pointer; transition: border-color var(--dur-corta) var(--curva-salida); }
.testigo-mini:hover, .testigo-mini:focus-visible { border-color: var(--acento-borde); }
.testigo-mini__imagen { display: grid; place-items: start center; height: 132px; overflow: hidden; background: var(--hundido); border-bottom: 1px solid var(--borde); }
.testigo-mini__imagen img { width: 100%; height: auto; }
.testigo-mini__imagen img:not([src]) { visibility: hidden; }
.testigo-mini--movil .testigo-mini__imagen img { width: 46%; }
.testigo-mini__pie { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; }
.testigo-mini__pie b { font-size: 12.5px; font-weight: 600; }
.testigo-mini__pie span { font-size: 11.5px; color: var(--texto-3); }
.dialogo--vista .dialogo__cuerpo > p.testigo-visor__codigo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 24px; font-size: 13px; }
.verificacion { display: flex; flex-direction: column; gap: 32px; }
.verificacion__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--borde-fila); }
.verificacion__titulo { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.verificacion__titulo h1 { margin: 0; font-size: 25px; line-height: 1.2; font-weight: 600; letter-spacing: -.4px; overflow-wrap: anywhere; }
.verificacion__titulo .ayuda { max-width: 620px; font-size: 13px; line-height: 1.55; }
.verificacion__sello { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px 0 10px; border-radius: var(--pildora); background: var(--exito-fondo); border: 1px solid var(--exito-borde); color: var(--exito); font-size: 13px; font-weight: 600; }
.verificacion__sello .icono { width: 16px; height: 16px; stroke-width: 2.4; }
.verificacion__rotulo { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.verificacion__codigo { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.verificacion__codigo-fila { display: flex; align-items: center; gap: 8px; }
.verificacion__codigo-fila .mono { font-family: var(--mono); font-size: 22px; font-weight: 500; letter-spacing: .04em; }
.verificacion__codigo .copiar { width: 34px; height: 34px; margin: 0; }
.verificacion__cuerpo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; }
.verificacion__captura { flex: 999 1 560px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.verificacion__marco { overflow: hidden; background: var(--superficie-2); border: 1px solid var(--borde-fuerte); border-radius: 16px; box-shadow: var(--filo), var(--e3); }
.verificacion__barra { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--borde); }
.verificacion__barra > i { width: 10px; height: 10px; border-radius: 50%; background: var(--borde-fuerte); flex: none; }
.verificacion__url { display: flex; align-items: center; min-width: 0; height: 24px; margin-left: 10px; padding: 0 12px; border-radius: var(--pildora); background: var(--hundido); color: var(--texto-3); font: 11.5px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verificacion__marco--movil { align-self: center; width: min(300px, 100%); padding: 10px; border-radius: 36px; }
.verificacion__marco--movil .verificacion__imagen { border-radius: 26px; overflow: hidden; }
.verificacion__imagen { position: relative; background: var(--hundido); }
.verificacion__imagen img { display: block; width: 100%; height: auto; }
.verificacion__imagen .espera-previa { min-height: 360px; }
.verificacion__marco--movil .espera-previa { min-height: 520px; }
.verificacion__fallo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 240px; padding: 24px; text-align: center; font-size: 13px; }
.verificacion__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.verificacion__marco--movil + .verificacion__pie { flex-direction: column; }
.verificacion__lado { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.verificacion__lado .tarjeta { padding: 20px 22px; gap: 16px; }
.verificacion__sitio { display: flex; align-items: center; gap: 12px; min-width: 0; }
.verificacion__sitio .favicon-sitio { width: 36px; height: 36px; border-radius: 9px; }
.verificacion__sitio b { display: block; font-size: 16px; font-weight: 600; }
.verificacion__sitio a { font-size: 12.5px; color: var(--texto-3); text-decoration: underline; text-decoration-color: var(--borde-fuerte); text-underline-offset: 3px; }
.verificacion__datos { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.verificacion__sitio + .verificacion__datos { padding-top: 16px; border-top: 1px solid var(--borde-fila); }
.verificacion__datos > div { min-width: 0; }
.verificacion__datos .ancho { grid-column: 1 / -1; }
.verificacion__datos dt { margin-bottom: 4px; font-size: 13px; color: var(--texto-3); }
.verificacion__datos dd { margin: 0; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.verificacion__datos dd + dd { margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--texto-3); }
.verificacion__datos .mono { font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--texto-2); }
.verificacion__datos a.mono { font-size: 12px; text-decoration: underline; text-decoration-color: var(--borde-fuerte); text-underline-offset: 3px; }
.verificacion__otro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 18px 22px; border: 1px dashed var(--borde-input); border-radius: 14px; }
.verificacion__otro-texto { display: flex; flex-direction: column; gap: 2px; }
.verificacion__otro-texto label { font-size: 13.5px; font-weight: 600; }
.verificacion__otro-campo { flex: 0 1 460px; min-width: 260px; display: flex; align-items: center; gap: 10px; }
.verificacion__otro-campo input { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .verificacion { gap: 24px; }
  .verificacion__cab { flex-direction: column; align-items: stretch; gap: 12px; padding-bottom: 0; border-bottom: 0; }
  .verificacion__titulo { display: contents; }
  .verificacion__titulo h1 { font-size: 22px; line-height: 1.25; }
  .verificacion__titulo .ayuda { order: 4; font-size: 12.5px; }
  .verificacion__codigo { order: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 10px 10px 10px 14px; border: 1px solid var(--borde); border-radius: 12px; background: var(--hundido); }
  .verificacion__codigo-fila { display: contents; }
  .verificacion__codigo .verificacion__rotulo { font-size: 11.5px; }
  .verificacion__codigo-fila .mono { font-size: 19px; }
  .verificacion__codigo .copiar { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; }
  .verificacion__pie, .verificacion__pie .boton { width: 100%; }
  .verificacion__pie { flex-direction: column; }
  .verificacion__otro { flex-direction: column; align-items: stretch; padding: 16px; }
  .verificacion__otro-campo { flex-direction: column; align-items: stretch; min-width: 0; flex: none; }
}