/* Portal de NeonDock (/admin/) · Sistema Dock con el estándar Linear: marco en «L» (menú lateral atenuado y contenido
   encima), compacto y ligero, sin sombras, un solo acento (cian) y claro/oscuro desde los tokens del tema (tema.php). */
@font-face { font-family: "Outfit"; src: url("/admin/fuentes/outfit-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/admin/fuentes/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/admin/fuentes/geist-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --marca: #03d8dd; /* el cian del imagotipo, igual en claro y oscuro */
  --display: "Outfit", "Geist", system-ui, sans-serif;
  /* --ok, --error y --aviso vienen del tema (tema.php), uno para claro y otro para oscuro */
  /* nombres antiguos, para las piezas del correo */
  --board: var(--fondo); --board-2: var(--superficie); --board-3: var(--superficie-2); --ink: var(--tinta); --ink-2: var(--tinta-2);
  --ink-3: var(--tinta-3); --rule: var(--linea); --rule-strong: var(--linea-2); --amber: var(--acento);
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r: 8px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 14px/1.5 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--tinta); text-decoration-color: var(--linea-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--acento); color: var(--sobre-acento); padding: .5rem .75rem; border-radius: var(--r); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
kbd { font: 500 11px/1 var(--mono); padding: 2px 5px; border-radius: 4px; border: 1px solid var(--linea); color: var(--tinta-3); background: var(--superficie); }

/* ---------- Marco: menú lateral + contenido ---------- */
body.con-menu { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; background: var(--fondo-2); }
.lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: .75rem; padding: 18px 10px 14px; container-type: inline-size; }
/* Imagotipo: la palabra en Outfit y la barra cian inclinada; ocupa todo el ancho de la barra lateral. */
.marca, .login-marca { display: flex; align-items: center; font-family: var(--display); font-weight: 500; letter-spacing: -.02em; line-height: 1; color: var(--tinta); text-decoration: none; white-space: nowrap; }
.marca { padding: 2px 8px 8px; font-size: calc((100cqi - 16px) / 5.2); }
.marca i, .login-marca i { display: inline-block; width: .32em; height: .78em; margin-left: .14em; background: var(--marca); transform: skewX(-24deg); flex: none; }
.buscar { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; padding: 4px 8px; border: 1px solid var(--linea);
  border-radius: var(--r); background: var(--fondo); color: var(--tinta-3); font: inherit; font-size: 13px; cursor: pointer; }
.buscar:hover { color: var(--tinta); border-color: var(--linea-2); }
.lateral nav { display: grid; }
.lateral nav > ul { margin-top: 6px; }
/* «Más»: lo de segundo nivel, plegado. Abierto solo si estás en una de sus secciones. */
.mas { margin-top: 10px; }
.mas summary { display: flex; align-items: center; gap: .5rem; min-height: 30px; padding: 4px 8px; border-radius: 6px; cursor: pointer;
  list-style: none; color: var(--tinta-3); font-size: 13px; }
.mas summary::-webkit-details-marker { display: none; }
.mas summary::after { content: ''; width: 6px; height: 6px; margin-left: auto; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(-45deg); transition: transform .15s; }
.mas[open] summary::after { transform: rotate(45deg); }
.mas summary:hover { color: var(--tinta); background: var(--superficie-2); }
.mas summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.punto { width: 6px; height: 6px; border-radius: 50%; background: var(--acento); }
.lateral ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.lateral li a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 30px; padding: 4px 8px; border-radius: 6px;
  color: var(--tinta-2); text-decoration: none; font-size: 13.5px; }
.lateral li a:hover { background: var(--superficie-2); color: var(--tinta); }
.lateral li a { position: relative; }
.lateral li a[aria-current="page"] { background: var(--superficie-2); color: var(--tinta); font-weight: 550; }
.lateral li a[aria-current="page"]::before { content: ''; position: absolute; left: -6px; top: 50%; width: 4px; height: 14px; margin-top: -7px; background: var(--acento); transform: skewX(-24deg); }
.badge { min-width: 20px; padding: 0 6px; border-radius: 10px; text-align: center; font: 600 11px/18px var(--mono); background: var(--acento-suave); color: var(--tinta); }
.pie-lateral { margin-top: auto; display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--linea); }
.yo { display: grid; padding: 4px 8px; border-radius: 6px; text-decoration: none; line-height: 1.3; }
.yo:hover, .yo[aria-current="page"] { background: var(--superficie-2); }
.yo b { font-weight: 550; font-size: 13.5px; }
.yo span { color: var(--tinta-3); font-size: 12px; }
.pie-botones { display: flex; align-items: center; gap: 12px; padding: 0 8px; font-size: 13px; }
.pie-botones a { color: var(--tinta-3); text-decoration: none; }
.pie-botones a:hover { color: var(--tinta); }
.pie-botones .tema { min-height: 28px; width: 28px; padding: 0; border-radius: 6px; background: transparent; border-color: var(--linea); color: var(--tinta-3); }
.tema svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.tema svg path { fill: currentColor; stroke: none; }
body.con-menu main { background: var(--fondo); border-left: 1px solid var(--linea); min-height: 100vh; }
main { padding: clamp(16px, 3vw, 32px) clamp(16px, 3.5vw, 40px) 64px; width: 100%; }
main > * { max-width: 1180px; }
main:focus { outline: none; }

/* ---------- Tipografía y piezas comunes ---------- */
/* El acento del imagotipo como elemento: la barra inclinada cierra los títulos y abre las secciones. */
h1 { font-family: var(--display); font-size: 26px; font-weight: 500; letter-spacing: -.025em; line-height: 1.2; margin: 0 0 4px; }
h1::after { content: ''; display: inline-block; width: .3em; height: .72em; margin-left: .16em; background: var(--acento); transform: skewX(-24deg); vertical-align: -.02em; }
h1 .tenue { color: var(--tinta-3); font-weight: 500; }
h2 { font-size: 15px; font-weight: 600; margin: 28px 0 10px; display: flex; gap: .6rem; align-items: baseline; }
h2::before { content: ''; align-self: center; width: 6px; height: 11px; background: var(--acento); transform: skewX(-24deg); flex: none; }
.caja-ficha h3 { display: flex; align-items: center; gap: 8px; }
.caja-ficha h3::before { content: ''; width: 5px; height: 10px; background: var(--acento); transform: skewX(-24deg); flex: none; }
h2 .n, h2 .meta { color: var(--tinta-3); font-weight: 450; font-size: 13px; }
h3 { font-size: 13.5px; font-weight: 600; margin: 0 0 6px; }
.sub { color: var(--tinta-3); margin: 0 0 16px; max-width: 72ch; }
.meta { color: var(--tinta-3); font-size: 12.5px; }
.cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 32px; margin-bottom: 16px; }
.cab .sub { margin-bottom: 0; }
.miga { margin: 0 0 10px; font-size: 13px; color: var(--tinta-3); }
.miga a { color: var(--tinta-3); text-decoration: none; }
.miga a:hover { color: var(--tinta); }
.aviso { background: var(--superficie); border: 1px solid var(--linea); border-left: 3px solid var(--acento); border-radius: var(--r); padding: 10px 14px; margin: 0 0 16px; }
.aviso.mal { border-left-color: var(--error); }
.vacio { color: var(--tinta-3); padding: 16px; border: 1px dashed var(--linea-2); border-radius: var(--r); }
.fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.codigo { font: 600 13px/1 var(--mono); letter-spacing: .04em; }
.enlace { font: 12.5px/1.4 var(--mono); color: var(--tinta-2); overflow-wrap: anywhere; }
.tarde { color: var(--error); font-weight: 550; }
pre { white-space: pre-wrap; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); padding: 10px 12px; font-size: 13px; }
code { font-family: var(--mono); font-size: .92em; color: var(--tinta-2); }
details summary { cursor: pointer; color: var(--tinta-2); }

