/* Citrus Gestión · estilos. La misma marca que la app del móvil: los mismos colores, radios y
   tipografías (Lilita One para títulos, DM Sans para el texto), tema oscuro por defecto y claro
   como alternativa, pensado para pantalla grande. Sin estilos en línea (la CSP los prohíbe). */

:root, [data-theme="dark"] {
  --bg: #0e0d0b; --bg2: #161410; --bg3: #1c1a16; --bg4: #2a2720;
  --text: #f0ebe2; --text2: #c2bcb2; --text3: #9d968b;
  --border: rgba(255, 255, 255, .13); --border-strong: rgba(255, 255, 255, .22);
  --card: rgba(255, 255, 255, .04); --card-solida: #171512; --hover: rgba(255, 255, 255, .05);
  --gold: #c8a96e; --gold2: #dfc28e; --coral: #c96b54; --sage: #7a9180; --azul: #7f9bb8; --sage-texto: #97ae9c; --coral-texto: #de8b76;
  --gold-suave: rgba(200, 169, 110, .16); --coral-suave: rgba(201, 107, 84, .16); --sage-suave: rgba(122, 145, 128, .18); --azul-suave: rgba(127, 155, 184, .16);
  --sobre-gold: #14120f;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .25);
}
[data-theme="light"] {
  --bg: #f2ede4; --bg2: #eae4d9; --bg3: #e0d9cc; --bg4: #d3cabb;
  --text: #26221c; --text2: #544e45; --text3: #665e52;
  --border: rgba(60, 50, 35, .12); --border-strong: rgba(60, 50, 35, .24);
  --card: #fbf8f2; --card-solida: #fbf8f2; --hover: rgba(60, 50, 35, .06);
  --gold: #7a5c22; --gold2: #5c4418; --coral: #9a4530; --sage: #4c6653; --azul: #3f5d7b; --sage-texto: #4c6653; --coral-texto: #9a4530;
  --gold-suave: rgba(168, 132, 62, .16); --coral-suave: rgba(176, 86, 63, .14); --sage-suave: rgba(95, 122, 102, .16); --azul-suave: rgba(79, 111, 143, .14);
  --sobre-gold: #fffaf0;
  --sombra: 0 1px 2px rgba(60, 50, 35, .08), 0 8px 24px rgba(60, 50, 35, .08);
}
:root {
  --r: 18px; --r-sm: 10px; --r-pill: 999px;
  --h: 'Lilita One', 'Arial Black', Impact, system-ui, sans-serif;
  --b: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--b); font-size: 15px; line-height: 1.5; }
a { color: var(--gold); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2 { margin: 0; font-family: var(--h); font-weight: 400; line-height: 1.15; letter-spacing: .01em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
h3 { margin: 0; font-size: .78rem; color: var(--text3); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
p { margin: 0 0 .75rem; }
.oculto { display: none !important; }
::selection { background: var(--gold-suave); }

/* ── Marco ─────────────────────────────────────────────────────────────────── */
.app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.cabecera { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; padding: 10px 28px; background: var(--bg2); border-bottom: 1px solid var(--border); }
.cabecera-marca { display: flex; align-items: center; gap: 12px; font-family: var(--h); font-size: 1.25rem; letter-spacing: .02em; color: var(--text); }
.cabecera-marca img { width: 32px; height: 32px; border-radius: 9px; }
.cabecera-marca span { color: var(--gold); }
.cabecera-espacio { flex: 1; }
.cabecera-usuario { display: flex; align-items: center; gap: 12px; font-size: .88rem; color: var(--text3); }
.cabecera-usuario strong { color: var(--text); font-weight: 500; }
.cabecera .boton { padding: 7px 14px; }

.cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr); }
.menu { border-right: 1px solid var(--border); background: var(--bg2); padding: 18px 14px; display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow: auto; }
.menu a { display: block; padding: 10px 14px; border-radius: var(--r-sm); color: var(--text2); text-decoration: none; font-weight: 500; }
.menu a:hover { background: var(--hover); color: var(--text); }
.menu a.activo { background: var(--bg4); color: var(--gold2); }
.menu-pie { margin-top: auto; font-size: .8rem; color: var(--text3); padding: 14px; line-height: 1.6; }
.menu-pie a { color: var(--text2); }
.contenido { padding: 20px 28px 18px; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

@media (max-width: 900px) {
  .cuerpo { grid-template-columns: 1fr; }
  .menu { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); padding: 8px 12px; }
  .menu-pie { display: none; }
  .contenido { padding: 16px; }
}

/* ── Pantallas completas (login, sin permiso, error) ───────────────────────── */
.pantalla { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at top, var(--bg3), var(--bg) 60%); }
.pantalla-caja { width: 100%; max-width: 460px; background: var(--card-solida); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sombra); padding: 34px 34px 28px; }
.pantalla-caja img { width: 60px; height: 60px; border-radius: 14px; margin-bottom: 16px; }
.pantalla-caja h1 { margin-bottom: 6px; }
.pantalla-caja .sub { color: var(--text2); margin-bottom: 24px; }
.pantalla-caja .acciones { display: flex; flex-direction: column; gap: 10px; }
.pantalla-caja .pie { margin-top: 22px; font-size: .78rem; color: var(--text3); }
.pantalla-caja .pie a { color: var(--text2); }

