/* Fold · HOJAS «EN CALMA»: AGENDA Y CUENTA (06/10/2026, PC-C). Las reglas, las de la pantalla principal
   (docs/context/interfaz-calma.md): una sola jerarquía, visual antes que textual, las mismas variables, botones y
   escala que calma.css; sin versalitas espaciadas, sin candados repartidos (lo que el plan no trae se ve en la pantalla
   del plan), sin scroll dentro de scroll, :active y foco en todo, AA en claro y oscuro, y en 500 px con el pulgar.
   Componentes nuevos con el prefijo hc-. Lo que retoca clases ya existentes va siempre dentro de #overlay-agenda o
   #overlay-cuenta: ninguna otra pantalla cambia. La pintan agenda.js (Agenda), hojas-agenda-cuenta.js (las secciones de
   Cuenta y las tablas que en el móvil son fichas) y app.js (Cuenta › Seguridad: el interruptor de los dos pasos). */

/* ==================================================================== 0 · PIEZAS COMUNES (botones, títulos, notas) */
:root {
  --hc-ico-atras: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6l-6 6 6 6'/%3E%3C/svg%3E");
  --hc-ico-mas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --hc-ico-plan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E");
  --hc-ico-acceso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.5c0 4.2-2.9 7.9-7 9.5-4.1-1.6-7-5.3-7-9.5V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  --hc-ico-equipo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3.2'/%3E%3Cpath d='M3.5 19c.6-3.2 2.8-5 5.5-5s4.9 1.8 5.5 5'/%3E%3Ccircle cx='16.5' cy='9.5' r='2.5'/%3E%3Cpath d='M16.5 14c2.2 0 3.7 1.4 4.2 4'/%3E%3C/svg%3E");
  --hc-ico-datos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5a2 2 0 0 1 2-2h4l2 2.2h7a2 2 0 0 1 2 2V17a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}
.hc-titulo { margin: 0; font-size: .95rem; font-weight: 650; line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--papel); }
.hc-nota { margin: 0; font-size: var(--calma-t-menor, .86rem); line-height: 1.5; color: var(--papel-apagado); }
.hc-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
form .hc-acciones .hc-boton { min-height: 44px; }
/* Secundario: borde fino (como .tf-boton y .enlace-discreto, sin la sombra). */
.hc-boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--calma-alto, 40px); padding: 0 14px; font: inherit; font-size: var(--calma-t-menor, .86rem); font-weight: 600; color: var(--papel); background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); cursor: pointer; text-decoration: none; white-space: nowrap; }
.hc-boton:hover { background: var(--superficie-hover); border-color: var(--papel-tenue); }
.hc-boton[aria-disabled="true"] { color: var(--papel-tenue); background: transparent; border-color: var(--costura); cursor: default; }
/* De texto (como .calma-texto). */
.hc-texto, .hc-accion { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px; font: inherit; font-size: var(--calma-t-menor, .86rem); font-weight: 600; color: var(--cobalto-claro); background: transparent; border: 0; border-radius: 6px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.hc-texto:hover, .hc-accion:hover { background: var(--cobalto-tenue); }
.hc-icono { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--calma-alto, 40px); height: var(--calma-alto, 40px); padding: 0; color: var(--papel); background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); cursor: pointer; }
.hc-icono:hover { background: var(--superficie-hover); border-color: var(--papel-tenue); }
.hc-icono::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--hc-ico-atras) center / contain no-repeat; mask: var(--hc-ico-atras) center / contain no-repeat; }
.hc-icono-adelante::before { transform: scaleX(-1); }
/* Interruptor de dos posiciones (role="switch"): pista con bola; encendido en cobalto. */
.hc-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--carril); border: 1px solid var(--costura); border-radius: 12px; }
.hc-seg > button { min-height: 34px; padding: 0 14px; font: inherit; font-size: var(--calma-t-menor, .86rem); font-weight: 550; color: var(--papel-apagado); background: transparent; border: 0; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.hc-seg > button:hover { color: var(--papel); }
.hc-seg > button[aria-pressed="true"] { color: var(--papel); font-weight: 650; background: var(--pastilla); box-shadow: var(--sombra-1); }
.hc-boton:active, .hc-texto:active, .hc-accion:active, .hc-icono:active, .hc-seg > button:active, .hc-seccion:active, .hc-ag-d:active, .hc-interruptor:active:not(:disabled) { transform: scale(.97); }
.hc-boton[aria-disabled="true"]:active { transform: none; }
.hc-boton:focus-visible, .hc-texto:focus-visible, .hc-accion:focus-visible, .hc-icono:focus-visible, .hc-seg > button:focus-visible, .hc-seccion:focus-visible, .hc-ag-d:focus-visible, .hc-interruptor:focus-visible { outline: 2px solid var(--cobalto-claro); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hc-boton:active, .hc-texto:active, .hc-accion:active, .hc-icono:active, .hc-seg > button:active, .hc-seccion:active, .hc-ag-d:active, .hc-interruptor:active { transform: none; } }

/* Los campos de las dos hojas: blancos (o del color de la tarjeta en oscuro), no del gris de un campo desactivado. */
#overlay-agenda input[type="text"], #overlay-agenda input[type="date"], #overlay-agenda input[type="time"], #overlay-agenda select,
#overlay-cuenta .cuerpo-overlay input[type="text"], #overlay-cuenta .cuerpo-overlay input[type="email"], #overlay-cuenta .cuerpo-overlay input[type="password"],
#overlay-cuenta .cuerpo-overlay input[type="url"], #overlay-cuenta .cuerpo-overlay input[type="number"], #overlay-cuenta .cuerpo-overlay select, #overlay-cuenta .cuerpo-overlay textarea {
  font: inherit; font-size: .95rem; color: var(--papel); background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); box-shadow: none;
}
#overlay-agenda input[type="text"], #overlay-agenda input[type="date"], #overlay-agenda input[type="time"], #overlay-agenda select,
#overlay-cuenta .cuerpo-overlay input[type="text"], #overlay-cuenta .cuerpo-overlay input[type="email"], #overlay-cuenta .cuerpo-overlay input[type="password"],
#overlay-cuenta .cuerpo-overlay input[type="url"], #overlay-cuenta .cuerpo-overlay select { height: 44px; min-height: 44px; padding: 0 12px; }
/* Elegir un archivo: el botón del navegador, como un botón secundario de la hoja (y de 44 px). */
#overlay-cuenta .cuerpo-overlay input[type="file"] { max-width: 100%; font: inherit; font-size: var(--calma-t-menor, .86rem); color: var(--papel-apagado); }
#overlay-cuenta .cuerpo-overlay input[type="file"]::file-selector-button { min-height: 44px; margin-right: 12px; padding: 0 14px; font: inherit; font-weight: 600; color: var(--papel); background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); cursor: pointer; }
#overlay-cuenta .cuerpo-overlay input[type="file"]::file-selector-button:hover { border-color: var(--papel-tenue); }
#overlay-agenda input::placeholder, #overlay-cuenta .cuerpo-overlay input::placeholder, #overlay-cuenta .cuerpo-overlay textarea::placeholder { color: var(--papel-tenue); opacity: 1; }

