/* GESTORÍA/DOS — estética Clipper / dBASE / FoxPro sobre navegador moderno */
:root {
  /* Tema SUAVE (por defecto): menos saturado, descansa la vista */
  --fondo: #1c2635;
  --ventana: #233247;
  --blanco: #d5dce4;
  --gris: #8a96a6;
  --amarillo: #dcc382;
  --verde: #9cc48c;
  --cian: #86b9c9;
  --cian-osc: #4f7b93;
  --rojo: #d98c8c;
  --negro: #131b26;
  --fuente: "Cascadia Mono", "Consolas", "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace;
  --tam: clamp(13px, 1.12vw + 3px, 19px);
}
html[data-tema="celeste"] {
  /* Tema CELESTE (por defecto): paleta #0CB7F2 · #53d4ff · #8fe3ff · #bceeff · #def7ff */
  --fondo: #def7ff; --ventana: #f3fcff; --blanco: #2a4b5c; --gris: #6f8f9f; --amarillo: #2f7598;
  --verde: #3a8a5e; --cian: #2f86a8; --cian-osc: #bceeff; --rojo: #c25454; --negro: #1d3c4b;
}
html[data-tema="azul"] {
  /* Tema AZUL (por defecto): fondo azul MS-DOS y letras blancas, algo suavizado para no cansar la vista */
  --fondo: #27449c; --ventana: #2f4ea8; --blanco: #edf1fa; --gris: #b3c0e3; --amarillo: #d6e1f7;
  --verde: #cdeccd; --cian: #d3e3fb; --cian-osc: #b2d8ee; --rojo: #f6bcbc; --negro: #0e2160;
}
html[data-tema="clasico"] {
  /* Tema CLÁSICO MS-DOS (Clipper / dBASE) */
  --fondo: #000080; --ventana: #0000aa; --blanco: #ffffff; --gris: #aaaaaa; --amarillo: #ffff55;
  --verde: #55ff55; --cian: #55ffff; --cian-osc: #00aaaa; --rojo: #ff5555; --negro: #000000;
}
html[data-tema="gris"] {
  /* Tema GRIS: muy bajo contraste, para muchas horas de pantalla */
  --fondo: #2a2d31; --ventana: #33373c; --blanco: #cfd2d6; --gris: #8d9298; --amarillo: #d4be8a;
  --verde: #a3bf96; --cian: #9ab8c2; --cian-osc: #5e6e78; --rojo: #cf9696; --negro: #1d1f22;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: var(--fondo); color: var(--blanco);
  font-family: var(--fuente); font-size: var(--tam); line-height: 1.35;
  overflow: hidden;
}
::selection { background: var(--cian-osc); color: var(--negro); }

#pantalla { display: flex; flex-direction: column; height: 100vh; }

/* ---- Barras ------------------------------------------------------------ */
.barra-sup {
  display: flex; justify-content: space-between; gap: 2ch;
  background: var(--cian-osc); color: var(--negro); padding: 0 1ch; white-space: pre;
}
.barra-sup b { color: var(--blanco); font-weight: normal; }
.barra-titulo { color: var(--amarillo); padding: 0.15em 1ch 0; white-space: pre; display: flex; justify-content: space-between; }
.barra-titulo .ruta { color: var(--verde); }
#contenido { flex: 1; min-height: 0; position: relative; padding: 0.4em 1ch 0.6em; display: flex; flex-direction: column; }
.barra-estado { color: var(--cian); padding: 0 1ch; min-height: 1.35em; white-space: pre; overflow: hidden; }
.barra-estado.error { color: var(--negro); background: var(--rojo); }
.barra-estado.ok { color: var(--verde); }
.barra-teclas { display: flex; flex-wrap: wrap; background: var(--negro); white-space: pre; }
.barra-teclas span { cursor: pointer; }
.barra-teclas .k { color: var(--blanco); padding: 0 0 0 1ch; }
.barra-teclas .t { color: var(--negro); background: var(--cian-osc); padding: 0 1ch 0 0.5ch; }

