/* Phine por dentro: el edificio de agentes de noche, el mismo mundo que la portada (portada.css) y visor/edificio.html.
   Piedra grafito de fondo, hojas de papel con tinta para trabajar, latón para lo oficial y ámbar solo para lo que está encendido.
   Se carga después de estilos.css en panel, alta, reunión, campaña, cuenta, admin y legal (campana.css lo importa).
   Redefine las variables de estilos.css, así que sus reglas de estructura heredan el mundo nuevo sin tocar la portada. */

/* Letras del edificio, alojadas en /fuentes (SIL OFL 1.1, licencias al lado). */
@font-face{font-family:"Bodoni Moda";src:url("/fuentes/bodoni-moda-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("/fuentes/bodoni-moda-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Big Shoulders Display";src:url("/fuentes/big-shoulders-display-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fuentes/jetbrains-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fuentes/jetbrains-mono-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"D-DIN Phine";src:url("/fuentes/D-DIN.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"D-DIN Phine";src:url("/fuentes/D-DIN-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --cielo:#0a0f1a; --noche:#0e1726; --negro:#0a0b0d; --piedra:#17181c;
  --laton:#b8955a; --laton-hi:#e2c48a; --laton-lo:#6b5232; --ambar:#ffb04a;
  --papel:#e9e0cc; --papel-2:#d8ccb1; --papel-claro:#f7f2e6; --borde-papel:#8a7656;
  --tinta:#1d1a16; --tinta-2:#4a4034; --oxido:#a2462e; --oxido-texto:#8f3a24; --madera:#2a1a10; --madera-2:#3b2616;
  /* veredictos sobre papel (AA comprobado) y sobre la noche */
  --ok:#1d6b3f; --ok-fondo:#d6e3c6; --revisar:#7a4f00; --revisar-fondo:#f0dca8; --mal:#9b2c1c; --mal-fondo:#f1d3c4;
  --ok-noche:#8fd4a4; --revisar-noche:#f0c46a; --mal-noche:#f29a88;
  /* variables de estilos.css, ahora en el mundo del edificio */
  --tapa:var(--tinta); --tapa-2:var(--oxido-texto); --fondo:var(--piedra); --hoja:var(--papel);
  --linea:rgba(29,26,22,.2); --linea-2:var(--borde-papel); --radio:0;
  --sombra:0 1px 2px rgba(0,0,0,.4),0 14px 34px rgba(0,0,0,.4);
  --laton-grad:linear-gradient(176deg,#e6c98f 0%,#b8955a 38%,#8c6b3c 62%,#c9a76c 100%);
  --relieve:inset 0 1px 0 rgba(255,240,200,.7),inset 0 -2px 0 rgba(60,40,15,.5);
  --tornillos:radial-gradient(circle at 12px 50%,#5a4426 0 2px,transparent 2.5px),radial-gradient(circle at calc(100% - 12px) 50%,#5a4426 0 2px,transparent 2.5px);
  /* tono de cada departamento, como en el edificio (tinta encima pasa AA) */
  --d-director:#cfae62; --d-investigador:#4f95a0; --d-redactor:#c8707a; --d-envios:#cd7a45;
  --d-cualificador:#5f9a6c; --d-traspaso:#a87ea4; --d-analista:#8f9cb3; --d-conserjeria:var(--laton);
  --f-titulo:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
  --f-rotulo:"Big Shoulders Display","Arial Narrow",sans-serif;
  --f-texto:"D-DIN Phine","Bahnschrift","DIN Alternate","Roboto Condensed",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --f:var(--f-texto);
  --peso:cubic-bezier(.2,.9,.25,1.08); --sale:cubic-bezier(.16,1,.3,1);
}
/* Llaves de las conexiones: cada una conserva su color, ahora como chapa de la llave. */
[data-tipo="correo"]{--hue:var(--h-buzon)}
/* Agentes: tono de su despacho y fila de su muñeco en portada/personajes.png */
[data-agente="director"]{--hue:var(--d-director);--fila:0}
[data-agente="redactor"]{--hue:var(--d-redactor);--fila:1}
[data-agente="analista"]{--hue:var(--d-analista);--fila:2}
[data-agente="investigador"]{--hue:var(--d-investigador);--fila:3}
[data-agente="envios"],[data-agente="outreach"]{--hue:var(--d-envios);--fila:4}
[data-agente="cualificador"]{--hue:var(--d-cualificador);--fila:6}
[data-agente="traspaso"]{--hue:var(--d-traspaso);--fila:7}

/* ---------- Base: la piedra del vestíbulo ---------- */
html{scrollbar-color:var(--laton-lo) var(--piedra);background:var(--piedra)}
body{background:repeating-linear-gradient(90deg,transparent 0 119px,rgba(255,255,255,.03) 119px 120px),linear-gradient(180deg,#14151a,#1b1d21 40%,#17181c);
  color:var(--papel);font-family:var(--f-texto);caret-color:var(--laton-hi);accent-color:var(--tinta);
  display:flex;flex-direction:column}
body > *{min-width:0}
body > main{flex:1 0 auto;width:100%}
::selection{background:var(--laton-hi);color:var(--tinta)}
::-webkit-scrollbar-track{background:var(--piedra)}
::-webkit-scrollbar-thumb{background:var(--laton-lo);border-radius:0;border-color:var(--piedra)}
:focus-visible{outline:2px solid var(--laton-hi);outline-offset:3px}
.tarjeta :focus-visible,.rejilla :focus-visible{outline-color:var(--tinta);outline-offset:2px}
a{color:var(--laton-hi)}
a:hover{color:var(--papel)}
.tarjeta a{color:var(--tinta)}
.tarjeta a:hover{color:var(--oxido-texto)}
h1,h2,h3{font-family:var(--f-titulo);font-weight:600;letter-spacing:0;color:inherit}
h1{font-size:34px;line-height:1.1;color:var(--papel)}
h2{font-size:26px;line-height:1.15}
h3{font-size:20px;font-weight:600}
b,strong{font-weight:700}
.contenedor{padding-top:40px}
.contenedor > .nota,.contenedor > p,.contenedor > .linea-estado{color:var(--papel-2)}

/* ---------- Cabecera: el rótulo del edificio y el indicador de planta ---------- */
.cabecera{flex-wrap:wrap;gap:10px 24px;padding:12px clamp(16px,3vw,40px);background:linear-gradient(180deg,#07090e,var(--cielo));
  border-bottom:1px solid var(--laton-lo);box-shadow:0 1px 0 rgba(226,196,138,.12)}
.cabecera .marca{font:600 26px/1 var(--f-titulo);color:var(--papel);letter-spacing:.01em;padding:6px 14px 8px;
  border:1px solid var(--laton);box-shadow:inset 0 0 0 3px var(--cielo),inset 0 0 0 4px var(--laton-lo)}
.cabecera .marca:hover{color:var(--laton-hi)}
.cabecera .marca span{display:none}
.izquierda{display:flex;align-items:center;gap:16px;min-width:0}
/* indicador de planta, como el de un ascensor: el número se enciende en ámbar */
.ascensor{display:inline-flex;align-items:center;gap:10px;margin:0;font:700 15px/1 var(--f-rotulo);letter-spacing:.14em;text-transform:uppercase;color:var(--papel-2);white-space:nowrap}
.ascensor b{display:inline-block;min-width:3.2em;padding:6px 8px;background:#0d0e10;border:1px solid #33302a;color:var(--ambar);
  font:600 13px/1 var(--f-mono);letter-spacing:.06em;text-align:center}
.cabecera nav{gap:4px 22px;flex-wrap:wrap;justify-content:flex-end}
.cabecera nav a,.cabecera .enlace-boton{display:inline-flex;align-items:center;min-height:40px;font:700 15px/1 var(--f-rotulo);letter-spacing:.12em;
  text-transform:uppercase;color:var(--papel-2);text-decoration:underline 1px transparent;text-underline-offset:7px;transition:color .12s,text-decoration-color .12s}
.cabecera nav a:hover,.cabecera .enlace-boton:hover{color:var(--laton-hi);text-decoration-color:var(--laton)}
.cabecera nav .quien{font:400 15px/1.2 var(--f-texto);color:var(--papel-2);letter-spacing:0}
.cabecera :focus-visible{outline-color:var(--laton-hi)}

/* ---------- Pie ---------- */
.pie{max-width:none;margin:56px 0 0;border:0;background:var(--negro);color:var(--papel-2);padding:28px clamp(16px,4vw,56px) 36px;font-size:15px;line-height:1.5}
.pie nav{gap:8px 24px;margin-bottom:12px}
.pie a{color:var(--laton-hi)}
.pie a:hover{color:var(--papel)}
.pie p{max-width:80ch}

/* ---------- Botones: latón para la acción, papel para lo demás ---------- */
.boton{border-radius:0;font:700 15px/1.2 var(--f-texto);transition:background-color .12s,border-color .12s,color .12s,transform .12s var(--peso),box-shadow .12s}
.boton-laton,.boton-laton:hover{background:var(--laton-grad);color:var(--tinta);border:0}
.boton-laton{font:700 15px/1 var(--f-rotulo);letter-spacing:.12em;text-transform:uppercase;box-shadow:var(--relieve),3px 3px 0 rgba(10,11,13,.85)}
.boton-laton:hover:not([disabled]){transform:translate(-1px,-1px);box-shadow:var(--relieve),4px 4px 0 rgba(10,11,13,.85)}
.boton-laton:active:not([disabled]){transform:translate(2px,2px);box-shadow:inset 0 1px 0 rgba(255,240,200,.5),1px 1px 0 rgba(10,11,13,.85)}
.boton-linea{background:transparent;color:var(--tinta);border-color:var(--borde-papel)}
.boton-linea:hover{background:rgba(184,149,90,.2);border-color:var(--tinta);color:var(--tinta)}
.boton-peligro{background:transparent;color:var(--mal);border-color:var(--mal)}
.boton-peligro:hover{background:var(--mal);color:var(--papel)}
.boton[disabled]{opacity:.55;box-shadow:none}
/* sobre la noche (fuera de las hojas) el botón de línea es de latón fino */
.navegacion .boton-linea,.linea-estado .boton-linea{color:var(--papel);border-color:var(--laton)}
.navegacion .boton-linea:hover,.linea-estado .boton-linea:hover{background:rgba(226,196,138,.12);color:var(--laton-hi);border-color:var(--laton-hi)}

/* ---------- Formularios sobre papel ---------- */
.campo label{font:700 15px/1.3 var(--f-texto);color:var(--tinta)}
.campo .ayuda,.ayuda{color:var(--tinta-2)}
input,textarea,select{background:var(--papel-claro);color:var(--tinta);border:1px solid var(--borde-papel);border-radius:0;font-family:var(--f-texto);caret-color:var(--tinta)}
input::placeholder,textarea::placeholder{color:#6f6353}
input:focus,textarea:focus,select:focus{border-color:var(--tinta);box-shadow:0 0 0 3px rgba(184,149,90,.45)}
.campo.con-error input,.campo.con-error textarea,.campo.con-error select{border-color:var(--oxido)}
.error-campo{color:var(--oxido-texto)}
.campo.casilla label{font-weight:400}
.campo.casilla input{accent-color:var(--tinta)}

/* ---------- La hoja de papel: superficie de trabajo ---------- */
.tarjeta{--pad-y:28px;--pad-x:28px;background:var(--papel);color:var(--tinta);border:0;border-radius:0;padding:var(--pad-y) var(--pad-x);box-shadow:var(--sombra)}
.nota{color:var(--tinta-2)}

/* Resguardos de resultado: errata con borde de corte; comprobado y revisar con borde liso */
.mensaje-form.mal,.resultado.error{background:var(--mal-fondo);border:1px solid #c98a72;border-top:2px dashed var(--oxido);border-radius:0}
.resultado{border-radius:0;border-color:var(--linea)}
.resultado.ok{border-color:#9fbb93;border-top-color:var(--ok)}
.resultado.revisar{border-color:#cfb06a;border-top-color:var(--revisar)}
.aviso{border-radius:0;border-color:#cfb06a;color:var(--tinta)}
.aviso{display:flex;gap:8px;align-items:flex-start}
.aviso .ico{margin-top:.15em}

/* Sellos de estado: tampón de goma, palabra impresa por el edificio, icono + texto */
.sello{width:10.5em;font:600 13px/1.25 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:0;
  border:1.5px solid currentColor;color:var(--tinta-2);background:rgba(29,26,22,.06)}
.sello-hoja{background:transparent;transform:rotate(-2deg)}

/* ---------- Panel: el cuadro de llaves de la conserjería ---------- */
.estandarte{position:relative;border:0;border-radius:0;background:var(--papel);color:var(--tinta);padding:26px 24px 20px;margin:28px 0 0;box-shadow:var(--sombra)}
.estandarte::before{content:"";position:absolute;left:32px;top:-10px;width:84px;height:16px;background:var(--laton-grad);
  box-shadow:inset 0 1px 0 rgba(255,240,200,.7),0 2px 4px rgba(0,0,0,.4)} /* pinza de latón, como la del pase */
.estandarte.listo,.estandarte.falta{background:var(--papel)}
.estandarte strong{font:600 20px/1.25 var(--f-titulo);letter-spacing:0;color:var(--tinta)}
.estandarte span{color:var(--tinta-2)}
.estandarte.listo strong{border-bottom:2px solid var(--ok);padding-bottom:4px;margin-bottom:6px}
.estandarte.falta strong{border-bottom:2px dashed var(--revisar);padding-bottom:4px;margin-bottom:6px}
.rejilla{gap:56px 24px;margin-top:40px;padding:58px clamp(16px,3vw,32px) 32px;
  background:linear-gradient(#4a3020,#4a3020) 0 22px/100% 6px no-repeat,linear-gradient(180deg,var(--madera-2),var(--madera));
  box-shadow:inset 0 0 0 2px #1a0f08,0 14px 34px rgba(0,0,0,.4)}
.rejilla:empty::before{color:var(--papel-2)}
.conexion{border-top:0;border-radius:0;padding:0 22px 20px;gap:10px;overflow:visible}
/* la anilla de latón de la que cuelga cada ficha del cuadro */
.conexion::before{content:"";position:absolute;left:50%;top:-30px;width:16px;height:26px;margin-left:-8px;border:2px solid var(--laton-hi);border-radius:50%}
/* la chapa de latón con el número y el nombre; el cuadradito lleva el color de la conexión */
.conexion .pestana{position:static;height:auto;display:flex;align-items:center;gap:10px;margin:0 -22px 6px;padding:11px 22px 10px;
  background:var(--laton-grad);color:var(--tinta);font:700 17px/1 var(--f-rotulo);letter-spacing:.12em;text-transform:uppercase;border-radius:0;
  box-shadow:var(--relieve)}
.conexion .pestana::before{content:"";flex:none;width:12px;height:12px;background:var(--hue);box-shadow:0 0 0 1px rgba(29,26,22,.7)}
.conexion .detalle{color:var(--tinta-2)}
.conexion .detalle.con-aviso{color:var(--revisar)}
.conexion .fecha{color:var(--tinta-2);border-top:1px dashed rgba(29,26,22,.35);padding-top:8px}

/* ---------- Alta: el registro de entrada, planta a planta ---------- */
.progreso .cuenta{font:13px/1.5 var(--f-mono);color:var(--papel-2);margin-bottom:12px}
.progreso ol{gap:4px;padding:6px 6px 0;background:#111215;border:1px solid #33302a;box-shadow:inset 0 0 0 3px #111215,inset 0 0 0 4px var(--laton-lo)}
.progreso li:nth-child(n){--alto:0px;flex:1 1 0}
.progreso li button{gap:8px;padding:12px 12px;background:transparent;border:0;border-radius:0;color:var(--papel-2);
  font:700 15px/1.1 var(--f-rotulo);letter-spacing:.1em;text-transform:uppercase;min-height:48px}
.progreso li:not(.actual) button:hover{background:rgba(226,196,138,.1);color:var(--papel)}
.progreso li .num{min-width:0;font:600 13px/1 var(--f-mono);letter-spacing:0;color:#9aa0aa}
.progreso li .texto::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;background:var(--hue);box-shadow:0 0 0 1px #07080a}
.progreso li .marca{margin-left:auto;color:var(--papel-2)}
.progreso li.hecho .marca{color:var(--ok-noche)}
.progreso li.revisar .marca{color:var(--revisar-noche)}
.progreso li.error .marca{color:var(--mal-noche)}
.progreso li.actual{margin-bottom:0}
.progreso li.actual button{background:var(--papel);color:var(--tinta)}
.progreso li.actual .num{color:var(--tinta-2)}
.progreso li.actual.hecho .marca{color:var(--ok)}
.progreso li.actual.revisar .marca{color:var(--revisar)}
.progreso li.actual.error .marca{color:var(--mal)}
.paso{border-top:0;border-radius:0}
.paso.cambia{animation:hoja 160ms var(--sale)}
.bloque{border-top:1px solid var(--linea)}
.bloque h3{font:600 20px/1.2 var(--f-titulo);color:var(--tinta)}
.bloque p{color:var(--tinta-2)}
.como{background:var(--papel-claro);border:1px dashed var(--borde-papel);border-radius:0}
.como ol li::marker{color:var(--tinta-2);font-family:var(--f-mono);font-weight:600}
.acciones-paso{background:var(--papel);border-top:1px solid var(--linea)}
.registro{background:var(--papel-claro);border:1px solid var(--linea);border-radius:0}
.registro code{font:13px/1.45 var(--f-mono);background:#fffaf0;border:1px solid var(--linea);border-radius:0}
.navegacion{border-top:1px solid rgba(226,196,138,.2)}

/* ---------- Retrato de un agente en su despacho (reunión y agentes contratados) ---------- */
.retrato{position:relative;height:178px;border:3px solid #07080a;overflow:hidden;display:grid;grid-template-rows:20px 1fr;background:#120c06;box-shadow:0 12px 28px rgba(0,0,0,.45)}
.retrato .banda,.banda-agente{background:var(--hue,var(--d-analista));color:var(--tinta);font:700 13px/20px var(--f-rotulo);letter-spacing:.12em;text-transform:uppercase;
  padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* el cuarto encendido (portada/despacho.png, dibujo propio, siempre al doble y pixelado) */
.retrato .cuarto{position:relative;overflow:hidden;image-rendering:pixelated;background:url("portada/despacho.png") right bottom/304px 128px no-repeat,linear-gradient(transparent 84%,#1c1109 84%),#2e1c0f}
/* personajes MetroCity (CC0): cuadros de 32 px, al cuádruple en el retrato */
.retrato .muneco{position:absolute;left:0;bottom:2px;width:128px;height:128px;image-rendering:pixelated;background:url("portada/personajes.png") no-repeat;
  background-size:3072px 1152px;background-position:-768px calc(var(--fila,0) * -128px);animation:teclea 0.9s steps(1,end) infinite}
@keyframes teclea{50%{transform:translateY(-4px)}}
.recibe{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:center;margin:20px 0 0}
.recibe .linea-estado{margin:0;font-size:17px;line-height:1.55;color:var(--papel-2)}

/* ---------- Mi cuenta y administración ---------- */
.seccion-cuenta{margin-top:28px}
.seccion-cuenta h2{font:600 26px/1.15 var(--f-titulo);margin-bottom:12px}
.seccion-cuenta p{color:var(--tinta-2);margin-bottom:16px}
.seccion-cuenta.peligro{box-shadow:inset 0 3px 0 var(--mal),var(--sombra)}
.seccion-cuenta.peligro h2{color:var(--mal)}
.seccion-cuenta .mensaje-form{padding:0;margin:16px 0 0}
#lista{margin-top:24px}
#lista .tabla-envoltorio{position:relative;overflow-x:auto;box-shadow:var(--sombra)}
.tabla-admin{background:var(--papel);color:var(--tinta)}
.tabla-admin th{font:600 13px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2);border-bottom:1px solid var(--borde-papel)}
.tabla-admin td{border-bottom-color:var(--linea)}
.tabla-admin strong{font:600 17px/1.3 var(--f-titulo)}
.tabla-admin .boton{min-height:40px;padding:8px 16px;white-space:nowrap}
#lista > p{color:var(--papel-2)}

@media (max-width:760px){
  .tarjeta{--pad-y:22px;--pad-x:16px}
  h1{font-size:26px}
  .cabecera{padding:10px 16px;gap:8px 16px}
  .cabecera .marca{font-size:22px;padding:5px 11px 7px}
  .ascensor span{display:none}
  .cabecera nav{gap:0 16px;justify-content:flex-start;width:100%}
  .progreso ol{gap:2px;padding:4px 4px 0}
  .progreso li button{padding:10px 4px;justify-content:center;gap:4px}
  .progreso li .marca{margin-left:0}
  .rejilla{gap:52px;padding:52px 14px 24px}
  .recibe{grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:start}
  .recibe .retrato{height:138px}
  .recibe .retrato .muneco{width:64px;height:64px;background-size:1536px 576px;background-position:-384px calc(var(--fila,0) * -64px)}
  .recibe .linea-estado{font-size:15px}
  .estandarte .boton{width:100%}
  .tabla-admin,.tabla-admin tbody{display:block}
  .tabla-admin thead{display:none}
  .tabla-admin tr{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;padding:16px 14px;border-bottom:1px solid var(--linea)}
  .tabla-admin td{display:block;border:0;padding:0}
  .tabla-admin td:nth-child(1),.tabla-admin td:nth-child(2),.tabla-admin td:nth-child(5){grid-column:1/-1}
  .tabla-admin td:nth-child(2){font:13px/1.4 var(--f-mono);color:var(--tinta-2)}
}

/* La errata siempre lleva su icono (cruz de un trazo), también cuando el script solo pone texto */
.mensaje-form.mal{display:flex;gap:10px;align-items:flex-start}
.mensaje-form.mal::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239b2c1c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5.5 5.5l9 9M14.5 5.5l-9 9'/%3E%3C/svg%3E") center/contain no-repeat}