/* Lo que el plan no trae, en calma y sin candado (el «Ver planes» pasa a botón de texto: fondo transparente y texto cobalto,
   AA sobre la hoja; por eso aquí no lleva la pareja «.primera» en blanco que pide A15e para los botones azules): una nota con su enlace a la pantalla del plan (el único sitio
   donde se compara, Cuenta › Plan o «Tu Fold › Ver lo que incluye»). */
#overlay-agenda .bloqueo-plan, #overlay-cuenta .cuerpo-overlay:not(#vista-plan) .bloqueo-plan {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 12px 14px; background: var(--superficie); border: 1px solid var(--costura); border-left: 3px solid var(--cobalto-claro); border-radius: var(--r-control);
}
#overlay-agenda .bloqueo-plan .bloqueo-texto, #overlay-cuenta .cuerpo-overlay:not(#vista-plan) .bloqueo-plan .bloqueo-texto { flex: 1 1 240px; margin: 0; font-size: .9rem; color: var(--papel); }
#overlay-agenda .candado, #overlay-cuenta .cuerpo-overlay:not(#vista-plan) .candado { display: none; }
#overlay-agenda .bloqueo-plan .opciones, #overlay-cuenta .cuerpo-overlay:not(#vista-plan) .bloqueo-plan .opciones { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
#overlay-agenda .bloqueo-plan .opciones > button, #overlay-cuenta .cuerpo-overlay:not(#vista-plan) .bloqueo-plan .opciones > button {
  min-height: 36px; padding: 0 8px; font: inherit; font-size: var(--calma-t-menor, .86rem); font-weight: 600; color: var(--cobalto-claro); background: transparent; border: 0; border-radius: 6px; box-shadow: none; cursor: pointer;
}
#overlay-agenda .bloqueo-plan .opciones > button:hover, #overlay-cuenta .cuerpo-overlay:not(#vista-plan) .bloqueo-plan .opciones > button:hover { background: var(--cobalto-tenue); }

/* ==================================================================== 1 · AGENDA
   Arriba: de quién y cómo verla; el rango con ‹ › y «Hoy». Debajo, la semana de un vistazo (siete días, hoy marcado,
   un punto por cita) y la lista. Abajo del todo y siempre a mano, «Nueva cita» (el único botón principal). */
