/* Portal - AdOps RCN
 *
 * Valores tomados del diseno aprobado (artifact "Portal de Video - login discreto",
 * version 1789954544-26c7). Tema oscuro unico: el diseno no define uno claro, y medio
 * inventado se veria peor que ninguno.
 *
 * El acento es la menta de marca. Como el verde tambien significa "listo", el paso en
 * curso usa ambar y el fallido rojo: asi el semaforo sigue leyendose aunque el verde
 * este en todas partes.
 */

:root {
  /* Superficies, del fondo hacia arriba */
  --fondo:        #0d0916;
  --hundido:      #120d1d;   /* inputs y paneles internos */
  --superficie:   #161022;   /* tarjetas */
  --aviso-fondo:  #191125;
  --pastilla:     #1c1530;   /* pestana activa, boton secundario */

  /* Bordes, de mas sutil a mas marcado */
  --borde-tenue:  #1c1729;
  --borde-fila:   #1e1830;
  --borde:        #262038;
  --borde-input:  #2b2440;
  --divisor:      #2e2545;
  --borde-fuerte: #332a4a;

  /* Texto, de mas a menos contraste */
  --texto:    #ece9f4;
  --texto-2:  #cdc6dd;
  --texto-3:  #9a92ad;
  --texto-4:  #857d9b;

  /* Acento de marca */
  --menta:        #86fdc4;
  --menta-clara:  #b6fedb;
  --sobre-menta:  #0b1410;
  --exito-fondo:  #123024;
  --exito-borde:  #2f6f4e;

  /* Atencion */
  --ambar:        #d99a3f;
  --ambar-texto:  #eab470;
  --aviso-borde:  #2c2138;

  /* Error */
  --error-fondo:  #1e1020;
  --error-borde:  #47203a;
  --error-texto:  #f2a6c0;
  --rojo:         #e5484d;
  --rojo-fondo:   #24101a;
  --rojo-borde:   #5a2130;
  --rojo-texto:   #ff8f94;

  /* Cuentas: cada una con su color, para reconocerla de un vistazo */
  --canal-fondo:  #10203c;
  --canal-borde:  #3d74c0;
  --canal-punto:  #5b9bf0;
  --canal-texto:  #a3c4ec;
  --radio-fondo:  #101c16;
  --radio-borde:  #26402f;
  --radio-punto:  #3f9c6b;
  --radio-texto:  #8fd3ad;

  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --transicion: 150ms cubic-bezier(.4, 0, .2, 1);
}

* { 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%; }

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(--menta); }
a:hover { color: var(--menta-clara); }

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

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

/* ── Encabezado ─────────────────────────────────────────────── */

.encabezado {
  height: 60px;
  padding: 0 32px;
  border-bottom: 1px solid var(--borde-tenue);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}

.marca { display: flex; align-items: center; gap: 12px; }
.logo { width: 34px; height: 20px; fill: var(--menta); display: block; flex-shrink: 0; }
.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;
}

.navegacion { display: flex; align-items: center; gap: 4px; }

.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); }

.sesion { display: flex; align-items: center; gap: 14px; }
.correo { font-size: 12.5px; color: var(--texto-3); }

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

.lienzo {
  width: 100%; max-width: 812px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.vista { display: flex; flex-direction: column; gap: 18px; animation: entrar 300ms cubic-bezier(.22,1,.36,1); }

@keyframes entrar {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.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; }

.version {
  position: fixed; bottom: 24px; right: 32px;
  font-family: var(--mono); font-size: 11px; color: var(--texto-3);
  pointer-events: none;
}

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

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

.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: #221c31; }

.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(--menta); border-color: var(--menta);
  color: var(--sobre-menta);
  font-size: 15px; font-weight: 600;
  border-radius: 9px;
}
.menta:hover:not([disabled]) { background: var(--menta-clara); border-color: var(--menta-clara); }

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

.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 code, .pista code { font-family: var(--mono); font-size: 11.5px; color: var(--texto-2); }

input[type="text"], input[type="url"], 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(--menta); }
.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);
}
.cuenta .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-4); flex-shrink: 0; }
.cuenta .nombre { font-size: 15px; font-weight: 600; color: var(--texto-3); }
.cuenta .marca-check { margin-left: auto; opacity: 0; }

