/* ==========================================================================
   Hoja de estilos de la aplicación
   Interfaz panorámica al estilo de las sedes electrónicas actuales.
   Modo claro y oscuro (el oscuro sigue la configuración del sistema).
   ========================================================================== */
:root {
  color-scheme: light dark;

  /* Marca institucional */
  --marca: #c33400;
  --marca-osc: #9a2900;
  --marca-vivo: #c33400;
  --marca-suave: #fdeeea;
  --marca-borde: #f3c7b7;

  /* Superficies y texto: grises neutros, para que el naranja mande */
  --fondo: #f3f3f2;
  --panel: #ffffff;
  --panel-2: #faf9f8;
  --panel-3: #f0efed;
  --texto: #1e1c1b;
  --texto-2: #5c5754;
  --texto-3: #85807c;
  --borde: #dcd8d5;
  --borde-2: #ebe8e5;

  /* Estados */
  --ok: #157347;
  --ok-suave: #e7f5ed;
  --ok-borde: #b3ddc6;
  --aviso: #96620b;
  --aviso-suave: #fdf4e3;
  --aviso-borde: #f0d9a8;
  --error: #a31515;
  --error-suave: #fdeceb;
  --error-borde: #f2bfba;

  --radio: 10px;
  --radio-peq: 8px;
  --ancho: 1680px;
  --sombra: 0 1px 2px rgba(16, 32, 48, .06), 0 4px 16px rgba(16, 32, 48, .06);
  --sombra-alta: 0 12px 40px rgba(10, 20, 35, .22);
  --fuente: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --marca: #8f2600;
    --marca-osc: #6d1d00;
    --marca-vivo: #ff8a5c;
    --marca-suave: #331409;
    --marca-borde: #5c2411;

    --fondo: #141312;
    --panel: #1c1a19;
    --panel-2: #232120;
    --panel-3: #2b2827;
    --texto: #f0eeec;
    --texto-2: #b8b2ae;
    --texto-3: #8b8580;
    --borde: #3a3634;
    --borde-2: #2e2b29;

    --ok: #4ec98a;
    --ok-suave: #14301f;
    --ok-borde: #24583a;
    --aviso: #e0b357;
    --aviso-suave: #322611;
    --aviso-borde: #5c4718;
    --error: #f08a80;
    --error-suave: #3a1a17;
    --error-borde: #6b2b25;

    --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .28);
    --sombra-alta: 0 16px 48px rgba(0, 0, 0, .6);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font: 15px/1.5 var(--fuente);
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--marca-vivo); }
h1, h2, h3 { margin: 0; line-height: 1.25; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--marca-vivo); outline-offset: 2px; }

@media (prefers-color-scheme: dark) {
  .marca svg, .encabezado .emblema, .modal .barra-titulo svg { filter: brightness(1.55) saturate(.9); }
}