@media (min-width: 861px) { #overlay-agenda .hoja-overlay { width: min(720px, 100vw); } }
#overlay-agenda #agenda-cuerpo { display: flex; flex-direction: column; gap: 16px; padding: 18px 24px 0; }
#overlay-agenda #agenda-cuerpo > * { flex: none; min-width: 0; }
.hc-ag-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.hc-ag-nav { display: flex; align-items: center; gap: 6px; }
.hc-ag-rango { flex: 1 1 auto; min-width: 0; margin: 0 6px 0 0; font-size: 1.2rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--papel); font-variation-settings: 'wdth' 104; }
.hc-ag-hoy { margin-right: 2px; }
/* La semana de un vistazo */
.hc-ag-semana { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.hc-ag-semana > li { min-width: 0; }
.hc-ag-d { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; width: 100%; min-height: 84px; padding: 9px 2px 8px; font: inherit; color: var(--papel); background: var(--superficie); border: 1px solid var(--costura); border-radius: var(--r-panel); cursor: pointer; transition: background-color .16s, border-color .16s; }
.hc-ag-d:hover { background: var(--superficie-hover); border-color: var(--costura-fuerte); }
.hc-ag-d-nombre { font-size: .78rem; font-weight: 550; line-height: 1.2; color: var(--papel-apagado); }
.hc-ag-d-num { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 4px; font-size: 1.05rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; border-radius: 15px; }
.hc-ag-d-marcas { display: flex; justify-content: center; gap: 3px; height: 6px; }
.hc-ag-d-marcas i { width: 6px; height: 6px; border-radius: 50%; background: var(--cobalto); }
.hc-ag-d-marcas i.hc-pasada { background: var(--papel-tenue); }
.hc-ag-d-cuantas { min-height: 1em; font-size: .72rem; line-height: 1.2; color: var(--papel-apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hc-ag-d.hc-antes .hc-ag-d-nombre, .hc-ag-d.hc-antes .hc-ag-d-num { color: var(--papel-tenue); }
.hc-ag-d.hc-hoy { border-color: var(--cobalto-claro); }
.hc-ag-d.hc-hoy .hc-ag-d-nombre { color: var(--cobalto-claro); font-weight: 700; }
.hc-ag-d.hc-hoy .hc-ag-d-num { color: #fff; background: var(--cobalto); }
.hc-ag-d.hc-elegido { background: var(--cobalto-tenue); border-color: var(--cobalto-claro); box-shadow: inset 0 0 0 1px var(--cobalto-claro); }
/* El formulario de apuntar */
.hc-ag-form { display: grid; gap: 12px; padding: 16px; background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: var(--r-panel); box-shadow: var(--sombra-2); }
#overlay-agenda .hc-ag-form input[type="text"], #overlay-agenda .hc-ag-form input[type="date"], #overlay-agenda .hc-ag-form input[type="time"], #overlay-agenda .hc-ag-form select { background: var(--grafito-alto); }
#overlay-agenda .agenda-form label { display: grid; gap: 5px; font-size: var(--calma-t-menor, .86rem); font-weight: 550; color: var(--papel-apagado); }
#overlay-agenda .agenda-form .pulsador, #overlay-agenda .agenda-enlace .pulsador { justify-self: start; min-width: 0; height: 44px; padding: 0 22px; border-radius: var(--r-control); box-shadow: none; }
#overlay-agenda .aviso-error:empty { display: none; }
/* Los días y sus citas */
#overlay-agenda .agenda-dias { display: grid; gap: 22px; }
.hc-ag-dia-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--costura); }
.hc-ag-dia-cab h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .95rem; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--papel); }
#overlay-agenda .agenda-dia.agenda-hoy h3 { color: var(--papel); }
#overlay-agenda .agenda-dia.agenda-hoy h3::before { content: none; }
.hc-marca-hoy { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; font-size: .74rem; font-weight: 700; color: #fff; background: var(--cobalto); border-radius: 10px; }
.hc-ag-mas::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--hc-ico-mas) center / contain no-repeat; mask: var(--hc-ico-mas) center / contain no-repeat; }
.hc-ag-nada { padding: 2px 0 0; }
#overlay-agenda .agenda-citas { gap: 8px; }
#overlay-agenda .hc-cita { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 12px 14px 10px 12px; background: var(--superficie); border: 1px solid var(--costura); border-left: 3px solid var(--cobalto); border-radius: var(--r-control); box-shadow: none; transition: none; }
#overlay-agenda .hc-cita:hover { transform: none; box-shadow: none; border-color: var(--costura-fuerte); border-left-color: var(--cobalto); }
#overlay-agenda .hc-cita.hc-pasada, #overlay-agenda .hc-cita.hc-pasada:hover { border-left-color: var(--papel-tenue); }
#overlay-agenda .hc-cita.hc-cita-no_presentado, #overlay-agenda .hc-cita.hc-cita-no_presentado:hover { border-left-color: var(--ambar); }
#overlay-agenda .hc-cita.hc-cita-asistio, #overlay-agenda .hc-cita.hc-cita-asistio:hover { border-left-color: var(--calma-bien, var(--vis-verde)); }
#overlay-agenda .hc-cita.hc-cita-cancelada, #overlay-agenda .hc-cita.hc-cita-cancelada:hover { border-left-color: var(--costura-fuerte); background: transparent; }
.hc-cita-hora { display: flex; flex-direction: column; gap: 1px; padding-top: 1px; }
#overlay-agenda .hc-cita .agenda-hora { padding: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--papel); background: transparent; border-radius: 0; font-variant-numeric: tabular-nums; }
.hc-cita-fin { font-size: .8rem; line-height: 1.3; color: var(--papel-tenue); font-variant-numeric: tabular-nums; }
.hc-cita-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#overlay-agenda .hc-cita .agenda-que { font-size: 1rem; line-height: 1.4; color: var(--papel); overflow-wrap: anywhere; }
#overlay-agenda .hc-cita .agenda-que strong { font-weight: 650; }
#overlay-agenda .hc-cita.hc-pasada .agenda-que strong { color: var(--papel-apagado); }
#overlay-agenda .hc-cita.hc-cita-cancelada .agenda-que strong { color: var(--papel-tenue); text-decoration: line-through; }
.hc-cita-quien { display: block; font-size: .8rem; font-weight: 600; color: var(--papel-apagado); }
.hc-cita-meta { font-size: var(--calma-t-menor, .86rem); line-height: 1.45; color: var(--papel-apagado); overflow-wrap: anywhere; }
.hc-estado { display: inline-flex; align-items: center; height: 20px; margin-left: 8px; padding: 0 8px; font-size: .74rem; font-weight: 650; line-height: 1; color: var(--papel-apagado); background: var(--grafito-panel); border-radius: 10px; vertical-align: 2px; white-space: nowrap; }
.hc-estado-no_presentado { color: var(--ambar-texto); background: var(--ambar-tenue); }
.hc-estado-asistio { color: var(--calma-bien, var(--vis-verde)); background: color-mix(in srgb, var(--calma-bien, var(--vis-verde)) 13%, transparent); }
#overlay-agenda .hc-cita .agenda-acciones { grid-column: auto; display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 4px 0 0 -8px; padding: 0; }
.hc-ag-mover { display: grid; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--costura); }
/* Vacío, equipo y lo de abajo */
.hc-vacio { display: grid; gap: 6px; justify-items: center; padding: 28px 18px; text-align: center; border: 1px dashed var(--costura-fuerte); border-radius: var(--r-panel); }
.hc-vacio-titulo { margin: 0; font-size: 1rem; font-weight: 650; color: var(--papel); }
.hc-vacio .hc-nota { max-width: 52ch; }
.hc-ag-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.hc-ag-filtro label { font-size: var(--calma-t-menor, .86rem); font-weight: 600; color: var(--papel-apagado); }
#overlay-agenda .hc-ag-filtro select { flex: 1 1 200px; max-width: 320px; }
.hc-ag-extra { display: grid; gap: 22px; margin-top: 4px; padding-top: 20px; border-top: 1px solid var(--costura); }
.hc-ag-seccion { display: grid; gap: 8px; justify-items: start; }
.hc-ag-seccion .hc-nota { max-width: 64ch; }
.hc-lista { margin: 0; padding-left: 18px; font-size: var(--calma-t-menor, .86rem); line-height: 1.5; color: var(--papel); }
.hc-enlace { color: var(--cobalto-claro); font-weight: 600; }
.hc-ag-chat { font-size: var(--calma-t-nota, .78rem); color: var(--papel-tenue); }
#overlay-agenda .agenda-enlace { width: 100%; }
/* «Nueva cita»: pegada abajo de la hoja, a mano del pulgar; la lista pasa por debajo. */
.hc-ag-pie { position: sticky; bottom: 0; z-index: 2; margin: auto -24px 0; padding: 12px 24px calc(14px + env(safe-area-inset-bottom)); background: var(--hoja); border-top: 1px solid var(--costura); }
.hc-ag-pie .pulsador { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: var(--r-control); box-shadow: none; }
.hc-ag-pie .pulsador::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--hc-ico-mas) center / contain no-repeat; mask: var(--hc-ico-mas) center / contain no-repeat; }
#overlay-agenda #agenda-cuerpo > :last-child:not(.hc-ag-pie) { margin-bottom: 20px; }
@media (max-width: 640px) {
  #overlay-agenda #agenda-cuerpo { padding: 14px 16px 0; gap: 14px; }
  .hc-ag-pie { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .hc-ag-pie .pulsador { width: 100%; }
  .hc-ag-barra .hc-seg { flex: 1 1 auto; }
  .hc-ag-barra .hc-seg > button { flex: 1 1 0; }
  .hc-ag-rango { font-size: 1.08rem; }
  .hc-ag-semana { gap: 4px; }
  .hc-ag-d { min-height: 68px; padding: 8px 0 7px; border-radius: var(--r-control); }
  .hc-ag-d-cuantas { display: none; }
  #overlay-agenda .hc-cita { grid-template-columns: 50px minmax(0, 1fr); gap: 0 10px; }
  .hc-seg > button, .hc-boton, .hc-texto, .hc-accion { min-height: 44px; }
  .hc-icono { width: 44px; height: 44px; }
}

/* ==================================================================== 2 · CUENTA: CUATRO SECCIONES
   En ancho, una columna con las cuatro secciones a la izquierda y el contenido a la derecha. En estrecho, las cuatro
   secciones arriba (icono y nombre, a mano del pulgar) y, debajo, las pestañas de la sección. */
.hc-secciones { display: flex; gap: 4px; flex: none; }
.hc-seccion { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 0 12px; font: inherit; font-size: .92rem; font-weight: 550; text-align: left; color: var(--papel-apagado); background: transparent; border: 0; border-radius: var(--r-control); cursor: pointer; }
.hc-seccion[hidden] { display: none; }
.hc-seccion:hover { color: var(--papel); background: var(--grafito-panel); }
.hc-seccion[aria-current="true"] { color: var(--papel); font-weight: 650; background: var(--pastilla); box-shadow: var(--sombra-1); }
.hc-seccion-ico { flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--hc-ico-plan) center / contain no-repeat; mask: var(--hc-ico-plan) center / contain no-repeat; }
.hc-seccion[aria-current="true"] .hc-seccion-ico { background: var(--cobalto-claro); }
.hc-ico-acceso { -webkit-mask-image: var(--hc-ico-acceso); mask-image: var(--hc-ico-acceso); }
.hc-ico-equipo { -webkit-mask-image: var(--hc-ico-equipo); mask-image: var(--hc-ico-equipo); }
.hc-ico-datos { -webkit-mask-image: var(--hc-ico-datos); mask-image: var(--hc-ico-datos); }
.hc-seccion-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Las pestañas de las otras secciones no se ven (y llevan aria-hidden: las flechas las saltan). */
#overlay-cuenta .pestanas-cuenta[data-hc-grupo="plan"] > [role="tab"]:not([data-hc-grupo="plan"]),
#overlay-cuenta .pestanas-cuenta[data-hc-grupo="acceso"] > [role="tab"]:not([data-hc-grupo="acceso"]),
#overlay-cuenta .pestanas-cuenta[data-hc-grupo="equipo"] > [role="tab"]:not([data-hc-grupo="equipo"]),
#overlay-cuenta .pestanas-cuenta[data-hc-grupo="datos"] > [role="tab"]:not([data-hc-grupo="datos"]) { display: none; }
/* (08/10/2026, repaso visual) «Tu licencia de Fold» (central/lib/licencia-al-instante-pantalla.js, se pone delante de las pestañas)
   es de la sección «Tu plan». Salía fija arriba en las cuatro secciones: en «Tus datos», al corregir las columnas de una hoja,
   se comía media ventana (y más de media a 500 px). Fuera de «Tu plan» no se enseña; no se quita ni se cambia. */