.cuenta[data-cuenta="canal"] .punto { background: var(--canal-punto); }
.cuenta[data-cuenta="radio"] .punto { background: var(--radio-punto); }

.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-borde); }
.cuenta[data-cuenta="canal"][aria-pressed="true"] .marca-check { stroke: #9cc4ff; }
.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: 30px; padding: 0 13px;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--borde); border-radius: 15px;
  font-size: 12.5px; font-weight: 500; color: var(--texto-3);
}
.chip-cuenta .punto { width: 6px; height: 6px; border-radius: 50%; background: var(--texto-4); }
.chip-cuenta[data-cuenta="canal"] { background: var(--canal-fondo); border-color: #2f5a94; color: var(--canal-texto); }
.chip-cuenta[data-cuenta="canal"] .punto { background: var(--canal-punto); }
.chip-cuenta[data-cuenta="radio"] { background: var(--radio-fondo); border-color: var(--radio-borde); color: var(--radio-texto); }
.chip-cuenta[data-cuenta="radio"] .punto { background: var(--radio-punto); }

/* 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;
  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(--menta); }

.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(--menta); }
.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(--menta); }
.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; }

/* ── Pasos y avance ─────────────────────────────────────────── */

.pasos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;
}
.pasos li { display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; color: var(--texto-4); }
.pasos li::before {
  content: ""; height: 3px; border-radius: 2px;
  background: var(--borde-input);
  transition: background 400ms ease;
}
.pasos li.hecho::before { background: var(--menta); }
.pasos li.hecho { color: var(--texto-2); }
.pasos li.activo::before { background: var(--ambar); animation: latir 1.6s ease-in-out infinite; }
.pasos li.activo { color: var(--texto); font-weight: 600; }
.pasos li.roto::before { background: var(--error-texto); }
.pasos li.roto { color: var(--error-texto); }
.pasos li.final.hecho { color: var(--menta); font-weight: 600; }

@keyframes latir { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.avance-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.avance-pie .etapa { font-size: 13px; font-weight: 500; color: var(--texto); }
.avance-pie .cuenta-pasos { font-family: var(--mono); font-size: 12.5px; color: var(--texto-3); white-space: nowrap; }

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

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

.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 .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. */
.aviso.bloquea {
  background: var(--rojo-fondo);
  border-color: var(--rojo-borde);
  border-left-color: var(--rojo);
}
.aviso.bloquea .titulo { color: var(--rojo-texto); }
.aviso.bloquea 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); }

.a-salvo {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  background: var(--exito-fondo); border: 1px solid var(--exito-borde);
  border-radius: 9px;
}
.a-salvo svg { stroke: var(--menta); flex-shrink: 0; margin-top: 1px; }
.a-salvo p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--menta-clara); }

.que-hacer {
  padding: 18px 20px;
  background: var(--hundido); border: 1px solid var(--borde);
  border-radius: 10px;
}
.que-hacer .rotulo {
  display: block; margin-bottom: 12px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
  color: var(--texto-3);
}
.que-hacer ol {
  margin: 0; padding: 0; list-style: none; counter-reset: paso;
  display: flex; flex-direction: column; gap: 12px;
}
.que-hacer li {
  counter-increment: paso;
  display: flex; gap: 12px;
  font-size: 14px; line-height: 1.55; color: var(--texto);
}
.que-hacer li::before {
  content: counter(paso);
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pastilla); border: 1px solid var(--borde-fuerte);
  font: 500 11.5px var(--mono); color: var(--menta);
}

.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; }

/* ── Resultado ──────────────────────────────────────────────── */

.remate { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.emblema {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--exito-fondo); border: 1px solid var(--exito-borde);
}
.emblema svg { stroke: var(--menta); }
.emblema.malo { background: var(--error-fondo); border-color: var(--error-borde); }
.emblema.malo svg { stroke: var(--error-texto); }
.emblema.alerta { background: var(--rojo-fondo); border-color: var(--rojo-borde); }
.emblema.alerta svg { stroke: var(--rojo-texto); }
.remate h2 { margin: 0; font-size: 19px; font-weight: 600; color: var(--texto); letter-spacing: -.2px; text-align: center; }
.remate p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--texto-3); text-align: center; }

.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; }

