/* Panel interno. Se carga despues de firmante.css y reutiliza la paleta de firmante.css, que sigue el panel de Sofia
   (DSI Finanzas: barra azul, tarjetas blancas, Segoe UI). Celular primero; desde 900 px usa dos columnas. El estado nunca va solo en color: lleva texto. */

:root {
  --aviso: #9a6206;
  --aviso-claro: #fdf2dc;
  --info: #14639e;
  --info-claro: #e8f2fa;
  --neutro-claro: #eceff1;
  --borde: #dde3ea;
  --t: 160ms ease-out;
}

body.panel { background: var(--papel); }
body.panel.sin-scroll { overflow: hidden; }
body.panel main { max-width: 72rem; padding: 1.5rem 1rem 4rem; }
body.panel h1 { font-size: 1.7rem; }

.salto { position: absolute; left: -999px; top: 0; background: var(--texto); color: #fff; padding: 0.6rem 1rem; z-index: 50; }
.salto:focus { left: 0; }

/* --- barra superior --- */
.barra { background: var(--azul); color: #fff; position: sticky; top: 0; z-index: 20; }
.barra-in { max-width: 72rem; margin: 0 auto; padding: 0.45rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; }
.marca-panel { font-weight: 700; color: #fff; text-decoration: none; font-size: 1rem; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; }
.marca-panel img { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #fff; flex: none; }
.menu { display: flex; flex-wrap: wrap; gap: 0.25rem; flex: 1; }
.menu a { min-height: 2.75rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0 0.85rem; border-radius: var(--radio); color: #fff; font-weight: 600; text-decoration: none; font-size: 0.95rem; }
.menu a:hover { background: rgba(255, 255, 255, 0.14); }
.salir { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.quien-panel { font-size: 0.85rem; color: #e8f2fa; }
.salir .boton { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.salir .boton:hover { background: rgba(255, 255, 255, 0.14); }
.insignia { background: #fff; color: var(--primario); border-radius: 1rem; padding: 0 0.5rem; font-size: 0.8rem; font-weight: 700; min-width: 1.4rem; text-align: center; }

/* --- botones: objetivos tactiles de 44 px o mas --- */
.boton { text-decoration: none; transition: background var(--t), border-color var(--t); }
.boton.grande { min-height: 3.5rem; }
.boton.chico { min-height: 2.75rem; padding: 0.4rem 0.9rem; font-size: 0.95rem; }
.boton.peligro-suave { color: var(--peligro); border-color: var(--peligro); background: var(--fondo); }
.boton.peligro-suave:hover { background: var(--peligro-claro); }
.boton.peligro-suave::-webkit-details-marker { display: none; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
.acciones .boton { flex: 1 1 12rem; margin: 0; }
.migas { margin: 0 0 0.25rem; }
.migas a, .enlace-simple { color: var(--primario); min-height: 2.75rem; display: inline-flex; align-items: center; }

.encabezado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 0.75rem; }
.encabezado h1 { margin: 0; }
.encabezado .boton { width: auto; margin: 0; padding: 0 1.5rem; }

/* --- formularios --- */
.campo { display: block; font-weight: 700; font-size: 0.95rem; margin: 1rem 0 0; }
.campo input, .campo select, .campo textarea {
  display: block; width: 100%; margin-top: 0.35rem; font: inherit; font-weight: 400; padding: 0.7rem;
  min-height: 3rem; border: 2px solid var(--linea); border-radius: var(--radio); background: #fff; color: var(--texto);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--primario); outline: 3px solid #1a7bc4; outline-offset: 1px; }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--peligro); background: var(--peligro-claro); }
.campo-error { display: block; color: var(--peligro); font-weight: 700; font-size: 0.9rem; margin-top: 0.3rem; }
.fila { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .fila { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: 5px; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.tarjeta.angosta { max-width: 28rem; margin: 2.5rem auto; border-top: 4px solid var(--primario); }
.tarjeta.angosta h1 { margin-top: 0; }
.tarjeta .boton { margin-top: 1.25rem; }

/* --- chips de estado (texto + color + punto) --- */
.pill { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid currentColor; border-radius: 2rem; padding: 0.15rem 0.8rem; font-weight: 700; font-size: 0.85rem; background: var(--neutro-claro); color: var(--apoyo); white-space: nowrap; }
.pill .punto { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; }
.pill.ok { color: var(--ok); background: var(--ok-claro); }
.pill.aviso { color: var(--aviso); background: var(--aviso-claro); border: 1px solid currentColor; border-left-width: 1px; padding: 0.15rem 0.8rem; font-size: 0.85rem; }
.pill.peligro { color: var(--peligro); background: var(--peligro-claro); }
.pill.info { color: var(--info); background: var(--info-claro); }
.pill.neutro { color: var(--apoyo); background: var(--neutro-claro); }
.grande-pill { font-size: 1rem; padding: 0.3rem 1rem; }

/* --- tablero --- */
.contadores { list-style: none; padding: 0; margin: 1rem 0 1.25rem; display: grid; gap: 0.75rem; grid-template-columns: repeat(3, 1fr); }
.contadores a { display: block; background: #fff; border: 1px solid var(--borde); border-top: 4px solid var(--primario); border-radius: 5px; padding: 0.85rem 1rem; text-decoration: none; color: var(--texto); min-height: 5rem; transition: box-shadow var(--t); }
.contadores a:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.15); }
.contadores strong { display: block; font-family: var(--serif); font-size: 2.1rem; line-height: 1.1; color: var(--primario-oscuro); }
.contadores span { font-size: 0.88rem; color: var(--apoyo); }
.contadores .destacado a { border-top-color: #e8710a; background: var(--aviso-claro); }
.contadores .destacado strong { color: var(--aviso); }
.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.1rem; }
.filtros a { min-height: 2.75rem; display: inline-flex; align-items: center; padding: 0 1rem; border: 1px solid var(--linea); border-radius: 2rem; background: #fff; color: var(--texto); text-decoration: none; font-size: 0.95rem; }
.filtros a:hover { background: var(--primario-claro); }
.filtros a.activo { background: var(--primario); color: #fff; border-color: var(--primario); font-weight: 700; }
.tarjetas { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tarjetas { grid-template-columns: 1fr 1fr; } }
.solicitud { background: #fff; border: 1px solid var(--borde); border-left: 5px solid var(--suave); border-radius: 5px; transition: box-shadow var(--t), border-color var(--t); }
.solicitud:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.15); border-left-color: var(--primario); }
.solicitud.pide-accion { border-left-color: #e8710a; }
.solicitud-enlace { display: grid; gap: 0.4rem; padding: 1rem 1.1rem; color: var(--texto); text-decoration: none; min-height: 3rem; }
.solicitud-titulo { font-family: var(--serif); font-weight: 700; font-size: 1.12rem; color: var(--primario-oscuro); }
.solicitud-meta { color: var(--apoyo); font-size: 0.85rem; }
.solicitud .pill { justify-self: start; }
.avance { display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--apoyo); }
body.panel progress { background: var(--panel); height: 0.5rem; }
body.panel progress::-webkit-progress-bar { background: var(--panel); }
body.panel progress::-webkit-progress-value { background: var(--primario); }
body.panel progress::-moz-progress-bar { background: var(--primario); }
.vacio { text-align: center; background: #fff; border: 2px dashed var(--linea); border-radius: 5px; padding: 2.5rem 1rem; }
.vacio h2 { margin-top: 0; }
.vacio p { color: var(--apoyo); }
.vacio .boton { width: auto; display: inline-flex; padding: 0 1.5rem; }

/* --- detalle --- */
.dos-columnas { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .dos-columnas { grid-template-columns: 3fr 2fr; align-items: start; } }
.firmantes { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.75rem; }
.firmante { background: #fff; border: 1px solid var(--borde); border-left: 5px solid var(--suave); border-radius: 5px; padding: 1rem 1.1rem; }
.firmante.en-turno { border-left-color: var(--primario); box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
.firmante-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; }
.firmante-cab .nota { display: block; }
.etiqueta-estado { font-weight: 700; font-size: 0.9rem; color: var(--primario-oscuro); }
.pasos-firmante { list-style: none; padding: 0; margin: 0.7rem 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.85rem; color: var(--apoyo); }
.pasos-firmante li.hecho { color: var(--ok); font-weight: 700; }
.marca-paso { margin-right: 0.25rem; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lista-simple { padding-left: 1.2rem; }
.dos-columnas aside { background: #fff; border: 1px solid var(--borde); border-radius: 5px; padding: 0.25rem 1.1rem 1.1rem; }
.dos-columnas aside h2 { margin-top: 1rem; }
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 3px solid var(--borde); display: grid; gap: 0.85rem; }
.linea-tiempo li { display: grid; gap: 0.1rem; position: relative; }
.linea-tiempo li::before { content: ""; position: absolute; left: -1.62rem; top: 0.4rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--primario); border: 2px solid var(--papel); }
.linea-tiempo .cuando { font-size: 0.8rem; color: var(--apoyo); font-weight: 700; }
.linea-tiempo li.alerta { color: var(--peligro); }
.linea-tiempo li.alerta::before { background: var(--peligro); }
.enlace-nuevo { background: #fff; border: 1px solid var(--borde); border-top: 5px solid var(--azul); border-radius: 5px; padding: 1.1rem 1.25rem 1.25rem; margin: 1rem 0 1.5rem; animation: entra 250ms ease-out; box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
.enlace-nuevo h2 { margin-top: 0; }
.enlace-nuevo input { font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; background: var(--papel); }
.confirmar summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.confirmar-cuerpo { border: 2px solid var(--peligro); background: var(--peligro-claro); border-radius: var(--radio); padding: 0.75rem 1rem 1rem; margin-top: 0.75rem; animation: entra 200ms ease-out; }

/* --- asistente --- */
.pasos-asistente { list-style: none; display: flex; gap: 0.5rem; padding: 0; margin: 0.5rem 0 1.25rem; }
.pasos-asistente li { flex: 1; display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.25rem; border-bottom: 4px solid var(--borde); color: var(--apoyo); font-size: 0.9rem; }
.pasos-asistente li[aria-current] { border-color: var(--primario); color: var(--primario-oscuro); font-weight: 700; }
.pasos-asistente li.hecho { border-color: var(--ok); color: var(--ok); }
.pasos-asistente li[aria-current] .num { background: var(--primario); color: #fff; border-color: var(--primario); }
.num { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px solid currentColor; font-weight: 700; flex: none; }
@media (max-width: 520px) { .pasos-asistente li { font-size: 0.8rem; flex-direction: column; text-align: center; gap: 0.2rem; } }
[data-paso]:not([hidden]) { animation: entra 200ms ease-out; background: #fff; border: 1px solid var(--borde); border-radius: 5px; padding: 0.25rem 1.25rem 1.4rem; }
[data-paso] h2 { margin-top: 1rem; }
[data-paso] h3 { font-family: var(--serif); margin: 1.5rem 0 0.5rem; color: var(--primario-oscuro); }
.zona { border: 2px dashed var(--primario); border-radius: 5px; background: var(--primario-claro); text-align: center; padding: 1.75rem 1rem; cursor: pointer; transition: background var(--t); }
.zona.sobre, .zona:hover { background: #d4e6f5; }
.zona p { margin: 0.2rem 0; }
.docs-lista, .firmantes-form { list-style: none; padding: 0; display: grid; gap: 0.75rem; margin: 1rem 0; }
.doc-form, .firmante-form { background: var(--papel); border: 1px solid var(--borde); border-left: 5px solid var(--primario); border-radius: 5px; padding: 0.75rem 1rem 1rem; }
.doc-info { display: grid; }
.doc-meta.mal { color: var(--peligro); font-weight: 700; }
.firmante-form-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; }
.mover { display: inline-flex; gap: 0.4rem; margin-top: 0.5rem; }
.navegacion { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.navegacion .boton { flex: 1 1 10rem; margin: 0; }
.resumen { background: var(--papel); border: 1px solid var(--borde); border-radius: 5px; padding: 0.5rem 1rem 1rem; }

/* --- revision de cedulas --- */
.revision { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .revision { grid-template-columns: 3fr 2fr; align-items: start; } }
.fotos { display: grid; gap: 1rem; }
@media (min-width: 600px) { .fotos { grid-template-columns: 1fr 1fr; align-items: start; } }
.fotos figure { margin: 0; }
.fotos figcaption { font-weight: 700; margin-bottom: 0.3rem; }
.fotos img { width: 100%; height: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); cursor: zoom-in; display: block; }
.fotos img.zoom { position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: contain; background: rgba(0, 0, 0, 0.92); z-index: 40; cursor: zoom-out; border: 0; border-radius: 0; animation: entra 200ms ease-out; }
.contrato { background: #fff; border: 1px solid var(--borde); border-top: 4px solid var(--azul); border-radius: 5px; padding: 1.1rem 1.25rem 1.25rem; }
.contrato h2 { margin-top: 0; }
.contrato dl { margin: 0; display: grid; gap: 0.2rem; }
.contrato dt { color: var(--apoyo); font-size: 0.85rem; margin-top: 0.7rem; }
.contrato dd { margin: 0; font-weight: 700; font-size: 1.1rem; }
.contrato dd.numero { font-family: ui-monospace, Consolas, monospace; font-size: 1.6rem; letter-spacing: 0.05em; color: var(--primario-oscuro); }

/* --- avisos (toasts) que no tapan el contenido --- */
.toasts { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; display: grid; justify-items: start; pointer-events: none; z-index: 30; }
.toast { pointer-events: auto; margin: 0; max-width: 28rem; background: var(--primario-oscuro); color: #fff; border-left: 5px solid #e8710a; padding: 0.8rem 1.1rem; border-radius: var(--radio); font-weight: 700; animation: entra 220ms ease-out; transition: opacity 250ms ease-out; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); }
.toast.sale { opacity: 0; }

@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 700px) {
  .marca-panel { flex: 1; }
  .menu { order: 3; flex-basis: 100%; margin: 0 -0.4rem; }
  .salir { margin-left: 0; }
}
@media (max-width: 520px) {
  .contadores { gap: 0.5rem; }
  .contadores a { padding: 0.6rem 0.7rem; min-height: 4.5rem; }
  .contadores strong { font-size: 1.7rem; }
  .contadores span { font-size: 0.78rem; line-height: 1.25; display: block; }
  .quien-panel { display: none; }
}
.mover .boton { font-variant-emoji: text; font-family: var(--sans); color: var(--primario); }

/* --- entrar: como la pantalla de entrada de Sofia --- */
.logo-entrada { display: block; width: 8rem; height: 8rem; margin: 0 auto 0.75rem; }
body.panel .tarjeta.angosta { box-shadow: 0 12px 40px rgba(0,0,0,0.18); }
.tarjeta.angosta h1 { color: var(--primario); text-align: center; font-size: 1.4rem; }
.tarjeta.angosta .nota { text-align: center; }

/* --- generar contrato desde un modelo --- */
.modos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 1rem; }
.modos a { min-height: 2.75rem; display: inline-flex; align-items: center; padding: 0 1.1rem; border: 1px solid var(--linea); border-radius: 2rem; background: #fff; color: var(--texto); text-decoration: none; }
.modos a:hover { background: var(--primario-claro); }
.modos a.activo { background: var(--primario); color: #fff; border-color: var(--primario); font-weight: 700; }
#contratos fieldset.seccion { background: #fff; border: 1px solid var(--borde); border-radius: 5px; margin: 0 0 1rem; padding: 0.25rem 1.1rem 1.1rem; min-width: 0; }
#contratos fieldset.seccion legend { font-family: var(--serif); font-weight: 700; color: var(--primario-oscuro); padding: 0 0.4rem; font-size: 1.1rem; }
#contratos fieldset[hidden], #contratos [data-sec][hidden] { display: none; }
#form-contrato:not([hidden]) { background: transparent; border: 0; padding: 0; }
.casilla { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; margin-top: 0.5rem; font-weight: 600; }
.casilla input { width: 1.4rem; height: 1.4rem; flex: none; }
.personas { list-style: none; padding: 0; margin: 0.75rem 0; display: grid; gap: 0.75rem; }
.servicios { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .servicios { grid-template-columns: 1fr 1fr; } }
.servicios li { background: var(--papel); border: 1px solid var(--borde); border-radius: 5px; padding: 0.4rem 0.9rem 0.8rem; }
.campo.corto input { max-width: 8rem; }
details.mas { margin-top: 0.75rem; }
details.mas summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; color: var(--primario); font-weight: 600; }
.doc-vista { background: #fff; border: 1px solid var(--borde); border-radius: 5px; margin: 0.75rem 0; padding: 0 1rem; }
.doc-vista summary { cursor: pointer; min-height: 3rem; display: flex; align-items: center; font-weight: 700; color: var(--primario-oscuro); }
.paginas { display: grid; gap: 1rem; padding-bottom: 1rem; }
.paginas img { width: 100%; max-width: 52rem; height: auto; border: 1px solid var(--linea); background: var(--panel); justify-self: center; display: block; }
.firmante-datos { margin: 0.4rem 0 0; font-weight: 600; }