/* ---------- Cabecera ---------- */
.banda-demo {
  background: var(--aviso-suave); color: var(--aviso); text-align: center;
  font-size: 13px; font-weight: 600; padding: 7px 12px; border-bottom: 1px solid var(--aviso-borde);
}
/* Acceso sin certificado: se avisa en todo momento de que es de solo consulta */
.banda-limitado {
  background: var(--aviso-suave); color: var(--aviso); text-align: center;
  font-size: 13px; font-weight: 600; padding: 7px 12px; border-bottom: 1px solid var(--aviso-borde);
}
/* Código de seis cifras del segundo factor */
input.codigo {
  font-family: var(--mono, ui-monospace, monospace); font-size: 26px; letter-spacing: 8px;
  text-align: center; max-width: 220px; padding: 10px 12px;
}
.qr-alta { text-align: center; margin: 14px 0; }
.qr-alta img { width: 230px; height: 230px; background: #fff; padding: 10px; border: 1px solid var(--borde-2); border-radius: var(--radio); }
.clave-2fa {
  text-align: center; font-size: 17px; letter-spacing: 2px; user-select: all;
  background: var(--panel-2); border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px;
}
.cabecera { background: var(--panel); }
.cabecera-int {
  max-width: var(--ancho); margin: 0 auto; padding: 14px 28px;
  display: flex; align-items: center; gap: 18px;
}
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.marca svg { width: 42px; height: 42px; flex: none; }
.marca-txt { display: flex; flex-direction: column; }
.marca-txt b { font-size: 19px; font-weight: 700; letter-spacing: -.2px; }
.marca-txt span { font-size: 11px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .8px; }
.cabecera-der { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.usuario-chip { display: flex; align-items: center; gap: 10px; font-size: 13px; text-align: right; }
.usuario-chip .avatar {
  width: 38px; height: 38px; border-radius: 50%; order: 2;
  background: var(--marca-suave); color: var(--marca-vivo);
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  border: 1px solid var(--marca-borde);
}
.usuario-chip > div { order: 1; line-height: 1.35; }
.usuario-chip b { font-size: 13px; }
.usuario-chip small { display: block; color: var(--texto-3); font-size: 11.5px; }
.regla { display: none; }

/* ---------- Navegación principal ---------- */
.nav-princ { background: var(--marca); }
.nav-int {
  max-width: var(--ancho); margin: 0 auto; padding: 0 18px;
  /* LA BARRA SE PARTE EN DOS LÍNEAS ANTES QUE CORTAR NADA. Antes se
     desplazaba a lo ancho, y eso escondía las últimas pestañas sin decirlo:
     «Mi cuenta» desaparecía por la derecha y había que arrastrar para
     encontrarla. Al plegarse, lo peor que puede pasar es que la barra ocupe
     dos renglones, y eso se ve. Los desplegables ya recogen lo que se visita
     de tarde en tarde; esto es la red que hay debajo para que añadir un
     módulo nuevo no vuelva a esconder nada. */
  display: flex; align-items: stretch; gap: 2px; flex-wrap: wrap;
}
/* El aire de cada pestaña es 10px y no 16px por una razón medida, no estética.
   Con 16px la barra se parte en dos renglones a 1280px, que es la anchura de
   una pantalla corriente. Y hay que dejar holgura de más: cuando el
   portafirmas o los trámites tienen algo pendiente, la pestaña crece con su
   contador y con 12px ya no cabía. Medido con los contadores puestos, que es
   como está una notaría de verdad casi siempre.
   Si vuelve a partirse al añadir un módulo, NO baje más de aquí: pliegue ese
   módulo en un desplegable, que es para lo que están. */
.nav-int a {
  display: flex; align-items: center; padding: 14px 10px;
  color: #e8f0f8; text-decoration: none; font-size: 14px; font-weight: 600;
  white-space: nowrap; border-bottom: 3px solid transparent;
}
.nav-int a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nav-int a.activo { background: rgba(0, 0, 0, .22); color: #fff; border-bottom-color: #fff; }
.nav-int .nav-sep { width: 1px; background: rgba(255, 255, 255, .22); margin: 10px 8px; flex: none; }
.nav-int .nav-esp { margin-left: auto; }

/* Desplegables de la barra. `position: relative` va en la barra y no en cada
   desplegable, para que el panel pueda salirse por la derecha sin que la barra
   crezca ni aparezca el desplazamiento horizontal que había antes. */
.nav-int { position: relative; overflow-x: visible; }
.nav-grupo { position: relative; flex: none; }
.nav-grupo > summary {
  display: flex; align-items: center; gap: 6px; padding: 14px 10px;
  color: #e8f0f8; font-size: 14px; font-weight: 600; white-space: nowrap;
  cursor: pointer; list-style: none; border-bottom: 3px solid transparent;
}
.nav-grupo > summary::-webkit-details-marker { display: none; }
.nav-grupo > summary:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nav-grupo.activo > summary { background: rgba(0, 0, 0, .22); color: #fff; border-bottom-color: #fff; }
.nav-grupo[open] > summary { background: rgba(0, 0, 0, .28); color: #fff; }
.nav-flecha { font-size: 10px; opacity: .8; }
.nav-desplegable {
  position: absolute; top: 100%; right: 0; z-index: 60; min-width: 230px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18); padding: 6px; display: flex; flex-direction: column;
}
/* Dentro del panel los enlaces son oscuros sobre blanco: son un menú normal,
   no parte de la barra roja. */
.nav-int .nav-desplegable a {
  padding: 10px 12px; border-bottom: 0; border-radius: 6px;
  color: var(--texto); font-weight: 500;
}
.nav-int .nav-desplegable a:hover { background: var(--marca-suave); color: var(--marca-osc); }
.nav-int .nav-desplegable a.activo { background: var(--marca-suave); color: var(--marca-osc); border-bottom: 0; }
/* El primer desplegable de la izquierda abre hacia la derecha. */
.nav-grupo:not(.nav-esp) .nav-desplegable { right: auto; left: 0; }

/* ---------- Estructura de página ---------- */
.escritorio { max-width: var(--ancho); margin: 0 auto; padding: 26px 28px 56px; }
.ventana {
  background: var(--panel); border: 1px solid var(--borde-2);
  border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden;
}
.ventana.estrecha { max-width: 1020px; margin: 0 auto; }
.cuerpo { display: flex; flex-direction: column; }
.contenido { display: flex; flex-direction: column; min-width: 0; }

/* Barra de título: solo dentro de los diálogos */
.barra-titulo { display: none; }
.modal .barra-titulo {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; background: var(--marca); color: #fff;
  font-size: 15px; font-weight: 600; user-select: none;
}
/* Sobre la barra de color, el emblema va en una placa blanca: así conserva sus
   colores en vez de perderse contra el fondo. */
.modal .barra-titulo svg {
  width: 26px; height: 26px; flex: none;
  background: #fff; border-radius: 6px; padding: 2px;
}
.modal .barra-titulo .controles { margin-left: auto; display: flex; gap: 4px; }
.modal .barra-titulo .controles span { display: none; }
.modal .barra-titulo .controles span:last-child {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 6px; font-size: 16px; color: #fff; opacity: .85;
}

.encabezado {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 20px 26px; border-bottom: 1px solid var(--borde-2);
}
.encabezado h1 { font-size: 21px; font-weight: 700; letter-spacing: -.3px; }
.encabezado p { margin: 5px 0 0; color: var(--texto-2); font-size: 14px; max-width: 90ch; }
.encabezado .emblema { margin-left: auto; width: 34px; height: 34px; opacity: .4; flex: none; }
.area { padding: 24px 26px; }
.pie {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 26px; border-top: 1px solid var(--borde-2); background: var(--panel-2);
}
.pie .info { color: var(--texto-3); font-size: 12.5px; margin-right: auto; }
.pie .separador { width: 4px; }

/* ---------- Pasos en horizontal ---------- */
.pasos {
  padding: 18px 26px; border-bottom: 1px solid var(--borde-2); background: var(--panel-2);
  overflow-x: auto; scrollbar-width: thin;
}
.pasos ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0; min-width: min-content; }
.pasos li { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: max-content; }
.pasos li + li::before {
  content: ""; flex: 1 1 24px; min-width: 24px; height: 2px;
  background: var(--borde); margin: 0 14px; border-radius: 2px;
}
.pasos li > span, .pasos li > a {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--texto-3); font-size: 14px; white-space: nowrap;
}
.pasos .punto {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
  background: var(--panel-3); color: var(--texto-3); border: 1px solid var(--borde);
}
.pasos .punto::after { content: attr(data-n); }
.pasos .hecho > * { color: var(--texto-2); }
.pasos .hecho .punto { background: var(--ok); border-color: var(--ok); color: #fff; }
.pasos .hecho .punto::after { content: "✓"; }
.pasos .hecho + li::before { background: var(--ok); }
.pasos .activo > * { color: var(--texto); font-weight: 700; }
.pasos .activo .punto {
  background: var(--marca-vivo); border-color: var(--marca-vivo); color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca-vivo) 22%, transparent);
}
.pasos .sep, .pasos .grupo { display: none; }

/* ---------- Logotipo del organismo ---------- */
.logo-org { display: block; height: 44px; width: auto; max-width: 320px; object-fit: contain; }
.logo-tabla { display: block; height: 30px; width: auto; max-width: 130px; object-fit: contain; }
.logo-acceso { display: block; width: 100%; height: auto; max-height: 200px; object-fit: contain; }
@media (prefers-color-scheme: dark) {
  /* Los logotipos oficiales se diseñan sobre blanco: se les deja su propio fondo */
  .logo-org, .logo-acceso { background: #fff; border-radius: 6px; padding: 4px 6px; }
}

/* ---------- Bienvenida ---------- */
.bienvenida { display: grid; grid-template-columns: 300px 1fr; }
.bienvenida .lateral {
  background: linear-gradient(160deg, var(--marca) 0%, var(--marca-osc) 100%);
  color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: space-between; gap: 20px; padding: 40px 22px 28px;
}
/* El emblema va sobre una placa blanca: antes se le aplicaba un filtro que lo
   dejaba todo blanco (también las partes blancas) y se veía un bloque macizo. */
.bienvenida .lateral .placa {
  width: 156px; height: 156px; border-radius: 30px; flex: none;
  background: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.bienvenida .lateral svg.grande { width: 104px; height: 104px; }
.bienvenida .lateral .logotipo { font-size: 17px; font-weight: 700; text-align: center; letter-spacing: .2px; }
.bienvenida.con-logo { grid-template-columns: 340px 1fr; }
.bienvenida.con-logo .lateral {
  background: var(--panel); border-right: 1px solid var(--borde-2);
  justify-content: center; padding: 26px 24px;
}
.bienvenida .texto { padding: 40px 38px; }
.bienvenida h1 { font-size: 26px; margin-bottom: 16px; letter-spacing: -.5px; }
.bienvenida p { margin: 0 0 14px; max-width: 62ch; color: var(--texto-2); }

/* ---------- Botones ---------- */
.btn {
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  padding: 10px 18px; border-radius: var(--radio-peq);
  border: 1px solid var(--borde); background: var(--panel); color: var(--texto);
  cursor: pointer; text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background: var(--panel-3); border-color: var(--texto-3); }
.btn:active { transform: translateY(1px); }
.btn.primario { background: var(--marca-vivo); border-color: var(--marca-vivo); color: #fff; }
.btn.primario:hover { background: var(--marca); border-color: var(--marca); }
.btn.rojo { background: var(--error); border-color: var(--error); color: #fff; }
.btn.rojo:hover { filter: brightness(.9); }
.btn.peligro { color: var(--error); border-color: var(--error-borde); }
.btn.peligro:hover { background: var(--error-suave); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.peq { padding: 6px 11px; font-size: 13px; }
.btn-enlace {
  background: none; border: 0; color: var(--marca-vivo); cursor: pointer;
  font: inherit; padding: 0; text-decoration: underline;
}

/* ---------- Formularios ---------- */
fieldset {
  border: 1px solid var(--borde-2); border-radius: var(--radio);
  padding: 18px 20px 20px; margin: 0 0 20px; background: var(--panel);
}
legend { padding: 0 8px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-2); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px 18px; }
.rejilla.una { grid-template-columns: 1fr; }
.rejilla .ancho { grid-column: 1 / -1; }
.campo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--texto-2); }
.campo label .req, .req { color: var(--error); font-weight: 700; }
input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=search], input[type=number], input[type=datetime-local],
input[type=time], input[type=month], input:not([type]), select, textarea {
  font: inherit; width: 100%; padding: 10px 12px;
  border: 1px solid var(--borde); border-radius: var(--radio-peq);
  background: var(--panel); color: var(--texto);
  transition: border-color .12s, box-shadow .12s;
}
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-2) 50%), linear-gradient(135deg, var(--texto-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 34px;
}
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--marca-vivo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-vivo) 20%, transparent);
}
input:disabled, select:disabled, textarea:disabled { background: var(--panel-3); color: var(--texto-3); }
.campo.error input, .campo.error select, .campo.error textarea { border-color: var(--error); }
.campo .msg { font-size: 12.5px; color: var(--error); margin-top: 5px; font-weight: 600; }
.campo .ayuda { font-size: 12.5px; color: var(--texto-3); margin-top: 5px; }
.campo .ok { color: var(--ok); }
.doc-grande {
  font-size: 24px !important; letter-spacing: 3px; font-family: var(--mono);
  text-transform: uppercase; max-width: 310px; font-weight: 600;
}
.opcion {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px;
  border: 1px solid var(--borde); border-radius: var(--radio);
  margin-bottom: 12px; cursor: pointer; background: var(--panel);
  transition: border-color .12s, background .12s;
}
.opcion:hover { border-color: var(--marca-vivo); background: var(--marca-suave); }
.opcion:has(input:checked) { border-color: var(--marca-vivo); background: var(--marca-suave); box-shadow: inset 3px 0 0 var(--marca-vivo); }
.opcion input { margin-top: 3px; accent-color: var(--marca-vivo); width: 18px; height: 18px; }
.opcion.deshab { opacity: .5; cursor: not-allowed; }
.opcion.deshab:hover { border-color: var(--borde); background: var(--panel); }
.opcion b { display: block; font-size: 15px; margin-bottom: 2px; }
.opcion small { color: var(--texto-2); font-size: 13px; }
.caja-texto {
  border: 1px solid var(--borde-2); border-radius: var(--radio);
  background: var(--panel-2); max-height: 62vh; overflow: auto;
  padding: 20px 24px; margin-bottom: 16px;
}
.caja-texto h3 { font-size: 15px; margin: 22px 0 8px; color: var(--texto); }
.caja-texto h3:first-child { margin-top: 0; }
.caja-texto ul { margin: 0 0 12px; padding-left: 22px; color: var(--texto-2); }
.caja-texto li { margin-bottom: 5px; }

