:root {
  --fondo: #f4f6f8;
  --papel: #ffffff;
  --tinta: #1d2733;
  --suave: #5e6b78;
  --linea: #dfe4ea;
  --lateral: #15324a;
  --lateral-tinta: #c9d6e2;
  --acento: #1f5f8b;
  --acento-suave: #e6f0f7;
  --bien: #1d7a46;
  --mal: #b3261e;
  --aviso: #8a5a00;
  --radio: 8px;
  --sombra: 0 1px 2px rgba(16, 32, 48, .06), 0 2px 8px rgba(16, 32, 48, .05);
  --campo: #ffffff;
  --borde-campo: #c8d1db;
  --hover: #f0f3f6;
  --hover-fila: #f5f9fc;
  --tabla-cabecera: #f8fafb;
  --tabla-nivel: #f1f5f8;
  --tabla-separador: #fbfcfd;
  --boton-primario: var(--acento);
  --error-fondo: #fff6f5;
  color-scheme: light;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  /* El texto crece un poco en pantallas grandes (14 px hasta 1366 de ancho, 16 px desde 2560). */
  font-size: clamp(14px, calc(11.7px + 0.17vw), 16px);
  color: var(--tinta);
  background: var(--fondo);
}

* { box-sizing: border-box; }
/* «hidden» oculta siempre, aunque un estilo de la página le dé otro display (p. ej. .filtros label). */
[hidden] { display: none !important; }
body { margin: 0; display: flex; min-height: 100vh; }
a { color: var(--acento); }