/* Controles */
input[type=text], input[type=password], input[type=email], input[type=search], input[type=number], input[type=date], select, textarea {
  background: var(--fondo); color: var(--tinta); border: 1px solid var(--linea-2); border-radius: 6px; padding: 5px 9px; font: inherit; min-height: 32px; }
textarea { width: 100%; min-height: 64px; resize: vertical; line-height: 1.45; }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 1px; }
button, .boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 550; font-size: 13px; min-height: 32px;
  padding: 4px 12px; border: 1px solid var(--linea-2); border-radius: 6px; background: var(--superficie); color: var(--tinta); cursor: pointer; text-decoration: none; white-space: nowrap; }
button:hover, .boton:hover { background: var(--superficie-2); }
button:active, .boton:active { transform: translateY(1px); }
button.primario, .boton.primario { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
button.primario:hover, .boton.primario:hover { background: var(--acento-osc); border-color: var(--acento-osc); }
button.discreto { background: transparent; border-color: transparent; color: var(--tinta-2); padding-inline: 8px; }
button.discreto:hover { background: var(--superficie-2); color: var(--tinta); }
button.peligro { color: var(--error); }

/* Estados: pastillas pequeñas, en frase normal */
.estado { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 550; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--linea-2); color: var(--tinta-2); white-space: nowrap; }
.estado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado.activo, .estado.enviado, .estado.pagado, .estado.entregado, .estado.ok { color: var(--ok); }
.estado.solicitud, .estado.sin_enviar, .estado.local, .estado.por_pagar, .estado.pausa { color: var(--aviso); }
.estado.error, .estado.rechazado, .estado.cancelado { color: var(--error); }
.estado.etapa { color: var(--tinta); border-color: var(--acento); }
.estado.etapa::before { background: var(--acento); }
.pastillas { display: flex; flex-wrap: wrap; gap: 6px; }

/* Tablas */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { color: var(--tinta-3); font-weight: 500; font-size: 12.5px; }
tbody tr:hover { background: var(--fondo-2); }
.tabla-enlaces tbody tr { position: relative; }
.fila-enlace { text-decoration: none; }
.fila-enlace::after { content: ''; position: absolute; inset: 0; }
.fila-enlace:focus-visible { outline: none; }
.tabla-enlaces tbody tr:has(.fila-enlace:focus-visible) { outline: 2px solid var(--acento); outline-offset: -2px; }
tr.apagada td { color: var(--tinta-3); }
.acciones-fila { text-align: right; white-space: nowrap; }
.acciones-fila form { display: inline-block; margin: 0 0 0 4px; }

/* Cifras de cabecera y filtros */
.cifras { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0; }
.cifras div { display: grid; }
.cifras dt { color: var(--tinta-3); font-size: 12px; }
.cifras dd { margin: 0; font: 600 18px/1.3 var(--mono); }
.filtros { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; }
.filtros a { display: inline-flex; gap: 6px; align-items: center; min-height: 28px; padding: 2px 10px; border: 1px solid var(--linea); border-radius: 14px; color: var(--tinta-2); text-decoration: none; font-size: 13px; }
.filtros a span { color: var(--tinta-3); font: 12px var(--mono); }
.filtros a:hover { border-color: var(--linea-2); color: var(--tinta); }
.filtros a[aria-current="page"] { background: var(--superficie-2); border-color: var(--linea-2); color: var(--tinta); font-weight: 550; }

/* Plegables y formularios */
.plegable { margin-top: 24px; border-top: 1px solid var(--linea); padding-top: 12px; }
.plegable > summary { font-weight: 550; color: var(--tinta); list-style: none; display: flex; align-items: center; gap: 8px; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--tinta-3); border-bottom: 1.5px solid var(--tinta-3); transform: rotate(-45deg); transition: transform 150ms; }
.plegable[open] > summary::before { transform: rotate(45deg); }
.plegable > :not(summary) { margin-top: 12px; }
.form-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; max-width: 820px; align-items: end; }
.form-rejilla.estrecho { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.form-rejilla label { display: grid; gap: 4px; font-size: 13px; color: var(--tinta-2); }
.form-rejilla .fila { grid-column: 1 / -1; }
.clave-nueva { display: grid; gap: 8px; justify-items: start; padding: 14px 16px; margin: 0 0 16px; border: 1px solid var(--acento); border-radius: var(--r); background: var(--acento-suave); }
.clave-nueva p { margin: 0; }
.clave-nueva code { font: 600 20px/1.2 var(--mono); color: var(--tinta); letter-spacing: .04em; user-select: all; }

/* ---------- Ficha de pedido ---------- */
.ficha-cab h1 { max-width: 60ch; }
.etapas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; list-style: none; margin: 0 0 24px; padding: 0; counter-reset: e; }
.etapas li { counter-increment: e; padding: 8px 0 0; border-top: 2px solid var(--linea); color: var(--tinta-3); font-size: 12.5px; }
.etapas li span::before { content: counter(e) ' · '; font-family: var(--mono); }
.etapas li.hecha { border-top-color: var(--tinta-3); color: var(--tinta-2); }
.etapas li.actual { border-top-color: var(--acento); color: var(--tinta); font-weight: 600; }
.etapas li.actual span::after { content: ''; display: inline-block; width: 5px; height: 10px; margin-left: 6px; background: var(--acento); transform: skewX(-24deg); }
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.vida h2 { margin-top: 0; }
.nota-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin-bottom: 16px; }
.nota-form textarea { min-height: 38px; }
.linea-vida { list-style: none; margin: 0; padding: 0; position: relative; }
.linea-vida::before { content: ''; position: absolute; left: 72px; top: 6px; bottom: 6px; width: 1px; background: var(--linea); }
.ev { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 24px; padding: 7px 0; }
.ev-tipo { position: relative; justify-self: end; font-size: 11.5px; color: var(--tinta-3); padding: 1px 0; text-align: right; }
.ev-tipo::after { content: ''; position: absolute; right: -15px; top: 5px; width: 5px; height: 11px; background: var(--linea-2); transform: skewX(-24deg); }
.ev-cuerpo { display: grid; gap: 1px; min-width: 0; }
.ev-cuerpo p { margin: 0; overflow-wrap: anywhere; }
.ev-cuerpo a { overflow-wrap: anywhere; }
.ev-nota .ev-cuerpo p { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); padding: 8px 10px; }
.ev-pago .ev-tipo::after { background: var(--ok); }
.ev-etapa .ev-tipo::after, .ev-inicio .ev-tipo::after, .ev-correo-in .ev-tipo::after { background: var(--acento); }
.ev.nuevo .ev-cuerpo a { font-weight: 650; }
.datos-ficha { display: grid; gap: 12px; position: sticky; top: 16px; }
.caja-ficha { display: grid; gap: 8px; justify-items: start; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--superficie); }
.caja-ficha p { margin: 0; }
.caja-ficha form, .caja-ficha select { max-width: 100%; }
.caja-ficha .fila { width: 100%; }
.caja-ficha select { width: 100%; }
.datos { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 13px; margin: 0; width: 100%; }
.datos dt { color: var(--tinta-3); }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.lista-simple { margin: 0; padding-left: 16px; }
.cita { white-space: pre-wrap; padding-left: 10px; border-left: 2px solid var(--linea-2); color: var(--tinta-2); }