#overlay-cuenta #cuenta-licencia:has(~ .pestanas-cuenta[data-hc-grupo]:not([data-hc-grupo="plan"])) { display: none; }
#overlay-cuenta .pestanas-cuenta.hc-una { display: none; }
#overlay-cuenta .pestanas-cuenta { align-self: flex-start; max-width: calc(100% - 40px); }
/* El contenido de cada pestaña: una ficha con rayas finas, no una pila de cajas. */
#overlay-cuenta .hoja-overlay > .cuerpo-overlay { padding: 18px 24px 28px; gap: 20px; }
#overlay-cuenta .cuerpo-overlay .mejora-meta { margin: 0 0 8px; font-size: .8rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--papel-tenue); }
#overlay-cuenta .cuerpo-overlay .titulo-seccion { margin: 6px 0 0; padding-top: 20px; font-size: .95rem; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--papel); border-top: 1px solid var(--costura); }
#overlay-cuenta .etiqueta-pronto, #overlay-cuenta .etiqueta-actual, #overlay-cuenta .etiqueta-destacado { letter-spacing: 0; text-transform: none; font-size: .74rem; }
#overlay-cuenta .cuerpo-overlay .letra-pequena-clara { line-height: 1.5; }
#overlay-cuenta .cuerpo-overlay .uso-bloque { padding: 16px 18px; border-color: var(--costura); box-shadow: none; }
#overlay-cuenta .uso-bloque .uso-bloque, #overlay-cuenta .uso-bloque .plan-fila { box-shadow: none; }
#overlay-cuenta .cuerpo-overlay .factura-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--costura); font-size: .92rem; line-height: 1.45; color: var(--papel); }
#overlay-cuenta .cuerpo-overlay .factura-fila > span:first-child { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
#overlay-cuenta .cuerpo-overlay .factura-fila button { min-height: 36px; padding: 0 12px; font: inherit; font-size: var(--calma-t-menor, .86rem); font-weight: 600; color: var(--papel); background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); box-shadow: none; cursor: pointer; }
#overlay-cuenta .cuerpo-overlay .form-mejora { gap: 10px; }
#overlay-cuenta .cuerpo-overlay .form-mejora .pulsador, #overlay-cuenta .cuerpo-overlay .entrada-form .pulsador { justify-self: start; width: auto; min-width: 0; height: 44px; margin-top: 0; padding: 0 20px; border-radius: var(--r-control); box-shadow: none; }
#overlay-cuenta .cuerpo-overlay > .pulsador, #overlay-cuenta .cuerpo-overlay div > .pulsador { height: 44px; padding: 0 20px; border-radius: var(--r-control); box-shadow: none; }
/* Uno principal por zona: lo que no es la acción de la pantalla pasa a secundario (borde fino). */
#cerrar-otras-sesiones, #form-archivo .pulsador, #form-alta-excel .pulsador, #vista-equipo .pulsador:not(#form-invitar .pulsador):not(#elegir-quien-sigue), #metodo-poner-clave, #vista-oficiales .pulsador {
  color: var(--papel) !important; background: var(--superficie) !important; border: 1px solid var(--costura-fuerte) !important; box-shadow: none !important;
}
#cerrar-otras-sesiones:hover, #form-archivo .pulsador:hover, #form-alta-excel .pulsador:hover, #metodo-poner-clave:hover, #vista-oficiales .pulsador:hover { border-color: var(--papel-tenue) !important; background: var(--superficie-hover) !important; }
/* Darse de baja: una acción seria, con su color, nunca el botón azul de la pantalla. */
#baja-enviar, #bs-enviar { color: var(--calma-mal, var(--vis-rojo)) !important; background: transparent !important; border: 1px solid currentColor !important; box-shadow: none !important; }
/* Los avisos que eran cajas ámbar, en nota tranquila (en Seguridad y Mis datos solo informan). */
#overlay-cuenta .cuerpo-overlay .aviso-revisar { margin: 0; padding: 10px 12px 10px 14px; font-size: .88rem; line-height: 1.5; color: var(--papel); background: transparent; border: 0; border-left: 3px solid var(--ambar); border-radius: 0; }
/* Los formularios de «Formas de entrar» (entrada.js) vienen de la pantalla de entrada: aquí, a la escala de la hoja. */
#overlay-cuenta .cuerpo-overlay .entrada-form { display: grid; gap: 10px; }
#overlay-cuenta .cuerpo-overlay .entrada-campo { display: grid; gap: 5px; }
#overlay-cuenta .cuerpo-overlay .entrada-campo label { font-size: var(--calma-t-menor, .86rem); font-weight: 550; color: var(--papel-apagado); }
#overlay-cuenta .cuerpo-overlay .entrada-campo input { height: 44px; padding: 0 12px; font-size: .95rem; background: var(--superficie); border-radius: var(--r-control); }
#overlay-cuenta .cuerpo-overlay .metodo-boton { justify-content: flex-start; width: auto; height: 44px; padding: 0 16px; font-size: .9rem; background: var(--superficie); }
#overlay-cuenta .cuerpo-overlay .metodo-fila { min-height: 44px; }
/* Letra pequeña: en estas hojas, del color del texto secundario (estilos.css la pinta con la tinta del folio de papel, que en
   oscuro casi no se lee sobre la hoja). */