/* ------------------------------------------------------------ Lateral */
.lateral {
  width: clamp(232px, 13vw, 300px); flex: none; background: var(--lateral); color: var(--lateral-tinta);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
/* El logo lleva letras azul oscuro: va sobre una placa blanca para leerse en el lateral oscuro. */
.marca { display: block; margin: 14px 14px 10px; padding: 8px 10px; background: #fff; border-radius: var(--radio); }
.marca img { display: block; width: 100%; height: auto; }
.logo-entrada { display: block; width: 260px; max-width: 100%; height: auto; margin: 0 auto 14px; }
/* En la pantalla de Empresas, sin fondo: sobre el mismo color que la página. */
.logo-portada { display: block; width: min(1200px, 70%); height: auto; margin: clamp(40px, 8vh, 110px) auto 0; }
.contexto { padding: 4px 20px 14px; font-size: 12.5px; border-bottom: 1px solid rgba(255,255,255,.08); }
.contexto .empresa { color: #fff; font-weight: 600; display: block; margin-bottom: 6px; line-height: 1.3; }
.contexto select { width: 100%; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 4px 6px; }
.contexto select option { color: var(--tinta); }
nav { flex: 1; overflow-y: auto; padding: 8px 0; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
nav .grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #7f98ad; padding: 14px 20px 4px; }
nav a { display: block; padding: 7px 20px; color: var(--lateral-tinta); text-decoration: none; border-left: 3px solid transparent; }
nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
nav a.activo { background: rgba(140,196,234,.12); color: #fff; border-left-color: #8cc4ea; }
.pie-lateral { font-size: 11px; color: #7f98ad; padding: 12px 20px; }

/* ------------------------------------------------------------ Contenido */
main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.vista { flex: 1; }
/* Pie discreto, abajo a la derecha de todas las pantallas. */
.pie-app { font-size: 11px; color: #9aa6b2; text-align: right; padding: 6px clamp(20px, 2.2vw, 48px) 10px; letter-spacing: .02em; user-select: none; }
/* El contenido ocupa todo el ancho de la ventana, con márgenes que crecen con la pantalla. */
.vista { padding: clamp(18px, 2.2vh, 32px) clamp(20px, 2.2vw, 48px) 60px; }
h1 { font-size: 21px; font-weight: 600; margin: 0 0 4px; }
h2 { font-size: 16px; font-weight: 600; margin: 24px 0 10px; }
.sub { color: var(--suave); margin: 0 0 18px; }
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cabecera .sub { margin: 0; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.panel { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px 18px; margin-bottom: 16px; }
.panel.sin-relleno { padding: 0; overflow: auto; }

.filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.filtros label, .campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--suave); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 16px; }
.rejilla .ancho { grid-column: 1 / -1; }
.casilla { flex-direction: row !important; align-items: center; gap: 6px !important; color: var(--tinta) !important; font-size: 13.5px !important; }

input, select, textarea {
  font: inherit; color: inherit; border: 1px solid var(--borde-campo); border-radius: 6px; padding: 6px 8px; background: var(--campo); min-width: 0;
}
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid #8cc4ea; outline-offset: 0; border-color: var(--acento); }
input.num { text-align: right; font-variant-numeric: tabular-nums; }
input.error { border-color: var(--mal); background: var(--error-fondo); }

button, .boton {
  font: inherit; border: 1px solid var(--borde-campo); background: var(--campo); color: var(--tinta); border-radius: 6px; padding: 6px 14px;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
button:hover, .boton:hover { background: var(--hover); }
button.primario { background: var(--boton-primario); border-color: var(--boton-primario); color: #fff; }
button.primario:hover { background: #194f75; }
button.peligro { color: var(--mal); border-color: #e7b9b5; }
button.peligro:hover { background: var(--error-fondo); }
button.leve { border-color: transparent; background: transparent; color: var(--acento); padding: 4px 8px; }
button:disabled { opacity: .5; cursor: default; }

/* ------------------------------------------------------------ Tablas */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
th { font-size: 12px; font-weight: 600; color: var(--suave); background: var(--tabla-cabecera); position: sticky; top: 0; z-index: 1; }
td.n, th.n { text-align: right; white-space: nowrap; }
td.c { white-space: nowrap; font-family: Consolas, "Cascadia Mono", monospace; font-size: 13px; }
tr.clic { cursor: pointer; }
tr.clic:hover td { background: var(--hover-fila); }
tr.total td { font-weight: 600; background: var(--tabla-cabecera); border-top: 2px solid var(--linea); }
tr.separador td { background: var(--tabla-separador); color: var(--suave); font-size: 12.5px; padding-top: 10px; }
tr.nivel-0 td { font-weight: 700; background: var(--tabla-nivel); }
tr.nivel-1 td { font-weight: 600; }
tr.nivel-2 td:first-child { padding-left: 26px; }
tr.nivel-3 td:first-child { padding-left: 44px; }
tr.detalle td { color: var(--suave); font-size: 12.5px; }
tr.detalle td:first-child { padding-left: 62px; }
.negativo { color: var(--mal); }
.positivo { color: var(--bien); }
.aviso-ejercicio { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 16px 28px 0;
  padding: 10px 14px; border-radius: 10px; background: #fff4d6; color: #6b4a00; border: 1px solid #f0d58a; font-weight: 600; }
.aviso-ejercicio[hidden] { display: none; }
.aviso-version { background: #e3f0fb; color: #12466b; border-color: #a9cdea; }
.aviso-ejercicio button { font-weight: 600; }
.vacio { padding: 28px; text-align: center; color: var(--suave); }

/* ------------------------------------------------------------ Editor de asientos */
.editor td { padding: 3px 4px; }
.editor input { width: 100%; border-color: var(--borde-campo); background: var(--campo); }
/* Solo lectura (asientos de cierre o de un ejercicio cerrado): sin aspecto de campo. */
.editor input[readonly] { border-color: transparent; background: transparent; }
/* La línea en la que se escribe se distingue de las demás. */
.editor tbody tr:focus-within td { background: var(--acento-suave); }
.editor select { width: 100%; text-align: right; }
.editor select[data-campo=departamento] { text-align: left; }
.editor td[data-cuota] { padding-right: 12px; vertical-align: middle; }
.editor:not(.con-igic) [data-col-igic] { display: none; }
.editor select[data-campo=igic] { text-align: left; }
.editor input:not([readonly]):hover { border-color: var(--acento); }
.editor input:focus { background: var(--campo); }
.editor .nombre-cuenta { font-size: 12px; color: var(--suave); padding: 0 8px 4px; display: block; min-height: 15px; }
.editor .nombre-cuenta.mal { color: var(--mal); }
.totales { display: flex; gap: 20px; justify-content: flex-end; padding: 10px 14px; font-variant-numeric: tabular-nums; }
.totales .descuadre { color: var(--mal); font-weight: 600; }
.totales .cuadrado { color: var(--bien); font-weight: 600; }
.atajos { font-size: 12px; color: var(--suave); margin-top: 8px; }
kbd { background: #eef1f4; border: 1px solid #d5dbe1; border-radius: 4px; padding: 0 5px; font-size: 11.5px; font-family: inherit; }
button.primario kbd { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); color: #fff; }

/* ------------------------------------------------------------ Buscador de cuentas */
.sugerencias {
  position: fixed; z-index: 60; background: var(--papel); border: 1px solid var(--borde-campo); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(16, 32, 48, .16); max-height: 340px; overflow-y: auto; max-width: 560px;
}
.sugerencia { display: flex; gap: 12px; padding: 6px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sugerencia .c { min-width: 90px; color: var(--acento); }
.sugerencia:hover { background: var(--hover-fila); }
.sugerencia.activa { background: var(--acento-suave); }
.sugerencia-mas { padding: 6px 10px; font-size: 12px; color: var(--suave); border-top: 1px solid var(--linea); }

/* ------------------------------------------------------------ Escritorio */
.cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 16px; }
.cifra { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra); }
.cifra .etiqueta { font-size: 12px; color: var(--suave); }
.cifra .valor { font-size: 22px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.cifra .nota { font-size: 12px; color: var(--suave); margin-top: 2px; }
.grafico svg { width: 100%; height: auto; max-height: 340px; display: block; }
.grafico text { font-size: 13px; fill: var(--suave); }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra); cursor: pointer; }
.tarjeta:hover { border-color: var(--acento); }
.tarjeta b { display: block; font-size: 15px; margin-bottom: 4px; }
.tarjeta span { color: var(--suave); font-size: 12.5px; }

.etiqueta-tipo { font-size: 11px; border-radius: 10px; padding: 1px 8px; background: var(--acento-suave); color: var(--acento); white-space: nowrap; }
.etiqueta-tipo.cierre { background: #fdf0e1; color: var(--aviso); }

.pestanas { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--linea); margin-bottom: 16px; }
.pestanas button { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 8px 14px; color: var(--suave); }
.pestanas button.activa { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }

.nota-aviso { background: #fff8e8; border: 1px solid #f0d9a8; color: #6b4a00; border-radius: 6px; padding: 8px 12px; margin: 10px 0; font-size: 13px; }
.nota-info { background: var(--acento-suave); border: 1px solid #c6dcec; color: #174a6e; border-radius: 6px; padding: 8px 12px; margin: 10px 0; font-size: 13px; }

/* ------------------------------------------------------------ Diálogos y avisos */
dialog { border: none; border-radius: 10px; padding: 0; box-shadow: 0 12px 40px rgba(0,0,0,.25); width: min(clamp(760px, 48vw, 1000px), 94vw); max-height: 90vh; }
dialog::backdrop { background: rgba(16, 32, 48, .45); }
dialog form { display: flex; flex-direction: column; max-height: 90vh; }
dialog header { padding: 16px 20px 6px; font-size: 17px; font-weight: 600; }
dialog .cuerpo { padding: 10px 20px; overflow: auto; }
dialog footer { padding: 12px 20px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--linea); }
.avisos { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.aviso { background: #1d2733; color: #fff; padding: 10px 14px; border-radius: 8px; box-shadow: var(--sombra); max-width: 420px; animation: entra .15s ease-out; }
.aviso.mal { background: var(--mal); }
@keyframes entra { from { transform: translateY(8px); opacity: 0; } }

/* ------------------------------------------------------------ Impresión */
.solo-impresion, .membrete { display: none; }
@media print {
  body { display: block; background: #fff; }
  .lateral, .acciones, .filtros, .avisos, .no-imprimir, .pestanas { display: none !important; }
  .vista { padding: 0; max-width: none; }
  .panel { border: none; box-shadow: none; padding: 0; }
  .solo-impresion { display: block; margin-bottom: 8px; font-size: 12px; color: #444; }
  /* Los logos encabezan lo que se imprime o se guarda en PDF: el de la empresa a la izquierda (si tiene) y el de sgconta. */
  .membrete { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid #d5dbe1; }
  .membrete img { display: block; height: 38px; width: auto; max-width: 45%; object-fit: contain; }
  .membrete .logo-empresa { height: 54px; }
  .membrete .logo-empresa:not([hidden]) + .logo-sgconta { height: 26px; }
  .membrete img[hidden] { display: none; }
  .logo-portada { display: none; }
  th { position: static; }
  table { font-size: 11px; }
}

@media (max-width: 760px) {
  body { flex-direction: column; }
  .lateral { width: auto; height: auto; position: static; }
  nav { display: flex; flex-wrap: wrap; }
  nav .grupo { width: 100%; }
  .vista { padding: 16px; }
}
.etiqueta-tipo.vencida { background: #fde8e8; color: #a32020; }
.cabecera-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.cabecera-panel button { margin-left: auto; }
dialog h3 { font-size: 13.5px; font-weight: 600; margin: 14px 0 6px; }
dialog table td { padding: 5px 8px; }
details summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--suave); }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .dos-columnas { grid-template-columns: minmax(0, 1fr); } }
.desplaza { overflow-x: auto; max-width: 100%; }
.seccion-memoria h3 { font-size: 14px; margin: 14px 0 6px; }
.seccion-memoria textarea { width: 100%; font: inherit; }
@media print { .seccion-memoria p { margin: 0 0 8px; text-align: justify; } h2 { break-after: avoid; } }
.carta { max-width: 760px; padding: 36px 44px; line-height: 1.55; }
.carta-cabecera { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.carta-remitente, .carta-destinatario { white-space: pre-line; }
.carta-destinatario { margin-top: 48px; min-width: 40%; }
.carta-fecha { text-align: right; }
.carta-texto { white-space: pre-wrap; outline: none; }
[contenteditable]:focus { background: #fffbe6; }
@media print { .carta { max-width: none; padding: 0; font-size: 12pt; } [contenteditable]:focus { background: none; } }
.manual .indice { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.manual .indice a { padding: 4px 6px; border-radius: 6px; text-decoration: none; }
.manual .indice a:hover { background: var(--acento-suave); }
.seccion-ayuda { line-height: 1.55; }
.seccion-ayuda h2 { font-size: 16px; margin: 0 0 8px; }
.seccion-ayuda dt { font-weight: 600; margin-top: 10px; }
.seccion-ayuda dd { margin: 2px 0 0 0; }
@media print { .seccion-ayuda { break-inside: avoid; } }
.logo-empresa-panel { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.logo-empresa-muestra { width: 240px; min-height: 80px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--linea); border-radius: var(--radio); padding: 10px; background: #fff; }
.logo-empresa-muestra img { max-width: 100%; max-height: 90px; }
.logo-empresa-panel > div:last-child { flex: 1; min-width: 240px; }
label.boton { cursor: pointer; }
.pdf-factura { width: 100%; height: 640px; border: 1px solid var(--linea); border-radius: var(--radio); margin: 8px 0; background: #fff; }
.avisos-lectura { margin: 6px 0; padding-left: 20px; color: var(--aviso); }
.texto-leido { white-space: pre-wrap; font-size: 11.5px; max-height: 320px; overflow: auto; background: var(--fondo); padding: 8px; border-radius: 6px; }

/* Documentos de las facturas */
.lista-documentos { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lista-documentos li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lista-documentos a { text-decoration: none; }
.panel.soltar { outline: 2px dashed var(--acento); outline-offset: -6px; background: var(--acento-suave); }
.imagen-documento { display: block; max-width: 100%; max-height: 80vh; margin: 8px 0; border: 1px solid var(--linea); border-radius: var(--radio); }
.cabecera-panel .boton { margin-left: auto; }

/* ------------------------------------------------------------ Calendario fiscal */
.cal-resumen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 14px; }
.cal-cifra { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--linea);
  background: var(--papel); box-shadow: var(--sombra); text-align: left; font: inherit; color: var(--suave); cursor: pointer; border-left: 5px solid var(--linea);
  transition: transform .12s ease, box-shadow .12s ease; }
div.cal-cifra { cursor: default; }
button.cal-cifra:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(16, 32, 48, .1); background: var(--papel); }
.cal-cifra .cal-valor { font-size: 26px; font-weight: 600; color: var(--tinta); line-height: 1.15; }
.cal-cifra.vencido { border-left-color: #c0392b; }
.cal-cifra.vencido .cal-valor { color: #b3261e; }
.cal-cifra.pendiente { border-left-color: #d68a00; }
.cal-cifra.presentado { border-left-color: #1d7a46; }
.cal-cifra.presentado .cal-valor { color: #1d7a46; }
.cal-cifra.proximo { border-left-color: var(--acento); }
.cal-cifra.activa { outline: 2px solid var(--acento); outline-offset: 1px; }
.cal-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.cal-chip { border-radius: 999px; padding: 5px 14px; background: var(--papel); border: 1px solid var(--linea); font-size: 13px; color: var(--suave); }
.cal-chip.activa { background: var(--boton-primario); border-color: var(--boton-primario); color: #fff; }
.cal-leyenda { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.cal-leyenda .cal-modelo { font-size: 11px; padding: 2px 8px; min-width: 0; }
.cal-linea { display: flex; flex-direction: column; gap: 18px; margin-bottom: 16px; }
.cal-grupo h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--tinta); }
.cal-grupo h3::first-letter { text-transform: uppercase; }
.cal-grupo h3 span { font-size: 12px; font-weight: 400; color: var(--suave); }
.cal-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 12px 16px; margin-bottom: 8px;
  background: var(--papel); border: 1px solid var(--linea); border-left: 5px solid #c8d1db; border-radius: 10px; box-shadow: var(--sombra); }
.cal-item:hover { box-shadow: 0 4px 14px rgba(16, 32, 48, .09); }
.cal-dia { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; padding: 6px 0; background: var(--fondo); line-height: 1.1; }
.cal-num { font-size: 22px; font-weight: 600; color: var(--tinta); }
.cal-mes { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.cal-dow { font-size: 10px; color: #9aa6b2; }
.cal-titulo { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--tinta); }
.cal-meta { font-size: 12.5px; color: var(--suave); margin-top: 3px; }
.cal-modelo { display: inline-block; min-width: 46px; text-align: center; padding: 3px 8px; border-radius: 6px; font-weight: 600; font-size: 12.5px; letter-spacing: .02em; color: #fff; }
.org-aeat { background: #1f5f8b; }
.org-atc { background: #0e8a6a; }
.org-registro { background: #7b4fa0; }
.org-empresa { background: #b06a00; }
.org-otros { background: #6b7a88; }
.cal-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 150px; }
.cal-pill { font-size: 11.5px; padding: 2px 10px; border-radius: 999px; background: var(--fondo); color: var(--suave); white-space: nowrap; }
.cal-cuando { font-size: 12px; color: var(--suave); }
.cal-acciones { display: flex; gap: 4px; justify-content: flex-end; min-width: 170px; }
.cal-item.vencido { border-left-color: #c0392b; }
.cal-item.vencido .cal-pill { background: #fde8e8; color: #a32020; }
.cal-item.vencido .cal-num { color: #b3261e; }
.cal-item.urgente { border-left-color: #e67e22; }
.cal-item.urgente .cal-pill { background: #fff1e0; color: #a85200; }
.cal-item.pendiente { border-left-color: #d6a300; }
.cal-item.pendiente .cal-pill { background: #fff7d6; color: #8a6400; }
.cal-item.presentado { border-left-color: #1d7a46; opacity: .85; }
.cal-item.presentado .cal-pill { background: #e3f4ea; color: #1d7a46; }
.cal-item.recordatorio { border-left-color: #8fa0b0; }
.cal-item.recordatorio .cal-pill { background: #eef2f6; color: #5e6b78; }
.cal-hoy { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; color: var(--acento); font-size: 12px; font-weight: 600; }
.cal-hoy::before, .cal-hoy::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--acento)); }
.cal-hoy::after { background: linear-gradient(90deg, var(--acento), transparent); }
@media (max-width: 760px) {
  .cal-item { grid-template-columns: 54px minmax(0, 1fr); }
  .cal-estado, .cal-acciones { grid-column: 2; align-items: flex-start; justify-content: flex-start; min-width: 0; }
}
@media print {
  .cal-item { box-shadow: none; break-inside: avoid; padding: 6px 10px; margin-bottom: 4px; }
  .cal-grupo h3 { margin-bottom: 4px; }
}

/* ------------------------------------------------------------ Buscador general (Ctrl+K) */
.buscar-lateral { display: flex; align-items: center; gap: 8px; width: calc(100% - 28px); margin: 6px 14px 8px; padding: 7px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: var(--lateral-tinta); font-size: 13px; text-align: left; cursor: pointer; }
.buscar-lateral:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.buscar-lateral kbd { margin-left: auto; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: inherit; }
.paleta-fondo { position: fixed; inset: 0; z-index: 50; background: rgba(16, 32, 48, .38); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.paleta { width: min(720px, 92vw); background: var(--papel); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); overflow: hidden; display: flex; flex-direction: column;
  max-height: 72vh; animation: entra .12s ease-out; }
.paleta-entrada { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--linea); }
.paleta-entrada input { flex: 1; border: none; outline: none; font-size: 17px; padding: 4px 0; background: transparent; }
.paleta-resultados { overflow-y: auto; padding: 6px 0; }
.paleta-grupo { padding: 8px 16px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); }
.paleta-item { display: flex; align-items: baseline; gap: 12px; padding: 8px 16px; cursor: pointer; }
.paleta-item.elegido { background: var(--acento-suave); box-shadow: inset 3px 0 0 var(--acento); }
.paleta-titulo { color: var(--tinta); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paleta-detalle { margin-left: auto; color: var(--suave); font-size: 12.5px; white-space: nowrap; }
.paleta-vacio { padding: 18px 16px; color: var(--suave); }
.paleta-pie { display: flex; gap: 18px; padding: 8px 16px; border-top: 1px solid var(--linea); font-size: 11.5px; color: var(--suave); background: var(--fondo); }
kbd { font: 11px/1 "Segoe UI", system-ui, sans-serif; padding: 2px 5px; border: 1px solid var(--linea); border-bottom-width: 2px; border-radius: 4px; background: var(--papel); }

/* ------------------------------------------------------------ Tema oscuro (solo en pantalla: lo impreso y los PDF, siempre claros) */
.tema-lateral { display: block; width: calc(100% - 28px); margin: 0 14px 4px; padding: 5px 10px; font-size: 12px; text-align: left; cursor: pointer;
  background: transparent; border: 1px solid rgba(255, 255, 255, .12); color: var(--lateral-tinta); border-radius: 6px; }
.tema-lateral:hover { background: rgba(255, 255, 255, .08); color: #fff; }
@media screen {
  :root[data-tema="oscuro"] {
    color-scheme: dark;
    --fondo: #0f1720;
    --papel: #18222d;
    --tinta: #e2e8ee;
    --suave: #9eacba;
    --linea: #2b3846;
    --lateral: #0a1622;
    --lateral-tinta: #c3d0dc;
    --acento: #6cb4e4;
    --acento-suave: #1b3246;
    --bien: #52c48e;
    --mal: #f07a70;
    --aviso: #e2b55a;
    --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .25);
    --campo: #111b25;
    --borde-campo: #3a4857;
    --hover: #243241;
    --hover-fila: #1e2b38;
    --tabla-cabecera: #1c2733;
    --tabla-nivel: #212e3b;
    --tabla-separador: #1a2430;
    --boton-primario: #2c76ab;
    --error-fondo: #3a1f1f;
  }
  [data-tema="oscuro"] button.primario:hover { background: #3584bb; }
  [data-tema="oscuro"] button.peligro { border-color: #7a3a36; }
  [data-tema="oscuro"] .aviso-ejercicio { background: #3a2f12; color: #f0d58a; border-color: #6b5520; }
  [data-tema="oscuro"] .aviso-version { background: #142c40; color: #a9cdea; border-color: #2c5878; }
  [data-tema="oscuro"] .nota-aviso { background: #33290f; border-color: #6b5520; color: #f0d9a8; }
  [data-tema="oscuro"] .nota-info { border-color: #2c5878; color: #b9d7ee; }
  [data-tema="oscuro"] kbd { background: #243241; border-color: #3a4857; color: var(--tinta); }
  [data-tema="oscuro"] .etiqueta-tipo.cierre { background: #3a2c14; }
  [data-tema="oscuro"] .etiqueta-tipo.vencida { background: #3d1c1c; color: #f5a3a3; }
  [data-tema="oscuro"] [contenteditable]:focus { background: #2a2614; }
  [data-tema="oscuro"] .aviso { background: #2b3a4a; }
  [data-tema="oscuro"] dialog { background: var(--papel); color: var(--tinta); }
  [data-tema="oscuro"] dialog::backdrop, [data-tema="oscuro"] .paleta-fondo { background: rgba(0, 0, 0, .6); }
  [data-tema="oscuro"] .cal-cifra.vencido .cal-valor, [data-tema="oscuro"] .cal-item.vencido .cal-num { color: #f07a70; }
  [data-tema="oscuro"] .cal-cifra.presentado .cal-valor { color: #52c48e; }
  [data-tema="oscuro"] .cal-item.vencido .cal-pill { background: #3d1c1c; color: #f5a3a3; }
  [data-tema="oscuro"] .cal-item.urgente .cal-pill { background: #3d2a12; color: #f3b56b; }
  [data-tema="oscuro"] .cal-item.pendiente .cal-pill { background: #3a3110; color: #e8cc6a; }
  [data-tema="oscuro"] .cal-item.presentado .cal-pill { background: #15352a; color: #6fd3a0; }
  [data-tema="oscuro"] .cal-item.recordatorio .cal-pill { background: #243241; color: #a9b8c6; }
  /* El logo de la portada lleva letras oscuras: sobre una placa clara, como en el lateral. */
  [data-tema="oscuro"] .logo-portada { background: #f4f6f8; border-radius: 14px; padding: 18px 28px; opacity: .92; }
  [data-tema="oscuro"] .logo-entrada { background: #f4f6f8; border-radius: 10px; padding: 8px 12px; }
}

/* ------------------------------------------------------------ Panel de control */
:root { --serie-1: #2a78d6; --serie-2: #eb6834; --serie-anterior: #9aa6b2; }
@media screen { :root[data-tema="oscuro"] { --serie-1: #3987e5; --serie-2: #d95926; --serie-anterior: #6f7f8f; } }
.rejilla-graficos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(560px, 100%), 1fr)); gap: 16px; }
.tarjeta-grafico { margin: 0; }
.tarjeta-grafico h2 { margin: 0 0 8px; font-size: 15px; }
.tarjeta-grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.tarjeta-grafico .eje { font-size: 11px; fill: var(--suave); font-variant-numeric: tabular-nums; }
.tarjeta-grafico .rejilla { stroke: var(--linea); stroke-width: 1; }
.tarjeta-grafico .rejilla.cero { stroke: var(--borde-campo); }
.tarjeta-grafico .linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tarjeta-grafico .punto { stroke: var(--papel); stroke-width: 2; }
.linea.s1 { stroke: var(--serie-1); } .punto.s1, .muestra.s1 { fill: var(--serie-1); background: var(--serie-1); }
.linea.s2 { stroke: var(--serie-2); } .punto.s2, .muestra.s2 { fill: var(--serie-2); background: var(--serie-2); }
.linea.anterior { stroke: var(--serie-anterior); stroke-dasharray: 5 4; } .punto.anterior, .muestra.anterior { fill: var(--serie-anterior); background: var(--serie-anterior); }
.tarjeta-grafico .cursor { stroke: var(--suave); stroke-width: 1; stroke-dasharray: 2 3; pointer-events: none; }
.tarjeta-grafico .zona { fill: transparent; cursor: crosshair; }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--suave); margin: -2px 0 6px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.muestra { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.globo-grafico { position: fixed; z-index: 40; pointer-events: none; background: var(--papel); color: var(--tinta); border: 1px solid var(--linea);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(16, 32, 48, .16); padding: 8px 10px; font-size: 12.5px; min-width: 180px; }
.globo-grafico .globo-mes { font-weight: 600; margin-bottom: 4px; }
.globo-grafico div:not(.globo-mes) { display: flex; align-items: center; gap: 6px; }
.globo-grafico b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.barras-h { display: flex; flex-direction: column; gap: 8px; }
.fila-barra { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.nombre-barra { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pista { height: 12px; }
.barra { display: block; height: 100%; background: var(--serie-1); border-radius: 0 4px 4px 0; }
.importe-barra { font-variant-numeric: tabular-nums; color: var(--suave); text-align: right; min-width: 96px; }
.variacion { font-weight: 600; }
.variacion.mejor { color: var(--bien); }
.variacion.peor { color: var(--mal); }
.datos-panel { margin-top: 16px; }
.datos-panel summary { cursor: pointer; font-weight: 600; }
@media print { .rejilla-graficos { grid-template-columns: 1fr 1fr; } .tarjeta-grafico { break-inside: avoid; } .datos-panel, .globo-grafico { display: none; } }

/* Usuarios: verificación en dos pasos y empresas que ve cada usuario. El QR, siempre oscuro sobre blanco (también en el tema oscuro). */
.qr-dos-pasos { display: inline-block; background: #fff; padding: 6px; border-radius: 6px; line-height: 0; }
.qr-dos-pasos svg { width: 196px; height: 196px; }
.clave-dos-pasos { word-break: break-all; }
.codigos-recuperacion { font-size: 1.1em; line-height: 1.6; padding: 10px 14px; border: 1px solid var(--borde-campo); border-radius: 6px; user-select: all; }
.acceso-empresas { border: 1px solid var(--borde-campo); border-radius: 6px; padding: 8px 12px; margin: 10px 0 0; }
.acceso-empresas .lista-empresas { max-height: 200px; overflow: auto; margin: 6px 0 0 22px; display: grid; gap: 2px; }
.acceso-empresas .lista-empresas.apagada { opacity: .5; }