/* ==========================================================================
   Recado · hoja de estilos común de la maqueta nueva (kit de marca aprobado)
   Piel: Ruta 2 «Entre manos» (verde petróleo) sobre el lenguaje de pantallas
   de la Ruta 3 «Constancia», con IBM Plex Sans y Mono. Sin librerías ni
   servicios externos: fuentes y logos son locales (fuentes/ y logo/).

   Referencia de aplicación: 08-peticion-escritorio.html (rehecho del boceto
   aprobado maqueta-marca/boceto/08-peticion.html). El contenido y la función
   de cada pantalla los manda maqueta/pantallas/NN-*.html; aquí solo la piel.

   ÍNDICE
     1. Tokens del kit (claro y oscuro) y @font-face
     2. Base: reinicio, tipografía, formularios, botones, utilidades
        (más variantes y utilidades extra, tras la sección 8)
     3. Cabecera de página y logos (claro/oscuro)
     4. Destinatario · composición, sello, ficha lateral
     5. Destinatario · pregunta, etiquetas, ficheros, zona de arrastre
     6. Avisos, acción final, dudas, bloque para agentes, bloques de código
     7. Pie
     8. Responsive de las páginas del destinatario
     9. Páginas estrechas (verifica, recibido): documento, lista de datos
    10. PANEL · estructura: barra superior, barra lateral, cabecera de pantalla
    11. PANEL · tablas, pastillas de estado, semáforo, filtros
    12. PANEL · tarjetas (origen, escáneres), avisos, vista previa del correo
    13. PANEL · revisión de respuesta, línea de estados, registro
    14. PANEL · caja de acciones
    15. PANEL · responsive (por contenedor, no por ventana: la barra lateral
        come ancho, así que las rejillas miran el ancho de .panel-main)

   Cómo se activa el panel: <body class="panel"> + <div class="panel-app">.
   Tema: sigue al sistema; fuerza con <html data-theme="light|dark">.
   ========================================================================== */

/* ---------- 1. tokens del kit (copia literal de kit/tokens/recado-tokens.css) ---------- */
/* Recado · identidad final.
   Paleta Entre manos: --ink → --text; --welcome → --highlight;
   --brand → --action; --on-brand → --on-action.
   Rejilla, radios y tipos de Constancia. Fuentes incluidas, sin servicios externos.
   --line es una mezcla al 28 % de borde y 72 % de superficie, solo decorativa.
   Atkinson no se carga como fuente de interfaz: solo vive en los trazados del logo. */
@font-face{font-family:"IBM Plex Sans";src:url("/fuentes/IBMPlexSans-variable.ttf") format("truetype");font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fuentes/IBMPlexMono-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
:root{
  --font-body:"IBM Plex Sans",Arial,Helvetica,sans-serif;
  --font-mono:"IBM Plex Mono",Consolas,"Courier New",monospace;
  --weight-body:400;--weight-medium:500;--weight-heading:600;
  --space:4px;--radius:2px;
  --bg:#F2F7F5;--surface:#FFFFFF;--highlight:#FCEBDD;
  --text:#182E2D;--muted:#49625F;--action:#155E63;--on-action:#FFFFFF;
  --border:#718A85;--line:#D7DEDD;
  --success:#216546;--warning:#805000;--error:#A42E3A;
  --brand-fixed:#155E63;--brand-white:#FFFFFF;
  color-scheme:light;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#102525;--surface:#183433;--highlight:#293B37;
  --text:#EFF9F5;--muted:#B2D0C8;--action:#8CD6C8;--on-action:#102525;
  --border:#789B93;--line:#33514E;
  --success:#97D8B0;--warning:#F0C36F;--error:#FFAFB5;
  color-scheme:dark;
}}
[data-theme="light"]{
  --bg:#F2F7F5;--surface:#FFFFFF;--highlight:#FCEBDD;
  --text:#182E2D;--muted:#49625F;--action:#155E63;--on-action:#FFFFFF;
  --border:#718A85;--line:#D7DEDD;
  --success:#216546;--warning:#805000;--error:#A42E3A;color-scheme:light;
}
[data-theme="dark"]{
  --bg:#102525;--surface:#183433;--highlight:#293B37;
  --text:#EFF9F5;--muted:#B2D0C8;--action:#8CD6C8;--on-action:#102525;
  --border:#789B93;--line:#33514E;
  --success:#97D8B0;--warning:#F0C36F;--error:#FFAFB5;color-scheme:dark;
}