.lineas { display: flex; flex-direction: column; gap: 10px; }
.lineas:empty { display: none; }
.linea-gam {
  padding: 14px 16px;
  background: var(--hundido);
  border: 1px solid #241d36;
  border-radius: 9px;
  display: flex; flex-direction: column; gap: 5px;
}
.linea-gam a {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.5;
  word-break: break-all; text-decoration: none;
}
.linea-gam a:hover { text-decoration: underline; }
.linea-gam span { font-family: var(--mono); font-size: 11.5px; color: var(--texto-4); }

.tabla { width: 100%; border-collapse: collapse; }
.tabla th {
  text-align: right; padding: 0 0 10px;
  border-bottom: 1px solid var(--borde);
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  color: var(--texto-3); letter-spacing: .8px;
  white-space: nowrap;
}
.tabla th:first-child, .tabla td:first-child { text-align: left; }
.tabla td {
  padding: 12px 0; text-align: right;
  border-bottom: 1px solid var(--borde-fila);
  font-family: var(--mono); font-size: 13px; color: var(--texto-2);
  white-space: nowrap;
}
.tabla td:first-child { color: var(--texto); }
.tabla td:last-child { font-size: 12px; color: var(--texto-4); }
.tabla tr:last-child td { border-bottom: none; }

.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;
  padding: 4px 10px; border-radius: 13px;
  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(--menta); }
.insignia.curso { background: #2a2010; border-color: #4d3a17; 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); }

/* Bloque "comparte el registro": en la tarjeta de fallo y en la vista de un registro. */
.compartir {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 18px;
  background: var(--hundido); border: 1px solid var(--borde); border-radius: 10px;
}
.compartir > div:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.compartir b { font-size: 13.5px; font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.compartir span { font-size: 12.5px; line-height: 1.5; color: var(--texto-3); }
.compartir-botones { display: flex; gap: 8px; flex-shrink: 0; }
.compartir-botones .boton { height: 38px; padding: 0 14px; font-size: 13px; color: var(--texto-2); }

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); }

/* ── Ajustes ────────────────────────────────────────────────── */

.subtitulo { margin: 0; font-size: 16px; font-weight: 600; color: var(--texto); }
.fila-acceso { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#acceso-rol { margin-top: 10px; align-self: flex-start; }

.nota-google {
  padding: 13px 16px;
  background: var(--hundido); border: 1px solid var(--borde); border-radius: 9px;
  display: flex; flex-direction: column; gap: 6px;
}
.nota-google p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--texto-3); }
.nota-google b { font-weight: 500; color: var(--texto-2); }
.enlace-gcp { align-self: flex-start; height: 34px; margin-top: 4px; padding: 0 12px; font-size: 12.5px; color: var(--texto-2); }

/* Un renglon de acceso tiene controles adentro, asi que no es un boton. */
.renglon.persona { cursor: default; }
.renglon.persona:hover { background: none; }
.renglon.persona.inactivo .titulo b { color: var(--texto-4); text-decoration: line-through; }
.renglon .titulo .nombre-persona { font-family: var(--sans); font-size: 12.5px; color: var(--texto-3); }
.controles-acceso { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.controles-acceso select {
  width: auto; height: 34px; margin: 0; padding: 0 28px 0 10px;
  font-size: 12.5px; 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% - 14px) 15px, calc(100% - 10px) 15px;
  background-size: 4px 4px; background-repeat: no-repeat;
}
.controles-acceso select option { background: var(--superficie); color: var(--texto); }
.controles-acceso .boton { height: 34px; padding: 0 12px; font-size: 12.5px; color: var(--texto-2); min-width: 118px; }
.controles-acceso .boton.peligro { border-color: var(--error-borde); color: var(--error-texto); }
.etiqueta-tu {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--menta); padding: 4px 10px; border: 1px solid var(--exito-borde); border-radius: 13px;
}

.bitacora summary { font-size: 13.5px; font-weight: 600; color: var(--texto-2); cursor: pointer; }
.bitacora[open] summary { margin-bottom: 4px; }
.bitacora .cambio {
  padding: 10px 0; border-top: 1px solid var(--borde-fila);
  font-size: 12.5px; line-height: 1.5; color: var(--texto-2);
}
.bitacora .cambio span { display: block; font-family: var(--mono); font-size: 11px; color: var(--texto-4); }