/* ── Piezas ────────────────────────────────────────────────────────────────── */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: transparent; color: var(--text); cursor: pointer; font-weight: 500; font-size: .95rem; line-height: 1.2; transition: background .15s, border-color .15s; }
.boton:hover { background: var(--hover); border-color: var(--gold); }
.boton:disabled { opacity: .45; cursor: default; }
.boton-principal { background: var(--gold); color: var(--sobre-gold); border-color: var(--gold); font-weight: 600; }
.boton-principal:hover { background: var(--gold2); border-color: var(--gold2); }
.boton-ok { background: var(--sage); color: var(--sobre-gold); border-color: var(--sage); font-weight: 600; }
.boton-ok:hover { filter: brightness(1.08); }
.boton-mal { color: var(--coral); border-color: var(--coral); }
.boton-mal:hover { background: var(--coral-suave); }
.boton-pequeno { padding: 6px 12px; font-size: .87rem; }
.boton-enlace { border: 0; background: transparent; color: var(--gold); padding: 4px 6px; text-decoration: underline; font-weight: 500; cursor: pointer; }

.chip { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: .8rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.chip-ok { background: var(--sage-suave); color: var(--sage-texto); }
.chip-aviso { background: var(--gold-suave); color: var(--gold2); }
.chip-mal { background: var(--coral-suave); color: var(--coral-texto); }
.chip-info { background: var(--azul-suave); color: var(--azul); }
.chip-neutro { background: var(--bg4); color: var(--text2); }
[data-theme="light"] .chip-aviso { color: var(--gold); }

.encabezado { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.encabezado .sub { color: var(--text2); margin: 6px 0 0; max-width: 70ch; }
.kicker { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text3); margin-bottom: 6px; }
.barra { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.barra .entrada { max-width: 320px; }
.barra select.entrada { width: auto; }
.barra .campo { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 0; }
.barra .campo .campo-etiqueta { margin: 0; white-space: nowrap; }
.filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.filtro { padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: transparent; color: var(--text2); cursor: pointer; font-size: .92rem; font-weight: 500; }
.filtro:hover { color: var(--text); border-color: var(--gold); }
.filtro.activo { background: var(--gold); color: var(--sobre-gold); border-color: var(--gold); font-weight: 600; }
.filtro .n { opacity: .75; margin-left: 5px; font-variant-numeric: tabular-nums; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tarjeta { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 18px; }
.tarjeta-boton { cursor: pointer; text-align: left; color: inherit; font: inherit; transition: border-color .15s, background .15s; }
.tarjeta-boton:hover { border-color: var(--gold); background: var(--hover); }
.tarjeta .cifra { font-family: var(--h); font-size: 2.1rem; line-height: 1; color: var(--text); }
.tarjeta .cifra.aviso { color: var(--gold2); }
.tarjeta .cifra.mal { color: var(--coral); }
.tarjeta .cifra.pequena { font-size: 1.45rem; padding-top: 8px; word-break: break-word; }
.tarjeta .texto { color: var(--text2); font-size: .92rem; margin-top: 8px; }
.tarjeta h3 { margin-bottom: 12px; }

.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.columna { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1150px) { .dos-columnas { grid-template-columns: 1fr; } }

.tabla-marco { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); overflow: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .97rem; }
.tabla th { position: sticky; top: 0; z-index: 1; background: var(--card-solida); text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text3); padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; font-weight: 600; }
.tabla td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .fila-activa { cursor: pointer; }
.tabla .fila-activa:hover td { background: var(--hover); }
.tabla .fila-seleccionada td, .tabla .fila-seleccionada:hover td { background: var(--gold-suave); }
.tabla .vacio { text-align: center; color: var(--text3); padding: 30px; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla .peso { font-weight: 600; }
.tabla .suave { color: var(--text3); }

.ficha { background: var(--card-solida); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sombra); padding: 22px 24px 24px; }
.ficha-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ficha-cabecera h2 { margin-bottom: 8px; }
.ficha-cerrar { border: 0; background: transparent; color: var(--text3); font-size: 1.5rem; line-height: 1; cursor: pointer; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; flex: 0 0 auto; }
.ficha-cerrar:hover { background: var(--hover); }
.ficha-cerrar:hover { color: var(--text); }
.datos { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 7px 16px; font-size: .97rem; margin: 12px 0 14px; }
.datos dt { color: var(--text3); }
.datos dd { margin: 0; word-break: break-word; }
.seccion { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }
.seccion h3 { margin-bottom: 12px; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.pre { white-space: pre-wrap; font-size: .92rem; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; max-height: 280px; overflow: auto; line-height: 1.55; }

.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.campo-etiqueta { font-size: .78rem; color: var(--text3); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.campo-ayuda { font-size: .85rem; color: var(--text3); }
.entrada { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg3); color: var(--text); }
.entrada::placeholder { color: var(--text3); }
.entrada:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.entrada:disabled { opacity: .6; }
select.entrada { appearance: auto; }
.area { resize: vertical; min-height: 74px; }
.campo-fila { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.campo-fila .campo { margin-bottom: 0; }
.campo-check { display: flex; align-items: center; gap: 9px; font-size: .95rem; margin-bottom: 12px; color: var(--text2); }
.campo-check input { width: 16px; height: 16px; accent-color: var(--gold); }
.formulario { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 20px; margin-bottom: 16px; }

.estado-cargando, .estado-vacio, .estado-error { padding: 34px 20px; text-align: center; color: var(--text2); background: var(--card); border: 1px dashed var(--border-strong); border-radius: var(--r); }
.estado-error { color: var(--coral); border-color: var(--coral); }
.estado-error .boton { margin-top: 10px; }
.aviso-banda { background: var(--coral); color: var(--sobre-gold); padding: 10px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aviso-banda .boton { background: var(--sobre-gold); color: var(--coral); border-color: var(--sobre-gold); }

.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 50; max-width: 380px; }
.toast { padding: 12px 15px; border-radius: var(--r-sm); background: var(--card-solida); color: var(--text); border: 1px solid var(--border-strong); font-size: .95rem; box-shadow: var(--sombra); transition: opacity .4s, transform .4s; }
.toast-ok { border-left: 4px solid var(--sage); }
.toast-mal { border-left: 4px solid var(--coral); }
.toast-info { border-left: 4px solid var(--gold); }
.toast-fuera { opacity: 0; transform: translateY(8px); }

.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .95rem; }
.lista-simple li:last-child { border-bottom: 0; }
.lista-simple .suave { color: var(--text3); white-space: nowrap; }
.enlace-fila { color: inherit; text-decoration: none; }
.enlace-fila:hover { color: var(--gold2); }
.nota { font-size: .87rem; color: var(--text3); }

/* ── Calendario ────────────────────────────────────────────────────────────── */
.cal { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px 14px; }
.cal-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cal-mes { font-family: var(--h); font-size: 1.15rem; color: var(--gold2); text-transform: capitalize; }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent; color: var(--text2); cursor: pointer; font-size: 1rem; line-height: 1; }
.cal-nav button:hover { border-color: var(--gold); color: var(--text); }
.cal-leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--text3); margin-bottom: 10px; }
.cal-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.cal-dow, .cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow span { text-align: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text3); padding-bottom: 4px; }
.cal-celda { min-height: 58px; padding: 7px 8px; border-radius: var(--r-sm); border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 4px; text-align: left; font: inherit; }
.cal-celda:hover { border-color: var(--gold); background: var(--hover); }
.cal-celda .n { font-size: .88rem; font-variant-numeric: tabular-nums; }
.cal-celda .t { font-size: .74rem; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cal-celda.otro-mes { opacity: .3; }
.cal-celda.pasado .n { color: var(--text3); }
.cal-celda.hoy { border-color: var(--gold2); }
.cal-celda.hoy .n { color: var(--gold2); font-weight: 600; }
.cal-celda.sel { background: var(--gold-suave); border-color: var(--gold); }
.cal-celda.ocupado-vecino { background: rgba(200, 169, 110, .1); }
.cal-celda.ocupado-comunidad { background: var(--coral-suave); }
.cal-celda.pendiente { border-style: dashed; }
.punto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
.punto-coral { background: var(--coral); }
.punto-sage { background: var(--sage); }
.punto-hueco { background: transparent; border: 1.5px solid var(--gold); }

/* ── Fotos y documentos de una incidencia ──────────────────────────────────── */
.galeria { display: flex; flex-wrap: wrap; gap: 10px; }
.foto-mini { display: flex; flex-direction: column; gap: 4px; width: 112px; text-decoration: none; color: var(--text2); }
.foto-mini img, .foto-doc { width: 112px; height: 84px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--bg3); display: grid; place-items: center; }
.foto-doc { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--gold2); }
.foto-mini:hover img, .foto-mini:hover .foto-doc { border-color: var(--gold); }
.foto-etiqueta { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campo-fila-igual { grid-template-columns: 1fr 1fr; }

/* ── Contratos de un proveedor ─────────────────────────────────────────────── */
.contrato { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 10px; background: var(--card); }
.contrato-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.contrato .datos { margin: 8px 0 10px; font-size: .86rem; }
.contrato .formulario { margin: 10px 0 0; }
.soltar-compacta { padding: 14px 16px; margin-bottom: 12px; }

/* ── Documentación y actas ─────────────────────────────────────────────────── */
.migas { font-size: .95rem; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.migas a { text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.icono-doc { display: inline-block; min-width: 34px; padding: 2px 6px; border-radius: 5px; background: var(--bg4); color: var(--gold2); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-align: center; }
.lista-subidas { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.subida { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: .86rem; padding: 6px 0; border-bottom: 1px solid var(--border); }
.acuerdo { padding: 8px 0 4px; border-top: 1px dashed var(--border); }
.acuerdo:first-of-type { border-top: 0; }
.texto-acuerdo { font-size: .88rem; line-height: 1.55; margin: 6px 0 0; color: var(--text2); }

/* ── Cuentas: cifras de una liquidación leída ──────────────────────────────── */
.cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 12px; margin: 8px 0; }
.cifras .campo { margin-bottom: 8px; }
.cifras .entrada { padding: 6px 8px; font-variant-numeric: tabular-nums; }

/* ── Aviso tal y como lo ve el vecino ──────────────────────────────────────── */
.aviso-previa { background: var(--bg3); border: 1px solid var(--border); border-left: 4px solid var(--text3); border-radius: var(--r); padding: 14px 16px; margin: 10px 0 14px; max-width: 420px; }
.aviso-previa.aviso-mal { border-left-color: var(--coral); }
.aviso-previa.aviso-aviso { border-left-color: var(--gold); }
.aviso-previa.aviso-info { border-left-color: var(--azul); }
.aviso-previa-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.aviso-previa-titulo { font-family: var(--h); font-size: 1.15rem; margin-bottom: 6px; color: var(--text); }
.aviso-previa-texto { font-size: .9rem; line-height: 1.55; color: var(--text2); white-space: pre-wrap; margin-bottom: 8px; }
.aviso-previa-img { display: block; max-width: 100%; border-radius: var(--r-sm); margin: 6px 0 8px; }

/* ── Zona de soltar archivos ───────────────────────────────────────────────── */
.soltar { border: 2px dashed var(--border-strong); border-radius: var(--r); padding: 26px 20px; text-align: center; color: var(--text2); background: var(--card); cursor: pointer; transition: border-color .15s, background .15s; }
.soltar:hover, .soltar.encima { border-color: var(--gold); background: var(--gold-suave); color: var(--text); }
.soltar strong { color: var(--text); }
.soltar input { display: none; }

/* ── Maqueta a pantalla completa (28/09/2026) ──────────────────────────────────
   La página no hace scroll: la cabecera y el menú quedan fijos, cada vista reparte su altura entre
   el encabezado, la barra de filtros y lo principal, y es la tabla (o la lista) la que hace scroll
   por dentro con la fila de títulos pegada arriba. */
.zona { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.principal { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.principal > .tabla-marco, .principal > .columna, .principal > .reservas-dos { flex: 1; min-height: 0; }
.columna > .tabla-marco { flex: 1 1 auto; min-height: 160px; }
.columna > .barra { margin-bottom: 0; }
.columna > .ficha { padding: 16px 20px; box-shadow: none; background: var(--card); }
.columna > .ficha h2 { font-size: 1.05rem; margin-bottom: 6px; }

/* Reservas: calendario a la izquierda, a toda la altura; lista con scroll a la derecha. */
.reservas-dos { display: grid; grid-template-columns: minmax(440px, 38%) minmax(0, 1fr); gap: 20px; }
.reservas-dos > .columna { min-height: 0; }
.reservas-dos .cal { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.reservas-dos .cal-dias { flex: 1; grid-auto-rows: minmax(60px, 1fr); }
.reservas-dos .cal-celda { min-height: 0; }
.reservas-dos .cal-celda .t { white-space: normal; font-size: .8rem; line-height: 1.25; max-height: 2.5em; }
.aviso-pendientes { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px dashed var(--gold); background: var(--gold-suave); color: var(--text); cursor: pointer; font: inherit; font-size: .88rem; text-align: left; }
.aviso-pendientes:hover { border-style: solid; }

/* ── Panel encima: la ficha o el formulario de lo elegido, sin tapar toda la pantalla ── */
.panel-fondo { position: fixed; inset: 0; z-index: 40; background: rgba(8, 7, 5, .6); display: grid; place-items: center; padding: 26px; animation: aparecer .12s ease-out; }
[data-theme="light"] .panel-fondo { background: rgba(60, 50, 35, .42); }
.panel { width: min(900px, 100%); max-height: 100%; overflow: auto; outline: none; background: var(--card-solida); border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: 0 24px 70px rgba(0, 0, 0, .45); animation: subir .14s ease-out; }
.panel-grande { width: min(1380px, 100%); }
.panel-dos { width: min(1320px, 100%); }
.panel-dos > .ficha { column-count: 2; column-gap: 40px; }
.panel-tres { width: min(1760px, 100%); }
.panel-tres > .ficha { column-count: 3; column-gap: 36px; }
.panel-dos .ficha-cabecera { column-span: all; }
.panel-dos .datos, .panel-dos .seccion, .panel-dos .formulario, .panel-dos .campo, .panel-dos .campo-check, .panel-dos .campo-fila, .panel-dos .acciones, .panel-dos .galeria, .panel-dos .contrato, .panel-dos .tarjeta, .panel-dos .pre, .panel-dos .soltar, .panel-dos .lista-simple, .panel-dos p { break-inside: avoid; }
.panel > .ficha { border: 0; box-shadow: none; background: transparent; padding: 24px 28px 26px; }
body.con-panel { overflow: hidden; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { transform: translateY(12px); opacity: .5; } to { transform: none; opacity: 1; } }

/* ── Accesibilidad (28/09/2026) ─────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tabla .fila-activa:focus-visible { outline-offset: -2px; }
.tabla .fila-activa:focus-visible td { background: var(--hover); }
.reservas-dos .barra .entrada { max-width: 240px; }
div.aviso-pendientes { cursor: default; margin-bottom: 16px; }
@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation: none !important; transition: none !important; } }