/* ---------- 2. base: reinicio, tipografía, formularios, botones, utilidades ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:17px;line-height:1.55;font-weight:var(--weight-body)}
svg{max-width:100%;vertical-align:middle;flex:none}
button,input,textarea,select{font:inherit}
a{color:var(--action);text-underline-offset:4px}
a:hover{text-decoration-thickness:2px}
button,a,input,textarea,select,summary{touch-action:manipulation}
button{cursor:pointer}
button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-weight:var(--weight-medium);line-height:1.4}
button:hover{border-color:var(--action);text-decoration:underline;text-underline-offset:4px}
button.primary{background:var(--action);border-color:var(--action);color:var(--on-action)}
button svg{flex:none}
button.quiet{background:transparent;color:var(--action);border-color:transparent;padding-inline:8px}
button.small{font-size:14px}
:focus-visible{outline:3px solid var(--action);outline-offset:3px}
input,select,textarea{width:100%;min-height:48px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);padding:10px 12px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:20px;margin:0;flex:0 0 20px;accent-color:var(--action)}
textarea{resize:vertical;min-height:124px;line-height:1.55}
label,legend{display:block;font-weight:var(--weight-medium);margin-bottom:8px;padding:0}
fieldset{padding:0;border:0;margin:0;min-width:0}
h1,h2,h3,p{margin:0}
h1{font-size:32px;line-height:1.25;letter-spacing:-.025em;font-weight:var(--weight-heading);max-width:780px;text-wrap:balance}
h2{font-size:24px;line-height:1.3;letter-spacing:-.015em;font-weight:var(--weight-heading)}
h3{font-size:19px;line-height:1.4;font-weight:var(--weight-heading)}
p+p{margin-top:12px}
p{text-wrap:pretty}
ul{padding-left:24px;margin:0}
li+li{margin-top:8px}
hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.mono,code,pre{font-family:var(--font-mono);font-weight:500}
.mono{font-size:.88em}
.muted,.help{color:var(--muted)}
.help,.small{font-size:14px;line-height:1.5}
.help{margin-top:8px}
.ok{color:var(--success)}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:16px;top:-100px;padding:12px;background:var(--surface);color:var(--action);z-index:20}
.skip:focus{top:16px}
.shell{max-width:1008px;margin:0 auto;padding:0 16px}

/* ---------- 3. cabecera de página y logos (claro/oscuro) ---------- */
.site-header{background:var(--surface);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px}
.brand{display:inline-block;flex:none;line-height:0}
.logo{display:block;height:36px;width:auto}
.dark-logo{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .light-logo{display:none}:root:not([data-theme=light]) .dark-logo{display:block}}
[data-theme=dark] .light-logo{display:none}[data-theme=dark] .dark-logo{display:block}
[data-theme=light] .light-logo{display:block}[data-theme=light] .dark-logo{display:none}
.header-context{font-size:14px;line-height:1.5;color:var(--muted);padding-left:24px;border-left:1px solid var(--line)}
.header-context strong{font-weight:var(--weight-medium);color:var(--text)}

/* ---------- 4. destinatario · composición: texto a la izquierda, sello y plazo a la derecha ---------- */
.page{display:grid;grid-template-columns:minmax(0,1fr);padding-bottom:56px;grid-template-areas:"intro" "aside" "main"}
.intro{grid-area:intro;padding:28px 0 20px}
.intro h1+p{margin-top:16px;max-width:680px}
.aside{grid-area:aside;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;margin-bottom:8px}
.main{grid-area:main;min-width:0}

/* verificación: la referencia de la Ruta 3 (melocotón + filete de acción) con el sello dentro */
.verify-card{background:var(--highlight);border-top:2px solid var(--action);padding:24px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px}
.sello{display:block;width:192px;height:192px;color:var(--action)}
.sello text{font-family:var(--font-body);fill:currentColor;stroke:none}
.sello .sello-codigo{font-family:var(--font-mono);font-weight:500}
.verify-card .help{margin:0;font-size:14px}
.verify-card .help a{overflow-wrap:anywhere}

/* estado, plazo y avance: la ficha lateral de la Ruta 3 */
.side-card{background:var(--surface);border-top:2px solid var(--text);padding:20px 24px}
.side-card dl{margin:0}
.side-card dt{font-size:14px;color:var(--muted)}
.side-card dl>div+div{margin-top:20px}
.side-card dd{margin:4px 0 0;font-size:16px;line-height:1.45}
.side-card .nw{white-space:nowrap}
.side-card dd strong{font-weight:var(--weight-medium)}
.status{display:inline-flex;align-items:center;gap:6px;font-weight:var(--weight-medium)}
.status:before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.side-card hr{margin:16px 0}
.meter{height:4px;background:var(--line);margin:10px 0 12px}
.meter span{display:block;height:4px;background:var(--action)}
.save-state{display:flex;align-items:center;gap:6px;color:var(--success);font-size:14px;line-height:1.4;margin:0}

