/*
 * Tema «Carnet con timbres» sobre Filament 5 (DESIGN.md). Sin compilar: Filament trae su CSS y aquí van los tokens,
 * la tipografía (Atkinson Hyperlegible, servida desde public/fonts/atkinson), la tinta de la persona (--p-*, la pone
 * el servidor con App\Support\ColorDePersona) y los componentes propios: barra inferior, hojas, timbre, segmentos.
 * Prototipo de referencia: docs/propuesta/hoy.html.
 */

/* ===== Tokens ===== */
:root {
  --p-relleno: #3B3A9C; --p-sobre: #FFFFFF; --p-tinta: #3B3A9C; --p-clara: #A9A8FF; --p-noche: #26255F;
  --tinta: var(--p-tinta); --tinta-fondo: var(--p-relleno); --sobre-tinta: var(--p-sobre);
  --suelo: #F3F4F9; --carta: #FFFFFF; --texto: #16172B; --suave: #55576F; --regla: #DDDFEA; --regla-fuerte: #C5C8D9;
  --atraso: #B3261E; --atraso-fondo: #FBE9E7;
  --sombra: 0 1px 2px rgba(22,23,43,.06), 0 8px 24px rgba(22,23,43,.07);
  --sombra-panel: 0 12px 40px rgba(22,23,43,.18);
  --ease: cubic-bezier(.16,1,.3,1);
  --r-control: 10px; --r-boton: 12px; --r-tarjeta: 14px; --r-hoja: 20px;
  --font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --font-family-mono: 'Atkinson Hyperlegible Mono', ui-monospace, monospace;
}
:root.dark {
  --tinta: var(--p-clara); --tinta-fondo: var(--p-clara); --sobre-tinta: #14152B;
  --suelo: #0E0F1D; --carta: #181930; --texto: #ECECF6; --suave: #A7A9C4; --regla: #2A2C47; --regla-fuerte: #3A3D5E;
  --atraso: #FF8A80; --atraso-fondo: #3A1A1E;
  --sombra: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --sombra-panel: 0 12px 40px rgba(0,0,0,.5);
}
:root[data-letra="grande"] { font-size: 112.5%; }