#overlay-cuenta .letra-pequena, #overlay-agenda .letra-pequena { font-size: .84rem; line-height: 1.5; color: var(--papel-apagado); }
/* Avisos del negocio (alertas.js): una lista con rayas finas, como el centro de avisos, no una pila de tarjetas. */
#overlay-cuenta .aviso-negocio { margin: 0; padding: 14px 0 14px 26px; background: transparent; border: 0; border-top: 1px solid var(--costura); border-radius: 0; box-shadow: none; }
#overlay-cuenta .aviso-negocio::before { left: 3px; top: 19px; }
/* Notificaciones: cada casilla con su texto al lado, en una fila que se pulsa entera. */
#vista-notificaciones label.entrada-campo:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: .95rem; color: var(--papel); cursor: pointer; }
#vista-notificaciones .aviso-negocio-texto { margin: 0; font-size: var(--calma-t-menor, .86rem); line-height: 1.5; color: var(--papel-apagado); }
/* Mis datos: las tarjetas de dentro de la tarjeta («De dónde lee Fold»), en filas con raya fina. */
#overlay-cuenta .cuerpo-overlay .fold-pantalla { box-shadow: none; }
#overlay-cuenta .nubes-caja { box-shadow: none; }
#overlay-cuenta .nubes-caja .nubes-carpeta, #overlay-cuenta .nubes-caja .nubes-proveedor { padding: 12px 0 2px; background: transparent; border: 0; border-top: 1px solid var(--costura); border-radius: 0; }
#overlay-cuenta .nubes-caja .nubes-carpeta.nubes-caida { padding-left: 12px; border-left: 3px solid var(--ambar); }