/* ---------- Entrada ---------- */
body.sin-menu { display: grid; place-items: center; min-height: 100vh; background: var(--fondo-2); }
body.sin-menu main { max-width: 400px; }
.login { display: grid; gap: 8px; padding: 28px; background: var(--fondo); border: 1px solid var(--linea); border-radius: 12px; width: min(360px, calc(100vw - 32px)); }
.login h1 { margin-bottom: 10px; }
.login h1::after { display: none; }
.login-marca { margin: 0 0 18px; font-size: 40px; }
.login label { color: var(--tinta-2); font-size: 13px; margin-top: 4px; }
.login button { margin-top: 10px; min-height: 36px; }
.login .meta { margin: 4px 0 0; }
.err { color: var(--error); margin: 0; }

/* ---------- Resumen, agentes, material, ajustes (piezas heredadas, con los tokens nuevos) ---------- */
.tarjetas { display: grid; gap: 8px; }
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px 24px; }
.tarjeta h3 { margin: 0; font-size: 14px; }
.quien { margin: 6px 0 0; color: var(--tinta-2); white-space: pre-wrap; }
.acciones { display: grid; gap: 6px; align-content: start; }
.resumen-mes { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0 0 20px; }
.resumen-mes div { display: grid; gap: 2px; }
.resumen-mes b { font: 600 18px/1.3 var(--mono); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 16px 0 0; }
.kpi { display: grid; gap: 4px; padding: 12px 14px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); text-decoration: none; }
a.kpi:hover { border-color: var(--linea-2); }
.kpi .meta { font-size: 12px; }
.kpi b { font: 600 22px/1.1 var(--mono); }
.kpi.atencion b { color: var(--tinta); }
.kpi.atencion { border-color: var(--acento); }
.kpi.mal b { color: var(--error); }
.dos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; }
.lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.lista li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 2px; border-bottom: 1px solid var(--linea); }
.lista li:has(> a) { padding: 0; }
.lista li > a { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 6px; color: inherit; text-decoration: none; }
.lista li > a:hover { background: var(--superficie); }
.inicio { max-width: 760px; }
.inicio h2:first-child { margin-top: 8px; }
.pendiente li > a { justify-content: flex-start; }
.pendiente b.num { min-width: 2.5ch; font: 600 15px/1 var(--mono); color: var(--acento); }
.compartir { display: grid; gap: 6px; }
.compartir div { display: grid; gap: 2px; padding: 10px 12px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); }
.ajustes { display: grid; border-top: 1px solid var(--linea); max-width: 820px; }
.interruptor { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 24px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--linea); }
.interruptor .t { font-weight: 550; }
.interruptor .meta { grid-column: 1; }
.interruptor button { grid-column: 2; grid-row: 1 / span 2; min-width: 7rem; }
.interruptor button[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.interruptor form.fila { grid-column: 2; grid-row: 1 / span 2; flex-wrap: nowrap; gap: 4px; }
.interruptor form.fila button { min-width: 6rem; }
.interruptor.general { background: var(--superficie); padding: 12px 14px; border: 1px solid var(--linea-2); border-radius: var(--r); margin-bottom: 10px; }
.bloque { margin-top: 28px; max-width: 820px; }

/* ---------- Paleta de órdenes (Ctrl/⌘ K) ---------- */
.paleta { margin: 12vh auto auto; width: min(600px, calc(100% - 24px)); max-height: 70vh; padding: 0; border: 1px solid var(--linea-2); border-radius: 12px; background: var(--superficie); color: var(--tinta); overflow: hidden; display: none; flex-direction: column; }
.paleta[open] { display: flex; animation: paleta-entra 160ms cubic-bezier(.25, 1, .5, 1); }
.paleta::backdrop { background: color-mix(in oklch, var(--fondo) 55%, transparent); backdrop-filter: blur(2px); }
.paleta input[type="search"] { border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; padding: 14px 18px; min-height: 0; font-size: 15px; background: transparent; outline: none; }
.paleta ul { list-style: none; overflow-y: auto; margin: 0; padding: 6px; }
.paleta li { display: grid; grid-template-columns: 82px minmax(0, auto) minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.paleta li small { font-size: 11.5px; color: var(--tinta-3); }
.paleta li b { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paleta li span { color: var(--tinta-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paleta li[aria-selected="true"] { background: var(--acento-suave); }
.paleta li.vacio { display: block; color: var(--tinta-3); cursor: default; border: 0; }
.paleta-pie { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 9px 16px; border-top: 1px solid var(--linea); font-size: 12px; color: var(--tinta-3); }
@keyframes paleta-entra { from { opacity: 0; transform: translateY(-6px) scale(.985); } }

@media (max-width: 1000px) {
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .datos-ficha { position: static; grid-row: 1; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 900px) {
  body.con-menu { display: block; }
  .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; border-bottom: 1px solid var(--linea); }
  .buscar { width: auto; margin-left: auto; }
  .marca { font-size: 26px; padding: 0; }
  .lateral li a[aria-current="page"]::before { display: none; }
  .lateral nav { display: flex; flex-wrap: wrap; gap: 2px; width: 100%; }
  .mas { margin: 0; }
  .mas[open] { flex-basis: 100%; }
  .mas[open] ul { display: flex; flex-wrap: wrap; gap: 2px; }
  .lateral ul { display: contents; }
  .pie-lateral { margin: 0; width: 100%; display: flex; justify-content: space-between; border-top: 0; padding: 0; }
  body.con-menu main { border-left: 0; }
  .dos { grid-template-columns: minmax(0, 1fr); }
  .etapas { grid-template-columns: repeat(5, minmax(0, 1fr)); font-size: 11px; }
}
@media (max-width: 760px) {
  .tarjeta { grid-template-columns: minmax(0, 1fr); }
  .tabla-enlaces th:nth-child(n+4), .tabla-enlaces td:nth-child(n+4):not(.num) { display: none; }
  .etapas li:not(.actual) span::before { content: counter(e); }
  .etapas li:not(.actual) span { font-size: 0; }
  .etapas li:not(.actual) span::before { font-size: 12px; }
  .nota-form { grid-template-columns: minmax(0, 1fr); }
  .paleta li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .paleta[open] { animation: none; } }

/* ---------- Correo del panel (Buzones y buzon.php, 20-oct-2026) ---------- */
.aviso.mal { border-left-color: var(--error); }
.bloque.ancho { max-width: none; }
.buzon-vacio { max-width: 640px; padding: 1.25rem; }
.buzon-vacio p { margin: 0 0 .6rem; }
.buzon-vacio p:last-child { margin: .4rem 0 0; }
.buzon-tarjeta h3 { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; overflow-wrap: anywhere; }
.buzon-tarjeta .acciones form { margin: 0; }
.buzon-tarjeta .acciones > form > button, .buzon-tarjeta .acciones > .boton { width: 100%; }
.buzon-fallo { margin-top: .6rem; font-size: .92rem; overflow-wrap: anywhere; }
.buzon-form { display: grid; gap: .45rem; max-width: 520px; margin: .75rem 0 0; }
.buzon-form label { color: var(--ink-2); font-size: .95rem; margin-top: .35rem; }
.buzon-form .fila { margin-top: .5rem; }
.buzon-nota { margin: .9rem 0 0; max-width: 72ch; }
.buzon-sub { font-size: 1rem; margin: 1.75rem 0 .25rem; }
.buzon-det summary { list-style: none; display: inline-flex; align-items: center; min-height: 42px; padding: .5rem .95rem; border: 1px solid var(--rule-strong);
  background: var(--board-3); font-weight: 600; color: var(--ink); }
.buzon-tarjeta .buzon-det summary { width: 100%; justify-content: center; }
.buzon-det summary::-webkit-details-marker { display: none; }
.buzon-det[open] summary { border-color: var(--error); color: var(--error); }
.buzon-det form { display: grid; gap: .5rem; margin-top: .6rem; padding: .75rem; background: var(--board); border: 1px solid var(--rule-strong); }
.buzon-det p { margin: 0; font-size: .9rem; }
.buzon-alerta { border: 1px solid var(--error); border-left-width: 4px; background: color-mix(in oklch, var(--error) 10%, var(--fondo)); padding: .85rem 1rem; max-width: 72ch; }
.buzon-alerta p { margin: 0 0 .5rem; }
.buzon-alerta p:last-child { margin: 0; color: var(--ink-2); }
.buzon-check { display: flex; gap: .55rem; align-items: flex-start; color: var(--ink-2); line-height: 1.4; }
.buzon-check input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--acento); flex: none; }
.buzon-form .buzon-check { margin-top: .6rem; }
.buzon-dominio { display: flex; align-items: stretch; }
.buzon-dominio input { flex: 1; min-width: 0; }
.buzon-dominio span { display: inline-flex; align-items: center; padding: 0 .7rem; border: 1px solid var(--rule-strong); border-left: 0; background: var(--board-2); color: var(--ink-3); }
.buzon-destinos { display: grid; gap: .35rem; border: 1px solid var(--rule); padding: .6rem .8rem; margin: .35rem 0 0; }
.buzon-destinos legend { color: var(--ink-2); padding: 0 .3rem; }

/* Cliente de correo */
.buz { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.buz [hidden] { display: none !important; }
.buz-lado { position: sticky; top: 1rem; display: grid; gap: .75rem; }
.buz-selector { display: grid; gap: .25rem; }
.buz-selector select { width: 100%; }
.buz-dir { display: grid; gap: .1rem; margin: 0; overflow-wrap: anywhere; }
.buz-redactar { width: 100%; }
.buz-carpetas { display: grid; gap: 2px; border-top: 1px solid var(--rule); padding-top: .5rem; }
.buz-carpetas a { display: flex; justify-content: space-between; gap: .5rem; align-items: center; min-height: 38px; padding: .4rem .6rem; color: var(--ink-2);
  text-decoration: none; border-left: 2px solid transparent; }
.buz-carpetas a:hover { background: var(--board-2); color: var(--ink); }
.buz-carpetas a[aria-current="page"] { background: var(--board-3); color: var(--ink); border-left-color: var(--amber); }
.buz-carpetas a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buz-carpetas b { font: 700 .78rem/1.4rem ui-monospace, Consolas, monospace; min-width: 1.4rem; padding: 0 .35rem; text-align: center; background: var(--amber); color: var(--sobre-acento); }
.buz-nueva summary { color: var(--ink-3); font-size: .92rem; }
.buz-nueva form { margin-top: .5rem; }
.buz-nueva input { flex: 1; min-width: 0; }
.buz-admin { color: var(--ink-3); font-size: .92rem; padding-top: .6rem; border-top: 1px solid var(--rule); }
.buz-admin:hover { color: var(--ink); }
.buz-main { min-width: 0; }
.buz-titulo { font-size: 1.5rem; display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.buz-titulo .meta { font-size: .95rem; font-weight: 400; }
.buz-lista-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; align-items: center; margin-bottom: .75rem; }
.buz-buscar input[type=search] { width: min(320px, 100%); }
.buz-lista-acciones { padding: .5rem .25rem; border-bottom: 1px solid var(--rule); }
.buz-lista-acciones button, .buz-lista-acciones select { min-height: 36px; padding-top: .3rem; padding-bottom: .3rem; }
.buz-vaciar { margin-left: auto; }
.buz-filas { list-style: none; margin: 0; padding: 0; }
.buz-fila { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; border-bottom: 1px solid var(--rule); }
.buz-fila:hover { background: var(--board-2); }
.buz-fila.sel { background: var(--board-3); }
.buz-fila-sel { display: grid; place-items: center; width: 40px; min-height: 48px; cursor: pointer; }
.buz-fila-sel input { width: 1.05rem; height: 1.05rem; accent-color: var(--acento); }
.buz-fila-a { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .7rem .5rem .7rem 0;
  text-decoration: none; color: var(--ink-2); }
.buz-fila-quien, .buz-fila-asunto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buz-fila.nuevo .buz-fila-quien, .buz-fila.nuevo .buz-fila-asunto { color: var(--ink); font-weight: 700; }
.buz-fila.nuevo .buz-fila-sel { box-shadow: inset 3px 0 0 var(--amber); }
.buz-fila-meta { display: flex; gap: .6rem; align-items: center; color: var(--ink-3); font-size: .88rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.buz-estrella { color: var(--amber); }
.buz-clip { font-size: .75rem; border: 1px solid var(--rule-strong); padding: 0 .3rem; color: var(--ink-3); }
.buz-pag { justify-content: center; margin-top: 1rem; }
.buz-msg-barra { padding-bottom: .75rem; border-bottom: 1px solid var(--rule); margin-bottom: 1rem; }
.buz-msg-barra form { margin: 0; }
.buz-msg-barra button[aria-pressed="true"] { color: var(--amber); }
.buz-msg-asunto { font-size: 1.4rem; margin: 0 0 .5rem; overflow-wrap: anywhere; }
.buz-msg-cab { margin: 0 0 1rem; }
.buz-msg-aviso { background: var(--board-2); border-left: 3px solid var(--amber); padding: .6rem .85rem; font-size: .92rem; color: var(--ink-2); }
.buz-msg-aviso a { color: var(--amber); font-weight: 600; }
.buz-msg-cuerpo { display: block; width: 100%; height: 420px; border: 1px solid var(--rule-strong); background: #fff; }
.buz-msg-adj { margin-top: 1.25rem; }
.buz-msg-adj h2 { margin: 0 0 .5rem; font-size: 1rem; }
.buz-msg-adj ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.buz-msg-adj li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .5rem .25rem; border-bottom: 1px solid var(--rule); }
.buz-msg-adjn { flex: 1; min-width: 12rem; overflow-wrap: anywhere; }
.buz-msg-pie { margin-top: 1rem; }
.buz-red { display: grid; gap: .5rem; max-width: 900px; }
.buz-red-fila { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: .5rem; align-items: center; }
.buz-red-fila > input { width: 100%; }
.buz-red-fila > span:last-child { grid-column: 2 / span 2; overflow-wrap: anywhere; color: var(--ink-2); }
.buz-red-et { color: var(--ink-3); font-size: .92rem; }
.buz-ed { border: 1px solid var(--rule-strong); margin-top: .25rem; }
.buz-ed-barra { display: flex; flex-wrap: wrap; gap: 2px; padding: .35rem; background: var(--board-2); border-bottom: 1px solid var(--rule-strong); }
.buz-ed-barra button { min-height: 34px; padding: .2rem .6rem; font-weight: 500; }
/* el texto del correo se escribe sobre blanco, como lo verá quien lo reciba */
.buz-ed-area { min-height: 280px; max-height: 60vh; overflow: auto; padding: 14px 16px; background: #fff; color: #1f2933; font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.buz-ed-area:focus { outline: 2px solid var(--amber); outline-offset: -2px; }
.buz-ed-area a { color: #1b516c; }
.buz-ed-area blockquote { margin: 8px 0 8px 4px; padding-left: 12px; border-left: 3px solid #cfd5dc; color: #52606d; }
.buz-ed-area img { max-width: 100%; height: auto; }
.buz-red-orig { display: grid; gap: .35rem; border: 1px solid var(--rule); padding: .6rem .8rem; }
.buz-red-orig legend { color: var(--ink-2); padding: 0 .3rem; }
.buz-red-acciones { margin-top: .5rem; }

@media (max-width: 1100px) {
  .buz-fila-a { grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .75rem; }
  .buz-fila-meta { grid-column: 2; grid-row: 1; }
  .buz-fila-asunto { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .buz { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .buz-lado { position: static; }
  .buz-carpetas { display: flex; flex-wrap: wrap; gap: .25rem; }
  .buz-carpetas a { border-left: 0; border-bottom: 2px solid transparent; }
  .buz-carpetas a[aria-current="page"] { border-bottom-color: var(--amber); }
  .buz-red-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .buz-red-et { grid-column: 1 / -1; }
  .buz-red-fila > span:last-child { grid-column: 1 / -1; }
}

/* ---------- Boards (24-oct-2026): revisiones visuales por rondas ---------- */
.menu-acciones { position: relative; }
.menu-acciones > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border: 1px solid var(--linea-2);
  border-radius: 6px; background: var(--superficie); font-size: 13px; font-weight: 550; }
.menu-acciones > summary::-webkit-details-marker { display: none; }
.menu-acciones > summary:hover { background: var(--superficie-2); }
.menu-acciones[open] > summary { border-color: var(--acento); }
.menu-acciones > div { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: min(360px, 86vw); display: grid; gap: 12px; padding: 14px;
  background: var(--superficie); border: 1px solid var(--linea-2); border-radius: var(--r); box-shadow: 0 12px 32px rgb(0 0 0 / .35); }
.col { display: grid; gap: 10px; }
.col label { display: grid; gap: 4px; font-size: 13px; color: var(--tinta-2); }
.col input[type=text], .col select { width: 100%; }
.col > button { justify-self: start; }
.crece { flex: 1; min-width: 180px; }

.ronda { border-top: 1px solid var(--linea); padding: 4px 0 20px; }
.ronda > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px 0 8px; }
.ronda > summary::-webkit-details-marker { display: none; }
.ronda > summary h2 { margin: 0; }
.ronda:not([open]) > summary { color: var(--tinta-2); }
.ronda-nota { margin: 0 0 14px; color: var(--tinta-2); max-width: 80ch; }

.piezas, .boards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.pieza > a, .boards > li > a { display: grid; height: 100%; text-decoration: none; color: inherit; background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r); overflow: hidden; transition: border-color .15s; }
.pieza > a:hover, .boards > li > a:hover { border-color: var(--linea-2); }
.pieza > a:focus-visible, .boards > li > a:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.pieza-medio { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--fondo); overflow: hidden; }
.pieza-medio img, .pieza-medio video { width: 100%; height: 100%; object-fit: contain; display: block; }
.es-video { position: absolute; left: 10px; bottom: 10px; width: 26px; height: 26px; border-radius: 50%; background: rgb(0 0 0 / .55); }
.es-video::after { content: ''; position: absolute; left: 10px; top: 8px; border: 5px solid transparent; border-left: 8px solid #fff; }
.es-nota { padding: 18px; font-size: 13px; line-height: 1.5; color: var(--tinta-2); align-self: stretch; overflow: hidden; }
.pieza-pie-tarjeta { display: grid; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--linea); }
.pieza-nombre { font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.pieza-nombre b { color: var(--acento); margin-right: 2px; }
.boards .pieza-nombre b { color: var(--tinta); }
.pieza-datos { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-height: 0; }
.pieza-datos:empty { display: none; }
.es-descartada .pieza-medio { opacity: .4; }
.estado.pieza-aprobada { color: var(--ok); border-color: color-mix(in oklch, var(--ok) 50%, transparent); }
.estado.pieza-descartada { color: var(--tinta-3); }
.estado.pieza-pendiente { color: var(--tinta); border-color: var(--acento); }

.subir { margin-top: 14px; }
.subir > summary { cursor: pointer; display: inline-block; font-size: 13px; color: var(--tinta-3); }
.subir > summary:hover { color: var(--tinta); }
.subir[open] > summary { margin-bottom: 10px; }
.subir form { max-width: 620px; padding: 14px; border: 1px dashed var(--linea-2); border-radius: var(--r); }
.subir progress { width: 100%; accent-color: var(--acento); }

.pieza-vista { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.pieza-grande { margin: 0; display: grid; place-items: center; min-height: 50vh; background: var(--board-3, var(--superficie-2)); border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; }
.pieza-grande img, .pieza-grande video { display: block; max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; }
.pieza-grande a { display: block; cursor: zoom-in; }
.pieza-nota { padding: 28px; max-width: 70ch; font-size: 15px; line-height: 1.6; white-space: normal; }
.pieza-lado { position: sticky; top: 16px; display: grid; gap: 14px; }
.pieza-lado h1 { font-size: 20px; margin: 0 0 4px; overflow-wrap: anywhere; }
.pieza-lado h1::after { display: none; }
.etq { display: inline-block; margin-right: 8px; padding: 0 7px; border-radius: 5px; background: var(--acento); color: var(--sobre-acento); font: 600 14px/22px var(--mono); vertical-align: 2px; }
.pieza-lado .meta { margin: 0; }
.pieza-texto { margin: 0; color: var(--tinta-2); white-space: normal; }
.decidir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--linea-2); border-radius: 7px; overflow: hidden; }
.decidir button { border: 0; border-radius: 0; background: transparent; color: var(--tinta-2); min-height: 34px; }
.decidir button + button { border-left: 1px solid var(--linea-2); }
.decidir button:hover { background: var(--superficie-2); color: var(--tinta); }
.decidir .d-aprobada[aria-pressed="true"] { background: color-mix(in oklch, var(--ok) 22%, transparent); color: var(--tinta); }
.decidir .d-descartada[aria-pressed="true"] { background: color-mix(in oklch, var(--error) 18%, transparent); color: var(--tinta); }
.decidir .d-pendiente[aria-pressed="true"] { background: var(--superficie-2); color: var(--tinta); }
.hilo { display: grid; gap: 10px; }
.hilo-c, .hilo-estado { font-size: 13px; }
.hilo-c p, .hilo-estado p { margin: 2px 0 0; color: var(--tinta-2); overflow-wrap: anywhere; }
.hilo-estado { color: var(--tinta-3); }
.hilo-estado p { color: var(--tinta-3); }
.comentar { display: grid; gap: 8px; }
.comentar button { justify-self: end; }
.pieza-pie { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 10px; border-top: 1px solid var(--linea); font-size: 13px; }
.pieza-pie > span { display: flex; gap: 12px; align-items: center; }
.pieza-pie a { color: var(--tinta-2); text-decoration: none; }
.pieza-pie a:hover { color: var(--tinta); }
@media (max-width: 1100px) {
  .pieza-vista { grid-template-columns: minmax(0, 1fr); }
  .pieza-lado { position: static; }
  .pieza-grande { min-height: 0; }
}

/* Brief de un pedido (24-oct-2026): bloques con sus respuestas */
.brief { display: grid; gap: 28px; max-width: 900px; }
.brief-bloque h2 { margin-top: 0; }
.brief-dl { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 0; margin: 0; border-top: 1px solid var(--linea); }
.brief-dl dt, .brief-dl dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.brief-dl dt { color: var(--tinta-3); font-size: 13px; padding-right: 16px; }
.brief-dl dd { overflow-wrap: anywhere; }
@media (max-width: 760px) { .brief-dl { grid-template-columns: minmax(0, 1fr); } .brief-dl dt { border-bottom: 0; padding-bottom: 0; } }

/* Flujo automático de una web (ficha del pedido) */
.flujo-fases { list-style: none; padding: 0; margin: 10px 0 12px; display: grid; gap: 4px; font-size: 13px; color: var(--tinta-3); }
.flujo-fases li { display: flex; align-items: center; gap: 8px; }
.flujo-fases li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--tinta-3); flex: none; }
.flujo-fases li.hecha { color: var(--tinta-2); }
.flujo-fases li.hecha::before { background: var(--tinta-3); }
.flujo-fases li.actual { color: var(--tinta); font-weight: 500; }
.flujo-fases li.actual::before { background: var(--marca); border-color: var(--marca); }

/* 25-oct · Preparado para la prueba formal: elegir dirección, web automática, móvil y táctil */
.seg { display: inline-flex; border: 1px solid var(--linea-2); border-radius: 7px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: transparent; color: var(--tinta-2); min-height: 32px; padding: 0 12px; }
.seg button + button { border-left: 1px solid var(--linea-2); }
.seg button[aria-pressed="true"] { background: var(--superficie-2); color: var(--tinta); }
.discreto-enlace { font-size: 13px; color: var(--tinta-2); text-decoration: none; }
.discreto-enlace:hover { color: var(--tinta); text-decoration: underline; }

/* Elige la dirección (boards · comparar) */
.ronda-elegir { margin: 2px 0 14px; }
.flujo-enlace { margin: 0 0 6px; font-size: 13px; }
.flujo-enlace a { color: var(--acento); font-weight: 550; text-decoration: none; }
.comparar-cab { flex-wrap: wrap; gap: 12px 24px; }
.comparar-controles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.comparar-notas { margin: 0 0 16px; font-size: 13px; color: var(--tinta-2); }
.comparar-notas summary { cursor: pointer; color: var(--tinta-3); }
.comparar-notas p { max-width: 80ch; margin: 8px 0 0; }
.comparar { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 14px; align-items: start; }
.cmp-col { display: grid; gap: 8px; min-width: 0; }
.cmp-col[hidden] { display: none; }
.cmp-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 30px; }
.cmp-cab h2 { margin: 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; min-width: 0; }
.cmp-cab h2::after { display: none; }
.cmp-nota { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cmp-vista { height: calc(100vh - 290px); min-height: 360px; overflow-y: auto; overscroll-behavior: contain; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: var(--r); }
.cmp-vista img { display: block; width: 100%; height: auto; }
.cmp-mov { display: none; }
.es-movil .cmp-vista:has(.cmp-mov) .cmp-esc { display: none; }
.es-movil .cmp-mov { display: block; max-width: 390px; margin: 0 auto; }
.cmp-col.es-elegida .cmp-vista { border-color: var(--acento); outline: 1px solid var(--acento); }
.cmp-col.es-descartada .cmp-vista { opacity: .55; }
.cmp-mas { margin: 0; font-size: 13px; }
.cmp-mas a { color: var(--tinta-2); }
.es-una .comparar { grid-template-columns: minmax(0, 1fr); }
.es-una .cmp-vista { height: auto; min-height: 0; max-width: 1240px; overflow: visible; }
.cmp-decidir { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding: 12px 0;
  background: var(--fondo); border-top: 1px solid var(--linea); }
.cmp-decidir textarea { flex: 1 1 320px; min-height: 38px; resize: vertical; }
.cmp-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-botones button[hidden] { display: none; }

/* Vista de pieza: capturas largas a lo ancho con scroll propio; móvil a su ancho */
.pieza-grande.alta { display: block; max-height: calc(100vh - 120px); overflow-y: auto; place-items: initial; }
.pieza-grande.alta img { width: 100%; max-height: none; }
.pieza-grande.es-movil img { width: auto; max-width: 390px; margin: 0 auto; }
.pieza-lado .seg { justify-self: start; }

/* Web automática en la ficha del pedido */
.flujo { margin: 0 0 24px; padding: 16px 18px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--superficie); display: grid; gap: 12px; }
.flujo-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.flujo-cab h2 { margin: 0; font-size: 15px; }
.flujo-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; font-size: 12px; color: var(--tinta-3); }
.flujo-pasos li { padding-top: 6px; border-top: 2px solid var(--linea); }
.flujo-pasos li.hecha { border-top-color: var(--tinta-3); color: var(--tinta-2); }
.flujo-pasos li.actual { border-top-color: var(--acento); color: var(--tinta); font-weight: 600; }
.flujo-accion { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.flujo-accion form { margin: 0; }
.flujo-accion .meta { margin: 0; }
.flujo-enlace-nuevo { padding: 12px; border-radius: var(--r); background: var(--acento-suave); display: grid; gap: 8px; }
.flujo-enlace-nuevo p { margin: 0; }
.copiar { display: flex; gap: 8px; }
.copiar input { flex: 1; min-width: 0; font: 12.5px/1.4 var(--mono); }
.flujo-comentarios summary { cursor: pointer; font-size: 13px; }
.flujo-comentarios .nuevo { color: var(--acento); }
.flujo-comentarios ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.flujo-comentarios li { padding: 8px 10px; border-radius: 6px; background: var(--superficie-2); }
.flujo-comentarios li.nuevo { background: var(--acento-suave); color: inherit; }
.flujo-comentarios li p { margin: 2px 0 0; overflow-wrap: anywhere; }

/* Inicio: lo que espera el flujo automático */
.lista.web-pendiente a { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.web-pendiente .ir { flex: none; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--acento); color: var(--sobre-acento); }

@media (max-width: 1100px) {
  /* Aprobar / Descartar siempre a mano: barra fija abajo */
  .pieza-vista { padding-bottom: 64px; }
  .pieza-vista .decidir { position: fixed; left: 12px; right: 12px; bottom: 10px; z-index: 20; background: var(--superficie); }
}
@media (max-width: 900px) {
  .buscar kbd { display: none; }
  .flujo-pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 8px; }
}
@media (max-width: 760px) {
  /* Cabecera compacta: marca y botones en una fila, secciones en otra con scroll lateral; la cuenta y la web, en Más */
  .lateral { padding: 8px 12px; gap: 6px 8px; }
  .lateral nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; order: 2; }
  .lateral nav::-webkit-scrollbar { display: none; }
  .lateral li a, .mas > summary { white-space: nowrap; }
  .pie-lateral { width: auto; margin-left: auto; order: 1; }
  .pie-lateral .yo, .pie-botones a[target="_blank"] { display: none; }
  .buscar span { font-size: 0; }
  .buscar span::before { content: "Buscar"; font-size: 13px; }
  .comparar { grid-template-columns: minmax(0, 1fr); }
  .cmp-decidir textarea { flex-basis: 100%; }
  .cmp-botones { width: 100%; }
  .cmp-botones button { flex: 1; }
  .flujo-pasos { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .flujo-pasos li:not(.actual) { font-size: 0; }
  .flujo-pasos li.actual { grid-column: span 4; }
}
/* Pantallas táctiles: nada que se toque por debajo de 44 px */
@media (pointer: coarse) {
  button, .boton, select, textarea, input:not([type=checkbox]):not([type=radio]), .seg button, .decidir button { min-height: 44px; }
  .lateral li a, .mas > summary, .pie-botones a, .pie-botones .tema, .buscar { min-height: 44px; display: inline-flex; align-items: center; }
  .pie-botones .tema { width: 44px; justify-content: center; }
  .filtros a, .pieza-pie a, .miga a, .subir > summary, .menu-acciones > summary, .cmp-mas a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Operación (25-oct-2026): Hospedaje y Dominios, lo que era el Centro de Operaciones */
.luz { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; white-space: nowrap; min-width: 0; color: var(--tinta); }
.luz i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.l-ok i { background: var(--ok); }
.l-aviso i { background: var(--aviso); box-shadow: 0 0 0 3px color-mix(in oklch, var(--aviso) 22%, transparent); }
.l-error i { background: var(--error); box-shadow: 0 0 0 3px color-mix(in oklch, var(--error) 22%, transparent); }
.l-nada i { background: var(--linea-2); }
.l-nada { color: var(--tinta-3); }
.l-aviso { color: var(--aviso); }
.l-error { color: var(--error); }
.pestanas { display: flex; gap: 2px; margin: 0 0 18px; border-bottom: 1px solid var(--linea); }
.pestanas a { padding: 8px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--tinta-2); text-decoration: none; font-weight: 550; font-size: 13.5px; }
.pestanas a:hover { color: var(--tinta); }
.pestanas a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--acento); }
.op-barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin: 0 0 14px; }
.op-barra .meta { margin: 0; }
.op-tira { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding: 10px 14px; margin: 0 0 14px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--superficie); }
.op-filas { border: 1px solid var(--linea); border-radius: var(--r); background: var(--superficie); margin: 0 0 12px; }
.op-filas-cab, .op-fila > summary { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(5, minmax(0, 1fr)) 14px; gap: 12px; align-items: center; padding: 0 14px; }
.op-filas-cab { height: 34px; font-size: 12px; color: var(--tinta-3); border-bottom: 1px solid var(--linea); }
.op-fila + .op-fila { border-top: 1px solid var(--linea); }
.op-fila > summary { list-style: none; cursor: pointer; min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
.op-fila > summary::-webkit-details-marker { display: none; }
.op-fila > summary:hover { background: var(--superficie-2); }
.op-fila > summary::after { content: ''; width: 6px; height: 6px; border: solid var(--tinta-3); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); justify-self: end; transition: transform .15s; }
.op-fila[open] > summary::after { transform: rotate(-135deg); }
.op-nombre { display: flex; align-items: center; gap: 9px; min-width: 0; }
.op-nombre > i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--linea-2); }
.op-nombre > i.p-ok { background: var(--ok); }
.op-nombre > i.p-aviso { background: var(--aviso); }
.op-nombre > i.p-error { background: var(--error); }
.op-nombre > span { min-width: 0; }
.op-nombre b { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-nombre small { display: block; font-size: 12.5px; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-resumen { display: none; }
.op-cuerpo { padding: 4px 14px 14px 31px; background: var(--superficie-2); border-top: 1px solid var(--linea); }
.op-detalle { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px 18px; margin: 10px 0; }
.op-detalle dt { font-size: 12px; color: var(--tinta-3); }
.op-detalle dd { margin: 2px 0 0; display: grid; gap: 2px; }
.op-detalle small { color: var(--tinta-3); font-size: 12px; overflow-wrap: anywhere; }
.op-pie { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--linea); font-size: 13px; }
.op-pie p { color: var(--tinta-2); flex: 1 1 280px; margin: 0; }
.op-pie a { color: var(--acento); text-decoration: none; white-space: nowrap; }
.op-plegable { margin: 18px 0 0; }
.op-plegable > summary { cursor: pointer; color: var(--tinta-2); font-size: 13.5px; }
.op-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin-top: 12px; max-width: 760px; }
.op-form label { display: grid; gap: 4px; font-size: 13px; color: var(--tinta-2); }
.op-form .op-ancho { grid-column: 1 / -1; }
.op-form .op-check { display: flex; align-items: center; gap: 8px; }
.op-form button { justify-self: start; }
.op-traspaso { display: grid; gap: 12px; padding: 14px 16px; margin: 0 0 14px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--superficie); }
.op-traspaso-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.op-traspaso-cab h2 { margin: 0; font-size: 15px; }
.op-traspaso > .meta { margin: 0; }
.op-barra-progreso { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--linea); gap: 2px; }
.op-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--tinta-2); }
.op-leyenda li { display: inline-flex; align-items: center; gap: 7px; }
.op-leyenda i { width: 9px; height: 9px; border-radius: 3px; }
.tp-pendiente { background: var(--linea-2); }
.tp-codigo { background: var(--aviso); }
.tp-en_curso { background: color-mix(in oklch, var(--acento) 55%, var(--linea)); }
.tp-hostinger, .tp-dns { background: var(--acento); }
.tp-verificado { background: var(--ok); }
.op-tandas { margin: 0; display: grid; gap: 8px; }
.op-tandas > div { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 4px 14px; font-size: 13px; }
.op-tandas dt { font-weight: 600; }
.op-tandas dd { margin: 0; color: var(--tinta-2); overflow-wrap: anywhere; }
.op-pasos { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 10px 0 0; }
.op-pasos .meta { margin-right: 6px; }
.op-pasos .paso { font-size: 12.5px; padding: 4px 10px; min-height: 30px; border-radius: 999px; border: 1px solid var(--linea-2); background: transparent; color: var(--tinta-3); }
.op-pasos .paso.hecho { color: var(--tinta-2); border-color: var(--tinta-3); }
.op-pasos .paso.actual { color: var(--tinta); border-color: var(--acento); font-weight: 600; }
.op-atencion li > a { align-items: center; }
.op-atencion li > a { min-width: 0; }
.op-atencion li > a > .luz { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.op-atencion li > a > .meta { flex: 1 1 0; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .op-filas-cab { display: none; }
  .op-fila > summary { grid-template-columns: minmax(0, 1fr) auto 14px; }
  .op-fila > summary > .luz { display: none; }
  .op-resumen { display: block; }
  .op-cuerpo { padding-left: 14px; }
  .op-form { grid-template-columns: minmax(0, 1fr); }
  .op-tandas > div { grid-template-columns: minmax(0, 1fr); }
  .op-atencion .meta { display: none; }
}
@media (pointer: coarse) { .op-pasos .paso, .pestanas a { min-height: 44px; display: inline-flex; align-items: center; } }

/* Operación · fase 2: Proyectos, Agenda, Biblioteca y Módulos */
.op { --violeta: oklch(0.55 0.15 295); --turquesa: oklch(0.55 0.09 215); }
.op-etiqueta { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--superficie-2); color: var(--tinta-2); white-space: nowrap; justify-self: start; }
.e-desarrollo { background: var(--acento-suave); color: var(--acento); }
.e-rodaje { background: color-mix(in oklch, var(--aviso) 16%, transparent); color: var(--aviso); }
.e-mantenimiento { background: color-mix(in oklch, var(--ok) 14%, transparent); color: var(--ok); }
.e-standby { background: color-mix(in oklch, var(--violeta) 14%, transparent); color: var(--violeta); }
.e-propio { background: color-mix(in oklch, var(--turquesa) 14%, transparent); color: var(--turquesa); }
.t-cliente { color: var(--violeta); }
.t-nosotros { color: var(--acento); }
.op-alerta { font-size: 12.5px; font-weight: 600; margin: 0; }
.op-alerta.a-error { color: var(--error); }
.op-alerta.a-aviso { color: var(--aviso); }
.op-proyectos { list-style: none; margin: 0 0 14px; padding: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); }
.op-proyectos li + li { border-top: 1px solid var(--linea); }
.op-proyectos a { display: grid; grid-template-columns: minmax(0, 1.1fr) 170px minmax(0, 1.7fr) 64px; gap: 12px; align-items: center; padding: 10px 14px; text-decoration: none; color: inherit; }
.op-proyectos a:hover { background: var(--superficie-2); }
.op-proyectos b { font-weight: 600; display: block; }
.op-proyectos small { display: block; font-size: 12.5px; color: var(--tinta-3); }
.op-proyectos .toca { font-size: 13px; color: var(--tinta-2); }
.op-proyectos .toca em { font-style: normal; font-weight: 600; }
.op-proyectos .cuando { font-size: 12.5px; color: var(--tinta-3); white-space: nowrap; text-align: right; }
.op-proy-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 4px 0 12px; }
.op-proy-cab h2 { margin: 0; }
.op-proy-cab .meta { margin: 2px 0 0; }
.op-turno { display: grid; gap: 4px; padding: 12px 14px; margin: 0 0 14px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--superficie); }
.op-turno p { margin: 0; }
.op-turno-que { font-size: 15px; font-weight: 650; }
.op-turno-que span { font-weight: 500; }
.op-fases { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0 0 16px; padding: 0; }
.op-fases li { display: flex; align-items: center; gap: 6px; padding: 0 10px 0 0; font-size: 12.5px; color: var(--tinta-3); white-space: nowrap; }
.op-fases li + li::before { content: ''; width: 14px; height: 1px; background: var(--linea-2); margin-right: 4px; }
.op-fases li span { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie-2); font-size: 11px; font-weight: 700; }
.op-fases li.hecha { color: var(--tinta-2); }
.op-fases li.hecha span { background: color-mix(in oklch, var(--ok) 18%, transparent); color: var(--ok); }
.op-fases li.actual { color: var(--tinta); font-weight: 600; }
.op-fases li.actual span { background: var(--acento); color: var(--sobre-acento); }
.op-dos { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.op-dos aside { display: grid; gap: 14px; }
.op-caja { padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--superficie); }
.op-caja h3 { margin: 0 0 10px; font-size: 14px; }
.op-caja-cab { display: flex; justify-content: space-between; align-items: baseline; }
.op-caja-cab a { font-size: 13px; color: var(--acento); text-decoration: none; }
.op-nota { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 8px; }
.op-bitacora { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.op-bitacora li { display: grid; grid-template-columns: 96px auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--linea); font-size: 13.5px; }
.op-bitacora li:first-child { border-top: 0; }
.op-bitacora time { font-size: 12px; color: var(--tinta-3); white-space: nowrap; }
.op-bitacora p { margin: 0; overflow-wrap: anywhere; }
.op-bitacora small { font-size: 12px; color: var(--tinta-3); }
.op-ev { font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 5px; background: var(--superficie-2); color: var(--tinta-2); white-space: nowrap; }
.ev-fase, .ev-revision { background: var(--acento-suave); color: var(--acento); }
.ev-entrega { background: color-mix(in oklch, var(--ok) 14%, transparent); color: var(--ok); }
.ev-salud { background: color-mix(in oklch, var(--error) 14%, transparent); color: var(--error); }
.ev-mantenimiento, .ev-cliente { background: color-mix(in oklch, var(--aviso) 16%, transparent); color: var(--aviso); }
.op-datos { display: grid; margin: 0; }
.op-datos div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-top: 1px solid var(--linea); font-size: 13px; }
.op-datos div:first-child { border-top: 0; }
.op-datos dt { color: var(--tinta-3); }
.op-datos dd { margin: 0; overflow-wrap: anywhere; }
.op-notas { white-space: pre-line; margin: 8px 0 0; }
.op-form-1 { grid-template-columns: minmax(0, 1fr); }
.op-agenda { list-style: none; margin: 10px 0 0; padding: 0 14px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); }
.op-agenda li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linea); }
.op-agenda li:first-child { border-top: 0; }
.op-agenda time b { display: block; font-weight: 600; }
.op-agenda time small { color: var(--tinta-3); font-size: 12px; }
.op-agenda li.cerca time b { color: var(--aviso); }
.op-agenda li.pasada time b { color: var(--error); }
.op-agenda p { margin: 0; }
.op-agenda a { font-size: 13px; color: var(--acento); text-decoration: none; }
.op-buscar input { min-width: 260px; }
.op-refs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr)); gap: 18px 14px; }
.op-ref { min-width: 0; }
.op-ref-img { display: block; aspect-ratio: 16 / 10; border-radius: 7px; overflow: hidden; background: var(--superficie-2); border: 1px solid var(--linea); }
.op-ref-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.op-ref-img span { display: grid; place-items: center; height: 100%; font-size: 12.5px; color: var(--tinta-3); }
.op-ref-txt { padding: 8px 2px 0; }
.op-ref-nombre { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.op-ref-nombre a { font-weight: 600; text-decoration: none; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-ref-nombre form { margin: 0; }
.op-estrella { border: 0; background: transparent; padding: 4px; min-height: 0; color: var(--tinta-3); }
.op-estrella svg { fill: none; stroke: currentColor; stroke-width: 1.4; }
.op-estrella.si { color: var(--aviso); }
.op-estrella.si svg { fill: currentColor; }
.op-ref-por { margin: 4px 0 0; font-size: 13px; color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.op-ref-mas { margin-top: 6px; font-size: 12.5px; color: var(--tinta-3); }
.op-ref-mas summary { cursor: pointer; }
.op-ref-mas p { margin: 4px 0 0; }
.op-mod-grupo { border-top: 1px solid var(--linea); padding: 4px 0; }
.op-mod-grupo > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 10px 0; }
.op-mod-grupo > summary h3 { margin: 0; font-size: 14px; }
.op-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 10px; }
.op-tabla td { padding: 9px 10px; border-top: 1px solid var(--linea); vertical-align: top; }
.op-tabla td:last-child { width: 38%; }
.op-mod-estado { font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 5px; background: var(--superficie-2); color: var(--tinta-2); }
.op-mod-estado.m-plantilla { background: color-mix(in oklch, var(--ok) 14%, transparent); color: var(--ok); }
@media (max-width: 900px) {
  .op-dos { grid-template-columns: minmax(0, 1fr); }
  .op-proyectos a { grid-template-columns: minmax(0, 1fr) auto; }
  .op-proyectos .toca { grid-column: 1 / -1; }
  .op-proyectos .op-etiqueta { display: none; }
  .op-bitacora li { grid-template-columns: minmax(0, 1fr) auto; }
  .op-bitacora li p { grid-column: 1 / -1; }
  .op-bitacora li small { display: none; }
  .op-nota { grid-template-columns: minmax(0, 1fr) auto; }
  .op-nota select { grid-column: 1 / -1; }
  .op-agenda li { grid-template-columns: 90px minmax(0, 1fr); }
  .op-agenda li .op-ev { display: none; }
  .op-buscar input { min-width: 0; width: 100%; }
  .op-tabla td { display: block; width: auto !important; }
  .op-tabla td:last-child { border-top: 0; padding-top: 0; }
}
.pestanas { overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a { flex: none; white-space: nowrap; }