/* ---- Ventanas de doble borde ------------------------------------------ */
.ventana {
  position: relative; background: var(--ventana);
  border: 0.22em double var(--gris); padding: 0.75em 1.2ch 0.5em;
  box-shadow: 1ch 0.6em 0 rgba(0, 0, 0, 0.55);
}
.ventana > .titulo {
  position: absolute; top: -0.78em; left: 50%; transform: translateX(-50%);
  background: var(--ventana); color: var(--amarillo); padding: 0 1ch; white-space: pre;
}
.ventana.simple { border-style: solid; border-width: 0.12em; box-shadow: none; }
.ventana.alerta { border-color: var(--amarillo); }
.ventana.peligro { background: #aa0000; }
.ventana.peligro > .titulo { background: #aa0000; color: var(--blanco); }
.ventana.gris { background: var(--gris); color: var(--negro); border-color: var(--negro); }
.ventana.gris > .titulo { background: var(--gris); color: var(--negro); }

/* ---- Menús ------------------------------------------------------------ */
.menu { list-style: none; margin: 0; padding: 0; }
.menu li { padding: 0 1.5ch 0 1ch; white-space: pre; cursor: pointer; color: var(--blanco); }
.menu li .tecla { color: var(--amarillo); }
.menu li .nota { color: var(--gris); }
.menu li.sel { background: var(--cian-osc); color: var(--negro); }
.menu li.sel .tecla, .menu li.sel .nota { color: var(--negro); }
.menu li.sep { border-top: 1px solid var(--gris); height: 0; margin: 0.3em 0; padding: 0; pointer-events: none; }
.menu li.off { color: var(--gris); }
.menu li.grupo { color: var(--verde); pointer-events: none; padding-top: 0.25em; }
.menu li.grupo:not(:first-child) { margin-top: 0.4em; }

/* ---- Pantalla principal ---------------------------------------------- */
.principal { display: grid; grid-template-columns: minmax(34ch, 40ch) 1fr; gap: 1.2em 3ch; padding-top: 0.6em; height: 100%; min-height: 0; }
.principal .lado { display: flex; flex-direction: column; gap: 1.4em; min-height: 0; }
.logo { color: var(--cian); white-space: pre; line-height: 1.1; font-size: 0.82em; text-align: center; }
.cifras { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1ch; text-align: center; }
.cifras div { padding: 0.2em 0; }
.cifras .n { color: var(--amarillo); font-size: 1.6em; display: block; }
.cifras .l { color: var(--verde); }
.cifras .alarma .n { color: var(--rojo); }

/* ---- Tablas tipo "browse" -------------------------------------------- */
.browse-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.browse { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.browse-scroll { height: 100%; overflow-y: auto; scrollbar-width: none; }
.browse-scroll::-webkit-scrollbar { display: none; }
table.tabla { border-collapse: collapse; width: 100%; table-layout: fixed; }
.tabla th { color: var(--amarillo); text-align: left; font-weight: normal; padding: 0 1ch; white-space: pre; border-bottom: 1px solid var(--gris); position: sticky; top: 0; background: var(--ventana); z-index: 1; }
.tabla td { padding: 0 1ch; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.tabla tr.fila { cursor: pointer; }
.pasivo .tabla tr.sel td { background: transparent; color: var(--blanco) !important; outline: 1px dotted var(--gris); outline-offset: -1px; }
.pasivo .tabla tr.sel td.rojo { color: var(--rojo) !important; }
.pasivo .tabla tr.sel td.amarillo { color: var(--amarillo) !important; }
.pasivo .tabla tr.sel td.cian { color: var(--cian) !important; }
.pasivo .tabla tr.sel td.verde { color: var(--verde) !important; }
.pasivo .tabla tr.sel td.gris { color: var(--gris) !important; }
.tabla tr.sel td, .tabla tr.sel td * { background: var(--cian-osc); color: var(--negro) !important; }
.tabla .der { text-align: right; }
.tabla .verde { color: var(--verde); }
.tabla .amarillo { color: var(--amarillo); }
.tabla .cian { color: var(--cian); }
.tabla .gris { color: var(--gris); }
.tabla .rojo { color: var(--rojo); }
.tabla .vacia td { color: var(--gris); text-align: center; padding: 1em; }
.pie-browse { display: flex; justify-content: space-between; gap: 2ch; flex-wrap: wrap; color: var(--gris); white-space: pre; padding-top: 0.2em; border-top: 1px solid var(--gris); }
.pie-browse b { color: var(--verde); font-weight: normal; }

.filtros { display: flex; gap: 1ch; align-items: center; flex-wrap: wrap; margin-bottom: 0.5em; white-space: pre; }
.filtros .etq { color: var(--amarillo); }
.pestanas span { padding: 0 1ch; color: var(--gris); cursor: pointer; }
.pestanas span.act { background: var(--blanco); color: var(--ventana); }

/* ---- Campos de entrada (GET/READ) ------------------------------------ */
input.campo, select.campo, textarea.campo {
  font: inherit; color: var(--blanco); background: var(--negro);
  border: none; outline: none; padding: 0 0.5ch; margin: 0; caret-color: var(--amarillo);
  border-radius: 0; line-height: inherit; height: 1.35em;
}
textarea.campo { height: auto; resize: none; width: 100%; }
input.campo:focus, select.campo:focus, textarea.campo:focus { background: var(--cian-osc); color: var(--negro); caret-color: var(--negro); }
select.campo { appearance: none; -webkit-appearance: none; }
.buscador input.campo { width: 34ch; }
.campo[readonly] { background: transparent; }

/* ---- Ficha ----------------------------------------------------------- */
.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1em 4ch; }
.ficha .linea { display: flex; gap: 1ch; white-space: pre; min-width: 0; }
.ficha .linea.ancha { grid-column: 1 / -1; }
.ficha .etq { color: var(--amarillo); flex: 0 0 17ch; overflow: hidden; }
.ficha .val { color: var(--blanco); min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ficha .val.verde { color: var(--verde); }
.ficha .linea .campo { flex: 1; min-width: 0; }
.ficha .seccion { grid-column: 1 / -1; color: var(--verde); margin-top: 0.45em; white-space: pre; overflow: hidden; }
.ficha .seccion::after { content: " ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"; color: var(--gris); }
.cab-ficha { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4em; white-space: pre; }
.cab-ficha .nombre { color: var(--blanco); font-size: 1.15em; }
.cab-ficha .doc { color: var(--verde); }
.cab-ficha:has(.cab-izq) { align-items: center; }
.cab-ficha .cab-izq { display: flex; align-items: center; gap: 1ch; white-space: normal; }
.foto-cli { width: 4.6em; height: 5.8em; flex: none; border: 1px solid var(--cian-osc); display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--gris); font-size: 0.72em; line-height: 1.2; cursor: pointer; overflow: hidden; background: var(--fondo); }
.foto-cli img { width: 100%; height: 100%; object-fit: cover; }
.foto-grande { display: flex; justify-content: center; }
.foto-grande #fg { min-height: 8em; display: flex; align-items: center; justify-content: center; }
.foto-grande img, .foto-grande video { max-width: 100%; max-height: 55vh; border: 1px solid var(--cian-osc); }
.modo { padding: 0 1ch; background: var(--amarillo); color: var(--negro); }
.modo.consulta { background: var(--verde); }

.columna-ficha { display: flex; flex-direction: column; gap: 1.2em; height: 100%; min-height: 0; overflow-y: auto; padding: .8em 1.2ch 1em 0; scrollbar-width: thin; scrollbar-color: var(--cian-osc) var(--fondo); }
.columna-ficha > .ventana:first-child { flex-shrink: 0; }
.columna-ficha > .ventana:last-child { flex: 1; min-height: 6em; display: flex; flex-direction: column; }

/* ---- Modales --------------------------------------------------------- */
#capa { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 40, 0.35); z-index: 10; }
#capa.visible { display: flex; }
#capa .ventana { min-width: 46ch; max-width: min(96vw, 110ch); }
.modal-cuerpo { white-space: pre-wrap; }
.botones { display: flex; justify-content: center; gap: 3ch; margin-top: 0.8em; }
.boton { padding: 0 1.5ch; background: var(--gris); color: var(--negro); cursor: pointer; box-shadow: 0.6ch 0.3em 0 var(--negro); }
.boton.sel { background: var(--cian); }
.ayuda dt { color: var(--amarillo); float: left; width: 14ch; clear: left; }
.ayuda dd { margin: 0 0 0 14ch; }

.parpadeo { animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

.submenu { position: absolute; z-index: 5; }
.aviso-demo { color: var(--negro); background: var(--amarillo); padding: 0 1ch; }

@media (max-width: 900px) {
  .principal { grid-template-columns: 1fr; overflow: auto; }
  .ficha { grid-template-columns: 1fr; }
  .cifras { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Ficha de expediente: paneles documentación / historial ---------- */
.paneles { flex: 1; min-height: 9em; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 2.5ch; }
.paneles > .ventana { display: flex; flex-direction: column; min-height: 0; }
.pasivo > .titulo { color: var(--gris); }
.modo.estado-FAV { background: var(--verde); }
.modo.estado-DES, .modo.estado-REQ { background: var(--rojo); color: var(--blanco); }
.modo.estado-ARC, .modo.estado-DSI { background: var(--gris); }
.modo.estado-PRE, .modo.estado-CON { background: var(--cian); }
@media (max-width: 900px) { .paneles { grid-template-columns: 1fr; } }
.tabla td.ajustar { white-space: normal; text-overflow: clip; padding-bottom: 0.15em; }
.tabla td { vertical-align: top; }

/* ---- Archivo de documentos ------------------------------------------- */
.cifras .aviso .n { color: var(--amarillo); }
.visor { display: grid; grid-template-columns: minmax(44ch, 2fr) 3fr; gap: 2ch; }
.visor .pie-browse span { white-space: normal; }
.visor-previa { background: #333; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gris); height: 66vh; }
.previa { max-width: 100%; max-height: 100%; border: 0; }
iframe.previa { width: 100%; height: 100%; background: #fff; }
.hoja-demo { background: #fff; color: #000; height: 92%; aspect-ratio: 1 / 1.414; max-width: 95%; padding: 2em; position: relative; border: 3px solid #b00; overflow: hidden; font-family: Arial, sans-serif; font-size: .8em; }
.hoja-demo .rojo { color: #b00; font-size: .8em; }
.hoja-demo h3 { color: #00a; }
.hoja-demo .marca { position: absolute; top: 50%; left: 10%; transform: rotate(-35deg); font-size: 3em; color: #ddd; }
.val.rojo-t { color: var(--rojo); }
.val.amarillo-t { color: var(--amarillo); }
.zona-soltar.soltando { border-color: var(--amarillo); background: var(--cian-osc); }
@media (max-width: 900px) { .visor { grid-template-columns: 1fr; } }

/* ---- Vista previa de formularios EX en la demo ----------------------- */
.ex-previa { height: 100%; width: 100%; overflow: auto; background: #555; padding: 8px; }
.ex-aviso { background: var(--amarillo); color: #000; font-size: .75em; padding: 2px 6px; margin-bottom: 6px; position: sticky; top: -8px; z-index: 2; }
.ex-pag { position: relative; margin: 0 auto 10px; background: #fff; box-shadow: 0 0 4px #000; }
.ex-pag img { width: 100%; height: 100%; display: block; }
.ex-t, .ex-x { position: absolute; font-family: Arial, Helvetica, sans-serif; color: #0a2a8a; white-space: nowrap; overflow: hidden; line-height: 1; display: flex; align-items: flex-end; padding-left: 2px; }
.ex-x { justify-content: center; align-items: center; font-weight: bold; padding: 0; }

/* ---- Ajustes del tema CELESTE (fondo claro) ---------------------------- */
html[data-tema="celeste"] .barra-sup, html[data-tema="celeste"] .barra-sup b { background: #8fe3ff; color: #1d3c4b; }
html[data-tema="celeste"] .barra-teclas { background: #8fe3ff; }
html[data-tema="celeste"] .barra-teclas .k { color: #1d3c4b; font-weight: bold; }
html[data-tema="celeste"] .barra-teclas .t { background: #f3fcff; color: #2a4b5c; }
html[data-tema="celeste"] .ventana { border-color: #8fe3ff; box-shadow: 1ch 0.6em 0 rgba(83, 212, 255, 0.18); }
html[data-tema="celeste"] input.campo, html[data-tema="celeste"] textarea.campo { background: #ffffff; color: #1d3c4b; box-shadow: inset 0 -1px 0 #bceeff; }
html[data-tema="celeste"] input.campo:focus, html[data-tema="celeste"] textarea.campo:focus { background: #bceeff; color: #1d3c4b; }
html[data-tema="celeste"] .campo[readonly] { background: transparent; box-shadow: none; }
html[data-tema="celeste"] .campo[readonly]:focus { background: #bceeff; }
html[data-tema="celeste"] .modo { color: #ffffff; }
html[data-tema="celeste"] .modo.estado-PRE, html[data-tema="celeste"] .modo.estado-CON { background: #53d4ff; color: #1d3c4b; }
html[data-tema="celeste"] .modo.estado-ARC, html[data-tema="celeste"] .modo.estado-DSI { background: #6f8e9e; }
html[data-tema="celeste"] .pestanas span.act { background: #8fe3ff; color: #1d3c4b; }
html[data-tema="celeste"] .boton { background: #def7ff; color: #1d3c4b; box-shadow: 0.4ch 0.2em 0 #bceeff; }
html[data-tema="celeste"] .boton.sel { background: #53d4ff; color: #1d3c4b; }
html[data-tema="celeste"] .ex-aviso, html[data-tema="celeste"] .aviso-demo { color: #ffffff; }
html[data-tema="celeste"] .cifras .alarma .n { color: #c62f2f; }
html[data-tema="celeste"] #capa { background: rgba(8, 42, 56, 0.25); }
html[data-tema="celeste"] .menu li.sel .tecla, html[data-tema="celeste"] .menu li.sel .nota { color: #1d3c4b; }
html[data-tema="celeste"] .menu li.sep { border-top-color: #bceeff; }
html[data-tema="celeste"] .tabla th { border-bottom-color: #8fe3ff; }
html[data-tema="celeste"] .pie-browse { border-top-color: #bceeff; }
html[data-tema="celeste"] .ficha .seccion::after { color: #bceeff; }
html[data-tema="celeste"] .pasivo .tabla tr.sel td { outline-color: #53d4ff; }
html[data-tema="celeste"] .barra-estado.error { background: #f3c6c6; color: #7a2020; }
html[data-tema="celeste"] .visor-previa, html[data-tema="celeste"] .ex-previa { background: #8fb9c9; }

/* Tema azul: barras celeste claro con letra azul oscuro */
html[data-tema="azul"] .barra-sup, html[data-tema="azul"] .barra-sup b { background: #b2d8ee; color: #0e2160; }
html[data-tema="azul"] .barra-teclas { background: #0e2160; padding: 0.15em 0; }
html[data-tema="azul"] .barra-teclas .k { color: #ffe14d; font-weight: bold; }
html[data-tema="azul"] .barra-teclas .t { background: #ffe14d; color: #0e2160; font-weight: bold; }
html[data-tema="azul"] .ventana { border-color: #a9bde6; }
html[data-tema="azul"] input.campo, html[data-tema="azul"] textarea.campo { background: #27449c; color: #edf1fa; box-shadow: inset 0 -1px 0 #7d93d3; }
html[data-tema="azul"] input.campo:focus, html[data-tema="azul"] textarea.campo:focus { background: #b2d8ee; color: #0e2160; }
html[data-tema="azul"] .campo[readonly] { background: transparent; box-shadow: none; }
html[data-tema="azul"] .menu li.sel, html[data-tema="azul"] .tabla tr.sel td { color: #0e2160; }

/* Colores del ESTADO DE TRAMITACIÓN (iguales en todos los temas) */
.pastilla { display: block; padding: 0 0.5ch; text-align: center; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modo[class*="estado-"] { font-weight: bold; }
.estado-ABI { background: #e6ecf7 !important; color: #0e2160 !important; }   /* pendiente de presentar: blanco */
.estado-PRE { background: #2fae4f !important; color: #ffffff !important; }   /* en trámite: verde */
.estado-REQ { background: #ffd83d !important; color: #2a2100 !important; }   /* requerido: amarillo */
.estado-CON { background: #ff9f43 !important; color: #2a1500 !important; }   /* requerimiento contestado: naranja */
.estado-FAV { background: #0f7a35 !important; color: #ffffff !important; }   /* resuelto favorable: verde oscuro */
.estado-DES { background: #e03c3c !important; color: #ffffff !important; }   /* denegado: rojo */
.estado-REC { background: #b06ae0 !important; color: #ffffff !important; }   /* recurrido: morado */
.estado-DSI { background: #9aa4b5 !important; color: #1b2230 !important; }   /* desistido: gris */
.estado-ARC { background: #5d6675 !important; color: #ffffff !important; }   /* archivado: gris oscuro */
/* pestañas de filtro por estado con su color */
html[data-tema="azul"] .pestanas span[data-k="PRE"]:not(.act) { color: #8be89a; }
html[data-tema="azul"] .pestanas span[data-k="REQ"]:not(.act) { color: #ffd83d; }
html[data-tema="azul"] .pestanas span[data-k="CON"]:not(.act) { color: #ffb36b; }
html[data-tema="azul"] .pestanas span[data-k="FAV"]:not(.act) { color: #5fdc86; }
html[data-tema="azul"] .pestanas span[data-k="DES"]:not(.act) { color: #ff8a8a; }
html[data-tema="azul"] .pestanas span[data-k="REC"]:not(.act) { color: #dcaeff; }
html[data-tema="azul"] .pestanas span[data-k="DSI"]:not(.act), html[data-tema="azul"] .pestanas span[data-k="ARC"]:not(.act) { color: #b8c0cc; }

/* Alertas */
#alertas-sup { cursor: pointer; }
.chip-alerta { padding: 0 1ch; background: #ffe14d; color: #2a2100; font-weight: bold; }
.chip-alerta.rojo { background: #e03c3c; color: #fff; }
.chip-alerta.amarillo { background: #ffd83d; color: #2a2100; }
.al-vencida { background: #e03c3c !important; color: #fff !important; }
.al-hoy { background: #ffd83d !important; color: #2a2100 !important; }
.al-pronto { background: #2fae4f !important; color: #fff !important; }
.al-futura { background: #9aa4b5 !important; color: #1b2230 !important; }
/* Obligaciones fiscales */
.ob-PEN { background: #e6ecf7 !important; color: #0e2160 !important; }
.ob-PRP { background: #ff9f43 !important; color: #2a1500 !important; }
.ob-PRE { background: #2fae4f !important; color: #fff !important; }
.ob-NOP { background: #9aa4b5 !important; color: #1b2230 !important; }
.ob-vencida { background: #e03c3c !important; color: #fff !important; }