/* -------------------------------------------------------------------- Uso: las cifras primero */
#vista-uso .uso-fila-cab .cuenta { font-size: 1.3rem; }
#vista-uso > .uso-bloque:not(.vis-mapa-caja):not(:has(.uso-fila)) > p:not(.mejora-meta):not(.letra-pequena-clara) { margin: 0; font-size: 1.5rem; font-weight: 750; line-height: 1.2; letter-spacing: -0.01em; color: var(--papel); font-variant-numeric: tabular-nums; }
#vista-uso .uso-directas .letra-pequena-clara { margin-top: 6px; }
#vista-uso .plan-gratis-explica { font-size: .86rem; color: var(--papel-apagado); }
#vista-uso .plan-gratis-explica strong { color: var(--papel); }
@media (min-width: 900px) {
  #vista-uso:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  #vista-uso > * { grid-column: 1 / -1; min-width: 0; }
  #vista-uso > .uso-bloque:not(.vis-mapa-caja):not(:has(.uso-fila)) { grid-column: auto; }
}
/* El mapa de uso cabe entero en la hoja (sin barra de desplazamiento de lado dentro de la hoja). */
#overlay-cuenta .vis-mapa-scroll { overflow: visible; }
#overlay-cuenta .vis-mapa { min-width: 0; }
#overlay-cuenta .vis-mapa-caja { margin-top: 0; }
/* La tabla de lo ahorrado: la tarea a la izquierda, las cifras a la derecha. */
#overlay-cuenta .tabla-ahorro thead th:first-child { text-align: left; }
#overlay-cuenta .tabla-ahorro th, #overlay-cuenta .tabla-ahorro td { padding: 9px 8px; vertical-align: middle; }
#overlay-cuenta .tabla-ahorro .ahorro-min { width: 5em; height: 40px; padding: 0 8px; text-align: right; }

/* -------------------------------------------------------------------- Seguridad: los dos pasos como interruptor */
#vista-seguridad > .hc-2fa { order: 1; }
#vista-seguridad > #metodos-seguridad { order: 2; }
#vista-seguridad > .hc-sesiones { order: 3; }
#vista-seguridad > #metodos-seguridad, #vista-seguridad > .hc-sesiones { padding-top: 20px; border-top: 1px solid var(--costura); }
#vista-seguridad > #metodos-seguridad > .titulo-seccion:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.hc-2fa { display: grid; gap: 12px; padding: 16px 18px; background: var(--superficie); border: 1px solid var(--costura); border-radius: var(--r-panel); }
.hc-interruptor-fila { display: flex; align-items: flex-start; gap: 16px; }
.hc-interruptor-texto { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.hc-2fa-estado { margin: 0; font-size: var(--calma-t-menor, .86rem); font-weight: 600; color: var(--papel-apagado); }
.hc-2fa-estado.hc-encendida { color: var(--calma-bien, var(--vis-verde)); }
/* El botón mide 56 × 44 (lo que se pulsa); la pista (52 × 32) y la bola se dibujan dentro. */
.hc-interruptor { position: relative; flex: none; width: 56px; height: 44px; margin: -4px -2px 0 0; padding: 0; background: transparent; border: 0; border-radius: 22px; cursor: pointer; }
.hc-interruptor::before { content: ''; position: absolute; top: 6px; left: 2px; width: 52px; height: 32px; box-sizing: border-box; background: var(--grafito-panel); border: 1px solid var(--costura-fuerte); border-radius: 16px; transition: background-color .18s, border-color .18s; }
.hc-interruptor::after { content: ''; position: absolute; top: 10px; left: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--papel-apagado); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .18s cubic-bezier(.16, 1, .3, 1), background-color .18s; }
.hc-interruptor[aria-checked="true"]::before { background: var(--cobalto); border-color: var(--cobalto); }
.hc-interruptor[aria-checked="true"]::after { background: #fff; transform: translateX(20px); }
.hc-interruptor:disabled { opacity: .55; cursor: not-allowed; }
.hc-interruptor:active:not(:disabled)::after { width: 28px; }
.hc-interruptor[aria-checked="true"]:active:not(:disabled)::after { transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) { .hc-interruptor::before, .hc-interruptor::after { transition: none; } }
.hc-2fa-paso { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--costura); }
.hc-2fa-paso[hidden] { display: none; }
.hc-2fa .form-mejora .acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.hc-2fa .form-mejora .acciones button[hidden] { display: none; }
#dosfa-desactivar { min-height: 44px; padding: 0 16px; font: inherit; font-size: .9rem; font-weight: 600; color: var(--calma-mal, var(--vis-rojo)); background: transparent; border: 1px solid currentColor; border-radius: var(--r-control); cursor: pointer; }
.hc-2fa .secreto-totp { margin: 0; }
.hc-sesiones > .pulsador { margin-top: 12px; }

/* -------------------------------------------------------------------- Plan: la tabla de lo que trae cada plan cabe en la hoja
   (en ancho, columnas que se parten en vez de una barra de desplazamiento de lado; en el móvil, fichas). Es la ÚNICA
   pantalla donde se compara y donde quedan los candados. */
@media (min-width: 641px) {
  #vista-plan .tabla-escalera-caja { overflow-x: visible; }
  #vista-plan .tabla-escalera { min-width: 0; table-layout: fixed; font-size: .78rem; }
  #vista-plan .tabla-escalera thead th:first-child, #vista-plan .tabla-escalera tbody th { width: 30%; min-width: 0; }
  #vista-plan .tabla-escalera th, #vista-plan .tabla-escalera td { white-space: normal; overflow-wrap: anywhere; padding: 8px 5px; }
}
#vista-plan .selector-periodo .periodo, #vista-plan .canje-codigo summary { min-height: 40px; display: inline-flex; align-items: center; }