/* ---------- 5. destinatario · pregunta, etiquetas, ficheros, zona de arrastre, campos ---------- */
.section-heading{margin:20px 0 16px}
.question{background:var(--surface);border:1px solid var(--line);padding:28px;margin-top:16px}
.question-head{display:grid;grid-template-columns:32px 1fr auto;gap:12px;margin-bottom:24px;align-items:start}
.question-head:not(:has(.done)){grid-template-columns:32px minmax(0,1fr)}
.number{font:500 16px/1.7 var(--font-mono);color:var(--action)}
.question-head h3{font-size:21px;line-height:1.35;letter-spacing:-.01em}
.question-head h3 label{display:inline;font:inherit;margin:0;color:inherit}
.question-head .row{margin-top:10px;gap:8px}
.done{display:block;color:var(--success);width:24px;height:24px;margin-top:2px}
.tag{font:500 12px/1.5 var(--font-mono);padding:4px 7px;background:var(--bg);border:1px solid var(--line);white-space:nowrap;color:var(--text)}
.tag.required{color:var(--action);background:var(--highlight);border-color:var(--border)}
.question-body>*+*{margin-top:20px}
.question-body>.help{margin-top:8px}
.question-body>p.help+*{margin-top:16px}
.question-body>.help:first-child{margin-top:0}
.file-card{padding:16px;border:1px solid var(--border);background:var(--bg)}
.file-icon{display:flex;align-items:center;justify-content:center;width:40px;height:48px;border:1px solid var(--border);background:var(--surface);font:500 11px var(--font-mono);flex:none}
.file-name{font-size:15px;font-weight:var(--weight-medium);overflow-wrap:anywhere;line-height:1.4}
.file-card .help{margin-top:2px}
.file-card .ok{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:var(--weight-medium);white-space:nowrap}
.progress-track{background:var(--line);height:4px;margin-top:16px}
.progress-track span{display:block;height:4px;background:var(--action)}
.progress-track.done-bar span{background:var(--success)}
.drop-zone{border:1px dashed var(--border);padding:20px 16px;text-align:center;background:var(--surface);font-size:16px;line-height:1.5}
.drop-zone b{font-weight:var(--weight-medium)}
.drop-zone .small{display:block;margin-top:4px;color:var(--muted)}
.choice{display:flex;align-items:center;gap:12px;min-height:44px;font-weight:var(--weight-body);margin:0;cursor:pointer}
.choice-group{display:flex;gap:4px 28px;flex-wrap:wrap}
.counter-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:8px}
.counter-row .help{margin:0}
.form-fields>*+*{margin-top:20px}
.field{min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid2>*{min-width:0}
.stack>*+*{margin-top:12px}
.notice{border-left:3px solid var(--action);background:var(--highlight);padding:16px 20px;font-size:15px}
.notice strong{display:block;font-weight:var(--weight-heading);margin-bottom:8px;font-size:16px}
.notice .k{display:block;font-size:14px;color:var(--muted);line-height:1.4}
.notice .v{display:block;margin-top:2px}
.consent{border-top:1px solid var(--line);padding-top:20px}
.consent .choice{align-items:flex-start}
.consent input{margin-top:2px}
label .tag{margin-left:8px;vertical-align:1px;line-height:1.3}

.action-block{background:var(--surface);padding:28px;border:1px solid var(--line);margin-top:16px}
.action-block .help{margin-top:16px}
.missing{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;color:var(--warning);font-size:16px;line-height:1.45;font-weight:var(--weight-medium);text-wrap:balance}
.missing svg{margin-top:2px}

/* ---------- 6. avisos, dudas, bloque para agentes, bloques de código ---------- */
.thread{margin-top:48px;padding-top:32px;border-top:1px solid var(--border)}
.thread>p{margin-top:12px}
.empty{color:var(--muted);font-size:14px;border-block:1px solid var(--line);padding:20px;background:var(--surface);text-align:center;margin:20px 0 24px}
.thread .btn-row{margin-top:12px}
.agent-block{margin-top:48px;padding-top:32px;border-top:1px solid var(--border)}
.agent-block>p{margin-top:16px}
.agent-block ul{margin:16px 0 20px;font-size:16px}
.agent-block li b{font-weight:var(--weight-medium)}
.agent-block code{font-size:.85em;overflow-wrap:anywhere}
details>summary{cursor:pointer;font-weight:var(--weight-medium);min-height:44px;padding-block:10px}
details[open]>summary{margin-bottom:8px}
pre{margin:0 0 8px;font-size:13px;line-height:1.65;white-space:pre;overflow-x:auto;background:var(--bg);border:1px solid var(--line);padding:20px;border-radius:var(--radius);max-width:100%;tab-size:2}
.j-k{color:var(--action)}.j-s{color:var(--text)}.j-n{color:var(--warning)}.j-c{color:var(--muted)}
.agent-block>.help{margin-top:16px}

/* ---------- 7. pie ---------- */
.site-footer{border-top:1px solid var(--line);padding:32px 0 28px;font-size:14px;line-height:1.6;color:var(--muted);background:var(--surface)}
.site-footer b{font-weight:var(--weight-medium);color:var(--text)}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px}
.footer-grid>p{margin:0}
@media(min-width:900px){.footer-grid{grid-template-columns:repeat(3,1fr)}}
.footer-end{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer-end .brand-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.footer-end .logo{height:30px}

/* ---------- 8. responsive de las páginas del destinatario: escritorio ---------- */
@media(min-width:768px){
  h1{font-size:32px}
}
@media(max-width:767px){
  h1{font-size:28px;line-height:1.25}
  h2{font-size:23px}
}
@media(min-width:880px){
  .header-inner{min-height:88px}
  .intro{padding:44px 0 28px}
  .page{grid-template-columns:minmax(0,680px) 264px;column-gap:32px;grid-template-areas:"intro aside" "main aside";grid-template-rows:auto 1fr}
  .aside{display:flex;flex-direction:column;align-self:start;margin:44px 0 0;grid-row:1 / span 2}
  .section-heading{margin-top:12px}
}
@media(min-width:880px) and (min-height:780px){
  .aside{position:sticky;top:24px}
}
@media(max-width:879px){
  .header-context{max-width:420px}
  .header-inner{min-height:72px}
  .intro{padding:24px 0 16px}
  .side-card dl{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px}
  .side-card dl>div+div{margin-top:0}
  .side-card dl>div:first-child{grid-column:1 / -1}
  .section-heading{margin-top:12px}
}

/* ---------- 8. (cont.) móvil ---------- */
@media(max-width:620px){
  .header-inner{flex-wrap:wrap;padding-block:16px;gap:10px;min-height:0}
  .logo{height:32px}
  .header-context{padding-left:0;border-left:0;flex-basis:100%;max-width:none}
  .intro{padding:24px 0 16px}
  .aside{grid-template-columns:1fr}
  .sello{width:176px;height:176px}
  .side-card{padding:20px}
  .side-card dl>div{min-width:0}
  .question{padding:20px 16px}
  .question-head{gap:8px;grid-template-columns:24px minmax(0,1fr) auto}
  .question-head:not(:has(.done)){grid-template-columns:24px minmax(0,1fr)}
  .question-head h3{font-size:20px}
  .grid2{grid-template-columns:1fr}
  .action-block{padding:20px 16px}
  .action-block .row{align-items:stretch;flex-direction:column}
  .footer-grid{grid-template-columns:1fr;gap:20px}
  .drop-zone{padding:20px 12px}
  pre{padding:16px 12px;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* ==========================================================================
   Variantes y utilidades que las pantallas necesitan además del boceto 08
   ========================================================================== */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-weight:var(--weight-medium);line-height:1.4;text-decoration:none}
.button:hover{border-color:var(--action);text-decoration:underline;text-underline-offset:4px}
.button.primary{background:var(--action);border-color:var(--action);color:var(--on-action)}
.button.quiet{background:transparent;color:var(--action);border-color:transparent;padding-inline:8px}
.button.small{font-size:14px}
button.block,.button.block{width:100%}
button[aria-disabled=true],button:disabled{cursor:not-allowed;opacity:.6}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.warn{color:var(--warning)}
.error{color:var(--error)}
.wrap{overflow-wrap:anywhere}
.nw{white-space:nowrap}
.hidden,[hidden]{display:none!important}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font:500 12px/1.5 var(--font-mono);color:var(--muted)}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mb-12{margin-bottom:12px}
textarea.compact{min-height:92px}
.question-head h2{font-size:21px;line-height:1.35;letter-spacing:-.01em;font-weight:var(--weight-heading)}
.question-head h2 label{display:inline;font:inherit;margin:0;color:inherit}
.sello.compact{width:144px;height:144px}

/* avisos: variantes (el aviso base es el del boceto: filete de acción sobre melocotón) */
.notice.warning{border-left-color:var(--warning);background:var(--surface);border-block:1px solid var(--line);border-right:1px solid var(--line)}
.notice.danger{border-left-color:var(--error);background:var(--surface);border-block:1px solid var(--line);border-right:1px solid var(--line)}
.notice.success{border-left-color:var(--success);background:var(--surface);border-block:1px solid var(--line);border-right:1px solid var(--line)}
.notice.warning>strong{color:var(--warning)}.notice.danger>strong{color:var(--error)}.notice.success>strong{color:var(--success)}
.notice p+p{margin-top:8px}

/* dudas en la página: mensajes (Ruta 3) */
.message{display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;padding:24px 0;border-bottom:1px solid var(--line)}
.message .byline{font-size:14px;color:var(--muted);margin-bottom:8px}
.initial{display:grid;place-items:center;width:36px;height:36px;background:var(--highlight);color:var(--action);font:500 14px var(--font-mono);flex:none}

/* ---------- 9. páginas estrechas: verifica, recibido (Ruta 3) ---------- */
.narrow{max-width:632px;margin:0 auto;padding:44px 16px 64px}
.narrow h1{margin:16px 0 20px}
.document{background:var(--surface);border:1px solid var(--line);padding:32px;margin-top:28px}
.document.top-rule{border-top:3px solid var(--action)}
.data-list{margin:20px 0 0}
.data-list>div{display:grid;grid-template-columns:136px minmax(0,1fr);gap:20px;padding:14px 0;border-top:1px solid var(--line)}
.data-list dt{color:var(--muted);font-size:14px}
.data-list dd{margin:0;overflow-wrap:anywhere}
.code-input{font:500 24px/1.5 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;max-width:100%;height:56px}
.verification-check{border:1px solid var(--border);padding:12px 16px;background:var(--bg);font-size:14px}
.reference-bar{border-top:2px solid var(--action);background:var(--highlight);padding:18px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.reference-bar .code{font:500 22px/1.3 var(--font-mono);color:var(--action);letter-spacing:.04em}
.reference-bar .help{margin:0}
.receipt-list{list-style:none;padding:0;margin:20px 0}
.receipt-list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:16px;border-top:1px solid var(--line);padding:16px 0;margin:0}
.receipt-list h3{font-size:17px}
.receipt-list p{font-size:15px;margin-top:4px;color:var(--muted)}
.receipt-number{font:500 14px var(--font-mono);color:var(--action);padding-top:4px}
@media(max-width:620px){
  .narrow{padding:32px 16px 48px}
  .document{padding:24px 20px}
  .data-list>div{grid-template-columns:1fr;gap:4px}
  .reference-bar{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ==========================================================================
   PANEL · se activa con <body class="panel"> y <div class="panel-app">
   ========================================================================== */
.panel{font-size:16px}

/* ---------- 10. estructura: barra superior, barra lateral, cabecera de pantalla ---------- */
.panel-app{display:grid;grid-template-columns:264px minmax(0,1fr);grid-template-rows:auto 1fr;min-height:100vh}
.panel-top{grid-column:1 / -1;display:flex;align-items:center;gap:16px;min-height:64px;padding:0 24px;background:var(--surface);border-bottom:1px solid var(--line)}
.panel-top .logo{height:32px}
.panel-top .sep{width:1px;height:24px;background:var(--line);flex:none}
.panel-top .context{flex:1;min-width:0;font-size:14px;color:var(--muted)}
.panel-top .context strong{font-weight:var(--weight-medium);color:var(--text)}
.panel-top .access{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.panel-top .access svg{color:var(--success)}
.panel-top .user{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:var(--weight-medium)}

.panel-side{background:var(--surface);border-right:1px solid var(--line);padding:20px 12px 28px;font-size:15px}
.panel-side-inner{position:sticky;top:20px}
.panel-side .eyebrow{margin:20px 12px 8px}
.panel-side .eyebrow:first-child{margin-top:0}
.panel-side a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:8px 10px;color:var(--text);text-decoration:none;border:1px solid transparent;border-radius:var(--radius)}
.panel-side a:hover{border-color:var(--border)}
.panel-side a[aria-current=page],.panel-side a.active{color:var(--action);font-weight:var(--weight-medium);background:var(--highlight);border-color:var(--border);box-shadow:inset 3px 0 0 var(--action)}
.panel-side .count{flex:none}
.panel-side-note{margin:24px 12px 0;font-size:13px;line-height:1.5;color:var(--muted)}

.panel-main{padding:32px 32px 64px;min-width:0;container:panel / inline-size}
.breadcrumb{font-size:14px;color:var(--muted);margin-bottom:24px;overflow-wrap:anywhere}
.breadcrumb a{color:var(--muted)}
.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:28px}
.page-heading>div:first-child{min-width:0}
.page-heading p{margin-top:12px;max-width:800px;color:var(--muted)}
.page-heading .row{flex:none}
.count{font:500 12px/1.4 var(--font-mono);padding:3px 8px;background:var(--highlight);color:var(--action);border:1px solid transparent}
.count.hot{background:var(--action);color:var(--on-action)}
.count.quiet{background:var(--bg);color:var(--muted);border-color:var(--line)}
.project{display:inline-block;font:500 12px/1.5 var(--font-mono);padding:4px 8px;background:var(--bg);border:1px solid var(--line);white-space:nowrap}

/* ---------- 11. tablas, pastillas de estado, semáforo, filtros ---------- */
.filters{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;border-block:1px solid var(--line);padding:12px 0;margin-bottom:32px;flex-wrap:wrap}
.filter-buttons{display:flex;gap:8px;flex-wrap:wrap}
.filter-buttons button{font-size:14px;background:transparent;border-color:transparent}
.filter-buttons button[aria-pressed=true]{color:var(--action);background:var(--highlight);border-color:var(--border)}
.filters select{width:200px;font-size:14px;min-height:44px}
.table-group{margin:32px 0}
.table-group>h2{font-size:18px;display:flex;gap:12px;align-items:center;margin-bottom:16px}
.data-table{width:100%;border-collapse:collapse;text-align:left;font-size:14px;background:var(--surface);border-block:1px solid var(--line)}
.data-table th{padding:12px 16px;font-size:12px;font-weight:var(--weight-medium);color:var(--muted);background:var(--bg)}
.data-table td{padding:18px 16px;border-top:1px solid var(--line);vertical-align:top}
.data-table td p{font-size:13px;margin-top:6px;color:var(--muted)}
.data-table td strong{font-weight:var(--weight-medium);display:block}
.data-table td a{font-weight:var(--weight-medium)}
.data-table td .mono{display:block;color:var(--action);margin-bottom:2px}
.data-table tr.is-new{background:var(--highlight)}
.data-table td:nth-child(2){width:27%}
.data-table .num{white-space:nowrap}

/* pastilla: caja con punto; .status es la versión sin caja (la del boceto) */
.pill{display:inline-flex;align-items:center;gap:6px;font:500 13px/1.3 var(--font-body);padding:3px 10px 3px 8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);white-space:nowrap}
.pill:before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.pill.ok{color:var(--success);border-color:currentColor;background:var(--surface)}
.pill.warn{color:var(--warning);border-color:currentColor;background:var(--surface)}
.pill.error{color:var(--error);border-color:currentColor;background:var(--surface)}
.pill.info{color:var(--action);border-color:currentColor;background:var(--highlight)}
.pill.muted{color:var(--muted)}
.pill.struck{text-decoration:line-through;text-decoration-color:var(--border)}
.status.ok{color:var(--success)}.status.warn{color:var(--warning)}.status.error{color:var(--error)}.status.info{color:var(--action)}.status.muted{color:var(--muted)}
/* semáforo: te toca a ti / esperando al destinatario / correcto / cerrada */
.sem{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:1px;background:var(--border)}
.sem.you{background:var(--warning)}.sem.wait{background:var(--action)}.sem.ok{background:var(--success)}.sem.closed{background:var(--border)}
.legend{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14px;color:var(--muted)}
.table-group>.empty{margin:0;text-align:left}

/* ---------- 12. tarjetas (origen, escáneres), avisos, vista previa del correo ---------- */
.panel-card{background:var(--surface);border:1px solid var(--line);padding:24px;margin-bottom:20px}
.panel-card>h2{font-size:19px;margin-bottom:20px;display:flex;gap:12px;align-items:center}
.panel-card.origin{border-top:2px solid var(--text)}
.kv{margin:0;font-size:14px}
.kv>div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;margin:12px 0}
.kv>div:first-child{margin-top:0}
.kv>div:last-child{margin-bottom:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;overflow-wrap:anywhere}
.file-meta{margin:16px 0;font-size:14px}
.file-meta>div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;margin:10px 0}
.file-meta dt{color:var(--muted)}
.file-meta dd{margin:0;overflow-wrap:anywhere}
.hash{font:500 12.5px/1.5 var(--font-mono);overflow-wrap:anywhere}
.scan{padding:16px 0;border-top:1px solid var(--line)}
.scan strong{font-weight:var(--weight-medium);font-size:15px}
.scan p{font-size:14px;color:var(--muted);margin-top:6px}
.scan strong.ok{color:var(--success)}.scan strong.warn{color:var(--warning)}.scan strong.error{color:var(--error)}
blockquote{margin:12px 0 0;padding:12px 16px;border-left:2px solid var(--border);font-size:14px;color:var(--muted)}
.inert{border:1px dashed var(--border);background:var(--bg);padding:12px 16px;font-size:14px;color:var(--muted)}
.inert em{display:block;font-style:normal;font:500 12px/1.5 var(--font-mono);margin-bottom:4px}

