:root {
  --azul: #1f3a5f; --azul-claro: #e8eef7; --gris: #f4f5f7; --texto: #1c1c1c; --borde: #d9dde3;
  --verde: #2e7d32; --rojo: #b3261e; --naranja: #e65100; --amarillo: #f9a825;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.45; color: var(--texto); background: var(--gris); }
header { background: var(--azul); color: white; display: flex; align-items: center; gap: 24px; padding: 0 24px; height: 58px; }
.marca { font-weight: 700; font-size: 17px; white-space: nowrap; }
.marca span { font-weight: 400; opacity: .85; }
nav { display: flex; gap: 4px; flex: 1; }
nav a { color: white; text-decoration: none; padding: 8px 14px; border-radius: 6px; opacity: .9; }
nav a:hover { background: rgba(255,255,255,.12); }
nav a.activo { background: rgba(255,255,255,.22); opacity: 1; font-weight: 600; }
.derecha { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.hoy { opacity: .85; font-size: 15px; }
a.cerrar { color: white; border: 1px solid rgba(255,255,255,.6); padding: 6px 12px; border-radius: 6px; text-decoration: none; }
a.cerrar:hover { background: rgba(255,255,255,.12); }
main { max-width: 1100px; margin: 24px auto; padding: 0 24px; }
h1 { font-size: 24px; margin: 0 0 6px; }
h2 { font-size: 18px; margin: 0 0 12px; }
p { margin: 0 0 10px; }
.subtitulo { color: #555; margin-bottom: 20px; }
.tarjeta { background: white; border: 1px solid var(--borde); border-radius: 10px; padding: 20px 24px; margin-bottom: 20px; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; margin-bottom: 20px; }
.tarjetas .tarjeta { margin-bottom: 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { background: var(--azul-claro); font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aviso { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.aviso.ok { background: #e8f5e9; border: 1px solid #a5d6a7; }
.aviso.error { background: #fdecea; border: 1px solid #f5c2c7; }
.aviso.info { background: var(--azul-claro); border: 1px solid #b6c7e0; }
.aviso.alerta { background: #fff8e1; border: 1px solid #f3dc8f; }
button, .boton { background: var(--azul); color: white; border: 0; padding: 10px 18px; border-radius: 8px; font-size: 15px; cursor: pointer; text-decoration: none; display: inline-block; font-family: inherit; }
button:hover, .boton:hover { filter: brightness(1.12); }
button.secundario, .boton.secundario { background: white; color: var(--azul); border: 1px solid var(--azul); }
.silencio { color: #666; }
code { background: var(--azul-claro); padding: 1px 5px; border-radius: 4px; font-size: 14px; }
footer { text-align: center; color: #777; font-size: 13px; padding: 24px; }
ul.pasos { list-style: none; padding: 0; margin: 0; }
ul.pasos li { padding: 7px 0; border-bottom: 1px dashed var(--borde); display: flex; gap: 10px; align-items: baseline; }
ul.pasos li:last-child { border: 0; }
.estado { display: inline-block; min-width: 96px; text-align: center; font-size: 13px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.estado.hecho { background: #e8f5e9; color: var(--verde); }
.estado.en-prueba { background: var(--azul-claro); color: var(--azul); }
.estado.proximo { background: #fff3e0; color: var(--naranja); }
.estado.pendiente { background: #eee; color: #666; }
.grande { font-size: 20px; }
ul.registro { padding-left: 0; list-style: none; margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
ul.registro li { padding: 4px 0; border-bottom: 1px dashed var(--borde); word-break: break-word; }
.cerrado main { text-align: center; padding-top: 60px; }
.texto-error { color: var(--rojo); font-weight: 600; }
.texto-ok { color: var(--verde); font-weight: 600; }
form.en-linea { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
form.en-linea label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #444; }
.submenu { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 20px; }
.submenu a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--borde); background: white; color: var(--azul); text-decoration: none; font-size: 15px; }
.submenu a:hover { background: var(--azul-claro); }
.submenu a.activo { background: var(--azul); color: white; border-color: var(--azul); }
.etiqueta { display: inline-block; font-size: 13px; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.etiqueta.ok { background: #e8f5e9; color: var(--verde); }
.etiqueta.error { background: #fdecea; color: var(--rojo); }
.etiqueta.pendiente { background: #fff3e0; color: var(--naranja); }
.etiqueta.gris { background: #eee; color: #555; }
table.compacta th, table.compacta td { padding: 6px 8px; font-size: 14px; }
.chico { font-size: 13px; }
.prelinea { white-space: pre-line; }
.fecha-grande { font-weight: 600; white-space: nowrap; }
tr.apagada td { color: #888; }
details > summary { cursor: pointer; color: var(--azul); }
ul.lineas { margin: 4px 0 0; padding-left: 18px; }
.barra { height: 10px; background: #eee; border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.barra div { height: 100%; background: var(--verde); }
form.en-linea label.casilla { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 10px; }
select, input[type=text], input[type=month], input[type=date] { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; background: white; color: var(--texto); }
/* Tablero (paso 5) */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.cifra { background: white; border: 1px solid var(--borde); border-radius: 10px; padding: 12px 16px; text-decoration: none; color: var(--texto); display: flex; flex-direction: column; gap: 2px; }
.cifra:hover { border-color: var(--azul); }
.cifra strong { font-size: 26px; line-height: 1.15; color: var(--azul); }
.cifra span { font-size: 14px; color: #555; }
.cifra.neutra strong { color: #555; }
.cifra.falta strong { color: var(--naranja); }
details.dia { border: 1px solid var(--borde); border-radius: 8px; margin-bottom: 8px; background: white; }
details.dia > summary { padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; list-style: none; }
details.dia > summary::-webkit-details-marker { display: none; }
details.dia > summary::before { content: "▸"; color: var(--azul); }
details.dia[open] > summary::before { content: "▾"; }
details.dia[open] > summary { border-bottom: 1px solid var(--borde); }
details.dia table th { background: var(--gris); }
.dia-fecha { font-weight: 600; color: var(--texto); }
.dia-resumen { color: #555; font-size: 14px; }
/* Avisos de los anuales: intensidad creciente de 120 a 30 días. */
.etiqueta.hoy { background: var(--azul); color: white; }
.etiqueta.aviso-120 { background: #fff8e1; color: #7a5d00; box-shadow: inset 0 0 0 1px #f3dc8f; }
.etiqueta.aviso-90 { background: #ffe9a8; color: #6b4d00; }
.etiqueta.aviso-60 { background: #ffc46b; color: #5a3500; }
.etiqueta.aviso-30 { background: #ef6c00; color: white; }
table.anuales tr.aviso-120 td:first-child { box-shadow: inset 4px 0 #f3dc8f; }
table.anuales tr.aviso-90 td:first-child { box-shadow: inset 4px 0 #ffd54f; }
table.anuales tr.aviso-60 td:first-child { box-shadow: inset 4px 0 #ffa726; }
table.anuales tr.aviso-30 td:first-child { box-shadow: inset 4px 0 #ef6c00; }
table.anuales tr.aviso-30 td { background: #fff3e6; }
.leyenda { margin-top: 12px; line-height: 2; }
/* Ventanas angostas: la fecha del encabezado se oculta y, si no entra, la franja azul pasa a dos líneas
   (quién entró, «Salir» y «Cerrar el panel» quedan a la derecha, siempre a la vista). */
@media (max-width: 1440px) { .hoy { display: none; } }
@media (max-width: 1360px) {
  header { height: auto; flex-wrap: wrap; padding: 8px 16px; gap: 8px 16px; }
  nav { flex-wrap: wrap; }
  .derecha { margin-left: auto; }
}
@media (max-width: 760px) { main { padding: 0 16px; } }
/* Paso 6: estados, atrasados en rojo; botones de la franja azul */
a.quien, span.quien { color: white; text-decoration: none; font-size: 14px; border: 1px solid rgba(255,255,255,.4); padding: 5px 10px; border-radius: 6px; }
a.quien:hover { background: rgba(255,255,255,.12); }
a.quien.falta { background: var(--naranja); border-color: var(--naranja); }
.nombres { display: flex; flex-wrap: wrap; gap: 10px; }
.nombres form { margin: 0; }
.etiqueta.atrasado { background: #fdecea; color: var(--rojo); font-weight: 600; }
.cifra.atrasada { border-color: #f5c2c7; }
.cifra.atrasada strong { color: var(--rojo); }
details.dia.atrasado { border-color: #f5c2c7; }
details.dia.atrasado > summary::before { color: var(--rojo); }
tr.cumplida td { background: #f1f8f2; }
table.anuales tr.atrasado td { background: #fdecea; }
table.anuales tr.atrasado td:first-child { box-shadow: inset 4px 0 var(--rojo); }
table.anuales tr.cumplida td:first-child { box-shadow: inset 4px 0 var(--verde); }
.form-estado { margin: 0; }
.form-estado select { font-size: 13px; padding: 4px 6px; max-width: 190px; }
.form-estado select.cumplido { border-color: #a5d6a7; background: #e8f5e9; color: var(--verde); }
/* El renglón recién cambiado queda en amarillo clarito: la página vuelve a él (#ancla) y el aviso verde queda arriba. */
table.compacta tr:target td, table.compacta tr:has(span:target) td { background: #fff6c2; }
table.compacta tr[id], table.compacta span[id] { scroll-margin-top: 160px; }   /* que se vea también el título de arriba */
/* Paso 7: formularios del padrón (alta, modificación, baja), colaboradores y altas desde Excel */
h3 { font-size: 15px; margin: 14px 0 8px; color: #444; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.acciones form { margin: 0; }
form.formulario .campos, .campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 18px; margin-bottom: 10px; }
.campos label, form.formulario label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #444; }
.campos label.ancho { grid-column: 1 / -1; }
.campos input[type=text], .campos select, .campos textarea { width: 100%; }
textarea { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; background: white; color: var(--texto); resize: vertical; }
.ayuda { font-size: 12px; color: #777; }
.casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px 18px; }
form.formulario label.casilla, label.casilla { flex-direction: row; align-items: flex-start; gap: 8px; font-size: 15px; color: var(--texto); }
label.casilla input { margin-top: 4px; }
.sindicato-con-boletas { border: 1px solid var(--borde); border-radius: 8px; padding: 10px 14px; margin: 12px 0; }
.sindicato-con-boletas .boletas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px 18px; margin: 8px 0 0 24px; }
.quien-guarda { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; margin: 12px 0 16px; padding: 12px 14px; background: var(--azul-claro); border-radius: 8px; }
.quien-guarda label { font-weight: 600; }
button.peligro, .boton.peligro { background: white; color: var(--rojo); border: 1px solid var(--rojo); }
.etiqueta.baja { background: #eee; color: #555; }
.recuadro-baja { background: #f4f4f4; border: 1px solid #ccc; border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; }
ul.pasos-numerados { margin: 6px 0 0; padding-left: 22px; }
ul.pasos-numerados li { margin-bottom: 4px; }
.campos { align-items: end; }

/* Cartera de clientes (06/10/2026): marca de cada acción sobre un cliente */
.etiqueta.fuera { background: #f3e5f5; color: #6a1b9a; font-weight: 600; }
.etiqueta.delegacion { background: #e0f2f1; color: #00695c; }
.etiqueta.socio { background: #e8eef7; color: #2b4a7a; }

/* «Mis clientes» / «Todos los clientes» en la lista del padrón (06/10/2026) */
.tarjeta.alcance { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px; }

/* Login (07/10/2026): «Salir» en la franja azul */
form.salir { margin: 0; }
button.salir { background: white; color: var(--azul); padding: 5px 12px; font-size: 14px; border-radius: 6px; }

/* Ayuda (10/10/2026): las recetas como páginas, la búsqueda y la hoja para imprimir */
.primera-vez-inicio { background: white; border: 1px solid var(--borde); border-left: 5px solid var(--azul); border-radius: 8px; padding: 10px 16px; margin-bottom: 18px; }
.buscar-ayuda label { display: block; font-weight: 600; margin-bottom: 6px; }
.buscar-ayuda .ayuda { display: block; font-weight: 400; }
.fila-buscar { display: flex; gap: 10px; flex-wrap: wrap; }
.fila-buscar input[type=text] { flex: 1; min-width: 220px; font-size: 16px; padding: 9px 10px; border: 1px solid var(--borde); border-radius: 8px; }
ul.resultados { list-style: none; padding: 0; margin: 0; }
ul.resultados li { padding: 10px 0; border-bottom: 1px solid var(--borde); }
ul.resultados li:last-child { border-bottom: 0; }
.pedacito { color: #444; font-size: 15px; margin-top: 4px; }
mark { background: #fff3b0; padding: 0 1px; }
.tarjeta.primera-vez { border-left: 5px solid var(--azul); }
.volver-ayuda { margin-bottom: 12px; }
details.indice-receta { background: white; border: 1px solid var(--borde); border-radius: 10px; padding: 12px 18px; margin-bottom: 16px; }
details.indice-receta li.nivel-3 { margin-left: 18px; }
article.receta { background: white; border: 1px solid var(--borde); border-radius: 10px; padding: 24px 32px; line-height: 1.55; }
article.receta h1.receta-titulo { font-size: 26px; margin-bottom: 14px; }
article.receta h2 { font-size: 21px; margin: 28px 0 10px; padding-top: 10px; border-top: 1px solid var(--borde); }
article.receta h3 { font-size: 18px; margin: 24px 0 8px; color: var(--azul); }
article.receta section { scroll-margin-top: 12px; }
article.receta section:target > h3, article.receta section:target > h2 { background: #fff8e1; }
article.receta section.parte-socios > h2::after, article.receta section.parte-socios > h3::after { content: "socios"; font-size: 12px; font-weight: 600; background: #e8eef7; color: #2b4a7a; border-radius: 10px; padding: 2px 8px; margin-left: 10px; vertical-align: middle; }
article.receta p { margin: 0 0 12px; }
article.receta blockquote { margin: 0 0 14px; padding: 8px 16px; border-left: 4px solid #b6c7e0; background: var(--azul-claro); border-radius: 0 8px 8px 0; }
article.receta ol.pasos-receta { list-style: none; padding-left: 0; margin: 0 0 14px; }
article.receta ol.pasos-receta > li { display: flex; gap: 10px; margin-bottom: 10px; scroll-margin-top: 12px; }
article.receta ol.pasos-receta > li > .num { flex: 0 0 auto; min-width: 2.2em; font-weight: 700; color: var(--azul); text-align: right; }
article.receta ol.pasos-receta > li > .texto { flex: 1; min-width: 0; }
article.receta ol.pasos-receta > li:target { background: #fff8e1; border-radius: 6px; }
article.receta ul { padding-left: 22px; margin: 4px 0 12px; }
article.receta ul li { margin-bottom: 4px; }
article.receta .tabla-receta { overflow-x: auto; margin: 0 0 14px; }
article.receta .tabla-receta table { min-width: 520px; }
article.receta pre.receta-codigo { background: var(--gris); border: 1px solid var(--borde); border-radius: 8px; padding: 12px 14px; white-space: pre-wrap; font-size: 14px; }
article.receta a.receta { font-weight: 600; }
.agregado { color: #666; font-size: 14px; }
.lo-hace-un-socio { font-style: italic; }
@media (max-width: 760px) { article.receta { padding: 16px; } }
@media print {
  header, footer, .no-imprimir, .volver-ayuda, .aviso { display: none !important; }
  body { background: white; font-size: 12pt; }
  main { margin: 0; max-width: none; padding: 0; }
  article.receta { border: 0; padding: 0; }
  article.receta h2 { break-after: avoid; }
  article.receta h3 { break-after: avoid; }
  article.receta ol.pasos-receta > li { break-inside: avoid; }
}

/* Ayuda, parte 2 (10/10/2026): «Ayuda de esta pantalla», arriba a la derecha de cada pantalla */
p.ayuda-pantalla { float: right; margin: 0 0 8px 16px; font-size: 14px; }
p.ayuda-pantalla a { background: white; border: 1px solid var(--borde); border-radius: 14px; padding: 4px 12px; text-decoration: none; color: var(--azul); font-weight: 600; }
p.ayuda-pantalla a:hover { background: var(--azul-claro); }
p.ayuda-pantalla span { color: #666; }
@media (max-width: 760px) { p.ayuda-pantalla { float: none; } }

/* 10/10/2026: con «Ayuda» la franja azul ya no entraba en una línea en ventanas de unos 1360 a 1500 puntos de ancho, y
   la página quedaba más ancha que la ventana (Diego lo vio al comprobar la Ayuda). Ahora la franja pasa a dos líneas
   cuando no entra, en cualquier ancho: si entra, se ve igual que antes. */
header { flex-wrap: wrap; height: auto; min-height: 58px; row-gap: 8px; padding-top: 8px; padding-bottom: 8px; }
.derecha { margin-left: auto; }

/* Estados versión 2 (10/10/2026): el cierre trabajado al que le falta «Cierre definitivo», en amarillo */
.etiqueta.falta-definitivo { background: #fff3c4; color: #7a5a00; border: 1px solid #f3dc8f; }
table.anuales tr.falta-definitivo td { background: #fffbea; }
table.anuales tr.falta-definitivo td:first-child { box-shadow: inset 4px 0 0 #f9a825; }

/* Rectificativas (pedido de Diego, versión 2, 11/10/2026): una «Cargada por error» queda a la vista, en gris. */
tr.cargada-error td { color: #777; }
tr.cargada-error td strong { color: #777; }

/* Liquidaciones, IVA (sub-etapa 1.1, 13/10/2026) */
table.hoja-iva tr.total td, table.compacta tr.total td { font-weight: 700; border-top: 2px solid var(--borde); }
table.hoja-iva tr.resultado td { font-weight: 600; background: var(--azul-claro); }
table.hoja-iva td.num { width: 180px; }
table.compras-iva form.en-linea { gap: 8px 10px; }
table.compras-iva select { max-width: 220px; }
table.compras-iva > tbody > tr > td:last-child { width: 56%; }

/* Pulido 1 (13/10/2026): «Ordenar por grupo» en Padrón → Clientes: los vinculados, corridos a la derecha. */
td.vinculado { padding-left: 28px; }
.bloque-grupo { border: 1px solid var(--borde); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.bloque-grupo .casillas { margin: 6px 0 0 22px; }

/* ===================================================================================================================
   Modo oscuro (pulido 1, Diego, 13/10/2026: «que el programa completo tenga el aspecto de modo oscuro»). Oscuro para
   todos de entrada; cada persona puede pasar a «Ver en claro» y el panel lo recuerda en esa computadora. La hoja para
   imprimir y todo lo que se imprime salen siempre en claro. Todo va en html[data-tema="oscuro"]: en claro, nada cambia.
   =================================================================================================================== */
html[data-tema="oscuro"] {
  color-scheme: dark;
  --azul: #4a7cc4; --azul-claro: #1c2738; --gris: #0f1318; --texto: #e3e7ec; --borde: #2d3640;
  --verde: #6fcf7b; --rojo: #ff7b72; --naranja: #f0a35a; --amarillo: #e3b341;
}
html[data-tema="oscuro"] header { background: #16243a; }
html[data-tema="oscuro"] a { color: #8ab4f8; }
html[data-tema="oscuro"] header a, html[data-tema="oscuro"] nav a, html[data-tema="oscuro"] a.boton,
html[data-tema="oscuro"] .submenu a.activo { color: white; }
html[data-tema="oscuro"] .tarjeta, html[data-tema="oscuro"] .cifra, html[data-tema="oscuro"] details.dia,
html[data-tema="oscuro"] .primera-vez-inicio, html[data-tema="oscuro"] details.indice-receta,
html[data-tema="oscuro"] article.receta, html[data-tema="oscuro"] p.ayuda-pantalla a,
html[data-tema="oscuro"] .submenu a:not(.activo), html[data-tema="oscuro"] select, html[data-tema="oscuro"] input,
html[data-tema="oscuro"] textarea { background: #1a2029; color: var(--texto); }
html[data-tema="oscuro"] button.secundario, html[data-tema="oscuro"] .boton.secundario { background: #1a2029; color: #8ab4f8; border: 1px solid #4a7cc4; }
html[data-tema="oscuro"] button.peligro, html[data-tema="oscuro"] .boton.peligro { background: #1a2029; color: var(--rojo); }
html[data-tema="oscuro"] .submenu a:not(.activo), html[data-tema="oscuro"] p.ayuda-pantalla a { color: #8ab4f8; }
html[data-tema="oscuro"] .subtitulo, html[data-tema="oscuro"] .silencio, html[data-tema="oscuro"] footer,
html[data-tema="oscuro"] .ayuda, html[data-tema="oscuro"] .cifra span, html[data-tema="oscuro"] .cifra.neutra strong,
html[data-tema="oscuro"] .dia-resumen, html[data-tema="oscuro"] .agregado, html[data-tema="oscuro"] p.ayuda-pantalla span,
html[data-tema="oscuro"] tr.apagada td, html[data-tema="oscuro"] tr.cargada-error td,
html[data-tema="oscuro"] tr.cargada-error td strong { color: #9aa5b1; }
html[data-tema="oscuro"] form.en-linea label, html[data-tema="oscuro"] .campos label,
html[data-tema="oscuro"] form.formulario label, html[data-tema="oscuro"] h3, html[data-tema="oscuro"] .pedacito { color: #c3cad3; }
html[data-tema="oscuro"] article.receta h3, html[data-tema="oscuro"] article.receta ol.pasos-receta > li > .num { color: #8ab4f8; }
html[data-tema="oscuro"] .aviso.ok { background: #11281a; border-color: #2f6b3d; }
html[data-tema="oscuro"] .aviso.error { background: #331616; border-color: #7a2c2c; }
html[data-tema="oscuro"] .aviso.info { background: var(--azul-claro); border-color: #2c4a73; }
html[data-tema="oscuro"] .aviso.alerta { background: #2f2810; border-color: #6b5a1e; }
html[data-tema="oscuro"] .etiqueta.ok, html[data-tema="oscuro"] .estado.hecho { background: #173622; }
html[data-tema="oscuro"] .etiqueta.error, html[data-tema="oscuro"] .etiqueta.atrasado { background: #3a1919; color: #ff8a80; }
html[data-tema="oscuro"] .etiqueta.pendiente, html[data-tema="oscuro"] .estado.proximo { background: #3a2a12; }
html[data-tema="oscuro"] .etiqueta.gris, html[data-tema="oscuro"] .etiqueta.baja,
html[data-tema="oscuro"] .estado.pendiente { background: #2a3038; color: #b9c1ca; }
html[data-tema="oscuro"] .estado.en-prueba { color: #9ec1ff; }
html[data-tema="oscuro"] .etiqueta.fuera { background: #2e1d3a; color: #d7a6f0; }
html[data-tema="oscuro"] .etiqueta.delegacion { background: #11302d; color: #6fd3c4; }
html[data-tema="oscuro"] .etiqueta.socio { background: #1e2c44; color: #9ec1ff; }
html[data-tema="oscuro"] .etiqueta.aviso-120 { background: #2f2810; color: #e3c773; box-shadow: inset 0 0 0 1px #6b5a1e; }
html[data-tema="oscuro"] .etiqueta.aviso-90 { background: #4a3a10; color: #f5d67a; }
html[data-tema="oscuro"] .etiqueta.aviso-60 { background: #5c3d10; color: #ffcf8a; }
html[data-tema="oscuro"] .etiqueta.falta-definitivo { background: #3a3210; color: #f0d070; border-color: #6b5a1e; }
html[data-tema="oscuro"] tr.cumplida td { background: #13261a; }
html[data-tema="oscuro"] table.anuales tr.atrasado td { background: #331616; }
html[data-tema="oscuro"] table.anuales tr.aviso-30 td { background: #33240f; }
html[data-tema="oscuro"] table.anuales tr.falta-definitivo td { background: #2b2610; }
html[data-tema="oscuro"] table.compacta tr:target td, html[data-tema="oscuro"] table.compacta tr:has(span:target) td,
html[data-tema="oscuro"] article.receta section:target > h3, html[data-tema="oscuro"] article.receta section:target > h2,
html[data-tema="oscuro"] article.receta ol.pasos-receta > li:target { background: #3a3416; }
html[data-tema="oscuro"] .form-estado select.cumplido { background: #13261a; border-color: #2f6b3d; color: var(--verde); }
html[data-tema="oscuro"] .cifra.atrasada, html[data-tema="oscuro"] details.dia.atrasado { border-color: #7a2c2c; }
html[data-tema="oscuro"] .barra { background: #2a3038; }
html[data-tema="oscuro"] mark { background: #5c4d10; color: white; }
html[data-tema="oscuro"] article.receta section.parte-socios > h2::after,
html[data-tema="oscuro"] article.receta section.parte-socios > h3::after { background: #1e2c44; color: #9ec1ff; }
html[data-tema="oscuro"] article.receta blockquote { border-left-color: #2c4a73; }
html[data-tema="oscuro"] .recuadro-baja { background: #1d2228; border-color: #3a424c; }
html[data-tema="oscuro"] code { background: var(--azul-claro); }
html[data-tema="oscuro"] th { color: var(--texto); }
@media print {
  html[data-tema="oscuro"] { color-scheme: light; --azul: #1f3a5f; --azul-claro: #e8eef7; --gris: white; --texto: #1c1c1c;
                             --borde: #d9dde3; --verde: #2e7d32; --rojo: #b3261e; --naranja: #e65100; }
  html[data-tema="oscuro"] .tarjeta, html[data-tema="oscuro"] article.receta, html[data-tema="oscuro"] .cifra,
  html[data-tema="oscuro"] details.dia { background: white; color: #1c1c1c; }
  html[data-tema="oscuro"] a { color: #1f3a5f; }
  html[data-tema="oscuro"] .silencio, html[data-tema="oscuro"] h3 { color: #444; }
}

/* ===================================================================================================================
   La franja azul en orden (pulido 1, pedido 9 de Diego, 13/10/2026: «orden, coherencia, amigabilidad, estética y
   simetría»). Un solo renglón: el nombre del estudio a la izquierda, las siete palabras en el medio y, a la derecha,
   quien entró (con su menú), «Salir» y «Cerrar el panel». En ventanas más angostas, dos renglones: arriba el nombre y
   los botones; abajo, las siete palabras. Reemplaza las reglas de antes (alto fijo, renglones que se cortaban solos).
   =================================================================================================================== */
header { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "marca nav derecha";
         align-items: center; column-gap: 24px; row-gap: 6px; height: auto; min-height: 58px; padding: 8px 24px; }
header .marca { grid-area: marca; display: flex; flex-direction: column; line-height: 1.15; font-size: 16px; }
header .marca span { font-size: 14px; }
header nav { grid-area: nav; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
header nav a { padding: 8px 11px; }
header .derecha { grid-area: derecha; margin-left: 0; display: flex; align-items: center; gap: 10px; }
header .hoy { display: none; }
@media (max-width: 1180px) {
  header { grid-template-columns: 1fr auto; grid-template-areas: "marca derecha" "nav nav"; padding: 8px 16px; }
  header nav { justify-content: flex-start; border-top: 1px solid rgba(255,255,255,.15); padding-top: 4px; }
}
@media (max-width: 640px) {
  header { grid-template-columns: 1fr; grid-template-areas: "marca" "derecha" "nav"; }
}
.menu-persona { position: relative; }
.menu-persona > summary { list-style: none; cursor: pointer; display: inline-block; }
.menu-persona > summary::-webkit-details-marker { display: none; }
.menu-persona[open] > summary { background: rgba(255,255,255,.15); }
.menu-persona .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 230px; padding: 6px;
                      display: flex; flex-direction: column; background: white; border: 1px solid var(--borde);
                      border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.menu-persona .menu a { color: var(--texto); text-decoration: none; padding: 9px 12px; border-radius: 6px; font-size: 15px; }
.menu-persona .menu a:hover { background: var(--azul-claro); }
html[data-tema="oscuro"] .menu-persona .menu { background: #1a2029; }
html[data-tema="oscuro"] header .menu-persona .menu a { color: var(--texto); }
.menu-persona > summary.quien { color: white; border: 1px solid rgba(255,255,255,.4); padding: 5px 10px; border-radius: 6px;
                                font-size: 14px; }
.menu-persona > summary.quien:hover { background: rgba(255,255,255,.12); }
input[type=password] { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px;
                       background: white; color: var(--texto); }
html[data-tema="oscuro"] input[type=password] { background: #1a2029; }