@media (max-width: 640px) {
  .fila-acceso { grid-template-columns: 1fr; }
  .renglon.persona { flex-wrap: wrap; }
  .controles-acceso { width: 100%; }
  .controles-acceso .boton { flex: 1; }
}

@media (max-width: 640px) {
  .compartir { flex-direction: column; align-items: stretch; }
  .compartir-botones .boton { flex: 1; }
}

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

.girador {
  width: 20px; height: 20px;
  border: 2px solid var(--borde-input);
  border-top-color: var(--menta);
  border-radius: 50%;
  animation: girar 700ms linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.menta .girador { border-color: rgba(11,20,16,.3); border-top-color: var(--sobre-menta); width: 16px; height: 16px; }
.centrado { display: grid; place-items: center; min-height: 40vh; }

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

@media (max-width: 760px) {
  .encabezado { height: auto; padding: 14px 18px; flex-wrap: wrap; row-gap: 10px; }
  .navegacion { order: 3; width: 100%; }
  .navegacion .pestana { flex: 1; justify-content: center; }
  .correo { display: none; }
  .lienzo { padding: 28px 18px 72px; }
  .tarjeta { padding: 22px 18px 24px; }
  .titulo-vista h1 { font-size: 21px; }
  .cuentas { flex-direction: column; }
  .pasos { gap: 6px; }
  .pasos li { font-size: 0; gap: 0; }
  .pasos li::before { height: 4px; }
  .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; }
  .version { display: none; }
  .tabla td:last-child, .tabla th:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 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);
}

/* ── Portada: puerta de entrada a las herramientas de AdOps ────
   Reusa el armazon del portal (encabezado, lienzo, tarjeta lista) y los chips de
   cuenta. Lo propio de la portada va con clase aparte para no tocar las filas de
   Historial y Registros. */

.renglon.herramienta { padding: 20px 26px; align-items: flex-start; gap: 16px; cursor: default; }
.renglon.herramienta:hover { background: none; }

.icono-herramienta {
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--hundido); border: 1px solid var(--borde);
}
.icono-herramienta svg { stroke: var(--texto-3); }

.renglon.herramienta .titulo { gap: 7px; }
.linea-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.linea-titulo b { font-size: 14.5px; font-weight: 600; color: var(--texto); white-space: normal; }

.renglon.herramienta .quien {
  white-space: normal; font-family: var(--sans); font-size: 13px;
  line-height: 1.55; color: var(--texto-3); max-width: 62ch;
}
.renglon.herramienta .chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-cuenta.menudo { height: 22px; padding: 0 10px; font-size: 11px; border-radius: 11px; }
.chip-cuenta.menudo .punto { width: 5px; height: 5px; }

.boton.menta.compacto { height: 36px; padding: 0 15px; font-size: 13.5px; border-radius: 8px; }
.boton.menta.compacto svg { stroke: var(--sobre-menta); }

/* Herramienta que todavia no existe: se ve, se entiende y no se abre. */
.renglon.herramienta[aria-disabled="true"] .icono-herramienta svg { stroke: var(--texto-4); }
.renglon.herramienta[aria-disabled="true"] b { color: var(--texto-2); }
.renglon.herramienta[aria-disabled="true"] .quien { color: var(--texto-4); }

.pie-portada { margin-top: 4px; color: var(--texto-4); }
.pie-portada a { color: var(--texto-3); }

@media (max-width: 640px) {
  .renglon.herramienta { flex-wrap: wrap; padding: 18px; }
  .renglon.herramienta .boton.menta.compacto { width: 100%; margin-left: 50px; }
}

/* Proyectos asignables: en el formulario de acceso y en la fila de cada persona. */
.opciones-proyecto { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.opciones-proyecto.en-fila { margin-top: 6px; }
.ficha-proyecto {
  height: 26px; padding: 0 11px;
  border: 1px solid var(--borde-fuerte); border-radius: 13px;
  background: none; color: var(--texto-3);
  font: 500 11.5px var(--sans); cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.ficha-proyecto:hover:not([disabled]) { border-color: var(--texto-4); color: var(--texto-2); }
.ficha-proyecto.activa { background: var(--exito-fondo); border-color: var(--exito-borde); color: var(--menta); }
.ficha-proyecto[disabled] { cursor: default; opacity: .6; }
.nota-proyectos { font-size: 11.5px; color: var(--texto-4); }