/* -------------------------------------------------------------------- Mis empresas */
#vista-empresas > p:not([class]) { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--papel-apagado); }
#vista-empresas > .aviso-uso { display: block; margin: 0; padding: 10px 12px 10px 14px; font-size: .88rem; color: var(--papel); background: transparent; border: 0; border-left: 3px solid var(--cobalto-claro); border-radius: 0; }
#vista-empresas h3 { margin: 6px 0 0; padding-top: 20px; font-size: .95rem; font-weight: 650; color: var(--papel); border-top: 1px solid var(--costura); }
#vista-empresas .lista-empresas { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--costura); }
#vista-empresas .lista-empresas + h3 { margin-top: 0; padding-top: 4px; border-top: 0; }
#vista-empresas .lista-empresas li { display: block; min-height: 44px; padding: 11px 0; font-size: .92rem; border-bottom: 1px solid var(--costura); }
#overlay-cuenta .enlace-boton { min-height: 36px; padding: 0 8px; font: inherit; font-size: var(--calma-t-menor, .86rem); font-weight: 600; color: var(--cobalto-claro); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
#overlay-cuenta .enlace-boton:hover { background: var(--cobalto-tenue); }
#overlay-cuenta .boton-secundario { justify-self: start; min-height: 44px; padding: 0 16px; font: inherit; font-size: .9rem; font-weight: 600; color: var(--papel); background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); cursor: pointer; }
#overlay-cuenta .boton-secundario:hover { border-color: var(--papel-tenue); }
#form-borrar-persona .boton-secundario { color: var(--calma-mal, var(--vis-rojo)); background: transparent; border-color: currentColor; }
#overlay-cuenta .enlace-boton:active, #overlay-cuenta .boton-secundario:active { transform: scale(.97); }
#overlay-cuenta .enlace-boton:focus-visible, #overlay-cuenta .boton-secundario:focus-visible { outline: 2px solid var(--cobalto-claro); outline-offset: 2px; }

/* -------------------------------------------------------------------- Datos oficiales e Inicio de sesión de empresa: a la escala de la hoja */
#vista-oficiales label { font-size: var(--calma-t-menor, .86rem); font-weight: 550; line-height: 1.45; color: var(--papel-apagado); }
#vista-acceso p:not([class]) { font-size: .95rem; line-height: 1.55; }

/* -------------------------------------------------------------------- Equipo: invitar en una línea */
@media (min-width: 640px) {
  #overlay-cuenta #form-invitar { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
  #overlay-cuenta #form-invitar select { width: auto; }
}
#overlay-cuenta .factura-fila.persona .acciones-persona { display: flex; flex-wrap: wrap; gap: 6px; }
#overlay-cuenta .cuerpo-overlay .factura-fila select { height: 36px; min-height: 36px; padding: 0 8px; font-size: .86rem; }

/* -------------------------------------------------------------------- Cuenta en ancho: secciones a la izquierda */
@media (min-width: 900px) {
  #overlay-cuenta .hoja-overlay.hc-cuenta { width: min(920px, 100vw); display: grid; grid-template-columns: 216px minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  #overlay-cuenta .hc-cuenta > .cabecera-overlay { grid-column: 1 / -1; grid-row: 1; }
  #overlay-cuenta .hc-cuenta > .hc-secciones { grid-column: 1; grid-row: 2 / 4; flex-direction: column; gap: 2px; padding: 16px 12px; border-right: 1px solid var(--costura); overflow-y: auto; }
  #overlay-cuenta .hc-cuenta > .pestanas-cuenta { grid-column: 2; grid-row: 2; margin: 16px 24px 0; }
  #overlay-cuenta .hc-cuenta > .cuerpo-overlay { grid-column: 2; grid-row: 3; }
}
/* Cuenta en estrecho: las cuatro secciones como una barra de iconos con nombre. */
@media (max-width: 899px) {
  .hc-secciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; margin: 10px 20px 0; padding: 3px; background: var(--carril); border: 1px solid var(--costura); border-radius: 12px; }
  .hc-seccion { flex-direction: column; justify-content: center; gap: 3px; min-height: 56px; padding: 6px 2px; font-size: .8rem; text-align: center; border-radius: 9px; }
  .hc-seccion-nombre { max-width: 100%; }
  #overlay-cuenta .pestanas-cuenta { margin-top: 10px; }
}
@media (max-width: 640px) {
  .hc-secciones { margin: 10px 12px 0; }
  #overlay-cuenta .hoja-overlay > .cuerpo-overlay { padding: 16px 16px 24px; }
  #overlay-cuenta .pestanas-cuenta { max-width: calc(100% - 24px); }
  #overlay-cuenta .pestana-cuenta { min-height: 44px; }
  #vista-plan .selector-periodo .periodo, #vista-plan .canje-codigo summary, #overlay-cuenta .enlace-boton { min-height: 44px; }
  #overlay-agenda .bloqueo-plan .opciones > button, #overlay-cuenta .cuerpo-overlay:not(#vista-plan) .bloqueo-plan .opciones > button { min-height: 44px; }
  #overlay-cuenta .cuerpo-overlay .factura-fila button, #overlay-cuenta .cuerpo-overlay .factura-fila select, #dosfa-desactivar, .hc-interruptor-fila .hc-texto { min-height: 44px; height: auto; }
  #overlay-cuenta .tabla-ahorro .ahorro-min { height: 44px; }
}

/* ==================================================================== 3 · TABLAS QUE EN EL MÓVIL SON FICHAS
   hojas-agenda-cuenta.js apunta en cada celda el título de su columna. En estrecho, cada fila es una ficha: el nombre
   arriba y debajo «columna: valor». Ni se comprimen ni se desplazan de lado. */
