/* Estilo de utilidades/estilo.py (tema claro y oscuro, acento #0063D1) */
:root {
  --fondo: #ECECEE; --superficie: #FFFFFF; --borde: #D1D1D6; --borde-campo: #C2C2C8;
  --texto: #1D1D1F; --texto-suave: #62626A; --desactivado: #A1A1A6; --hover: #F4F4F6;
  --pulsado: #E4E4E8; --seleccion: #D6E4F7; --barra: #B4B4BA; --acento: #0063D1;
  --acento-oscuro: #004A9F; --sobre-acento: #FFFFFF; --radio: 6px;
  --fuente: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #1E1E20; --superficie: #2C2C2F; --borde: #3A3A3E; --borde-campo: #4A4A50;
    --texto: #F2F2F5; --texto-suave: #A6A6AD; --desactivado: #6A6A70; --hover: #36363A;
    --pulsado: #404045; --seleccion: #203A5C; --barra: #5E5E64; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #1E1E20; --superficie: #2C2C2F; --borde: #3A3A3E; --borde-campo: #4A4A50;
  --texto: #F2F2F5; --texto-suave: #A6A6AD; --desactivado: #6A6A70; --hover: #36363A;
  --pulsado: #404045; --seleccion: #203A5C; --barra: #5E5E64; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fondo); color: var(--texto); font-family: var(--fuente);
  font-size: 13px; line-height: 1.35; overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- Disposición */
#app {
  display: grid; height: 100vh; height: 100dvh;
  grid-template-columns: minmax(124px, 156px) minmax(0, 3fr) minmax(220px, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "menu menu menu" "nav centro arbol" "nav pie pie";
}
#menu { grid-area: menu; }
#nav { grid-area: nav; display: flex; flex-direction: column; gap: 6px; padding: 18px 8px 6px; min-height: 0; overflow-y: auto; overflow-x: hidden; }
#centro { grid-area: centro; min-width: 0; min-height: 0; overflow: auto; padding: 18px 12px 12px; }
#derecha { grid-area: arbol; min-height: 0; display: flex; flex-direction: column; padding: 18px 16px 8px 0; }
#pie { grid-area: pie; text-align: center; color: var(--texto-suave); font-size: 11.5px; padding: 2px 8px 6px; }

/* Pantallas estrechas o zoom alto: el resumen pasa a un panel desplegable */
#btn-resumen { display: none; }
@media (max-width: 980px) {
  #app { grid-template-columns: minmax(112px, 136px) minmax(0, 1fr); grid-template-areas: "menu menu" "nav centro" "nav pie"; }
  #derecha { position: fixed; z-index: 40; right: 0; top: 30px; bottom: 0; width: min(380px, 92vw); background: var(--fondo);
    box-shadow: -6px 0 18px rgba(0,0,0,.18); padding: 12px; transform: translateX(105%); transition: transform .18s; }
  #derecha.abierto { transform: none; }
  #btn-resumen { display: inline-block; margin-left: auto; }
}
@media (max-height: 560px) { #nav .escudo { display: none; } }

/* ---------------------------------------------------------------- Menú */
#menu { display: flex; align-items: stretch; background: var(--superficie); border-bottom: 1px solid var(--borde); padding: 0 6px; flex-wrap: wrap; position: relative; z-index: 30; }
.menu-cab { position: relative; }
.menu-cab > button { border: 0; background: none; padding: 6px 10px; cursor: default; border-radius: 4px; }
.menu-cab > button:hover, .menu-cab.abierto > button { background: var(--seleccion); }
.menu-lista { position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.16); padding: 4px 0; display: none; }
.menu-cab.abierto .menu-lista { display: block; }
.menu-lista .item { display: flex; gap: 8px; align-items: center; padding: 6px 18px 6px 12px; white-space: nowrap; cursor: default; }
.menu-lista .item:hover:not(.desactivado) { background: var(--acento); color: var(--sobre-acento); }
.menu-lista .item.desactivado { color: var(--desactivado); }
.menu-lista .item .marca { width: 14px; display: inline-block; text-align: center; }
.menu-lista .sep { border-top: 1px solid var(--borde); margin: 4px 0; }

/* ---------------------------------------------------------------- Columna izquierda */
.nav-boton { display: block; width: 100%; padding: 7px 4px; overflow-wrap: anywhere; hyphens: auto; border-radius: var(--radio); border: 1px solid var(--borde-campo);
  background: var(--superficie); font-weight: 700; font-size: 11.5px; text-transform: none; line-height: 1.15; cursor: pointer; }