/* ===== Superficies del navegador (DESIGN.md: lo que no se dibuja también lleva el diseño) ===== */
html { accent-color: var(--tinta); scrollbar-color: var(--regla-fuerte) transparent; -webkit-text-size-adjust: 100%; }
::selection { background: var(--tinta-fondo); color: var(--sobre-tinta); }
input, textarea { caret-color: var(--tinta); }
body, .fi-body { font-family: var(--font-family); font-variant-numeric: tabular-nums; color: var(--texto); background: var(--suelo); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
a { text-underline-offset: 3px; }
.panel-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.panel-i { width: 1.5rem; height: 1.5rem; flex: none; }

/* ===== Filament: base ===== */
.fi-body, .fi-layout, .fi-main-ctn { background: var(--suelo); }
.fi-header-heading { font-weight: 800; letter-spacing: -.01em; line-height: 1.15; font-size: 1.75rem; color: var(--texto); }
.fi-header-subheading { color: var(--suave); font-size: 1rem; }
@media (min-width: 1024px) { .fi-header-heading { font-size: 2.25rem; } }
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-modal-window, .fi-dropdown-panel {
  background: var(--carta); border-radius: var(--r-tarjeta); box-shadow: none; --tw-ring-color: var(--regla); }
.fi-section, .fi-ta-ctn { border: 1px solid var(--regla); --tw-ring-shadow: 0 0 #0000; }
.fi-section-header-heading, .fi-modal-heading { font-weight: 800; }
.fi-modal-window { box-shadow: var(--sombra-panel); border-radius: var(--r-hoja); }
.fi-fo-field-label-content, .fi-fo-field-wrp-label span { font-weight: 800; color: var(--texto); }
.fi-fo-field-wrp-helper-text, .fi-sc-text { color: var(--suave); }

/* Campos: borde de 2 px en regla fuerte, 10 px de radio, 44 px de alto; foco de tinta. */
.fi-input-wrp { border-radius: var(--r-control); background: var(--carta); --tw-ring-color: var(--regla-fuerte); box-shadow: 0 0 0 2px var(--regla-fuerte); min-height: 2.75rem; }
.fi-input-wrp:focus-within { box-shadow: 0 0 0 3px var(--tinta); }
.fi-input { min-height: 2.75rem; font-size: 1rem; }
.fi-checkbox-input { width: 1.375rem; height: 1.375rem; border-radius: 6px; }

/* Botones: primario en el relleno de la persona con su texto encima; 48 px, 12 px de radio, peso 800. */
.fi-btn { border-radius: var(--r-boton); font-weight: 800; min-height: 2.75rem; }
.fi-btn.fi-size-lg, .fi-btn.fi-size-xl { min-height: 3rem; font-size: 1rem; }
.fi-btn.fi-color-primary:not(.fi-outlined), .fi-ac-btn-action.fi-color-primary:not(.fi-outlined) {
  --bg: var(--p-relleno); --text: var(--p-sobre); --hover-bg: var(--p-relleno); --hover-text: var(--p-sobre); --dark-bg: var(--p-clara); --dark-text: #14152B; --dark-hover-bg: var(--p-clara); --dark-hover-text: #14152B;
  background-color: var(--p-relleno); color: var(--p-sobre); }
.fi-btn.fi-color-primary:not(.fi-outlined) > .fi-icon { color: var(--p-sobre); }
.fi-btn.fi-color-primary:not(.fi-outlined):hover { filter: brightness(1.06); }
.dark .fi-btn.fi-color-primary:not(.fi-outlined) { background-color: var(--p-clara); color: #14152B; }
.dark .fi-btn.fi-color-primary:not(.fi-outlined) > .fi-icon { color: #14152B; }
.fi-btn.fi-color-gray:not(.fi-outlined) { box-shadow: inset 0 0 0 2px var(--regla-fuerte); background: var(--carta); color: var(--texto); }
.fi-link { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.fi-link.fi-color-primary { color: var(--tinta); }

/* Tablas: renglones de 56 px. */
.fi-ta-row { min-height: 3.5rem; }
.fi-ta-header-cell-label { font-weight: 600; color: var(--suave); font-size: .75rem; }
.fi-ta-text-item-label { font-size: .9375rem; }

/* ===== Menú lateral de escritorio (264 px sobre carta; activo con fondo de tinta al 16 %) ===== */
.fi-sidebar { background: var(--carta); border-right: 1px solid var(--regla); }
.fi-sidebar-header { background: var(--carta); box-shadow: none; --tw-ring-shadow: 0 0 #0000; border-bottom: 0; }
.fi-sidebar-nav { padding-inline: 1rem; gap: 1.125rem; }
.fi-sidebar-item-btn { min-height: 2.75rem; border-radius: var(--r-control); padding-inline: .75rem; gap: .75rem; }
.fi-sidebar-item-label { font-weight: 600; font-size: .9375rem; color: var(--texto); }
.fi-sidebar-item-btn > .fi-icon { color: var(--suave); width: 1.5rem; height: 1.5rem; }
.fi-sidebar-item-btn:hover { background: var(--suelo); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: color-mix(in srgb, var(--p-relleno) 16%, transparent); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon, .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label { color: var(--tinta); font-weight: 800; }
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: color-mix(in srgb, var(--p-clara) 16%, transparent); }
.fi-sidebar-group-label { font-size: .75rem; font-weight: 600; color: var(--suave); }
.fi-sidebar-group-btn { padding-inline: .75rem; }
.panel-lado-nuevo { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 3rem; border-radius: var(--r-boton); background: var(--p-relleno); color: var(--p-sobre); font-weight: 800; font-size: 1rem; }
.dark .panel-lado-nuevo { background: var(--p-clara); color: #14152B; }
.panel-lado-nuevo:hover { filter: brightness(1.06); }
.panel-lado-accesos h3 { font-size: .75rem; font-weight: 600; color: var(--suave); padding: 0 .75rem .25rem; }
.panel-menu-lado .panel-menu-fila { min-height: 2.75rem; padding: 0 .75rem; border: 0; border-radius: var(--r-control); gap: .75rem; font-size: .9375rem; }
.panel-menu-lado .panel-menu-fila:hover { background: var(--suelo); }
.panel-menu-lado .panel-menu-fila svg { color: var(--suave); }

/* ===== Cabecera ===== */
/* Marca Famy (docs/marca/LEEME.md): palabra en Bricolage 800; índigo sobre claro, #ECECF6 y sello #A9A8FF en oscuro. */
.panel-marca { color: #3B3A9C !important; }
.panel-marca-nombre { font: 800 1.5rem/1 'Bricolage Grotesque', 'Atkinson Hyperlegible Next', system-ui, sans-serif; letter-spacing: -.035em; color: #3B3A9C !important; white-space: nowrap; padding-bottom: .12em; }
.dark .panel-marca { color: #A9A8FF !important; }
.dark .panel-marca-nombre { color: #ECECF6 !important; }
.fi-topbar { background: var(--carta); box-shadow: none; border-bottom: 1px solid var(--regla); --tw-ring-shadow: 0 0 #0000; }
.fi-topbar-ctn { background: transparent; }
.fi-user-menu-trigger .fi-avatar, .fi-avatar { border-radius: 50%; }

/* ===== Celular (< 1024 px): cabecera en el color de la persona y barra inferior ===== */
@media (max-width: 1023.98px) {
  .fi-topbar { background: var(--p-relleno); border-bottom: 0; color: var(--p-sobre); padding-top: env(safe-area-inset-top); }
  .fi-topbar .fi-logo, .fi-topbar .panel-marca-nombre { color: var(--p-sobre) !important; }
  .fi-topbar .panel-marca { color: var(--p-sobre) !important; }
  .dark .fi-topbar { background: var(--carta); box-shadow: inset 0 4px 0 var(--p-clara); color: var(--texto); }
  .dark .fi-topbar .fi-logo, .dark .fi-topbar .panel-marca-nombre { color: var(--texto) !important; }
  .dark .fi-topbar .panel-marca { color: var(--p-clara) !important; }
  .fi-topbar-open-sidebar-btn, .fi-topbar-close-sidebar-btn { display: none !important; }
  .fi-topbar-start { display: flex; }
  .fi-topbar-start .fi-logo { margin-inline-start: 0; }
  .fi-topbar .fi-global-search-ctn { display: none; }
  .fi-layout:has(~ .panel-barra) .panel-pie, body:has(.panel-barra) .panel-pie { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

.panel-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: color-mix(in srgb, var(--carta) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--regla); padding: .375rem .25rem max(.375rem, env(safe-area-inset-bottom)); }
.panel-barra a, .panel-barra button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem; min-height: 3.5rem;
  font: 600 .75rem/1.2 var(--font-family); color: var(--suave); text-decoration: none; border-radius: var(--r-boton); background: none; border: 0; cursor: pointer; }
.panel-barra [aria-current] { color: var(--tinta); }
.panel-barra [aria-current] svg { stroke-width: 2.5; }
.panel-barra-mas { width: 3.5rem; height: 3.5rem; border-radius: 18px; background: var(--p-relleno); color: var(--p-sobre); display: grid; place-items: center;
  margin: -1.5rem auto 0; box-shadow: 0 6px 16px rgba(22,23,43,.28); transition: transform .2s var(--ease); }
.panel-barra-mas svg { width: 1.75rem; height: 1.75rem; stroke-width: 2.5; }
.panel-barra button:active .panel-barra-mas { transform: scale(.94) rotate(90deg); }
.dark .panel-barra-mas { background: var(--p-clara); color: #14152B; box-shadow: 0 6px 16px rgba(0,0,0,.45); }
@media (min-width: 1024px) { .panel-barra { display: none; } }

/* ===== Hojas (dialog): suben desde abajo en celular; panel anclado en escritorio ===== */
dialog.panel-hoja { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: 88dvh; overflow: auto; border: 0;
  background: var(--carta); color: var(--texto); border-radius: var(--r-hoja) var(--r-hoja) 0 0; padding: .5rem 1rem max(1rem, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 32px rgba(0,0,0,.18); font-family: var(--font-family); }
dialog.panel-hoja::before { content: ""; display: block; width: 2.5rem; height: .3rem; border-radius: .15rem; background: var(--regla-fuerte); margin: 0 auto .75rem; }
dialog.panel-hoja::backdrop { background: rgba(14,15,29,.45); }
dialog.panel-hoja[open] { animation: panel-sube .38s var(--ease); }
@keyframes panel-sube { from { transform: translateY(100%); } }
.panel-hoja-cab { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.panel-hoja-cab h2 { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.panel-boton-icono { width: 2.75rem; height: 2.75rem; border-radius: var(--r-boton); display: grid; place-items: center; flex: none; color: var(--texto); background: var(--suelo); }
.panel-boton-icono:hover { background: var(--regla); }
@media (min-width: 1024px) {
  dialog.panel-hoja { inset: 5.75rem 2.5rem auto auto; width: 26rem; max-height: calc(100dvh - 7rem); border-radius: 16px; padding: 1rem 1.25rem;
    border: 1px solid var(--regla); box-shadow: var(--sombra-panel); }
  dialog.panel-hoja::before { display: none; }
  dialog.panel-hoja::backdrop { background: rgba(14,15,29,.12); }
  dialog.panel-hoja[open] { animation: panel-asoma .25s var(--ease); }
  dialog.panel-hoja[data-ancla] { inset: 4.5rem auto auto 17.5rem; }
}
@keyframes panel-asoma { from { opacity: 0; transform: translateY(-8px) scale(.98); } }

.panel-menu { list-style: none; display: grid; margin: 0; padding: 0; }
.panel-menu form { margin: 0; }
.panel-menu-fila { display: flex; align-items: center; gap: .875rem; min-height: 3.5rem; padding: 0 .25rem; width: 100%; text-align: left;
  font: 600 1rem/1.25 var(--font-family); color: var(--texto); text-decoration: none; background: none; border: 0; border-bottom: 1px solid var(--regla); cursor: pointer; }
.panel-menu li:last-child .panel-menu-fila { border-bottom: 0; }
.panel-menu-fila small { display: block; font-weight: 400; color: var(--suave); font-size: .8125rem; margin-top: .0625rem; }
.panel-menu-fila svg { color: var(--tinta); }
a.panel-menu-fila:hover, button.panel-menu-fila:hover { background: var(--suelo); }
.panel-menu-fila[aria-disabled="true"] { cursor: default; color: var(--suave); }
.panel-menu-fila[aria-disabled="true"] svg { color: var(--suave); }
.panel-menu-grupo h3 { font-size: .75rem; font-weight: 600; color: var(--suave); padding: 1rem .25rem .25rem; }

.panel-dato { font-size: .9375rem; color: var(--suave); }
.panel-dato b { color: var(--texto); font-weight: 800; }
.panel-consecuencia { font-size: .8125rem; color: var(--suave); margin: .5rem 0 0; }
.panel-enlace { color: var(--tinta); font-weight: 700; text-decoration: underline; }
.panel-pasos { list-style: none; counter-reset: paso; display: grid; gap: .625rem; margin: .25rem 0 1rem; padding: 0; }
.panel-pasos[hidden] { display: none; }
.panel-pasos li { counter-increment: paso; display: grid; grid-template-columns: 2rem 1fr; gap: .625rem; align-items: start; font-size: .9375rem; line-height: 1.35; }
.panel-pasos li::before { content: counter(paso); width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .875rem;
  background: color-mix(in srgb, var(--p-relleno) 16%, var(--carta)); color: var(--tinta); }
.panel-qr { display: grid; place-items: center; width: min(100%, 15rem); aspect-ratio: 1; margin: .5rem auto 1rem; padding: .75rem; border-radius: var(--r-tarjeta);
  background: #FFFFFF; border: 1px solid var(--regla); }
.panel-qr svg { width: 100%; height: 100%; }
.panel-por-completar { display: grid; grid-template-columns: 2.5rem 1fr; gap: .75rem; align-items: start; padding: 1rem; border: 2px dashed var(--regla-fuerte); border-radius: var(--r-tarjeta); margin-bottom: .5rem; }
.panel-por-completar svg { color: var(--tinta); width: 2rem; height: 2rem; }
.panel-por-completar p { color: var(--suave); }
.panel-por-completar b { color: var(--texto); }

/* Botones propios (hojas y pantallas que no usan los de Filament). */
.panel-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; border-radius: var(--r-boton); font: 800 1rem/1.2 var(--font-family);
  text-decoration: none; border: 0; cursor: pointer; padding: 0 1rem; transition: transform .15s var(--ease), filter .2s; }
.panel-btn:active { transform: scale(.98); }
.panel-btn[hidden] { display: none; }
.panel-btn:disabled, .panel-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.panel-btn-tinta { background: var(--p-relleno); color: var(--p-sobre); }
.dark .panel-btn-tinta { background: var(--p-clara); color: #14152B; }
.panel-btn-borde { background: var(--carta); color: var(--texto); box-shadow: inset 0 0 0 2px var(--regla-fuerte); }
.panel-btn-ancho { width: 100%; margin-top: .75rem; }
/* Guía rápida: título en peso 800 y el texto debajo, en la misma grilla numerada de «Instalar». */
.panel-guia { gap: .875rem; margin-top: .75rem; }
.panel-guia li > span { color: var(--suave); }
.panel-guia b { display: block; color: var(--texto); font-weight: 800; margin-bottom: .125rem; }
.panel-guia li::before { margin-top: .0625rem; }
/* Pedir ayuda: el correo va escrito bajo la acción, por si la persona prefiere copiarlo. */
.panel-soporte .panel-btn { flex-wrap: wrap; column-gap: .5rem; row-gap: 0; padding-block: .5rem; }
.panel-soporte .panel-btn small { flex-basis: 100%; text-align: center; font-weight: 400; font-size: .8125rem; color: var(--suave); overflow-wrap: anywhere; }

/* Segmento (tema, letra, Android/iPhone). */
.panel-segmento { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--suelo); border-radius: 12px; padding: .25rem; margin: .5rem 0 1rem; }
.panel-segmento label, .panel-segmento button { min-height: 2.75rem; border-radius: 9px; display: grid; place-items: center; font: 600 .875rem var(--font-family); color: var(--texto); cursor: pointer; background: none; border: 0; }
.panel-segmento input:checked + label, .panel-segmento [aria-pressed="true"] { background: var(--carta); box-shadow: var(--sombra); font-weight: 800; }
.panel-segmento input:focus-visible + label { outline: 3px solid var(--tinta); outline-offset: 2px; }

/* Colores de persona: muestra + nombre (nunca solo el color). */
.panel-tintas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin: .5rem 0 0; }
.panel-tintas label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 4.25rem; border-radius: 12px; border: 2px solid transparent;
  font-size: .75rem; font-weight: 600; cursor: pointer; color: var(--texto); }
.panel-tintas i { width: 2rem; height: 2rem; border-radius: 50%; background: var(--f); }
.panel-tintas input:checked + label { border-color: var(--texto); font-weight: 800; }
.panel-tintas input:checked + label i { box-shadow: 0 0 0 3px var(--carta), 0 0 0 5px var(--f); }
.panel-tintas input:focus-visible + label { outline: 3px solid var(--tinta); outline-offset: 2px; }
.panel-tintas input:disabled + label { opacity: .5; cursor: not-allowed; }

/* Círculo de iniciales en el color de la persona. */
.panel-ini { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .875rem; color: var(--s, #fff); background: var(--f); }

/* ===== Timbre (gesto propio): iniciales y hora en la mono, girado, en la tinta legible de la persona ===== */
.panel-timbre { display: inline-grid; place-items: center; border: 2.5px solid var(--t, var(--tinta)); color: color-mix(in srgb, var(--t, var(--tinta)) 78%, #000);
  background: color-mix(in srgb, var(--f, var(--p-relleno)) 12%, transparent); border-radius: 8px; padding: .2rem .5rem; transform: rotate(var(--g, -6deg));
  font-family: var(--font-family-mono); font-weight: 800; font-size: .8125rem; line-height: 1.15; text-align: center; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t, var(--tinta)) 35%, transparent); }
.dark .panel-timbre { color: var(--tc, var(--tinta)); border-color: var(--tc, var(--tinta)); background: color-mix(in srgb, var(--tc, var(--tinta)) 12%, transparent); }
.panel-timbre small { display: block; font-size: .6875rem; font-weight: 600; }
.panel-timbre-xl { font-size: 1.25rem; padding: .375rem .75rem; border-width: 3px; min-width: 4.5rem; }
.panel-vista-timbre { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--suelo); border-radius: 12px; }
.panel-vista-timbre p { color: var(--suave); font-size: .9375rem; }

/* ===== Formularios propios (ingreso, primer nombre, mi timbre) ===== */
.panel-ingreso-form, .panel-hoja-form { display: grid; gap: 1.25rem; }
.panel-hoja-form { max-width: 34rem; }
.panel-campo { display: grid; gap: .375rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.panel-etq { font-weight: 800; font-size: .9375rem; color: var(--texto); }
.panel-texto { width: 100%; min-height: 3rem; border: 2px solid var(--regla-fuerte); border-radius: var(--r-control); background: var(--carta); color: var(--texto);
  font: 400 1.0625rem var(--font-family); padding: .625rem .75rem; }
.panel-texto:focus { outline: 3px solid var(--tinta); outline-offset: 2px; border-color: var(--tinta); }
.panel-texto[aria-invalid="true"] { border-color: var(--atraso); }
.panel-texto-iniciales { width: 5rem; text-align: center; text-transform: uppercase; font: 800 1.25rem var(--font-family-mono); }
.panel-error { color: var(--atraso); font-size: .875rem; font-weight: 600; }

/* ===== Estado vacío (Hoy y Tareas mientras llegan) ===== */
.panel-vacio { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: center; background: var(--carta); border: 1px solid var(--regla); border-radius: var(--r-tarjeta); padding: 1.25rem; max-width: 46rem; }
.panel-vacio h2 { font-size: 1.0625rem; font-weight: 800; margin-bottom: .25rem; }
.panel-vacio p { color: var(--suave); font-size: .9375rem; }
.panel-casilla { width: 4.5rem; height: 4.5rem; border: 2px dashed var(--regla-fuerte); border-radius: 12px; display: grid; place-items: center; color: var(--suave); }
.panel-icono-l { width: 2rem; height: 2rem; }
/* Pasos del estado vacío (E02 · Etapa 0): número o visto en texto, nunca solo color. */
.panel-arranque { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; }
.panel-arranque-paso { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; min-height: 2.75rem; }
.panel-arranque-num { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 999px; border: 2px solid var(--regla-fuerte); display: grid; place-items: center; font-size: .8125rem; font-weight: 800; color: var(--suave); }
.panel-arranque-hecho .panel-arranque-num { border-style: solid; background: var(--tinta); border-color: var(--tinta); color: var(--carta); }
.panel-arranque-texto { display: grid; flex: 1 1 10rem; font-size: .9375rem; }
.panel-arranque-texto small { color: var(--suave); font-size: .8125rem; }
/* Categorías vacías en Tareas: «Aún no hay tareas en Paseos · Crear aquí». */
.panel-grupo-vacio { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; min-height: 2.75rem; padding: .5rem .75rem; color: var(--suave); font-size: .9375rem; }
.panel-grupo-vacio .panel-pestana { flex: none; }

/* ===== Ingreso (layout simple): cartulina, tarjeta y sello grande ===== */
.fi-simple-layout { background: var(--suelo); }
.fi-simple-main { background: var(--carta); border-radius: var(--r-hoja); box-shadow: var(--sombra); --tw-ring-shadow: 0 0 #0000; padding: 2rem 1.5rem; margin-inline: 1rem; }
@media (min-width: 640px) { .fi-simple-main { padding: 2.5rem 2.25rem; } }
.fi-simple-header { align-items: flex-start; text-align: left; }
.fi-simple-header-heading { font-size: 1.75rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; text-align: left; }
.fi-simple-header-subheading { text-align: left; color: var(--suave); font-size: 1rem; }
.fi-simple-header .fi-logo { margin-bottom: 1.25rem; }
.panel-ingreso-aviso { display: flex; gap: .625rem; align-items: flex-start; background: color-mix(in srgb, var(--p-relleno) 10%, var(--carta)); border-radius: 12px; padding: .75rem .875rem; font-size: .9375rem; }
.panel-ingreso-aviso svg { color: var(--tinta); width: 1.25rem; height: 1.25rem; margin-top: .125rem; }
.panel-codigo-dev { display: block; margin-top: .5rem; padding: .5rem .75rem; border-radius: 10px; background: var(--suelo); color: var(--texto); font-weight: 800; }
.panel-codigo-dev span { font-family: var(--font-family-mono); letter-spacing: .08em; }

/* Pie (firma) discreto */
footer[aria-label="Herramientas"] { color: var(--suave); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* El tema se elige en «Mi timbre y colores» (queda guardado por persona): sin el selector de Filament. */
.fi-theme-switcher { display: none !important; }
.panel-pie { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; margin: 1.5rem 1rem 1rem; padding-top: .75rem; border-top: 1px solid var(--regla); font-size: .8125rem; color: var(--suave); }
.panel-pie a { color: var(--suave); min-height: 2.75rem; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
.fi-simple-layout .panel-pie { justify-content: center; border-top: 0; }
.panel-separador { display: flex; align-items: center; gap: .75rem; font-size: .875rem; color: var(--suave); }
.panel-separador::before, .panel-separador::after { content: ""; flex: 1; height: 1px; background: var(--regla); }
.fi-simple-page .fi-form-actions .fi-btn, .fi-simple-page .fi-ac .fi-btn:not(.fi-link) { width: 100%; min-height: 3rem; font-size: 1rem; }

/* Ingreso, paso del código: «Entrar» a todo el ancho y los dos enlaces debajo, de 44 px. */
.fi-simple-page .fi-form-actions .fi-ac { display: grid !important; grid-template-columns: 1fr 1fr; gap: .25rem .5rem; }
.fi-simple-page .fi-form-actions .fi-ac > :first-child { grid-column: 1 / -1; }
.fi-simple-page .fi-form-actions .fi-ac .fi-btn { width: 100%; }
.fi-simple-page .fi-form-actions .fi-link { min-height: 2.75rem; justify-content: center; }
.panel-codigo-dev span { white-space: nowrap; }
@media (max-width: 1023.98px) { .fi-topbar .fi-avatar { box-shadow: 0 0 0 2px var(--p-sobre); } }

/* Ítem activo de la barra: además del color, una píldora detrás del ícono y peso 800 (con gris o amarillo se nota igual). */
.panel-barra a[aria-current] svg, .panel-barra button[aria-current] > svg { background: color-mix(in srgb, var(--p-relleno) 18%, transparent); border-radius: 999px; padding: .1875rem .875rem; width: 3.25rem; height: 1.875rem; box-sizing: border-box; }
.panel-barra [aria-current] span { font-weight: 800; color: var(--texto); }
.dark .panel-barra a[aria-current] svg, .dark .panel-barra button[aria-current] > svg { background: color-mix(in srgb, var(--p-clara) 22%, transparent); }

/* ===== Revisión de la etapa 2 (critique): contraste AA y objetivos de 44 px en piezas de Filament ===== */
/* Activo del menú: texto en la tinta oscurecida (con el Rojo daba 4,1:1 sobre su fondo). */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label, .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon { color: color-mix(in srgb, var(--tinta) 80%, #000); }
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label, .dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon { color: var(--p-clara); }
.fi-ta-text-description, .fi-ta-text-item.fi-color-gray, .fi-ta-text-item-label.fi-color-gray { color: var(--suave); }
::placeholder, .fi-input::placeholder { color: var(--suave); opacity: 1; }
/* Objetivos táctiles: menú de la persona, plegar grupos, acciones de renglón, filtros y paginación. */
.fi-user-menu-trigger { min-width: 2.75rem; min-height: 2.75rem; display: grid; place-items: center; }
.fi-sidebar-group-collapse-btn, .fi-icon-btn, .fi-ac-icon-btn-group, .fi-pagination-item-btn { min-width: 2.75rem; min-height: 2.75rem; }
.fi-ac-link-action, .fi-ta-actions .fi-link { min-height: 2.75rem; display: inline-flex; align-items: center; }
.fi-ac-link-action.fi-color-gray, .fi-ta-actions .fi-link.fi-color-gray { color: var(--texto); }
/* Textos de párrafo sin palabras sueltas al final. */
p, .fi-header-subheading { text-wrap: pretty; }
.fi-ac-link-action { gap: .375rem; }

/* ===== Etapa 3: categorías (pestaña y árbol), opciones en tarjeta, timbre de la persona ===== */
.panel-pestana { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 10px; display: grid; place-items: center; background: var(--cf); color: var(--ct); }
.dark .panel-pestana { background: var(--cfn); color: var(--ctn); }
.panel-pestana .panel-i { width: 1.25rem; height: 1.25rem; }
.panel-cat-fila { display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; min-width: 0; }
.panel-cat-guia { flex: none; align-self: stretch; width: 1.25rem; margin-right: -.75rem; background: linear-gradient(var(--regla-fuerte, #C5C8D9), var(--regla-fuerte, #C5C8D9)) no-repeat .5rem 0 / 1px 100%; }
.dark .panel-cat-guia { background-image: linear-gradient(#3A3D5E, #3A3D5E); }
.panel-cat-texto { display: flex; flex-direction: column; min-width: 0; }
.panel-cat-nombre { font-weight: 800; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.panel-cat-datos { font-size: .8125rem; color: var(--suave); line-height: 1.35; }

.panel-cat-archivada { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; }
.panel-i-s { width: .875rem; height: .875rem; display: inline-block; vertical-align: -2px; }
/* Opciones (color, ícono) como tarjetas: nunca solo el color, siempre con nombre. */
.panel-radios-tarjeta { display: flex; flex-wrap: wrap; gap: .5rem; }
.panel-radios-tarjeta label { min-height: 2.75rem; padding: .375rem .75rem; border: 2px solid var(--gray-300); border-radius: 10px; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.panel-radios-tarjeta label:has(input:checked) { border-color: var(--tinta); background: color-mix(in srgb, var(--tinta) 10%, transparent); font-weight: 800; }
.panel-radios-tarjeta label > span { display: inline-flex; align-items: center; gap: .5rem; }
.panel-opcion-color { display: inline-flex; align-items: center; gap: .5rem; }
.panel-opcion-color > span { width: 1.25rem; height: 1.25rem; border-radius: 6px; background: var(--cf); box-shadow: inset 0 0 0 3px var(--ct); }
.panel-timbre-persona { font-family: var(--mono-font-family, "Atkinson Hyperlegible Mono", ui-monospace, monospace); font-weight: 800; font-size: .875rem; letter-spacing: .02em; min-width: 2.75rem; min-height: 2rem; }

/* ===== Etapa 4: Hoy (prototipo docs/propuesta/hoy.html) y Tareas ===== */
.panel-pestana-s { width: 2.25rem; height: 2.25rem; }
.panel-hoy-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-top: -.75rem; }
.panel-hoy-fecha { color: var(--suave); font-size: .9375rem; font-weight: 600; }
.panel-hoy-fecha span { font-weight: 400; }
.panel-letra { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .875rem 0 .5rem; border-radius: 22px; background: var(--carta); box-shadow: inset 0 0 0 2px var(--regla-fuerte); font-size: .875rem; color: var(--texto); }
.panel-letra[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--tinta); background: color-mix(in srgb, var(--tinta) 10%, var(--carta)); }
.panel-letra-aa { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--suelo); font-weight: 800; font-size: 1rem; }
.panel-hoy { display: grid; gap: 1rem; }
.panel-hoy-trabajo { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.panel-hoy-lado { display: grid; gap: 1rem; align-content: start; }
.panel-hoy-lado:empty { display: none; }
@media (min-width: 1024px) { .panel-hoy { grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.5rem; } .panel-hoy-trabajo, .panel-hoy-lado { gap: 1.5rem; } }
/* Ahora */
.panel-ahora { background: var(--carta); border-radius: var(--r-tarjeta); box-shadow: var(--sombra); overflow: hidden; }
.panel-ahora-pestana { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem .375rem .625rem; border-radius: var(--r-tarjeta) 0 12px 0; background: var(--cf); color: var(--ct); font-size: .8125rem; font-weight: 800; }
.dark .panel-ahora-pestana { background: var(--cfn); color: var(--ctn); }
.panel-ahora-pestana .panel-i { width: 1.125rem; height: 1.125rem; }
.panel-ahora-cuerpo { display: grid; grid-template-columns: 1fr 6rem; gap: .875rem; padding: .75rem 1rem 1rem; align-items: start; }
.panel-ahora h2 { font-size: 1.5rem; line-height: 1.15; font-weight: 800; margin: 0 0 .375rem; text-wrap: balance; }
.panel-ahora-dato { color: var(--suave); font-size: .9375rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .375rem; }
.panel-ahora-dato b { color: var(--texto); }
.panel-ahora-obs { margin-top: .5rem; font-size: .9375rem; color: var(--texto); background: var(--suelo); border-radius: 10px; padding: .5rem .625rem; }
.panel-casilla-timbre { border: 2px dashed var(--regla-fuerte); border-radius: 12px; display: grid; place-items: center; text-align: center; font-size: .75rem; font-weight: 600; color: var(--suave); min-height: 5.5rem; }
.panel-casilla-ok { border-style: solid; color: var(--tinta); }
@media (min-width: 1024px) { .panel-ahora-cuerpo { grid-template-columns: 1fr 8rem; padding: 1.25rem 1.5rem 1.25rem; } .panel-ahora h2 { font-size: 1.875rem; } }
/* Ficha de la mascota */
.panel-ficha-mascota { display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; background: var(--carta); border: 1px solid var(--regla); border-radius: var(--r-tarjeta); }
.panel-ficha-mascota h3 { font-size: 1.0625rem; font-weight: 800; }
.panel-ficha-mascota p { color: var(--suave); font-size: .9375rem; }
.panel-ficha-mascota .panel-timbre { margin-left: auto; }
/* Secciones y renglones */
.panel-seccion { display: flex; align-items: baseline; justify-content: space-between; padding: 0 .25rem; margin-bottom: -.5rem; }
.panel-seccion h2 { font-size: 1rem; font-weight: 800; }
.panel-seccion a { font-size: .875rem; font-weight: 700; color: var(--tinta); text-decoration: underline; min-height: 2.75rem; display: inline-flex; align-items: center; }
.panel-nada { color: var(--suave); padding: .25rem; }
.panel-renglones { background: var(--carta); border: 1px solid var(--regla); border-radius: var(--r-tarjeta); overflow: hidden; list-style: none; margin: 0; padding: 0; }
.panel-renglon { display: grid; grid-template-columns: 3.25rem 2.25rem minmax(0, 1fr) auto; grid-template-areas: "h i p a"; align-items: center; gap: .625rem; min-height: 3.5rem; padding: .375rem .75rem .375rem .5rem; border-bottom: 1px solid var(--regla); }
.panel-renglon:last-child { border-bottom: 0; }
.panel-renglon-hora { grid-area: h; text-align: right; font-weight: 800; font-size: .9375rem; }
.panel-renglon > .panel-pestana { grid-area: i; }
.panel-renglon-texto { grid-area: p; min-width: 0; font-weight: 600; font-size: .9375rem; line-height: 1.25; }
.panel-renglon-texto small { display: block; font-weight: 400; font-size: .8125rem; color: var(--suave); margin-top: .125rem; }
.panel-renglon-titulo { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
a.panel-renglon-titulo:hover { text-decoration: underline; }
.panel-renglon-lado { grid-area: a; display: flex; align-items: center; gap: .5rem; justify-content: flex-end; }
.panel-renglon-hecha .panel-renglon-texto, .panel-renglon-hecha .panel-renglon-hora { color: var(--suave); }
.panel-chip-atraso { display: inline-flex; align-items: center; gap: .25rem; background: var(--atraso); color: #fff; border-radius: 6px; padding: .1875rem .5rem; font-weight: 800; font-size: .75rem; white-space: nowrap; }
.dark .panel-chip-atraso { color: #2A0E0C; }
.panel-chip-atraso svg { width: .875rem; height: .875rem; }
.panel-chip-pendiente { font-size: .75rem; font-weight: 700; color: var(--suave); white-space: nowrap; }
@media (max-width: 439.98px) {
  .panel-renglon { grid-template-areas: "h i p" "h i a"; grid-template-columns: 3.25rem 2.25rem minmax(0, 1fr); }
  .panel-renglon-lado { justify-content: flex-start; }
}
:root[data-letra="grande"] .panel-renglon { grid-template-areas: "h i p" "h i a"; grid-template-columns: 3.25rem 2.25rem minmax(0, 1fr); }
:root[data-letra="grande"] .panel-renglon-lado { justify-content: flex-start; }
/* Formulario de tarea: vista previa de la repetición */
.panel-vista-previa { background: var(--suelo); border-radius: 12px; padding: .75rem .875rem; font-size: .9375rem; }
.panel-vista-previa > p:first-child { font-weight: 800; }
.panel-vista-previa-t { margin-top: .5rem; font-size: .8125rem; color: var(--suave); font-weight: 700; }
.panel-vista-previa ul { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .125rem; }
/* Tareas: filtros y grupos por categoría */
.panel-filtros { display: grid; gap: .75rem; }
.panel-buscar { display: flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 .75rem; background: var(--carta); border-radius: var(--r-control); box-shadow: inset 0 0 0 2px var(--regla-fuerte); color: var(--suave); }
.panel-buscar:focus-within { box-shadow: inset 0 0 0 2px var(--tinta); }
.panel-buscar input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--texto); outline: none; }
.panel-buscar input::placeholder { color: var(--suave); }
.panel-filtros-mas { background: var(--carta); border: 1px solid var(--regla); border-radius: var(--r-tarjeta); }
.panel-filtros-mas > summary { display: flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 1rem; font-weight: 800; cursor: pointer; list-style: none; }
.panel-filtros-mas > summary::-webkit-details-marker { display: none; }
.panel-insignia { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .375rem; border-radius: 11px; background: var(--tinta-fondo); color: var(--sobre-tinta); font-size: .75rem; }
.panel-filtros-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .75rem; padding: 0 1rem 1rem; }
.panel-campo { display: grid; gap: .25rem; font-size: .8125rem; font-weight: 700; color: var(--suave); }
.panel-campo select { min-height: 2.75rem; border-radius: var(--r-control); border: 2px solid var(--regla-fuerte); background: var(--carta); color: var(--texto); font: inherit; font-size: .9375rem; font-weight: 400; padding: 0 .5rem; }
.panel-campo select:focus { border-color: var(--tinta); outline: none; }
.panel-check { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-size: .9375rem; align-self: end; }
.panel-check input { width: 1.25rem; height: 1.25rem; }
.panel-enlace { color: var(--tinta); font-weight: 700; text-decoration: underline; min-height: 2.75rem; padding: 0 1rem 1rem; background: none; }
.panel-nada .panel-enlace { padding: 0; }
.panel-filtros-total { color: var(--suave); font-size: .875rem; padding: 0 .25rem; }
.panel-grupo { display: grid; gap: .5rem; }
.panel-grupo-cab { display: flex; align-items: center; gap: .625rem; font-size: 1rem; font-weight: 800; padding: 0 .25rem; }
.panel-grupo-cab small { display: block; font-size: .8125rem; font-weight: 400; color: var(--suave); }
.panel-renglon-sin_hoy .panel-renglon-hora { color: var(--suave); }

/* Critique etapa 3: asterisco de obligatorio a 12 px; radio de las tarjetas en la tinta de la persona. */
.fi-fo-field-label-required-mark { font-size: .75rem; }
.panel-radios-tarjeta input[type="radio"]:checked { background-color: var(--tinta) !important; border-color: var(--tinta) !important; }
.panel-timbre-persona { min-height: 2.25rem; }

/* Critique etapa 4 */
.panel-chip-pendiente { font-size: .8125rem; color: var(--texto); }
.panel-renglon-sin-icono { grid-template-columns: 3.25rem minmax(0, 1fr) auto; grid-template-areas: "h p a"; }
@media (max-width: 439.98px) { .panel-renglon-sin-icono { grid-template-areas: "h p" "h a"; grid-template-columns: 3.25rem minmax(0, 1fr); } }
:root[data-letra="grande"] .panel-renglon-sin-icono { grid-template-areas: "h p" "h a"; grid-template-columns: 3.25rem minmax(0, 1fr); }
/* Opciones como tarjetas de 56 px con el aro a la derecha (DESIGN.md › Inputs). */
.panel-radios-tarjeta { margin-top: .5rem; }
.panel-radios-opcion label { min-height: 3.5rem; flex-direction: row-reverse; justify-content: space-between; padding: .5rem .875rem; flex: 1 1 14rem; }
.panel-radios-opcion label > span, .panel-radios-opcion label > div { flex: 1; }
.panel-vista-previa { width: 100%; }

/* ===== Etapa 5: acciones, ficha, timbres de hoy, anotaciones ===== */
.panel-ahora-acciones { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1rem 1rem; }
.panel-ahora-acciones .fi-btn { min-height: 3rem; border-radius: var(--r-boton); font-weight: 800; }
.panel-ahora-acciones .fi-btn:first-child { flex: 1 1 12rem; }
@media (min-width: 1024px) { .panel-ahora-acciones { padding: 0 1.5rem 1.25rem; } }
button.panel-renglon-titulo { background: none; padding: 0; text-align: left; font: inherit; font-weight: 600; color: inherit; cursor: pointer; min-height: 1.5rem; }
button.panel-renglon-titulo:hover { text-decoration: underline; }
.panel-accion-timbrar { min-height: 2.75rem; padding: 0 .75rem; border: 2px dashed var(--tinta); border-radius: var(--r-control); color: var(--tinta) !important; font-weight: 800; text-decoration: none !important; }
.panel-accion-recordar { min-height: 2.75rem; padding: 0 .75rem; border-radius: var(--r-control); box-shadow: inset 0 0 0 2px var(--regla-fuerte); font-weight: 700; text-decoration: none !important; }
.panel-recordado { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; color: var(--suave); font-weight: 700; }
.panel-tarjeta-lado { background: var(--carta); border: 1px solid var(--regla); border-radius: var(--r-tarjeta); padding: .875rem 1rem 1rem; }
.panel-tarjeta-lado h2 { font-size: 1rem; font-weight: 800; }
.panel-tarjeta-lado > h2 { margin-bottom: .5rem; }
.panel-tarjeta-lado-cab { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; }
.panel-timbres-hoy { list-style: none; margin: 0; padding: 0; display: grid; }
.panel-timbres-hoy li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.75rem; border-bottom: 1px solid var(--regla); }
.panel-timbres-hoy li:last-child { border-bottom: 0; }
.panel-timbres-nombre { font-weight: 700; font-size: .9375rem; }
.panel-timbres-fila { display: flex; flex-wrap: wrap; gap: .375rem; justify-content: flex-end; }
.panel-timbre-s { font-size: .75rem; padding: .125rem .375rem; border-width: 2px; }
.panel-timbre-s small { display: inline; margin-left: .25rem; }
.panel-nada-s { color: var(--suave); font-size: .875rem; }
.panel-notas { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.panel-notas li { display: grid; grid-template-columns: auto 1fr; gap: .625rem; align-items: start; }
.panel-notas p { font-size: .9375rem; overflow-wrap: anywhere; }
.panel-nota-meta { font-size: .8125rem !important; color: var(--suave); }
.panel-nota-meta b { color: var(--texto); }
.panel-enlace-s { font-size: .8125rem; font-weight: 700; color: var(--tinta); text-decoration: underline; min-height: 2.75rem; background: none; }
/* Ficha */
.panel-ficha { display: grid; gap: 1rem; }
.panel-ficha-pestana { justify-self: start; border-radius: 10px; }
.panel-ficha-datos { display: grid; gap: .5rem; margin: 0; }
.panel-ficha-datos > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .5rem; align-items: center; }
.panel-ficha-datos dt { font-size: .8125rem; color: var(--suave); font-weight: 700; }
.panel-ficha-datos dd { margin: 0; font-size: .9375rem; }
.panel-ficha-estado { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.panel-ficha-nota { color: var(--suave); font-style: italic; }
.panel-ficha-acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.panel-ficha-acciones .fi-btn, .panel-ficha-acciones .fi-link { min-height: 2.75rem; }
.panel-ficha-t { font-size: 1rem; font-weight: 800; margin-top: .25rem; }
.panel-historial { list-style: none; margin: 0; padding: 0; display: grid; }
.panel-historial li { display: grid; grid-template-columns: 7.5rem auto 1fr; gap: .625rem; align-items: center; min-height: 3.5rem; border-bottom: 1px solid var(--regla); }
.panel-historial-fecha { font-size: .8125rem; color: var(--suave); font-weight: 700; }
.panel-historial-texto { font-size: .9375rem; }
.panel-historial-texto small { display: flex; align-items: center; gap: .25rem; color: var(--suave); font-size: .8125rem; }
.panel-historial-anulado .panel-timbre { text-decoration: line-through; opacity: .55; }
/* El timbre cae (DESIGN.md › Timbre): escala, giro y desenfoque que asienta; nada con reduced-motion. */
@keyframes panel-timbre-cae { 0% { transform: scale(1.7) rotate(-14deg); filter: blur(2px); opacity: 0; } 60% { transform: scale(.93) rotate(var(--g, -5deg)); filter: blur(0); opacity: 1; } 100% { transform: scale(1) rotate(var(--g, -5deg)); } }
.panel-timbre-cae { animation: panel-timbre-cae 420ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .panel-timbre-cae { animation: none; } }
.panel-quien { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
/* Critique etapa 4 (B): placeholder de los select en texto suave; título del renglón tocable en todo el renglón;
   selects de filtros que no se montan; «Letra grande» junto a la fecha. */
.fi-select-input-placeholder { color: var(--suave) !important; }
.panel-renglon { position: relative; }
.panel-renglon-titulo::after { content: ""; position: absolute; inset: 0; }
.panel-renglon-lado { position: relative; z-index: 1; }
.panel-campo { min-width: 0; }
.panel-campo select { width: 100%; min-width: 0; }
.panel-hoy-cab { justify-content: flex-start; }

/* Etapa 5: ícono y texto en la misma línea en «Listo» y «Recordarle». */
.panel-accion-timbrar, .panel-accion-recordar { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: .375rem; white-space: nowrap; }
.panel-accion-timbrar > *, .panel-accion-recordar > * { margin: 0 !important; }
.panel-accion-timbrar.fi-btn { border-style: dashed; border-width: 2px; box-shadow: none; background: transparent; }
.panel-accion-recordar.fi-btn { box-shadow: inset 0 0 0 2px var(--regla-fuerte); }
@media (max-width: 439.98px) { .panel-renglon-lado { flex-wrap: wrap; } }

/* Critique etapa 5: la casilla de Ahora recibe el timbre XL. */
.panel-casilla-llena { border-style: solid; border-color: transparent; }

/* Critique etapa 5 (B): bordes de botones secundarios con 3:1 contra la carta (WCAG 1.4.11). */
.panel-ficha-acciones .panel-btn { min-height: 2.75rem; padding: 0 .875rem; font-size: .9375rem; }
.panel-ficha-acciones .panel-btn-borde, .panel-accion-recordar.fi-btn, .panel-ahora-acciones .fi-btn.fi-color-gray { box-shadow: inset 0 0 0 2px #8A8DA6; }
.dark .panel-ficha-acciones .panel-btn-borde, .dark .panel-accion-recordar.fi-btn, .dark .panel-ahora-acciones .fi-btn.fi-color-gray { box-shadow: inset 0 0 0 2px #6E7190; }
.panel-accion-timbrar.fi-btn { border-color: var(--tinta); }

/* ===== Etapa 6: campana ===== */
.fi-topbar-database-notifications-btn .fi-badge, .fi-icon-btn .fi-icon-btn-badge-ctn .fi-badge { background: var(--tinta-fondo) !important; color: var(--sobre-tinta) !important; font-weight: 800; min-width: 1.25rem; }
.fi-topbar-database-notifications-btn { min-width: 2.75rem; min-height: 2.75rem; }
@media (max-width: 1023.98px) { .fi-topbar-database-notifications-btn { color: var(--p-sobre) !important; } .dark .fi-topbar-database-notifications-btn { color: var(--texto) !important; } }



/* Critique etapa 6: acciones de cada aviso de la campana como píldoras de 44 px; «Ver en Hoy» primero y relleno. */
.fi-no-database .fi-no-notification-actions { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }
.fi-no-database .fi-no-notification-actions > .fi-link { min-height: 2.75rem; padding: 0 .75rem; border-radius: 22px; box-shadow: inset 0 0 0 2px #8A8DA6; text-decoration: none !important; font-weight: 700; display: inline-flex; align-items: center; }
.fi-no-database .fi-no-notification-actions > .fi-btn { min-height: 2.75rem; border-radius: 22px; }
.fi-no-database .fi-no-notification-actions > .fi-link { justify-content: center; line-height: 1; }
.fi-no-database .fi-no-notification-actions > .fi-link > * { margin: 0 !important; }
.fi-no-database .fi-no-notification-actions > .fi-link { display: inline-flex !important; align-items: center !important; height: 2.75rem; }
.fi-no-database .fi-no-notification-actions > .fi-btn:first-child, .fi-no-database .fi-no-notification-actions > .fi-link:first-child { background: var(--tinta-fondo); color: var(--sobre-tinta) !important; box-shadow: none; }
.fi-no-database .fi-no-notification-actions .fi-link-label { height: auto !important; line-height: 1.2 !important; display: block; }
.fi-no-database .fi-no-notification-actions .fi-link-label { align-self: center !important; }

/* ===== Etapa 7 · Selector de espacio (docs/propuesta/etapa-7-espacios.md › 1) ===== */
.panel-espacio { display: block; margin: .75rem 0 0; }
.panel-espacio-segmentos { display: flex; flex-wrap: wrap; gap: .25rem; background: color-mix(in srgb, var(--tinta) 7%, var(--suelo)); box-shadow: inset 0 0 0 1px var(--regla); border-radius: 12px; padding: .25rem; max-width: 40rem; }
@media (max-width: 479.98px) { .panel-espacio-otro { flex-basis: 100%; justify-content: flex-start; } .panel-espacio-otro select { max-width: none; flex: 1; } }
.panel-espacio-seg { flex: 1 1 8rem; min-height: 2.75rem; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 600 .875rem var(--font-family); color: var(--texto); cursor: pointer; background: none; border: 0; padding: 0 .75rem; }
.panel-espacio-seg .panel-i { width: 1.25rem; height: 1.25rem; flex: none; }
.panel-espacio-seg[aria-pressed="true"], .panel-espacio-otro[data-activo] { background: var(--carta); box-shadow: var(--sombra); font-weight: 800; color: var(--tinta); }
.panel-espacio-seg:focus-visible, .panel-espacio-otro:focus-within { outline: 3px solid var(--tinta); outline-offset: 2px; }
.panel-espacio-otro select { appearance: none; background: transparent; border: 0; font: inherit; color: inherit; min-height: 2.75rem; padding: 0 1.25rem 0 0; cursor: pointer; max-width: 11rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right .35rem center, right 0 center; background-size: .35rem .35rem; background-repeat: no-repeat; }
.panel-espacio-otro:focus-within select:focus { outline: none; }
.panel-espacio-aviso { max-width: 40rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0 0; padding: .5rem .75rem; background: var(--carta); border: 2px solid var(--tinta); border-radius: 12px; font-size: .9375rem; }
.panel-espacio-aviso .panel-i { width: 1.25rem; height: 1.25rem; color: var(--tinta); }
.panel-espacio-volver { margin-left: auto; min-height: 2.75rem; padding: 0 .875rem; border-radius: 12px; border: 2px solid var(--suave); background: var(--carta); font: 800 .875rem var(--font-family); color: var(--texto); cursor: pointer; }
.panel-espacio-volver:focus-visible, .panel-pedidos-resueltos summary:focus-visible, .panel-espacio-otro select:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.panel-dato-espacio { display: inline-flex; align-items: center; gap: .25rem; }
.panel-dato-espacio .panel-i { width: 1rem; height: 1rem; }

/* ===== Etapa 7 · Opciones en tarjeta, pedidos de invitación (docs/propuesta/etapa-7-espacios.md › 3 y 4) ===== */
.panel-opciones { display: grid; gap: .5rem; }
.panel-opcion { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3.5rem; padding: .5rem .875rem; border: 2px solid var(--suave); border-radius: var(--r-control); background: var(--carta); cursor: pointer; }
.panel-opcion > span { display: grid; gap: .125rem; font-size: .9375rem; }
.panel-opcion > span b { font-weight: 600; }
.panel-opcion small { color: var(--suave); font-size: .8125rem; }
.panel-opcion > i { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--suave); }
input:checked + .panel-opcion { border-color: var(--tinta); background: color-mix(in srgb, var(--tinta) 10%, var(--carta)); }
input:checked + .panel-opcion > span b { font-weight: 800; }
input:checked + .panel-opcion > i { box-shadow: inset 0 0 0 6px var(--tinta); }
input:focus-visible + .panel-opcion { outline: 3px solid var(--tinta); outline-offset: 2px; }
.panel-ayuda { color: var(--suave); font-size: .9375rem; }
.panel-seccion-t { font-size: 1rem; font-weight: 800; margin: 1.5rem 0 .5rem; }
.panel-pedidos { max-width: 34rem; }
.panel-chip-estado { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; font-weight: 700; padding: .125rem .5rem; border-radius: 6px; border: 1.5px solid var(--regla-fuerte); color: var(--texto); white-space: nowrap; }
.panel-chip-estado-aprobada { border-color: var(--tinta); color: var(--tinta); }
.panel-chip-estado-rechazada { color: var(--suave); }
.panel-pedidos-lista { display: grid; gap: 1rem; max-width: 40rem; }
.panel-pedido { background: var(--carta); border: 1px solid var(--regla); border-radius: var(--r-tarjeta); padding: 1rem; display: grid; gap: .375rem; }
.panel-pedido-cab { display: flex; align-items: center; gap: .625rem; color: var(--suave); font-size: .9375rem; }
.panel-pedido-cab b { color: var(--texto); }
.panel-pedido-t { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.panel-pedido-datos { color: var(--suave); font-size: .9375rem; }
.panel-pedido-datos b { color: var(--texto); font-weight: 600; }
.panel-pedido-botones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.panel-pedido-botones .panel-btn { flex: 1 1 10rem; padding: 0 1rem; }
.panel-pedido-panel { display: grid; gap: 1rem; margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--regla); }
.panel-pedidos-resueltos { max-width: 40rem; margin-top: 1.5rem; }
.panel-pedidos-resueltos summary { min-height: 2.75rem; display: flex; align-items: center; font-weight: 800; cursor: pointer; }
.panel-aviso-pedidos { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; justify-content: space-between; background: var(--carta); border: 2px solid var(--tinta); border-radius: var(--r-tarjeta); padding: .75rem 1rem; margin-bottom: 1rem; }
.panel-aviso-pedidos > span { display: flex; align-items: center; gap: .5rem; font-weight: 800; }
.panel-aviso-pedidos .panel-btn { padding: 0 1rem; }
/* Renglones sin hora (pedidos de invitación): sin la columna de hora. */
.panel-renglon.panel-renglon-sin-hora { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "p a"; padding-left: .875rem; }
@media (max-width: 439.98px) { .panel-renglon.panel-renglon-sin-hora { grid-template-areas: "p" "a"; grid-template-columns: minmax(0, 1fr); } }
:root[data-letra="grande"] .panel-renglon.panel-renglon-sin-hora { grid-template-areas: "p" "a"; grid-template-columns: minmax(0, 1fr); }
.panel-advertencia { display: flex; align-items: flex-start; gap: .5rem; padding: .5rem .75rem; border-radius: 10px; background: var(--atraso-fondo, #FBE9E7); color: var(--texto); font-size: .9375rem; font-weight: 600; }
.panel-advertencia .panel-i-s { color: var(--atraso); flex: none; margin-top: .15rem; }

/* ===== Logo Famy animado (ingreso, bienvenida y portada de la app instalada; docs/marca/famy-animacion.html) =====
   Medidas de la referencia (palabra de 96 px) pasadas a em: 1em = tamaño de la palabra. */
.fi-simple-header .fi-logo:has(.famy-logo) { height: auto !important; margin-bottom: 1rem; }
.famy-logo { --famy-fondo: var(--carta); --famy-tinta: #3B3A9C; --famy-palabra: #3B3A9C;
  --famy-d1: #4B5260; --famy-d2: #B8255F; --famy-d3: #2F6FC9; --famy-d4: #2A7F42; --famy-d5: #D9A400;
  font-size: 3.5rem; display: flex; align-items: center; cursor: default; -webkit-tap-highlight-color: transparent; user-select: none; }
@media (min-width: 640px) { .famy-logo { font-size: 4rem; } }
.dark .famy-logo { --famy-tinta: #A9A8FF; --famy-palabra: #ECECF6;
  --famy-d1: #C9CCD6; --famy-d2: #F27BA8; --famy-d3: #8DBBF2; --famy-d4: #7FD8A8; --famy-d5: #FFD25C; }
.famy-simbolo { position: relative; z-index: 2; display: flex; }
.famy-simbolo svg { width: 1.5625em; height: 1.47em; display: block; overflow: visible; }
.famy-d1 { fill: var(--famy-d1); } .famy-d2 { fill: var(--famy-d2); } .famy-d3 { fill: var(--famy-d3); } .famy-d4 { fill: var(--famy-d4); } .famy-d5 { fill: var(--famy-d5); }
.famy-sello { stroke: var(--famy-tinta); }
.famy-disco { fill: var(--famy-fondo); }
.famy-caja { position: relative; z-index: 1; overflow: hidden; margin-left: -.78em; padding: .354em .083em .06em .958em; }
.famy-palabra { display: inline-block; font: 800 1em/1 'Bricolage Grotesque', 'Atkinson Hyperlegible Next', system-ui, sans-serif; letter-spacing: -.035em; color: var(--famy-palabra); }
.famy-d, .famy-sello, .famy-visto, .famy-palabra { animation-fill-mode: both; }
.famy-d { transform-box: fill-box; transform-origin: center; animation: famy-pop .38s cubic-bezier(.34,1.56,.64,1); }
.famy-d2 { animation-delay: .07s; } .famy-d3 { animation-delay: .14s; } .famy-d4 { animation-delay: .21s; } .famy-d5 { animation-delay: .28s; }
.famy-sello { transform-box: fill-box; transform-origin: center; animation: famy-sello .45s cubic-bezier(.34,1.4,.64,1) .35s both; }
.famy-visto { stroke-dasharray: 48; animation: famy-visto .3s ease-out .78s both; }
.famy-palabra { animation: famy-sale .65s cubic-bezier(.16,1,.3,1) 1.02s both; }
@keyframes famy-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes famy-sello { from { transform: scale(1.4) rotate(-12deg); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes famy-visto { from { stroke-dashoffset: 48; } to { stroke-dashoffset: 0; } }
@keyframes famy-sale { from { transform: translateX(calc(-100% - .94em)); } to { transform: translateX(0); } }
.famy-quieto .famy-d, .famy-quieto .famy-sello, .famy-quieto .famy-visto, .famy-quieto .famy-palabra { animation: none; }
@media (prefers-reduced-motion: reduce) { .famy-d, .famy-sello, .famy-visto, .famy-palabra { animation: none !important; } }

/* Portada de la app instalada: primera apertura del día (y la primera después de instalar). Un toque la cierra. */
.famy-portada { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--carta);
  transition: opacity .3s ease-out, visibility 0s linear .3s; }
.famy-portada .famy-logo { font-size: 4rem; }
.famy-portada[hidden] { display: none; }
.famy-portada.famy-fuera { opacity: 0; visibility: hidden; }

/* Número de pedidos por revisar sobre «Familia» en la barra del celular (etapa 8). Con texto oculto para lectores. */
.panel-barra-icono { position: relative; display: inline-flex; }
.panel-barra-globo { position: absolute; top: -.375rem; right: -.625rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3125rem; border-radius: 999px;
  display: grid; place-items: center; background: var(--p-relleno); color: var(--p-sobre); font: 800 .6875rem/1 var(--font-family);
  box-shadow: 0 0 0 2px var(--carta); font-variant-numeric: tabular-nums; }
.dark .panel-barra-globo { background: var(--p-clara); color: #14152B; }
.panel-barra a[aria-current] .panel-barra-icono > svg { background: color-mix(in srgb, var(--p-relleno) 18%, transparent); border-radius: 999px; padding: .1875rem .875rem; width: 3.25rem; height: 1.875rem; box-sizing: border-box; }
/* Critique etapa 8: con Familia activa, el texto activo de la barra teñía también el número (2,2:1). */
.panel-barra a .panel-barra-globo, .panel-barra a[aria-current] .panel-barra-globo { color: var(--p-sobre); background: var(--p-relleno); }
.dark .panel-barra a .panel-barra-globo, .dark .panel-barra a[aria-current] .panel-barra-globo { color: #14152B; background: var(--p-clara); }
/* En el celular el estado vacío no gasta una columna en la casilla, y el botón de cada paso ocupa el ancho. */
@media (max-width: 30rem) {
  .panel-vacio { grid-template-columns: 1fr; }
  .panel-vacio > .panel-casilla { display: none; }
  .panel-arranque-paso .panel-btn { flex: 1 1 100%; justify-content: center; min-height: 2.75rem; }
}
/* «Crear aquí» con objetivo táctil de 44 px. */
.panel-grupo-vacio .panel-enlace { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: .25rem; }

/* ===== E02 · 1B: ausencias, «Por aprobar», pozo y días de la semana ===== */
/* Timbre en hueco: la persona fuera es una casilla vacía con sus iniciales (borde discontinuo, sin girar, nunca solo color). */
.panel-timbre-hueco { display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .375rem; border: 2.5px dashed var(--t, var(--tinta)); border-radius: 8px;
  color: color-mix(in srgb, var(--t, var(--tinta)) 78%, #000); font-family: var(--font-family-mono); font-weight: 800; font-size: .8125rem; letter-spacing: .02em; background: transparent; }
.dark .panel-timbre-hueco { color: var(--tc, var(--tinta)); border-color: var(--tc, var(--tinta)); }
.panel-timbre-hueco-atenuado { opacity: .55; }
.panel-fuera { display: grid; gap: .25rem; }
.panel-renglon-titulo-fijo { font-weight: 800; }
/* Renglón «Por aprobar» bajo Ahora, y el atajo suave «Avisar que me voy a ausentar». */
.panel-por-aprobar { display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; padding: .5rem .875rem; border: 2px solid var(--tinta); border-radius: var(--r-tarjeta); background: var(--carta); color: var(--texto); text-decoration: none; }
.panel-por-aprobar > span { display: grid; flex: 1; gap: .125rem; }
.panel-por-aprobar b { font-weight: 800; }
.panel-por-aprobar small { color: var(--suave); font-size: .8125rem; }
.panel-por-aprobar .panel-flecha-der { transform: rotate(90deg); flex: none; }
.panel-por-aprobar-suave { border-color: var(--regla-fuerte); border-style: dashed; }
.panel-por-aprobar:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
/* Pestañas de «Por aprobar». */
.panel-pestanas { display: flex; gap: .5rem; margin-bottom: 1rem; }
.panel-pestana-boton { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1rem; border: 2px solid var(--regla-fuerte); border-radius: 999px; background: var(--carta); font-weight: 700; color: var(--texto); }
.panel-pestana-boton[aria-selected="true"] { border-color: var(--tinta); background: color-mix(in srgb, var(--tinta) 10%, var(--carta)); font-weight: 800; }
.panel-globo { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 .375rem; border-radius: 999px; background: var(--tinta); color: var(--sobre-tinta); font-size: .75rem; font-weight: 800; }
/* Formulario de ausencia. */
.panel-fila-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.panel-interruptor { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; font-weight: 600; cursor: pointer; }
.panel-interruptor input { width: 1.5rem; height: 1.5rem; accent-color: var(--tinta); }
.panel-chips-eleccion { display: flex; flex-wrap: wrap; gap: .5rem; }
.panel-chip-eleccion { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 2px solid var(--regla-fuerte); border-radius: 999px; background: var(--carta); font-weight: 600; cursor: pointer; }
input:checked + .panel-chip-eleccion { border-color: var(--tinta); background: color-mix(in srgb, var(--tinta) 14%, var(--carta)); font-weight: 800; }
input:focus-visible + .panel-chip-eleccion { outline: 3px solid var(--tinta); outline-offset: 2px; }
.panel-renglones-previa .panel-renglon { min-height: 3rem; }
/* Atajos de días y los siete botones de dos letras (44 × 44 px). */
.panel-atajos-dias .fi-fo-radio { display: flex; flex-wrap: wrap; gap: .5rem; }
.panel-dias .fi-fo-checkbox-list-options { display: grid !important; grid-template-columns: repeat(7, minmax(2.75rem, 1fr)); gap: .375rem; max-width: 26rem; }
.panel-dias .fi-fo-checkbox-list-option { position: relative; margin: 0; }
.panel-dias .fi-fo-checkbox-list-option input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.panel-dias .fi-fo-checkbox-list-option label, .panel-dias .fi-fo-checkbox-list-option > div { display: grid; place-items: center; width: 100%; min-height: 2.75rem; margin: 0; padding: 0; border: 2px solid var(--regla-fuerte); border-radius: 10px; background: var(--carta); font-weight: 700; }
.panel-dias .fi-fo-checkbox-list-option:has(input:checked) label, .panel-dias .fi-fo-checkbox-list-option:has(input:checked) > div { border-color: var(--tinta); background: var(--tinta); color: var(--sobre-tinta); font-weight: 800; }
.panel-dias .fi-fo-checkbox-list-option:has(input:focus-visible) { outline: 3px solid var(--tinta); outline-offset: 2px; border-radius: 10px; }
/* El pozo: saldo en cifra tabular con su palabra, nunca solo signo ni color. */
.panel-pozo-frase { color: var(--suave); max-width: 38rem; }
.panel-pozo-saldo { display: grid; justify-items: end; line-height: 1.1; }
.panel-pozo-cifra { font-family: var(--font-family-mono); font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 800; }
.panel-pozo-palabra { font-size: .8125rem; font-weight: 700; color: var(--suave); }
.panel-pozo-fila.panel-pozo-atenuada { opacity: .6; }
.panel-pozo-pie { margin-top: 1rem; font-weight: 700; }
.panel-vista-previa .panel-seccion-t { margin-top: 0; }
/* Renglón con timbre en hueco a la izquierda (Fuera de casa, El pozo): tres columnas, también en celular. */
.panel-renglon.panel-renglon-hueco { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "h p a"; column-gap: .75rem; align-items: center; }
.panel-renglon-hueco > .panel-timbre-hueco { grid-area: h; }
@media (max-width: 439.98px) { .panel-renglon.panel-renglon-hueco { grid-template-areas: "h p a"; grid-template-columns: auto minmax(0, 1fr) auto; } }
:root[data-letra="grande"] .panel-renglon.panel-renglon-hueco { grid-template-areas: "h p" "h a"; grid-template-columns: auto minmax(0, 1fr); }
.panel-pozo-detalle { list-style: none; padding: 0 .5rem; }