@media (max-width: 640px) {
  #overlay-cuenta .hc-tabla-caja, #overlay-agenda .hc-tabla-caja { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  #overlay-cuenta table.hc-fichas, #overlay-agenda table.hc-fichas { display: block; width: 100%; min-width: 0; }
  table.hc-fichas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.hc-fichas tbody { display: grid; gap: 0; border-top: 1px solid var(--costura); }
  table.hc-fichas tr { display: grid; gap: 4px; padding: 14px 0; background: transparent; border-bottom: 1px solid var(--costura); }
  #overlay-cuenta table.hc-fichas th, #overlay-cuenta table.hc-fichas td, #overlay-agenda table.hc-fichas th, #overlay-agenda table.hc-fichas td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; text-align: left; white-space: normal; border: 0; background: transparent; }
  #overlay-cuenta table.hc-fichas tbody th, #overlay-agenda table.hc-fichas tbody th { display: block; margin-bottom: 4px; font-size: .95rem; font-weight: 650; color: var(--papel); }
  #overlay-cuenta table.hc-fichas tbody th .letra-pequena-clara, #overlay-agenda table.hc-fichas tbody th .letra-pequena-clara { display: block; margin-top: 2px; font-size: var(--calma-t-menor, .86rem); font-weight: 400; color: var(--papel-apagado); }
  table.hc-fichas td[data-hc-col]::before { content: attr(data-hc-col); flex: 1 1 auto; font-size: var(--calma-t-menor, .86rem); font-weight: 500; color: var(--papel-apagado); text-align: left; }
  table.hc-fichas td { min-height: 32px; font-size: .95rem; color: var(--papel); }
}

/* TAREAS Y VENCIMIENTOS EN LA AGENDA (core-49, PC-C f22, 21/10/2026): distinguidos de las citas. La tarea, con su cuadro de «hecha»
   y un borde punteado (no ocupa un hueco como una cita); el vencimiento, en ámbar y sin botones (es de solo lectura). */
.hc-ag-d-marcas i.hc-m-extra { border-radius: 1px; background: var(--ambar-texto, var(--cobalto)); }
#overlay-agenda .hc-cita.hc-tarea { border-left-style: dashed; }
#overlay-agenda .hc-cita.hc-tarea-hecha .agenda-que strong { text-decoration: line-through; color: var(--papel-apagado); }
.hc-tarea-caja { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 8px; font-size: .75rem; line-height: 1; border: 1.5px solid var(--papel-apagado); border-radius: 4px; vertical-align: -2px; }
.hc-estado-hecha { color: var(--calma-bien, var(--vis-verde)); background: color-mix(in srgb, var(--calma-bien, var(--vis-verde)) 13%, transparent); }
#overlay-agenda .hc-cita.hc-venc { border-left-color: var(--ambar-texto, var(--cobalto)); }
.hc-venc-marca { font-size: .78rem; font-weight: 650; color: var(--ambar-texto, var(--papel-apagado)); }
.hc-ag-pie { display: flex; flex-wrap: wrap; gap: 8px; }
.hc-ag-pie .hc-ag-nueva-tarea { height: 46px; padding: 0 18px; }

/* ==================================================================== «CERRAR SESIÓN», ABAJO DEL TODO (auditoría visual #12, 28/10/2026)
   Iba en la cabecera, al lado de «Cerrar» y con el mismo aspecto: quien quería cerrar la hoja podía salir del programa.
   Ahora va en el pie de la hoja de Cuenta (cerrar-sesion.js), en texto, lejos de «Cerrar». En ancho, abajo a la izquierda. */
#overlay-cuenta .cuenta-pie-sesion { flex: none; display: flex; justify-content: flex-start; padding: 8px 20px calc(10px + env(safe-area-inset-bottom)); background: var(--hoja); border-top: 1px solid var(--costura); }
#overlay-cuenta .cuenta-pie-sesion .cerrar-sesion { min-height: 44px; padding: 0 6px; font-size: .88rem; font-weight: 550; color: var(--papel-apagado); background: transparent; border: 0; border-radius: var(--r-control); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#overlay-cuenta .cuenta-pie-sesion .cerrar-sesion:hover { color: var(--papel); background: transparent; }
#overlay-cuenta .cuenta-pie-sesion .cerrar-sesion:active { color: var(--papel); background: var(--grafito-panel); }
#overlay-cuenta .cuenta-pie-sesion .cerrar-sesion:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 2px; }
/* En estrecho la hoja es una columna que no se desplaza entera: con la licencia, la franja de un plan cortado y los primeros
   pasos encima, lo de abajo se salía de la pantalla y «Cerrar sesión» quedaba fuera (cuenta-cabecera-libre N3, 500 px). El pie va
   anclado abajo, por encima del panel, y el panel deja su hueco al final para que nada quede tapado al bajar. */
@media (max-width: 899px) {
  #overlay-cuenta .hoja-overlay > .cuenta-pie-sesion { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; }
  #overlay-cuenta .hoja-overlay:has(> .cuenta-pie-sesion) > .cuerpo-overlay { padding-bottom: 88px; }
}
/* En ancho la hoja es una rejilla de cuatro filas (avisos-centro.css, que se carga DESPUÉS: cabecera, pestañas, primeros pasos y
   panel; las secciones en la columna 1, filas 2 a 5). El pie va en una QUINTA fila propia, bajo las secciones, y el panel ocupa
   también esa fila a la derecha. Selectores con una clase más (.hoja-overlay.hc-cuenta) para mandar sobre esa hoja sin tocarla. */
@media (min-width: 900px) {
  #overlay-cuenta .hoja-overlay.hc-cuenta:has(> .cuenta-pie-sesion) { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
  #overlay-cuenta .hoja-overlay.hc-cuenta > .cuerpo-overlay { grid-row: 4 / 6; }
  #overlay-cuenta .hoja-overlay.hc-cuenta > .cuenta-pie-sesion { grid-column: 1; grid-row: 5; padding: 10px 18px 14px; border-right: 1px solid var(--costura); }
}

/* (auditoría visual #15, 28/10/2026) «Tu licencia de Fold» con «Comprobar ahora» es de quien gestiona la empresa: a «Miembro» y
   «Solo lectura» no se les enseña (app.js pone data-gestiona en <html> con los permisos que da el servidor). */
html[data-gestiona="no"] #overlay-cuenta #cuenta-licencia { display: none; }