/* ---------- Advertencia legal y condiciones de uso ---------- */
/* Bloque destacado: se lee antes que nada y no se confunde con la ayuda */
.legal {
  border-left: 3px solid var(--marca-vivo);
  background: var(--panel);
  border-radius: var(--radio-peq);
  padding: 14px 18px;
  margin: 0 0 20px;
}
.caja-texto .legal h3 { margin-top: 0; }
.legal p {
  margin: 0 0 10px; color: var(--texto-2);
  font-size: 13.5px; line-height: 1.65; text-align: justify; text-wrap: pretty;
}
.legal p:last-child { margin-bottom: 0; }
.legal p:first-of-type { color: var(--texto); font-weight: 600; }
/* Aviso corto de la pantalla de bienvenida */
.aviso.legal-corto { margin: 16px 0 4px; font-size: 13.5px; }
.enlace {
  background: none; border: 0; padding: 0; margin-left: 4px;
  font: inherit; color: var(--marca-vivo); text-decoration: underline;
  cursor: pointer;
}
.enlace:hover { color: var(--marca-osc); }
@media (prefers-color-scheme: dark) { .enlace:hover { color: #ffb08c; } }

.check { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.check input { accent-color: var(--marca-vivo); width: 17px; height: 17px; }

/* ---------- Avisos ---------- */
.aviso {
  border-radius: var(--radio); padding: 14px 16px; margin-bottom: 18px;
  font-size: 14px; border: 1px solid; display: flex; gap: 12px; align-items: flex-start;
}
.aviso.error { background: var(--error-suave); border-color: var(--error-borde); color: var(--error); }
.aviso.ok { background: var(--ok-suave); border-color: var(--ok-borde); color: var(--ok); }
.aviso.info { background: var(--panel-2); border-color: var(--borde); color: var(--texto-2); }
.aviso.atencion { background: var(--aviso-suave); border-color: var(--aviso-borde); color: var(--aviso); }
.aviso b { color: inherit; }

/* ---------- Tablas ---------- */
.barra-busqueda { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.barra-busqueda input[type=search] { max-width: 420px; }
.barra-busqueda select { width: auto; min-width: 150px; }
/* Motivo de la búsqueda excepcional por nombre: ocupa su propia línea */
.barra-busqueda input#motivo { flex: 1 1 100%; max-width: none; }
.tabla-cont {
  border: 1px solid var(--borde-2); border-radius: var(--radio);
  overflow: auto; background: var(--panel);
}
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel-2); text-align: left; padding: 12px 14px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
  color: var(--texto-3); border-bottom: 1px solid var(--borde); white-space: nowrap;
}
td { padding: 12px 14px; border-bottom: 1px solid var(--borde-2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--panel-2); }
tbody tr.clic { cursor: pointer; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.acciones { white-space: nowrap; text-align: right; }
/* Tablas con muchas columnas: antes de estrujarlas, que la caja se desplace */
.tabla-cont.ancha table { min-width: 1400px; }
.tabla-cont select { min-width: 132px; }
.celda-permisos { display: flex; flex-wrap: wrap; gap: 4px; }
.celda-permisos .etiqueta { white-space: nowrap; }
td.acciones .btn { margin: 2px 0 2px 4px; }
.mono { font-family: var(--mono); letter-spacing: .3px; }
.vacio { padding: 46px; text-align: center; color: var(--texto-3); }
.paginacion {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; font-size: 13px; color: var(--texto-2);
}
.paginacion .btn { margin-left: 4px; }
.etiqueta {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
  background: var(--panel-3); color: var(--texto-2);
}
.etiqueta.dni { background: var(--marca-suave); color: var(--marca-vivo); }
.etiqueta.nie { background: #f1eafc; color: #6d35b8; }
.etiqueta.pas { background: #e7f1e9; color: #1f6b3a; }
.etiqueta.rojo { background: var(--error-suave); color: var(--error); }
.etiqueta.verde { background: var(--ok-suave); color: var(--ok); }
.etiqueta.ambar { background: var(--aviso-suave); color: var(--aviso); }
@media (prefers-color-scheme: dark) {
  .etiqueta.nie { background: #2b1f42; color: #c2a6f0; }
  .etiqueta.pas { background: #16301f; color: #8fd0a6; }
}
dl.kv { margin: 0; font-size: 13px; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; max-width: 620px; }
dl.kv dt { color: var(--texto-3); }
dl.kv dd { margin: 0; word-break: break-word; }
pre.json {
  background: var(--panel-2); border: 1px solid var(--borde-2); border-radius: var(--radio-peq);
  padding: 10px 12px; margin: 0; font-size: 12px; white-space: pre-wrap;
  word-break: break-word; max-width: 620px; font-family: var(--mono);
}

/* ---------- Ficha y resumen ---------- */
.ficha {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  background: var(--panel); border: 1px solid var(--borde-2);
  border-radius: var(--radio); overflow: hidden; margin-bottom: 20px;
}
/* Las separaciones van en las celdas, no en el hueco de la rejilla: así los
   espacios sin dato quedan del color del panel y no como un bloque gris. */
.ficha div { padding: 14px 16px; border-right: 1px solid var(--borde-2); border-bottom: 1px solid var(--borde-2); }
.ficha dt { font-size: 12px; color: var(--texto-3); margin-bottom: 3px; }
.ficha dd { margin: 0; font-weight: 600; font-size: 15px; word-break: break-word; }
.ficha .ancho { grid-column: 1 / -1; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 24px; }
.cifra {
  border: 1px solid var(--borde-2); border-radius: var(--radio);
  padding: 18px 20px; background: var(--panel); box-shadow: var(--sombra);
}
.cifra span { font-size: 13px; color: var(--texto-2); }
.cifra b { display: block; font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; letter-spacing: -1px; }
.cifra.acento { border-top: 3px solid var(--marca-vivo); }
.dos-col { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; }
.titulo-sec { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--texto-3); margin: 0 0 12px; }
/* Un rótulo de sección que va detrás de otra cosa necesita aire por arriba */
.area > .titulo-sec:not(:first-child) { margin-top: 24px; }
.accesos { display: grid; gap: 10px; }
.acceso-rapido {
  display: flex; align-items: center; gap: 14px; padding: 15px 16px;
  border: 1px solid var(--borde-2); border-radius: var(--radio);
  text-decoration: none; color: inherit; background: var(--panel);
  transition: border-color .12s, background .12s;
}
.acceso-rapido:hover { border-color: var(--marca-vivo); background: var(--marca-suave); }
.acceso-rapido b { font-size: 15px; }
.acceso-rapido small { display: block; color: var(--texto-2); font-size: 13px; }
.acceso-rapido .ico {
  width: 42px; height: 42px; border-radius: var(--radio-peq); flex: none;
  background: var(--marca-suave); color: var(--marca-vivo); display: grid; place-items: center;
}

/* ---------- Diálogos ---------- */
.modal-fondo {
  position: fixed; inset: 0; background: rgba(10, 18, 28, .55);
  backdrop-filter: blur(2px); display: grid; place-items: center;
  z-index: 50; padding: 24px;
}
.modal { width: min(560px, 100%); }
.modal .ventana { box-shadow: var(--sombra-alta); }
.modal .area { padding: 22px 24px; max-height: calc(100vh - 230px); overflow: auto; }
.modal .encabezado { padding: 18px 24px; }
.modal .encabezado h1 { font-size: 18px; }
.modal .pie { padding: 14px 24px; }
/* Campos sueltos (fuera de una rejilla): que no se peguen entre sí */
.modal .campo + .campo { margin-top: 16px; }
.modal .titulo-sec { margin-top: 20px; }
.modal .titulo-sec:first-child { margin-top: 0; }
.modal-fondo.modal-ancho .modal { width: min(1120px, 100%); }
.modal-fondo.modal-medio .modal { width: min(820px, 100%); }
.progreso {
  height: 8px; border-radius: 4px; background: var(--panel-3);
  margin: 18px 0 8px; overflow: hidden; position: relative;
}
.progreso i {
  position: absolute; top: 0; bottom: 0; width: 38%; border-radius: 4px;
  background: linear-gradient(90deg, var(--marca-vivo), var(--marca));
  animation: avance 1.5s ease-in-out infinite;
}
@keyframes avance { from { left: -38%; } to { left: 100%; } }
.datos-firma {
  max-height: 170px; overflow: auto; background: var(--panel-2);
  border: 1px solid var(--borde-2); border-radius: var(--radio-peq);
  font: 12px/1.5 var(--mono); padding: 12px; white-space: pre-wrap; word-break: break-all;
}
.modal .datos-firma { max-height: 240px; }
details summary { cursor: pointer; font-size: 13px; color: var(--texto-2); margin: 10px 0; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 60; max-width: 420px; }
.toast .aviso { margin: 0; box-shadow: var(--sombra-alta); }

/* ---------- Escaneo, OCR y MiDNI ---------- */
.tenue { color: var(--texto-3); }
.botonera { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.caras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 18px; }
.cara {
  border: 1px solid var(--borde-2); border-radius: var(--radio); background: var(--panel);
  padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 280px;
}
.cara.encima, .zona-soltar.encima { border-color: var(--marca-vivo); background: var(--marca-suave); }
.cara-titulo { font-weight: 700; font-size: 14px; display: flex; gap: 10px; align-items: baseline; }
.cara-titulo small { font-weight: 400; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cara-img {
  flex: 1; display: grid; place-items: center; border-radius: var(--radio-peq);
  background: repeating-conic-gradient(#eeecea 0 25%, #fff 0 50%) 0 0 / 18px 18px;
  border: 1px solid var(--borde-2); min-height: 200px; padding: 10px;
}
.cara-img img { max-width: 100%; max-height: 280px; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); border-radius: 4px; }
.cara-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cara-barra label.btn { cursor: pointer; }
.zona-soltar {
  flex: 1; border: 2px dashed var(--borde); border-radius: var(--radio);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 26px; text-align: center; cursor: pointer;
  color: var(--texto-2); min-height: 220px; transition: border-color .12s, background .12s;
}
.zona-soltar:hover { border-color: var(--marca-vivo); background: var(--marca-suave); }
.zona-soltar:focus-within { outline: 2px solid var(--marca-vivo); }
.zona-soltar b { font-size: 15px; color: var(--texto); }
.icono-subir { font-size: 34px; color: var(--marca-vivo); line-height: 1; }
.ocr-panel { border-top: 1px solid var(--borde-2); padding-top: 16px; margin-top: 4px; }
.ocr-estado small { color: var(--texto-2); }
.tabla-ocr td:first-child, .tabla-ocr th:first-child { width: 42px; text-align: center; }
.tabla-ocr tr.igual { color: var(--texto-3); }
.texto-ocr { flex-basis: 100%; }
.texto-ocr pre {
  max-height: 240px; overflow: auto; background: var(--panel-2);
  border: 1px solid var(--borde-2); border-radius: var(--radio-peq);
  padding: 12px; font-size: 12px; white-space: pre-wrap; margin: 0; font-family: var(--mono);
}
.etiqueta-ocr {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px;
  border-radius: 10px; background: var(--marca-suave); color: var(--marca-vivo); vertical-align: 1px;
}
.campo.desde-ocr input, .campo.desde-ocr select { background: var(--marca-suave); }
.caras-ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 14px; }
.cara-ficha { margin: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cara-ficha figcaption { font-size: 13px; color: var(--texto-2); font-weight: 700; }
.cara-ficha small { color: var(--texto-3); font-size: 12px; }
.miniatura {
  border: 1px solid var(--borde-2); background: #fff; padding: 6px;
  border-radius: var(--radio-peq); cursor: zoom-in; display: block;
  width: 100%; max-width: 380px; aspect-ratio: 85.6 / 54;
}
div.miniatura { cursor: default; }
.miniatura img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sin-imagen {
  width: 100%; max-width: 380px; aspect-ratio: 85.6 / 54;
  border: 2px dashed var(--borde); border-radius: var(--radio-peq);
  display: grid; place-content: center; text-align: center; color: var(--texto-3); font-size: 13px;
}
.visor { display: grid; place-items: center; background: #171c22; padding: 14px; border-radius: var(--radio-peq); }
.visor img { max-width: 100%; max-height: 70vh; }
.recorte { position: relative; display: inline-block; touch-action: none; user-select: none; cursor: crosshair; max-width: 100%; }
.recorte img { display: block; max-width: 100%; max-height: 62vh; }
.seleccion {
  position: absolute; border: 2px solid var(--marca-vivo);
  background: color-mix(in srgb, var(--marca-vivo) 14%, transparent);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45); pointer-events: none;
}
fieldset.midni { border-color: var(--marca-borde); background: var(--marca-suave); }
.midni-ok { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.foto-midni { width: 126px; border: 1px solid var(--borde); border-radius: var(--radio-peq); background: #fff; }
.visor-camara { margin: 14px 0; background: #111; border-radius: var(--radio); overflow: hidden; display: grid; place-items: center; }
.visor-camara video { max-width: 100%; max-height: 50vh; display: block; }
.mini-carga { height: 52px; border: 1px solid var(--borde-2); border-radius: 5px; background: #fff; display: block; }
.pasos-informe { padding-left: 22px; margin: 0; }
.pasos-informe li { margin-bottom: 18px; }

/* ---------- Verificación pública ---------- */
.verificacion { max-width: 940px; }
.verificacion .resultado dl { margin: 0; }
.hash { font-family: var(--mono); font-size: 12px; word-break: break-all; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .dos-col { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .escritorio { padding: 16px 14px 40px; }
  .cabecera-int { padding: 12px 14px; }
  .nav-int { padding: 0 8px; }
  .nav-int a { padding: 12px 12px; font-size: 13.5px; }
  .nav-int .nav-esp { margin-left: 0; }
  /* En pantalla estrecha la barra vuelve a desplazarse, que ahí no hay sitio
     para nada más; pero el panel del desplegable no puede quedarse recortado
     dentro de ella, así que se ancla a la ventana. */
  .nav-int { overflow-x: auto; }
  .nav-grupo > summary { padding: 12px 12px; font-size: 13.5px; }
  .nav-desplegable { position: fixed; left: 8px; right: 8px; top: auto; min-width: 0; }
  .marca svg { width: 34px; height: 34px; }
  .marca-txt b { font-size: 16px; }
  .marca-txt span, .usuario-chip > div { display: none; }
  .encabezado, .area, .pie, .pasos { padding-left: 16px; padding-right: 16px; }
  .encabezado h1 { font-size: 18px; }
  .bienvenida { grid-template-columns: 1fr; }
  .bienvenida .lateral { flex-direction: row; padding: 18px; }
  .bienvenida .lateral svg.grande { width: 72px; height: 72px; }
  .bienvenida .texto { padding: 24px 18px; }
  .caras, .caras-ficha { grid-template-columns: 1fr; }
  .pasos li > span, .pasos li > a { font-size: 0; }
  .pasos .punto { font-size: 12.5px; }
  .pasos .activo > * { font-size: 14px; }
  .pie { flex-wrap: wrap; }
  .pie .info { width: 100%; margin-bottom: 4px; }
  .modal-fondo { padding: 10px; }
}

/* ---------- Impresión ---------- */
@media print {
  :root { color-scheme: light; }
  .cabecera, .nav-princ, .pasos, .pie, .barra-titulo, .banda-demo,
  .toast, .btn, td.acciones, .encabezado .emblema { display: none !important; }
  .escritorio { margin: 0; padding: 0; max-width: none; }
  .ventana { border: 0; box-shadow: none; border-radius: 0; }
  .encabezado { padding: 0 0 10px; }
  .area { padding: 10px 0; }
  fieldset, .ficha, .cara-ficha { break-inside: avoid; }
  body { background: #fff; color: #000; }
  th { position: static; }
}

/* ------------------------------------------------------------------ */
/* Submenú de sección (DNI/NIE, Agenda…)                              */
/* ------------------------------------------------------------------ */
.subnav {
  display: flex; flex-wrap: wrap; gap: 4px; margin: -4px 0 20px;
  border-bottom: 1px solid var(--borde-2); padding-bottom: 0;
}
.subnav a {
  padding: 9px 14px; font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--texto-2); border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0;
}
.subnav a:hover { background: var(--panel-2); color: var(--texto); }
.subnav a.activo { color: var(--marca-vivo); border-bottom-color: var(--marca-vivo); }

/* ------------------------------------------------------------------ */
/* Agenda                                                              */
/* ------------------------------------------------------------------ */
.ag-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }
.ag-nav { display: flex; gap: 4px; }
.ag-nav .btn { min-width: 34px; }
.ag-titulo { font-size: 18px; letter-spacing: -.2px; margin-right: auto; }
.ag-modos { display: flex; gap: 4px; }
.ag-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex-basis: 100%; }
.ag-filtros input[type=search] { max-width: 300px; }
.ag-filtros select { width: auto; min-width: 160px; }
.ag-filtros .btn.primario { margin-left: auto; }

.ag-cals { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 14px;
  padding: 10px 14px; background: var(--panel-2); border: 1px solid var(--borde-2); border-radius: var(--radio-peq); }
.ag-cal { display: flex; align-items: center; gap: 7px; font-size: 13.5px; cursor: pointer; }
.ag-cal input { accent-color: var(--marca-vivo); }
.ag-cal i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.ag-cal.apagado { opacity: .5; }
.ag-cal small { color: var(--texto-3); font-size: 11.5px; }

/* --- Vista de mes --- */
.ag-mes {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--borde-2); border-radius: var(--radio-peq); overflow: hidden; background: var(--borde-2); gap: 1px;
}
.ag-cab { background: var(--panel-2); padding: 8px 10px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; color: var(--texto-3); }
.ag-dia { background: var(--panel); min-height: 116px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.ag-dia.fuera { background: var(--panel-2); }
.ag-dia.fuera .ag-num { color: var(--texto-3); }
.ag-dia.hoy { box-shadow: inset 0 2px 0 var(--marca-vivo); }
.ag-num {
  align-self: flex-start; background: none; border: 0; cursor: pointer; font: inherit;
  font-weight: 700; font-size: 13px; color: var(--texto-2); padding: 2px 7px; border-radius: 999px;
}
.ag-num:hover { background: var(--marca-suave); color: var(--marca-vivo); }
.ag-dia.hoy .ag-num { background: var(--marca-vivo); color: #fff; }
.ag-chips { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ag-chip {
  display: flex; align-items: center; gap: 5px; width: 100%; text-align: left; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--borde-2); border-left: 3px solid var(--c);
  border-radius: 5px; padding: 3px 6px; font: inherit; font-size: 12px; color: var(--texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ag-chip:hover { background: var(--marca-suave); border-color: var(--marca-borde); border-left-color: var(--c); }
.ag-chip.cancelado { text-decoration: line-through; opacity: .6; }
.ag-mas { background: none; border: 0; cursor: pointer; font: inherit; font-size: 12px; color: var(--marca-vivo); text-align: left; padding: 0 6px; }

/* --- Vista de semana y de día (rejilla horaria) --- */
.ag-rejilla { border: 1px solid var(--borde-2); border-radius: var(--radio-peq); overflow: hidden; background: var(--panel); }
.ag-rej-cab, .ag-rej-todoeldia, .ag-rej-cuerpo { display: grid; grid-template-columns: 62px repeat(var(--nd), minmax(0, 1fr)); }
.ag-rej-cab { border-bottom: 1px solid var(--borde-2); background: var(--panel-2); }
.ag-rej-dia { background: none; border: 0; border-left: 1px solid var(--borde-2); cursor: pointer; font: inherit; padding: 7px 4px; color: inherit; }
.ag-rej-dia small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-3); }
.ag-rej-dia b { font-size: 17px; }
.ag-rej-dia.hoy b { background: var(--marca-vivo); color: #fff; border-radius: 999px; padding: 1px 9px; display: inline-block; }
.ag-rej-dia:hover { background: var(--marca-suave); }
.ag-rej-todoeldia { border-bottom: 1px solid var(--borde-2); min-height: 34px; }
.ag-rej-etiq { font-size: 11px; color: var(--texto-3); padding: 7px 6px; text-align: right; }
.ag-rej-todoeldia .ag-rej-col { border-left: 1px solid var(--borde-2); padding: 4px; display: flex; flex-direction: column; gap: 3px; }
.ag-rej-cuerpo { position: relative; max-height: 66vh; overflow: auto; }
.ag-rej-horas { border-right: 0; }
.ag-rej-hora { height: var(--ph); position: relative; }
.ag-rej-hora span { position: absolute; top: -7px; right: 8px; font-size: 11px; color: var(--texto-3); background: var(--panel); padding: 0 2px; }
.ag-rej-hora:first-child span { top: 1px; }
/* Línea de la hora actual */
.ag-ahora { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--marca-vivo); z-index: 3; pointer-events: none; }
.ag-ahora::before { content: ''; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--marca-vivo); }
.ag-rej-cuerpo .ag-rej-col { position: relative; border-left: 1px solid var(--borde-2); }
.ag-rej-celda { height: var(--ph); border-top: 1px solid var(--borde-2); cursor: pointer; }
.ag-rej-celda:hover { background: var(--marca-suave); }
.ag-bloque {
  position: absolute; overflow: hidden; cursor: pointer; text-align: left; font: inherit;
  background: var(--panel-2); border: 1px solid var(--borde-2); border-left: 3px solid var(--c);
  border-radius: 5px; padding: 3px 6px; color: var(--texto); box-shadow: var(--sombra);
}
.ag-bloque b { display: block; font-size: 12.5px; line-height: 1.25; }
.ag-bloque small { font-size: 11px; color: var(--texto-2); }
.ag-bloque:hover { border-color: var(--marca-borde); border-left-color: var(--c); z-index: 2; }
.ag-bloque.cancelado { opacity: .6; }
.ag-bloque.cancelado b { text-decoration: line-through; }

/* --- Vista de lista --- */
.ag-lista { display: flex; flex-direction: column; gap: 4px; }
.ag-lista-dia { display: grid; grid-template-columns: 74px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--borde-2); }
.ag-lista-fecha { text-align: center; padding-top: 4px; }
.ag-lista-fecha b { display: block; font-size: 24px; line-height: 1; }
.ag-lista-fecha small, .ag-lista-fecha span { display: block; font-size: 11px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .6px; }
.ag-lista-fecha.hoy b { color: var(--marca-vivo); }
.ag-lista-eventos { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ag-fila {
  display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: var(--panel-2); border: 1px solid var(--borde-2); border-left: 4px solid var(--c);
  border-radius: var(--radio-peq); padding: 9px 12px; color: var(--texto);
}
.ag-fila:hover { border-color: var(--marca-borde); border-left-color: var(--c); background: var(--marca-suave); }
.ag-fila-hora { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--texto-2); min-width: 104px; flex: none; }
.ag-fila-txt { min-width: 0; }
.ag-fila-txt b { display: block; font-size: 14.5px; }
.ag-fila-txt small { color: var(--texto-2); font-size: 12.5px; }

/* --- Listas dentro de los diálogos de la agenda --- */
.ag-fichas { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ag-fichas li {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--borde-2); border-radius: var(--radio-peq); padding: 8px 12px;
}
.ag-fichas li b { font-size: 14px; margin-right: auto; }
.ag-fichas li small { color: var(--texto-3); font-size: 12px; }
.ag-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ag-docs li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--borde-2); border-radius: var(--radio-peq); padding: 8px 12px; }
.ag-docs li a { font-weight: 600; margin-right: auto; }
.ag-docs li small { color: var(--texto-3); font-size: 12px; }
.ag-proximos { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); display: grid; margin-bottom: 22px; }

@media (max-width: 900px) {
  .ag-mes { font-size: 12px; }
  .ag-dia { min-height: 84px; }
  .ag-titulo { flex-basis: 100%; margin: 0; }
  .ag-lista-dia { grid-template-columns: 56px 1fr; }
}

/* ------------------------------------------------------------------ */
/* Trama · control horario                                            */
/* ------------------------------------------------------------------ */
/* La pantalla de fichar se usa veinte segundos, dos veces al día y a
   veces con el abrigo puesto: el botón manda y todo lo demás acompaña. */
.fichar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.btn-fichar {
  display: grid; gap: 6px; justify-items: center; width: 100%; cursor: pointer;
  padding: 40px 24px; border-radius: var(--radio); font: inherit; text-align: center;
  border: 2px solid var(--ok); background: var(--ok-suave); color: var(--ok);
  transition: transform .08s, box-shadow .12s;
}
.btn-fichar .ico { font-size: 44px; line-height: 1; }
.btn-fichar b { font-size: 24px; letter-spacing: -.3px; }
.btn-fichar small { color: var(--texto-2); font-size: 13px; font-weight: 400; }
.btn-fichar:hover { box-shadow: var(--sombra); }
.btn-fichar:active { transform: translateY(1px); }
.btn-fichar.salir { border-color: var(--marca-vivo); background: var(--marca-suave); color: var(--marca-vivo); }
.btn-fichar:disabled { opacity: .5; cursor: progress; }
.fichar-dia { background: var(--panel-2); border: 1px solid var(--borde-2); border-radius: var(--radio); padding: 16px 18px; }

.marcajes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.marcajes li { display: flex; gap: 10px; align-items: center; }
.marcajes .sentido { font-size: 12.5px; color: var(--texto-2); min-width: 62px; }
.marcajes .sentido.e { color: var(--ok); font-weight: 600; }
.marcajes .sentido.s { color: var(--marca-vivo); font-weight: 600; }
.marcajes b { font-size: 16px; font-variant-numeric: tabular-nums; }

.mono.negativo, .negativo { color: var(--error); }
.mono.positivo, .positivo { color: var(--ok); }
.cifra.mala { border-top: 3px solid var(--error); }

/* Tabla del registro de jornada */
.tabla-jornada td { padding: 8px 12px; font-size: 13.5px; }
.tabla-jornada tr.dia-sin { background: var(--panel-2); color: var(--texto-3); }
.tabla-jornada tr.dia-problema { background: var(--error-suave); }
.tabla-jornada tr.dia-problema:hover { background: var(--error-suave); }
.marca { display: inline-block; font-variant-numeric: tabular-nums; margin-right: 6px; white-space: nowrap; }
.marca.e { color: var(--ok); }
.marca.s { color: var(--marca-vivo); }

/* Quién está dentro ahora mismo */
.presencia { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 8px; }
.presencia-ficha {
  display: flex; gap: 10px; align-items: center; padding: 10px 14px;
  background: var(--panel-2); border: 1px solid var(--borde-2); border-radius: var(--radio-peq);
}
.presencia-ficha .punto { width: 10px; height: 10px; border-radius: 50%; background: var(--borde); flex: none; }
.presencia-ficha.dentro { border-color: var(--ok-borde); background: var(--ok-suave); }
.presencia-ficha.dentro .punto { background: var(--ok); }
.presencia-ficha b { font-size: 14px; display: block; }
.presencia-ficha small { color: var(--texto-2); font-size: 12px; }

/* Selector de días de la semana en las reglas del calendario */
.dias { display: inline-flex; gap: 3px; }
.dias .dia {
  display: grid; place-items: center; width: 27px; height: 27px; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 6px; font-size: 12px; font-weight: 700;
  color: var(--texto-3); background: var(--panel); user-select: none;
}
.dias .dia input { position: absolute; opacity: 0; width: 0; height: 0; }
.dias .dia.activo { background: var(--marca-vivo); border-color: var(--marca-vivo); color: #fff; }
.dias .dia:focus-within { outline: 2px solid var(--marca-vivo); outline-offset: 1px; }

/* Tira de fichaje de la pantalla de inicio */
.tira-fichaje {
  display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 24px;
  background: var(--panel-2); border: 1px solid var(--borde-2);
  border-left: 4px solid var(--marca-vivo); border-radius: var(--radio-peq);
}
.tira-fichaje b { display: block; font-size: 15px; }
.tira-fichaje small { color: var(--texto-2); font-size: 13px; }

@media (max-width: 900px) {
  .fichar { grid-template-columns: 1fr; }
}

/* ---------- Trama: ciclo de validación ---------- */
/* El azul es para «en curso»: ni pendiente ni cerrado, simplemente todavía no toca. */
.etiqueta.azul { background: #e7eefb; color: #1f4b9b; }
@media (prefers-color-scheme: dark) {
  .etiqueta.azul { background: #14233f; color: #8fb4f0; }
}

.aviso.pendientes a { font-weight: 600; }

/* La leyenda de estados: plegada por defecto, porque solo hace falta la primera vez */
.leyenda-estados { margin: 4px 0 14px; font-size: 13px; }
.leyenda-estados summary {
  cursor: pointer; color: var(--texto-2); padding: 6px 0;
  user-select: none;
}
.leyenda-estados summary:hover { color: var(--texto); }
.leyenda-estados ul {
  list-style: none; margin: 8px 0 0; padding: 12px 14px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px 22px;
  background: var(--panel-2); border: 1px solid var(--borde); border-radius: 10px;
}
.leyenda-estados li { display: flex; align-items: baseline; gap: 8px; }
.leyenda-estados li .etiqueta { flex: none; }

.vacio-grande { padding: 54px 20px; text-align: center; }
.vacio-grande p { margin: 4px 0; }

.tabla-jornada td.acciones { white-space: nowrap; }

/* ---------- Notarios: la trayectoria ---------- */
/* Una línea de tiempo vertical: la fecha a la izquierda, la plaza a la derecha,
   y un hilo que las une. Se lee de un vistazo, que es de lo que se trata. */
.trayectoria { list-style: none; margin: 8px 0 0; padding: 0 0 0 4px; }
.trayectoria li {
  display: grid; grid-template-columns: 190px 1fr; gap: 0 18px;
  padding: 12px 0 12px 22px; position: relative;
  border-left: 2px solid var(--borde);
}
.trayectoria li::before {
  content: ''; position: absolute; left: -7px; top: 18px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--borde);
}
.trayectoria li.actual { border-left-color: var(--ok); }
.trayectoria li.actual::before { background: var(--ok); border-color: var(--ok); }
.trayectoria li:last-child { border-left-color: transparent; }
.trayectoria li:last-child::before { border-left: 0; }
.tr-fechas b { display: block; font-size: 14px; }
.tr-fechas span { display: block; font-size: 12.5px; }
.tr-fechas small { display: inline-block; margin-top: 3px; font-size: 11.5px; color: var(--texto-3); }
.tr-plaza b { font-size: 15px; }
.tr-plaza b a { color: inherit; }
.tr-plaza > span { margin-left: 6px; font-size: 13px; }
.tr-plaza div { font-size: 12.5px; margin-top: 2px; }

.fuente-datos {
  margin: 0 0 14px; padding: 9px 13px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--borde);
  font-size: 12.5px; color: var(--texto-2);
}

@media (max-width: 760px) {
  .trayectoria li { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Gestor de expedientes ---------- */
/* El cuadro de trabajo de SIGNO: el expediente montado a la izquierda, el
   trabajo en el centro y el asistente a la derecha. En pantallas estrechas se
   apila, y el asistente sube al principio, que es donde hace falta. */
.exp-cuadro {
  display: grid; grid-template-columns: 250px minmax(0, 1fr) 280px;
  gap: 20px; align-items: start;
}
.exp-resumen, .exp-asistente {
  background: var(--panel-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px 16px; font-size: 13px;
  position: sticky; top: 14px;
}
.exp-resumen h3, .exp-asistente h3 {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
  color: var(--texto-3); margin: 16px 0 8px;
}
.exp-resumen h3:first-child, .exp-asistente h3:first-child { margin-top: 0; }
.exp-resumen p, .exp-asistente p { margin: 0 0 4px; }
.exp-lista { list-style: none; margin: 0; padding: 0; }
.exp-lista li {
  padding: 7px 9px; margin-bottom: 5px; border-radius: 8px;
  background: var(--panel); border-left: 3px solid var(--marca-vivo);
}
/* Naranja cuando falta algo, como en SIGNO */
.exp-lista li.incompleto { border-left-color: var(--aviso); background: var(--aviso-suave); }
.exp-lista li b { display: block; font-size: 13px; }
.exp-lista li small { display: block; color: var(--texto-3); font-size: 11.5px; }

.exp-aviso-tit { font-weight: 700; font-size: 12.5px; margin: 10px 0 6px !important; }
.exp-aviso-tit.rojo { color: var(--error); }
.exp-aviso-tit.ambar { color: var(--aviso); }
.exp-avisos { list-style: none; margin: 0 0 8px; padding: 0; }
.exp-avisos li {
  padding: 7px 10px; margin-bottom: 5px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.45; border: 1px solid;
}
.exp-avisos.rojo li { background: var(--error-suave); border-color: var(--error-borde); color: var(--error); }
.exp-avisos.ambar li { background: var(--aviso-suave); border-color: var(--aviso-borde); color: var(--aviso); }

.exp-trabajo .subnav { margin-top: 0; }
.exp-chips { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* Un acto jurídico con su árbol de intervenciones debajo */
.exp-acto {
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 14px 16px; margin-bottom: 12px; background: var(--panel);
}
.exp-acto-cab { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.exp-arbol { list-style: none; margin: 10px 0 0; padding: 0 0 0 16px; border-left: 2px solid var(--borde-2); }
.exp-arbol li { padding: 5px 0 5px 10px; font-size: 13.5px; }

@media (max-width: 1100px) {
  .exp-cuadro { grid-template-columns: 1fr; }
  .exp-resumen, .exp-asistente { position: static; }
  .exp-asistente { order: -1; }
}

/* Buscador de ciudadanos dentro del diálogo de sujeto */
.exp-buscador {
  background: var(--panel-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px 16px; margin-bottom: 4px;
}
.exp-buscador-linea { display: flex; gap: 10px; align-items: center; }
.exp-buscador-linea input { flex: 1; }
.exp-resultados { list-style: none; margin: 10px 0 0; padding: 0; }
.exp-resultados li { margin-bottom: 6px; }
/* Cada resultado es un botón que ocupa toda la fila: en una notaría se elige
   con el ratón deprisa y con un cliente delante, no apuntando a un enlace. */
.exp-resultado {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; padding: 10px 12px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--borde);
  border-left: 3px solid var(--marca-vivo); color: inherit;
  transition: border-color .12s, background .12s;
}
.exp-resultado:hover, .exp-resultado:focus-visible { background: var(--panel-3); border-color: var(--marca-vivo); }
.exp-resultado b { display: block; font-size: 14px; }
.exp-resultado small { display: block; color: var(--texto-3); font-size: 12.5px; margin-top: 2px; }
/* Una etiqueta que además es enlace (por ejemplo, «Del registro») */
a.etiqueta { text-decoration: none; }
a.etiqueta:hover, a.etiqueta:focus-visible { filter: brightness(.94); text-decoration: underline; }

/* Botón de la notaría en la que se trabaja (cabecera, junto a «Salir») */
.entidad-boton {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  line-height: 1.25; text-align: left; max-width: 240px;
}
.entidad-boton .tenue { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; }
.entidad-boton b { font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La cruz de la barra de título de los diálogos es un botón de verdad */
.modal .barra-titulo .controles span:last-child { cursor: pointer; }
.modal .barra-titulo .controles span:last-child:hover { opacity: 1; background: rgba(255, 255, 255, .18); }
.modal .barra-titulo .controles span:last-child:focus-visible { outline: 2px solid #fff; outline-offset: 2px; opacity: 1; }

/* =======================================================================
   Portafirmas
   ======================================================================= */
/* El detalle: el documento y sus comentarios a la izquierda, y a la derecha
   el recorrido, que es lo que de verdad se mira («¿por dónde va?»). */
.pf-detalle {
  display: grid; grid-template-columns: minmax(0, 1fr) 290px;
  gap: 20px; align-items: start;
}
.pf-recorrido {
  background: var(--panel-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px 16px; font-size: 13px;
  position: sticky; top: 14px;
}
.pf-recorrido h3 {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
  color: var(--texto-3); margin: 16px 0 8px;
}
.pf-recorrido h3:first-child { margin-top: 0; }
.pf-recorrido p { margin: 0 0 6px; }

/* Los escalones del recorrido, numerados y en orden. El que está en marcha se
   señala con la marca de la casa; los cumplidos se apagan. */
.pf-pasos { list-style: none; counter-reset: paso; margin: 0 0 8px; padding: 0; }
.pf-pasos > li {
  counter-increment: paso; position: relative;
  padding: 8px 10px 8px 32px; margin-bottom: 6px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--borde);
}
.pf-pasos > li::before {
  content: counter(paso); position: absolute; left: 9px; top: 9px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--panel-3); color: var(--texto-3);
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
}
.pf-pasos > li.activo { border-color: var(--marca-vivo); box-shadow: inset 3px 0 0 var(--marca-vivo); }
.pf-pasos > li.activo::before { background: var(--marca-vivo); color: #fff; }
.pf-pasos > li.hecho { opacity: .72; }
.pf-pasos > li.hecho::before { background: var(--ok-suave); color: var(--ok); }
.pf-pasos > li > b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-3); }

/* Cada destinatario dentro de su escalón, con el color de lo que ha hecho */
.pf-paso { margin-top: 5px; padding-left: 9px; border-left: 3px solid var(--borde); font-size: 12.5px; }
.pf-paso.pendiente { border-left-color: var(--aviso); }
.pf-paso.firmada { border-left-color: var(--ok); }
.pf-paso.visto_bueno { border-left-color: #1f4b9b; }
.pf-paso.rechazada { border-left-color: var(--error); }
.pf-paso.no_procede { border-left-color: var(--borde); opacity: .6; }

.pf-comentarios { list-style: none; margin: 0; padding: 0; }
.pf-comentarios li {
  padding: 8px 10px; margin-bottom: 6px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--borde); font-size: 13px;
}
.pf-comentarios li > div { margin-top: 3px; white-space: pre-wrap; }

/* Al redactar: un escalón por bloque, con su número a la izquierda */
.pf-escalon {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px; align-items: start;
  padding: 12px; margin-bottom: 10px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--borde);
}
.pf-escalon-n {
  width: 26px; height: 26px; border-radius: 50%; text-align: center; line-height: 26px;
  background: var(--marca-vivo); color: #fff; font-weight: 700; font-size: 12.5px;
}
.pf-escalon .campo { margin: 0; }

.pf-archivo {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 6px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--borde); font-size: 13px;
}
.pf-archivo .check { margin-left: auto; }

@media (max-width: 1100px) {
  .pf-detalle { grid-template-columns: minmax(0, 1fr); }
  .pf-recorrido { position: static; }
}
@media (max-width: 760px) {
  .pf-escalon { grid-template-columns: 34px minmax(0, 1fr); }
}

/* Las fechas de la barra de búsqueda, con su rótulo a la vista: un campo de
   fecha vacío pone «mm/dd/yyyy» y nadie adivina cuál es el «desde». */
.pf-fecha {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--texto-3);
}
.pf-fecha input { width: auto; }
.pf-suplencia { display: block; margin-top: 6px; font-size: 11.5px; }
/* Un desplegable de selección múltiple no se despliega: no debe llevar flecha */
select[multiple] { background-image: none; padding-right: 10px; }

/* =======================================================================
   Mantenimiento y contadores de la barra
   ======================================================================= */
/* La banda de obras va arriba del todo, encima de la cabecera, porque tiene
   que verse antes que nada: también en la pantalla de acceso. */
.banda-obras { font-size: 13px; line-height: 1.45; }
.obras-linea {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 18px; border-bottom: 1px solid var(--aviso-borde, var(--borde));
  background: var(--aviso-suave); color: var(--aviso);
}
/* «Fuera de servicio» se distingue de «aviso»: uno informa y el otro corta. */
.obras-linea.cerrado { background: var(--error-suave); color: var(--error); }
.obras-ico { font-size: 15px; line-height: 1.2; }
.obras-linea b { font-weight: 700; }
.obras-linea small { color: inherit; opacity: .85; font-size: 12px; }
.obras-donde {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 20px;
  background: rgba(0, 0, 0, .08); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; vertical-align: 1px;
}

/* El número de pendientes, dentro del propio enlace de la barra roja */
.nav-cuenta {
  display: inline-block; min-width: 17px; margin-left: 6px; padding: 0 5px;
  border-radius: 20px; background: #fff; color: var(--marca);
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
  vertical-align: 1px;
}
.nav-princ a.activo .nav-cuenta { background: var(--marca); color: #fff; }
.nav-obras { margin-left: 5px; font-size: 12px; opacity: .9; }
@media (prefers-color-scheme: dark) {
  .nav-princ a.activo .nav-cuenta { background: var(--marca-vivo); color: #fff; }
}

/* =======================================================================
   Páginas de fuera: /ayuda y /gestorincidencias
   ======================================================================= */
/* Son páginas propias, no pestañas de la aplicación. Se les quita el aire de
   «escritorio» —no hay expedientes que quepan— y se les deja una caja centrada
   con el ancho de una hoja, que es lo que se está haciendo aquí: escribir. */
body.fuera .escritorio { max-width: 1120px; }
body.fuera .nav-int a { font-weight: 600; }

/* El lateral de la ficha de una incidencia. Dos paneles pegados no pueden ser
   los dos pegajosos a la vez —se montarían uno encima de otro al bajar—, así
   que lo pegajoso es la columna entera. */
.inc-lateral { position: sticky; top: 14px; }
.inc-lateral .pf-recorrido { position: static; }
.inc-lateral .campo + .campo { margin-top: 10px; }
.inc-lateral .ayuda { margin-top: 10px; }

/* Datos del solicitante en una columna estrecha: etiqueta encima y dato debajo,
   porque a 290 px no caben dos columnas sin partir los correos por la mitad. */
.inc-datos { margin: 0; font-size: 13px; }
.inc-datos dt { color: var(--texto-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; }
.inc-datos dd { margin: 2px 0 10px; font-weight: 600; word-break: break-word; }
.inc-datos dd:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .inc-lateral { position: static; }
}

/* El nombre comercial, solo en el asistente de acceso. Dentro de la aplicación
   manda el nombre de la entidad: es de quien son los datos. */
.marca-comercial {
  margin: 0 0 2px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 3px; color: var(--marca-vivo);
}
.bienvenida .lateral .logotipo { overflow-wrap: anywhere; }

/* ---------- Pie con la versión, común a toda la aplicación ---------- */
/* Discreto y a la izquierda, alineado con el contenido. Se enseña en todas las
   pantallas —incluida la de acceso— para que se pueda decir qué versión corre
   sin tener que entrar ni mirar el servidor. */
.pie-app {
  max-width: 1180px; margin: 0 auto; padding: 18px 26px 28px;
  color: var(--texto-3); font-size: 12px; letter-spacing: .2px;
}

/* ---------- Bloque de contenido suelto ---------- */
/* OJO: para esto NO vale «.ficha». .ficha es una rejilla de columnas pensada
   para pares etiqueta/dato, así que un título, un párrafo, una tabla y un aviso
   metidos ahí se reparten en columnas y salen apelotonados uno al lado de otro.
   Ya pasó en «Quién tiene acceso a todas las entidades». Esto es lo que hay que
   usar cuando el bloque lleva contenido corriente en vertical. */
.bloque {
  background: var(--panel); border: 1px solid var(--borde-2);
  border-radius: var(--radio); padding: 18px 20px; margin-bottom: 20px;
}
.bloque > :first-child { margin-top: 0; }
.bloque > :last-child { margin-bottom: 0; }
.bloque h3 { font-size: 15px; margin: 0 0 4px; }
.bloque > p { margin: 0 0 12px; }

/* La caja de requisitos, cuando va dentro de la bienvenida (paso 1 de 3, que
   junta presentación y requisitos). Más baja que suelta en su propia pantalla:
   aquí comparte sitio con el texto de arriba y con la casilla de aceptación, y
   el objetivo era que el paso entrara de una vez sin hacer scroll de página. */
.bienvenida .texto .caja-texto.encogida { max-height: 34vh; margin-bottom: 14px; }
@media (max-height: 820px) {
  .bienvenida .texto .caja-texto.encogida { max-height: 28vh; }
}

/* ---------- Cámara para el QR del DNI en el móvil ---------- */
.qr-camara:empty { display: none; }
.qr-camara {
  border: 1px solid var(--borde-2); border-radius: var(--radio);
  background: #000; overflow: hidden; margin-bottom: 10px;
}
/* El vídeo se refleja como un espejo: la persona se está viendo a sí misma
   sostener el móvil, y sin espejo mueve el brazo al lado contrario. jsQR lee la
   imagen original, no esta, así que el giro no afecta a la lectura. */
.qr-video { display: block; width: 100%; max-height: 46vh; object-fit: contain; transform: scaleX(-1); }
.qr-estado { margin: 0 0 6px; min-height: 1.2em; }

/* Títulos de las dos mitades de la ayuda del acceso (cómo entrar / protección
   de datos). Dentro de .caja-texto, que ya trae su propio estilo para h3. */
.caja-texto .ayuda-titulo {
  font-size: 16px; margin: 26px 0 10px; color: var(--marca-vivo);
  padding-bottom: 6px; border-bottom: 1px solid var(--borde-2);
}
.caja-texto .ayuda-titulo:first-child { margin-top: 0; }

/* ---------- Buscar a una persona que ya existe ---------- */
/* La caja de búsqueda y el botón, en una línea. No hay listado a propósito:
   un administrador de notaría no debe poder recorrer la plantilla de las demás,
   igual que Gestor y Consulta no pueden recorrer el listado de ciudadanos. */
.buscar-persona { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.buscar-persona .campo { margin: 0; min-width: 190px; }
.anadir-fila { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.anadir-fila .campo { margin: 0; min-width: 210px; }

/* ---------- Cuánto ocupa la información de una notaría ---------- */
/* Las barras miden MAGNITUD, no identidad: todas del mismo color. Un color por
   módulo haría pensar que el color dice algo, y lo único que dice algo es el
   largo. Los números van en tinta normal, nunca en el color de la barra. */
.cifra-grande {
  font-size: 30px; font-weight: 700; letter-spacing: -.5px;
  color: var(--marca-vivo); margin: 4px 0 2px; font-variant-numeric: tabular-nums;
}
.tabla-peso { width: 100%; border-collapse: collapse; margin: 14px 0 4px; }
.tabla-peso th { text-align: left; font-weight: 600; font-size: 13.5px; padding: 6px 12px 6px 0; white-space: nowrap; }
.tabla-peso td { padding: 6px 0; }
.tabla-peso td.num { font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--texto-2); padding-right: 14px; white-space: nowrap; }
.tabla-peso .barra-celda { width: 55%; }
.barra { background: var(--panel-3); border-radius: 4px; height: 10px; overflow: hidden; }
/* Extremo redondeado y anclado al origen: la barra empieza siempre en el mismo
   sitio, que es lo que permite compararlas de un vistazo. */
.barra i { display: block; height: 100%; background: var(--marca-vivo); border-radius: 0 4px 4px 0; }
@media (max-width: 720px) { .tabla-peso .barra-celda { display: none; } }

/* Fila de búsqueda dentro de un diálogo (catálogo de notarías) */
.fila-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.fila-filtros input[type=search] { min-width: 200px; }

/* Estado de una notaría en el listado de entidades: el desplegable no debe
   estirarse a todo el ancho de la celda ni empujar a las columnas vecinas. */
.estado-ent { width: auto; min-width: 130px; }

/* Buscador con sugerencias: sustituye a los desplegables que se harían
   interminables (las notarías de España son unas 2.800). */
.buscador { position: relative; }
.sugerencias {
  position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
  margin: 2px 0 0; padding: 4px; list-style: none; max-height: 300px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.sugerencias li { padding: 8px 10px; border-radius: 4px; cursor: pointer; line-height: 1.35; }
.sugerencias li b { display: block; font-weight: 600; }
.sugerencias li small { color: var(--texto-3); }
.sugerencias li:hover, .sugerencias li.marcada { background: var(--marca-suave); }

/* Entidades: con el estado convertido en desplegable la fila creció y el último
   botón —«Borrar…»— se salía de la pantalla. Aquí los botones sí se reparten en
   dos líneas: una acción que no se ve es una acción que no existe. */
.tabla-entidades td.acciones { white-space: normal; max-width: 260px; }

/* El código de soporte se enseña una sola vez y hay que poder copiarlo a mano o
   dictarlo por teléfono, así que se pinta grande y espaciado. */
.codigo-grande {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 2rem; font-weight: 700; letter-spacing: .12em; text-align: center;
  margin: 18px 0; padding: 16px; user-select: all;
  background: var(--panel-3); border: 1px solid var(--borde); border-radius: 8px;
}

/* --- Intranet entre notarías --------------------------------------------- */
/* El cuerpo de un oficio es texto escrito a mano, con sus saltos de línea y su
   sangría: si se pinta como HTML normal, doce líneas se convierten en un
   párrafo apelmazado. Se respeta lo escrito y se le da anchura de lectura. */
.oficio-cuerpo {
  white-space: pre-wrap;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 14px 0;
  line-height: 1.55;
  max-width: 72ch;
}
.lista-simple { list-style: none; padding: 0; margin: 8px 0; }
.lista-simple li { padding: 6px 0; border-bottom: 1px solid var(--borde-2); }
.lista-simple li:last-child { border-bottom: 0; }

/* --- Índice de trámites --------------------------------------------------- */
/* Una rejilla de tarjetas, no una lista: lo que se busca aquí es reconocer un
   trámite de un vistazo, y una lista de veinte líneas iguales no deja. */
.tramites {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
  margin: 10px 0 20px;
}
.tramite {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--panel);
  color: inherit;
  text-decoration: none;
}
a.tramite:hover { border-color: var(--marca); background: var(--marca-suave); }
.tramite .cod {
  flex: 0 0 auto;
  font: 600 11px/1.6 ui-monospace, monospace;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--panel-3);
  color: var(--texto-2);
}
.tramite b { display: block; }
.tramite p { margin: 3px 0 0; font-size: .9em; color: var(--texto-2); }
.tramite.pendiente { opacity: .62; }

/* ---------------------------------------------------------------------------
   Pruebas selectivas: el apartado de dentro y el tablón público
   --------------------------------------------------------------------------- */

/* Un estado sin color propio —un borrador— no puede llevar el de otro. */
.etiqueta.gris { background: var(--panel-3); color: var(--texto-2); }

/* Texto que la notaría escribió con sus saltos de línea: bases, requisitos,
   méritos. Se respeta como se escribió, porque una lista de méritos escrita en
   líneas y pintada como un párrafo corrido deja de leerse. */
.parrafos { white-space: pre-line; margin: 0 0 14px; line-height: 1.55; }

/* Varios campos cortos en una fila (plazas, jornada, contrato). Se rompe solo
   en pantallas estrechas, sin media query. */
.fila-campos { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.fila-campos > * { flex: 1 1 160px; min-width: 0; }

/* La lista de documentos que el candidato va añadiendo antes de firmar. */
.adjuntos { margin: 12px 0; display: grid; gap: 8px; }
.adjunto {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--panel-2); border: 1px solid var(--borde-2);
  border-radius: var(--radio); padding: 8px 12px; font-size: 14px;
}

/* La declaración que hay que marcar antes de firmar. La casilla y su texto van
   alineados arriba: el texto es largo y con `center` la casilla queda flotando
   a media altura del párrafo. */
.conforme { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; line-height: 1.5; }
.conforme input { margin-top: 3px; flex: none; }

/* --- El tablón público -----------------------------------------------------
   Esta es la única pantalla de Atenea que se ve desde la calle, y la ve gente
   que no ha entrado nunca. Va sin barra de navegación y sin nada en lo que
   pinchar que no sea la convocatoria: no hay ningún sitio al que ir. */
body.publica { background: var(--fondo); color: var(--texto); }
/* El ancho de lectura de la página pública. Va acotado a `body.publica` a
   propósito: `caja` es un nombre demasiado genérico como para soltarlo en una
   hoja que comparten veinte pantallas. */
body.publica .caja { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.cabecera-publica {
  background: var(--marca); color: #fff; padding: 26px 0; margin-bottom: 28px;
}
.cabecera-publica h1 { margin: 0 0 4px; font-size: 24px; }
.cabecera-publica p { margin: 0; opacity: .9; font-size: 15px; }
.barra-publica {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.barra-publica h2 { margin: 0; font-size: 18px; }
.pie-publico {
  margin-top: 40px; padding: 22px 0 40px; border-top: 1px solid var(--borde);
  color: var(--texto-2); font-size: 13px; line-height: 1.6;
}
.pie-publico p { margin: 0 0 10px; }
body.publica section { margin-bottom: 22px; }
body.publica h3 { font-size: 16px; margin: 0 0 8px; }
body.publica h4 { font-size: 13px; margin: 14px 0 6px; color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; }

/* Cada solicitud propia, en «Mis solicitudes». Va en tarjeta y no en una fila
   de tabla porque lleva dentro su propia botonera de descargas, y una tabla con
   botones dentro se descuadra en cuanto se mira desde un móvil. */
.solicitud-mia {
  border: 1px solid var(--borde); border-radius: 10px; padding: 16px 18px;
  margin-bottom: 14px; background: var(--superficie);
}
.solicitud-mia h3 { margin-top: 0; }

/* El campo donde se teclea el código no se encoge por debajo del ancho del
   propio código. Sin esto, en un teléfono la caja se queda en la mitad y quien
   escribe no ve entero lo que ha escrito, que es justo cuando hace falta verlo:
   son veinte caracteres copiados a mano de un papel. */
.campo-csv { flex: 1 1 280px; }

/* La ficha de la comprobación de un justificante: etiqueta a la izquierda,
   valor a la derecha, y en una sola columna cuando la pantalla es estrecha —que
   es como va a llegar casi todo el mundo, porque llegan leyendo un QR. */
.ficha-ver { display: grid; gap: 2px; margin: 16px 0; }
.campo-ver {
  display: grid; grid-template-columns: 220px 1fr; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--borde);
}
.campo-ver > span:last-child { word-break: break-word; }
/* Las huellas SHA-256 son 64 caracteres sin espacios: van en monoespaciada y se
   parten donde haga falta, o desbordan la caja en un teléfono. */
.huella { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; word-break: break-all; }
@media (max-width: 640px) {
  .campo-ver { grid-template-columns: 1fr; gap: 0; }
}

/* ---------------------------------------------------------------------------
   Diálogos anchos: los campos en rejilla, no en una columna larguísima
   ---------------------------------------------------------------------------
   EL PROBLEMA QUE RESUELVE. Un formulario con quince campos dentro de un
   diálogo de 560 px es una columna altísima: la ventana se corta por arriba y
   por abajo, hay que hacer rodar la rueda para ver de qué va, y el espacio
   horizontal de la pantalla se queda vacío a los lados.

   LA SOLUCIÓN, Y POR QUÉ SOLO AQUÍ. Los campos fluyen en columnas cuando hay
   sitio, con `auto-fit`: en una pantalla ancha salen dos o tres columnas y en
   una estrecha vuelve a ser una sola, sin ninguna consulta de medios. Se aplica
   SOLO a los diálogos que piden ser anchos (`modal-ancho`, `modal-medio`) y no
   a todos: un diálogo de dos campos puesto a 1120 px queda ridículo, y los
   pequeños ya se leen bien como están. Un formulario largo pide anchura con su
   clase y se lleva el reparto en columnas de propina.

   LO QUE NUNCA SE PARTE EN COLUMNAS: los textos largos, los avisos y los
   títulos de sección. Un párrafo de bases a media anchura se lee peor, no
   mejor. */
.modal-fondo.modal-ancho .modal .area,
.modal-fondo.modal-medio .modal .area {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px 20px;
  align-items: start;
  /* El alto NO se toca aquí: lo manda la regla del diálogo entero, más abajo.
     Ponerlo también aquí fue un error —esta regla tiene más especificidad y le
     ganaba—, y el resultado era que el pie con los botones se seguía saliendo
     por abajo. */
}
/* Dentro de la rejilla manda el `gap`; si se quedara el margen de apilado, las
   filas saldrían descuadradas entre sí. */
.modal-fondo.modal-ancho .modal .campo + .campo,
.modal-fondo.modal-medio .modal .campo + .campo { margin-top: 0; }
/* Lo que ocupa toda la fila. */
.modal-fondo.modal-ancho .modal .area > .campo.ancho,
.modal-fondo.modal-medio .modal .area > .campo.ancho,
.modal-fondo.modal-ancho .modal .area > .caja-texto,
.modal-fondo.modal-medio .modal .area > .caja-texto,
.modal-fondo.modal-ancho .modal .area > .aviso,
.modal-fondo.modal-medio .modal .area > .aviso,
.modal-fondo.modal-ancho .modal .area > .fila-campos,
.modal-fondo.modal-medio .modal .area > .fila-campos,
.modal-fondo.modal-ancho .modal .area > .tabla-cont,
.modal-fondo.modal-medio .modal .area > .tabla-cont,
.modal-fondo.modal-ancho .modal .area > .ficha,
.modal-fondo.modal-medio .modal .area > .ficha,
.modal-fondo.modal-ancho .modal .area > p,
.modal-fondo.modal-medio .modal .area > p,
.modal-fondo.modal-ancho .modal .area > h3,
.modal-fondo.modal-medio .modal .area > h3,
.modal-fondo.modal-ancho .modal .area > h4,
.modal-fondo.modal-medio .modal .area > h4,
.modal-fondo.modal-ancho .modal .area > .titulo-sec,
.modal-fondo.modal-medio .modal .area > .titulo-sec { grid-column: 1 / -1; }
/* Un campo con área de texto ocupa el ancho: escribir unas bases en una
   columna de 270 px no lo quiere nadie. */
.modal-fondo.modal-ancho .modal .area > .campo:has(textarea),
.modal-fondo.modal-medio .modal .area > .campo:has(textarea) { grid-column: 1 / -1; }

/* EL DIÁLOGO CABE SIEMPRE EN LA PANTALLA, y esto vale para TODOS.
   Antes el alto se fijaba a ojo en el área de contenido —`100vh - 230px`— y el
   resto (barra de título, encabezado y pie) se sumaba por encima. Cuando la
   suma pasaba del alto de la ventana, lo que se salía por abajo era el PIE, es
   decir los botones de Aceptar y Cancelar: el diálogo quedaba sin salida
   visible y había que adivinar que rodando la rueda aparecían.
   Ahora el alto se le pone al diálogo entero y el contenido es lo único que se
   encoge y rueda. El pie no se va nunca de la pantalla. */
.modal .ventana {
  display: flex; flex-direction: column;
  max-height: calc(100vh - 32px);
  /* Que nada asome por fuera de las esquinas redondeadas. */
  overflow: hidden;
}
.modal .ventana > .area {
  flex: 1 1 auto;
  min-height: 0;        /* sin esto, un hijo de flex se niega a encogerse */
  max-height: none;     /* manda el alto del diálogo, no un número a ojo */
}
.modal .ventana > .barra-titulo,
.modal .ventana > .encabezado,
.modal .ventana > .pie { flex: none; }