.preview-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.preview-tabs button,.preview-tabs a{border:0;background:transparent;border-radius:0;font-size:14px;padding:12px 20px;display:inline-flex;align-items:center;min-height:44px;color:var(--text);text-decoration:none;font-weight:var(--weight-medium)}
.preview-tabs [aria-selected=true],.preview-tabs .active{box-shadow:inset 0 -3px var(--action);color:var(--action);background:var(--highlight)}
.mail-envelope{padding:24px;background:var(--surface);border:1px solid var(--line);border-top:0;font-size:14px}
.mail-envelope dl{margin:0}
.mail-envelope dl>div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;margin:6px 0}
.mail-envelope dt{color:var(--muted)}
.mail-envelope dd{margin:0;overflow-wrap:anywhere}
.mail-body{background:var(--surface);border:1px solid var(--line);border-top:0;padding:28px}
.mail-frame{display:block;border:1px solid var(--line);width:100%;height:2150px;background:#F2F7F5;color-scheme:light}
.mail-plain{margin:0;min-height:600px;white-space:pre-wrap;overflow-wrap:anywhere}

/* ---------- 13. revisión de respuesta, línea de estados, registro ---------- */
.approval-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:32px;align-items:start}
.review-grid{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:32px;align-items:start;margin-top:28px}
.review-grid>*{min-width:0}
.review-item{background:var(--surface);border:1px solid var(--line);padding:28px;margin-bottom:20px;min-width:0;overflow-wrap:anywhere}
.review-item.is-flagged{border-left:3px solid var(--warning)}
.review-item h2{font-size:20px}
.review-item .question-head{grid-template-columns:minmax(0,1fr) auto;margin-bottom:20px}
.review-item .question-head .eyebrow{margin-bottom:8px}
.delivery-choice{font-size:14px}
.safe-preview{display:flex;align-items:center;justify-content:center;min-height:176px;background:var(--bg);border:1px solid var(--line);padding:24px;margin:20px 0;text-align:center}
.safe-preview>div{min-width:0;max-width:100%}
.sample-mark{font-size:28px;letter-spacing:.04em;font-weight:var(--weight-heading);line-height:1.2}
.preview-caption{font-size:12px;color:var(--muted);margin-top:12px}
.compare{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.compare td,.compare th{padding:12px 8px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.compare th{font-weight:var(--weight-medium);color:var(--muted)}
.compare .is-changed{background:var(--highlight)}
.pdf-pages{display:flex;gap:12px;width:100%;justify-content:center;flex-wrap:wrap}
.pdf-page{display:flex;flex-direction:column;justify-content:space-between;width:120px;height:152px;background:var(--surface);border:1px solid var(--border);padding:12px;font-size:11px;text-align:left;color:var(--muted)}
.pdf-page b{font-weight:var(--weight-medium);color:var(--text);font-size:13px}
.wave{display:flex;align-items:center;gap:3px;height:72px;width:100%;overflow:hidden}
.wave span{background:var(--border);flex:1;min-width:2px;height:var(--h)}
.quarantine{font:500 12px/1.5 var(--font-mono);padding:4px 7px;border:1px solid var(--warning);color:var(--warning);background:var(--surface);white-space:nowrap}

.stages{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));border-top:2px solid var(--text);background:var(--surface)}
.stages li{margin:0;padding:14px 12px;border-left:1px solid var(--line);font-size:13px;color:var(--muted)}
.stages li:first-child{border-left:0}
.stages b{display:block;font-weight:var(--weight-medium);font-size:14px;color:var(--text)}
.stages .mono{display:block;margin-top:2px}
.stages li.is-done b{color:var(--success)}
.stages li.is-current{background:var(--highlight);box-shadow:inset 0 -3px var(--action)}
.stages li.is-current b{color:var(--action)}
.log-table{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface);border-block:1px solid var(--line)}
.log-table th{padding:12px 16px;font-size:12px;font-weight:var(--weight-medium);color:var(--muted);background:var(--bg);text-align:left}
.log-table td{padding:14px 16px;border-top:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.log-table tr.day td{background:var(--bg);font:500 12px/1.5 var(--font-mono);color:var(--muted);padding:10px 16px;text-transform:uppercase;letter-spacing:.08em}
.log-table .time{font:500 13px var(--font-mono);color:var(--action);white-space:nowrap}
.actor{display:inline-block;font:500 12px/1.5 var(--font-mono);padding:3px 7px;border:1px solid var(--line);background:var(--bg);white-space:normal}
.actor.operator{border-color:var(--action);color:var(--action);background:var(--highlight)}
.actor.system{color:var(--muted)}
.actor.recipient{border-color:var(--border)}
.actor.session{border-color:var(--text)}

/* ---------- 14. caja de acciones ---------- */
.panel-actions{background:var(--surface);border:1px solid var(--border);padding:24px;margin-top:24px}
.panel-actions>h2{font-size:19px}
.panel-actions>h2~.row{margin-top:20px}
.panel-actions .help{margin-top:16px}

/* ---------- 15. PANEL responsive ---------- */
/* ancho de ventana: la barra lateral se estrecha y, en móvil, pasa arriba */
@media(max-width:1179px){
  .panel-app{grid-template-columns:208px minmax(0,1fr)}
  .panel-top{padding:0 20px}
  .panel-top .access{display:none}
  .panel-main{padding:24px 20px 48px}
  .panel-side{font-size:14px;padding-inline:8px}
  .panel-side a{padding:8px}
}
@media(max-width:719px){
  .panel-app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr}
  .panel-top{padding:12px 16px;flex-wrap:wrap;gap:8px 12px}
  .panel-top .context{flex-basis:100%;order:3}
  .panel-side{border-right:0;border-bottom:1px solid var(--line);padding:12px 16px}
  .panel-side-inner{position:static;display:flex;flex-wrap:wrap;gap:4px 8px}
  .panel-side .eyebrow{flex-basis:100%;margin:8px 0 0}
  .panel-side .eyebrow:first-child{margin-top:0}
  .panel-side a{flex:0 1 auto}
  .panel-side-note{display:none}
  .panel-main{padding:20px 16px 40px}
}
/* ancho del contenedor (.panel-main): tablas a tarjetas, rejillas a una columna */
@container panel (max-width:899px){
  .data-table thead{display:none}
  .data-table,.data-table tbody{display:block}
  .data-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:16px;border-top:1px solid var(--border);gap:16px}
  .data-table td{padding:0;border:0;display:block;width:auto!important}
  .data-table td:before{content:attr(data-label);display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
  .data-table td:nth-child(2){grid-column:1 / -1;grid-row:1}
  .approval-grid,.review-grid{grid-template-columns:minmax(0,1fr)}
  .review-side,.approval-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
  .review-side .panel-card,.approval-fields .panel-card{margin-bottom:0}
  .page-heading{flex-direction:column;gap:16px}
  .stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stages li{border-left:0;border-top:1px solid var(--line)}
  .log-table thead{display:none}
  .log-table,.log-table tbody{display:block}
  .log-table tr{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 12px;padding:12px 16px;border-top:1px solid var(--line)}
  .log-table td{display:block;padding:0;border:0}
  .log-table td:nth-child(3){grid-column:1 / -1}
  .log-table td:nth-child(4){grid-column:1 / -1;color:var(--muted)}
  .log-table tr.day{display:block;padding:0}
  .log-table tr.day td{padding:10px 16px}
}
@container panel (max-width:439px){
  .data-table tr{grid-template-columns:minmax(0,1fr)}
  .data-table td:nth-child(2){grid-column:1;grid-row:1}
  .review-item .question-head{grid-template-columns:minmax(0,1fr)}
  .kv>div,.file-meta>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .mail-envelope dl>div{grid-template-columns:minmax(0,1fr);gap:2px;margin:12px 0}
  .panel-actions .row{flex-direction:column;align-items:stretch}
  .filters select{width:100%}
  .stages{grid-template-columns:minmax(0,1fr)}
}
/* columna lateral en dos columnas: sus listas de datos van apiladas */
@container panel (min-width:620px) and (max-width:899px){
  .review-side .file-meta>div,.approval-fields .kv>div{grid-template-columns:minmax(0,1fr);gap:2px}
}
@container panel (max-width:619px){
  .review-side,.approval-fields{display:block}
  .review-side .panel-card,.approval-fields .panel-card{margin-bottom:20px}
  .review-item{padding:20px 16px}
  .mail-envelope{padding:16px}
  .compare{font-size:13px}
  .compare td,.compare th{padding:10px 5px}
  .panel-actions{padding:20px 16px}
}
/* sin container queries (navegadores viejos): al menos nada se sale de la ventana */
@supports not (container-type:inline-size){
  @media(max-width:899px){.data-table thead{display:none}.data-table,.data-table tbody{display:block}.data-table tr{display:block;padding:16px;border-top:1px solid var(--border)}.data-table td{display:block;padding:0 0 12px;border:0;width:auto!important}.data-table td:before{content:attr(data-label);display:block;font-size:12px;color:var(--muted)}.approval-grid,.review-grid{grid-template-columns:minmax(0,1fr)}}
}
@media print{
  .panel-side,.skip{display:none}
  .panel-app{display:block}
  body{background:#fff;color:#000}
  .panel-card,.review-item,.question{break-inside:avoid}
}