.nav-boton:hover { background: var(--hover); }
.nav-boton.activo { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.nav-hueco { flex: 1 1 auto; min-height: 8px; }
.nav-boton.primario { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.nav-boton.primario:hover { background: var(--acento-oscuro); }
.escudo { display: block; width: 100%; max-width: 140px; aspect-ratio: 1; object-fit: contain; margin: 12px auto 0; }

/* ---------------------------------------------------------------- Paneles */
.apartado { display: none; max-width: 1100px; }
.apartado.visible { display: block; }
fieldset.panel { border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); margin: 0 0 14px; padding: 10px 14px 12px; min-width: 0; }
fieldset.panel > legend { font-weight: 700; font-size: 12px; color: var(--texto-suave); padding: 0 4px; text-transform: none; }
.apartado > fieldset.panel > legend, .titulo-apartado { font-size: 12px; }
fieldset.panel fieldset.panel { background: var(--superficie); }
fieldset.panel.firme { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; }
fieldset.panel.firme > legend { color: var(--acento); }
.titulo-apartado { font-weight: 700; color: var(--texto-suave); margin: 0 0 6px 2px; text-transform: uppercase; letter-spacing: .01em; }

.rejilla { display: grid; gap: 8px 12px; align-items: center; }
.fila { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.etq { white-space: normal; }
.etq.negrita { font-weight: 700; }
.etq.pequena { font-size: 11.5px; }
.etq.suave { color: var(--texto-suave); }

.campo { background: var(--superficie); border: 1px solid var(--borde-campo); border-radius: var(--radio); padding: 4px 8px; min-height: 28px; min-width: 0; max-width: 100%; }
.campo:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: var(--acento); }
.campo:disabled, .campo[readonly] { color: var(--texto-suave); background: var(--fondo); }
select.campo { padding-right: 22px; }
textarea.campo.area { width: 100%; min-height: 360px; resize: vertical; line-height: 1.5; padding: 8px 10px; }
.desplegable-envoltorio { display: inline-block; max-width: 100%; }
input.campo { width: 100%; }
.casilla { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.casilla input { width: 15px; height: 15px; accent-color: var(--acento); margin: 0; }
.opciones { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; }
.opciones.vertical { flex-direction: column; align-items: flex-start; }

.boton { border: 1px solid var(--borde-campo); background: var(--superficie); border-radius: var(--radio); padding: 4px 12px; min-height: 28px; cursor: pointer; white-space: nowrap; }
.boton:hover:not(:disabled) { background: var(--hover); }
.boton:active:not(:disabled) { background: var(--pulsado); }
.boton:disabled { color: var(--desactivado); cursor: default; }
.boton.primario { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 600; }
.boton.primario:hover:not(:disabled) { background: var(--acento-oscuro); }
.boton.negrita { font-weight: 700; }
.boton.enlace { border: 0; background: none; color: var(--acento); padding: 2px 4px; font-size: 11.5px; }
.menu-boton::after { content: " ▾"; font-size: 10px; }

.lista { border: 1px solid var(--borde-campo); border-radius: var(--radio); background: var(--superficie); max-height: 180px; overflow: auto; min-width: 140px; }
.lista-fila { padding: 3px 8px; cursor: pointer; user-select: none; }
.lista-fila:hover { background: var(--hover); }
.lista-fila.sel { background: var(--acento); color: var(--sobre-acento); }

.selector-numerado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.circulo { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--borde-campo); background: var(--superficie); cursor: pointer; padding: 0; }
.circulo.activo { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.circulo.tachado { text-decoration: line-through; color: var(--texto-suave); }
.circulo.activo.tachado { color: var(--sobre-acento); }

.menu-flotante { position: fixed; z-index: 60; background: var(--superficie); border: 1px solid var(--borde); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.18); padding: 4px 0; max-height: 70vh; overflow: auto; min-width: 200px; }
.menu-item { padding: 5px 14px; cursor: default; white-space: nowrap; }
.menu-item:hover:not(.desactivada) { background: var(--seleccion); }
.menu-item.desactivada { color: var(--desactivado); }
.menu-sep { border-top: 1px solid var(--borde); margin: 4px 0; }
.menu-sub { padding-left: 10px; border-left: 2px solid var(--borde); margin-left: 12px; }
.menu-item.casilla { display: flex; }

.aviso-requisito { color: var(--texto-suave); font-size: 11.5px; }
.nota-pie { color: var(--texto-suave); font-size: 11.5px; }

/* ---------------------------------------------------------------- Resumen (árbol) */
#arbol { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: 8px 6px; }
#leyenda { font-size: 11px; color: var(--texto-suave); padding: 6px 2px 0; }

/* ---------------------------------------------------------------- Diálogos */
.modal-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.28); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 12px; }
.modal { background: var(--superficie); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.3); max-width: min(720px, 100%); max-height: calc(100vh - 24px); display: flex; flex-direction: column; min-width: min(360px, 100%); }
.modal.ancho { max-width: min(980px, 100%); width: 100%; }
.modal-titulo { font-weight: 700; padding: 12px 16px 6px; font-size: 14px; }
.modal-cuerpo { padding: 6px 16px 10px; overflow: auto; white-space: pre-wrap; }
.modal-cuerpo > * { white-space: normal; }
.modal-pie { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px 14px; flex-wrap: wrap; }
.nota-flotante { position: fixed; right: 16px; bottom: 16px; background: var(--texto); color: var(--fondo); padding: 8px 14px; border-radius: 8px; z-index: 90; transition: opacity .4s; }
.nota-flotante.fuera { opacity: 0; }

.cargando { position: fixed; inset: 0; z-index: 85; background: rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; }
.cargando .caja { background: var(--superficie); border-radius: 10px; padding: 20px 28px; text-align: center; min-width: 280px; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.cargando .barra { height: 6px; background: var(--fondo); border-radius: 3px; overflow: hidden; margin-top: 12px; }
.cargando .barra i { display: block; height: 100%; width: 40%; background: var(--acento); border-radius: 3px; animation: ir 1.1s infinite ease-in-out; }
@keyframes ir { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

.archivos-generados { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.archivos-generados .fila { justify-content: space-between; border: 1px solid var(--borde); border-radius: 6px; padding: 6px 10px; }

.estado-motor { font-size: 11px; color: var(--texto-suave); text-align: center; margin-top: 4px; min-height: 1em; }
[hidden] { display: none !important; }