/* Estilo "app" de AIRIN para la web — réplica del AirinTheme de la app
   Android (ui/theme/Color.kt, Type.kt, Theme.kt): Manrope, misma paleta y
   mismos radios (8/12/16/24/32). Lo usan las pantallas que nacen con el
   layout templates/kine/base_app.html (AIRIN_ROADMAP.md §20). */

:root {
  --indigo-deep: #0D4D70;
  --indigo-dark: #063049;
  --indigo-mid: #0D4D70;
  --indigo-light: #1C8484;
  --indigo-pale: #E2EAEE;
  --teal-pale: #DCEFEF;
  --violet: #E89820;
  --info-icono: #2F8FD8;
  --surface: #FCFDFE;
  --surface-variant: #EDF2F5;
  --text: #0A1219;       /* antes #14202B: costaba leer (2026-09-30) */
  --text-muted: #43566A; /* antes #5C7182 */
  --error: #DC2626;
  --success: #16A34A;
  --ok: #2E7D32; --advertencia: #ED9A00;

  /* Fijos en ambos modos: fondos de marca con texto blanco encima. */
  --navy: #0D4D70;
  --navy-oscuro: #063049;
  /* Igual que AirinColors en la app (ui/theme/Color.kt). */
  --tarjeta: #FFFFFF;
  --surface-low: #F7F9FB;
  --text-tenue: #93A3B1;
  --exito-fondo: #DCF3E2; --exito-fondo-suave: #F3FBF6; --exito-texto: #166534;
  --aviso-fondo: #FDF0DC; --aviso-texto: #9A5B00;
  --error-fondo: #FDE2E2; --error-texto: #991B1B;
  --info-fondo: #E2EAF4;
  --borde-fuerte: #C3CFD9; --borde-suave: #DDE5EB; --barra: #E6ECF0; --borde-campo: var(--surface-variant);
  color-scheme: light;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
}

/* Modo oscuro (2026-10-05), igual que la app: fondo negro. data-tema lo pone
   base_app.html según la preferencia de Perfil → Apariencia (cookie
   airin_tema); sin preferencia o en "auto" sigue al sistema. */
:root[data-tema="oscuro"] {
  --indigo-deep: #8EC5E0;
  --indigo-mid: #8EC5E0;
  --indigo-dark: #B9D7E6;
  --indigo-pale: #15242E;
  --teal-pale: #0F2B2B;
  --surface: #000000;
  --surface-variant: #182026;
  --text: #ECF1F4;
  --text-muted: #A3B2BE;
  --error: #F87171;
  --tarjeta: #12181D;
  --surface-low: #0B0F12;
  --text-tenue: #6B7B88;
  --exito-fondo: #0F2A19; --exito-fondo-suave: #0B1C12; --exito-texto: #7DDB9A;
  --aviso-fondo: #2E2210; --aviso-texto: #F2C265;
  --error-fondo: #3A1414; --error-texto: #F5A3A3;
  --info-fondo: #13222C;
  --indigo-light: #2FA3A3; --violet: #F0AA3C; --info-icono: #5DB4F0;
  --ok: #66BB6A; --advertencia: #F2B84B;
  --borde-fuerte: #3A4752; --borde-suave: #26313A; --barra: #1E272E; --borde-campo: #3A4752;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
  --indigo-deep: #8EC5E0;
  --indigo-mid: #8EC5E0;
  --indigo-dark: #B9D7E6;
  --indigo-pale: #15242E;
  --teal-pale: #0F2B2B;
  --surface: #000000;
  --surface-variant: #182026;
  --text: #ECF1F4;
  --text-muted: #A3B2BE;
  --error: #F87171;
  --tarjeta: #12181D;
  --surface-low: #0B0F12;
  --text-tenue: #6B7B88;
  --exito-fondo: #0F2A19; --exito-fondo-suave: #0B1C12; --exito-texto: #7DDB9A;
  --aviso-fondo: #2E2210; --aviso-texto: #F2C265;
  --error-fondo: #3A1414; --error-texto: #F5A3A3;
  --info-fondo: #13222C;
  --indigo-light: #2FA3A3; --violet: #F0AA3C; --info-icono: #5DB4F0;
  --ok: #66BB6A; --advertencia: #F2B84B;
  --borde-fuerte: #3A4752; --borde-suave: #26313A; --barra: #1E272E; --borde-campo: #3A4752;
  color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.material-icons { font-size: 24px; vertical-align: middle; line-height: 1; }

/* Columna tipo teléfono, centrada en pantallas grandes. */
.app {
  max-width: 720px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.app-content {
  flex: 1;
  min-width: 0; /* lo ancho (odontograma, tablas) se desplaza dentro, no ensancha la página */
  padding: 8px 20px 120px;
}

/* --- Tipografía (AirinTypography) --- */
.headline-small { font-size: 24px; line-height: 30px; font-weight: 700; margin: 0; }
.title-large { font-size: 20px; line-height: 26px; font-weight: 700; margin: 0; }
.title-medium { font-size: 17px; line-height: 23px; font-weight: 600; margin: 0; }
.title-small { font-size: 14px; line-height: 20px; font-weight: 600; margin: 0; }
.body-small { font-size: 12px; line-height: 17px; font-weight: 500; }
.label-small { font-size: 11px; line-height: 15px; font-weight: 700; letter-spacing: .3px; }
.muted { color: var(--text-muted); }
.error-text { color: var(--error); }

/* --- Top bar (AirinTopBar) --- */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px 14px;
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 10;
}
.topbar h1 { font-size: 26px; font-weight: 400; margin: 0; flex: 1; line-height: 32px; }
.topbar .icon-btn { color: var(--text); }
.topbar-home { justify-content: space-between; }
.topbar-home .marca { display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 400; color: var(--indigo-deep); }
.topbar-home .marca img { height: 34px; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; color: var(--indigo-deep);
}
.icon-btn.filled { background: var(--surface-variant); }

/* --- Bottom nav (AirinBottomNav) --- */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--surface-variant);
  z-index: 20;
}
.bottom-nav .inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 8px 0 10px;
}
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text-muted); font-size: 12px; min-width: 80px;
}
/* Botón AIRIN apagado (sin href, config.AIRIN_ACTIVO): se ve igual pero no es un enlace. */
.bottom-nav a:not([href]), .sidebar nav a:not([href]) { cursor: default; }
.bottom-nav a.activo { color: var(--indigo-deep); }
.bottom-nav .airin-btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
}

/* --- Tarjetas --- */
.card {
  background: var(--surface-variant);
  border-radius: var(--r-md);
  padding: 16px;
}
.card + .card { margin-top: 10px; }
.card-white { background: var(--tarjeta); border: 1px solid var(--surface-variant); }

.fila {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface-variant);
  border-radius: var(--r-md);
  padding: 14px;
  margin: 8px 0;
}
.fila .material-icons.lead { color: var(--indigo-mid); }
.fila .cuerpo { flex: 1; min-width: 0; }
.fila .cuerpo .t { font-weight: 600; }
.fila .cuerpo .s { font-size: 12px; color: var(--text-muted); }
.fila .material-icons.trail { color: var(--text-muted); }

.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--indigo-pale); color: var(--indigo-deep);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-weight: 700;
}

.seccion { margin-top: 22px; }
.seccion > .encabezado {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}

/* --- Tiles del home (ModuloBase) --- */
.grid-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile .nombre { font-size: 15px; font-weight: 700; letter-spacing: .2px; overflow-wrap: anywhere; }
.tile {
  border-radius: var(--r-lg);
  padding: 18px;
  min-height: 150px;
  color: #fff;
  display: flex; flex-direction: column; gap: 10px;
}
.tile .cabecera { display: flex; align-items: center; gap: 12px; font-size: 20px; min-width: 0; }
/* flex-shrink: 0 → el círculo no se aplasta en óvalo cuando el título es
   largo ("PACIENTES") en un tile angosto de celular. */
.tile .cabecera .circulo {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255, 255, 255, .22);
  display: flex; align-items: center; justify-content: center;
}
.tile .detalle { display: flex; align-items: center; gap: 8px; font-size: 15px; opacity: .95; }
.tile .material-icons { flex-shrink: 0; }
@media (max-width: 480px) {
  /* Celular: ícono arriba y título debajo, a todo el ancho — así ningún
     título ("PACIENTES") se corta ni aprieta el ícono. */
  .tile { padding: 14px; min-height: 132px; }
  .tile .cabecera { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 16px; font-weight: 700; letter-spacing: .3px; }
  .tile .cabecera .circulo { width: 34px; height: 34px; }
  .tile .cabecera .circulo .material-icons { font-size: 20px; }
  .tile .detalle { font-size: 13px; gap: 6px; }
}
.tile.teal { background: linear-gradient(135deg, #1C8484, #126161); }
.tile.navy { background: linear-gradient(135deg, var(--navy), var(--navy-oscuro)); }
.tile.verde { background: linear-gradient(135deg, #3FA34D, #2C7A3A); }
.tile.naranja { background: linear-gradient(135deg, #E89820, #C97A12); }
.tile.lila { background: linear-gradient(135deg, #6E5AA6, #52407F); }
.tile.agua { background: linear-gradient(135deg, #2E93A0, #1F6B75); }

/* --- Chips --- */
.chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  background: var(--teal-pale); color: var(--indigo-deep);
}
.chip.navy { background: var(--navy); color: #fff; }
.chip.naranja { background: var(--aviso-fondo); color: var(--aviso-texto); }
.chip.gris { background: var(--surface-variant); color: var(--text-muted); }
.chip.verde { background: var(--exito-fondo); color: var(--exito-texto); }

/* --- Botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 22px;
  border-radius: var(--r-md);
  border: 0; cursor: pointer;
  font: 600 15px/20px "Manrope", sans-serif; letter-spacing: .2px;
  background: var(--indigo-light); color: #fff;
}
.btn.block { width: 100%; }
.btn.small { height: 40px; padding: 0 16px; font-size: 14px; border-radius: var(--r-sm); }
.btn.outline { background: transparent; color: var(--indigo-deep); border: 1px solid var(--text-muted); }
.btn.danger { background: transparent; color: var(--error); border: 1px solid var(--error); }
.btn.tonal { background: var(--indigo-pale); color: var(--indigo-deep); }
.btn-text { background: none; border: 0; color: var(--indigo-light); font: 600 14px "Manrope", sans-serif; cursor: pointer; padding: 6px 0; }

/* --- Formularios (OutlinedTextField con fondo surfaceVariant) --- */
.campo { margin-bottom: 12px; }
.campo label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 0 0 4px 4px; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  background: var(--surface-variant);
  border: 1px solid var(--borde-campo);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font: 400 16px/22px "Manrope", sans-serif;
  color: var(--text);
  outline: none;
}
.campo textarea { min-height: 84px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--indigo-mid); background: var(--tarjeta); }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Bloque plegable (formularios secundarios dentro de una ficha). */
details.plegable { background: var(--surface-variant); border-radius: var(--r-md); margin: 10px 0; }
details.plegable > summary {
  list-style: none; cursor: pointer; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--indigo-deep);
}
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable[open] > summary { border-bottom: 1px solid var(--borde-suave); }
details.plegable .contenido { padding: 14px 16px; }
details.plegable .campo input, details.plegable .campo select, details.plegable .campo textarea { background: var(--tarjeta); }

/* --- Avisos --- */
.aviso { border-radius: var(--r-md); padding: 12px 14px; margin: 10px 0; display: flex; gap: 10px; align-items: flex-start; }
.aviso.info { background: var(--teal-pale); color: var(--indigo-dark); }
.aviso.error { background: var(--error-fondo); color: var(--error-texto); }
.aviso.ok { background: var(--exito-fondo); color: var(--exito-texto); }

/* --- Pestañas --- */
.tabs { display: flex; gap: 6px; overflow-x: auto; margin: 6px 0 14px; }
.tabs a {
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  background: var(--surface-variant); color: var(--text-muted); font-weight: 600; font-size: 13px;
}
.tabs a.activo { background: var(--navy); color: #fff; }

/* --- Nota SOAP --- */
.soap dt { font-weight: 700; color: var(--indigo-deep); font-size: 12px; margin-top: 8px; }
.soap dd { margin: 2px 0 0; white-space: pre-line; }
.enmienda { border-left: 3px solid var(--violet); padding: 6px 10px; margin-top: 8px; background: var(--tarjeta); border-radius: 0 var(--r-xs) var(--r-xs) 0; }

/* --- Gráfico de línea (ProgresoLineChart) --- */
.grafico svg { width: 100%; height: auto; display: block; }
.grafico .resumen-serie { font-size: 14px; margin-bottom: 6px; display: flex; gap: 6px; align-items: baseline; }
.grafico .resumen-serie b { font-size: 17px; }
.grafico .resumen-serie .mejora { color: var(--success); font-weight: 700; }
.grafico .resumen-serie .empeora { color: var(--error); font-weight: 700; }
.grafico .leyenda { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); }

/* --- Código de vínculo --- */
.codigo {
  font: 800 28px/1 "Manrope", monospace; letter-spacing: 6px;
  color: var(--indigo-deep); text-align: center;
  background: var(--tarjeta); border-radius: var(--r-md); padding: 16px; margin: 8px 0;
}

/* --- Check de pauta --- */
.check {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--indigo-light); background: transparent; color: var(--indigo-light);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.check.hecho { background: var(--indigo-light); color: #fff; }

@media (min-width: 900px) {
  .app-content { padding-bottom: 120px; }
}

.grid-tiles > .card { margin-top: 0; }

/* ===================================================================
   Escritorio (≥1024px): mismo lenguaje visual, pero a pantalla completa.
   La barra inferior se reemplaza por un menú lateral fijo y el contenido
   se reparte en columnas (tiles de 4, ficha en dos columnas, etc.).
   En móvil nada de esto aplica: se ve igual que la app.
   =================================================================== */
.sidebar { display: none; }
.dos-columnas > * { min-width: 0; }

@media (min-width: 1024px) {
  body { background: var(--surface); }
  .app { max-width: none; margin: 0 0 0 256px; }
  .bottom-nav { display: none; }
  .topbar { padding: 28px 40px 14px; }
  .topbar-home { display: none; }
  .app-content { padding: 8px 40px 56px; max-width: 1440px; }

  .sidebar {
    display: flex; flex-direction: column;
    position: fixed; top: 0; bottom: 0; left: 0; width: 256px;
    background: var(--surface);
    border-right: 1px solid var(--surface-variant);
    padding: 24px 16px;
    z-index: 30;
  }
  .sidebar .marca { display: flex; align-items: center; gap: 10px; font-size: 26px; color: var(--indigo-deep); padding: 0 10px 22px; }
  .sidebar .marca img { height: 34px; }
  .sidebar .contexto { font-size: 12px; color: var(--text-muted); padding: 0 12px 14px; }
  .sidebar nav { display: flex; flex-direction: column; gap: 4px; }
  .sidebar nav a {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; border-radius: var(--r-md);
    color: var(--text-muted); font-weight: 600; font-size: 15px;
  }
  .sidebar nav a:hover { background: var(--surface-variant); color: var(--text); }
  .sidebar nav a.activo { background: var(--indigo-pale); color: var(--indigo-deep); }
  .sidebar nav a.airin .material-icons {
    background: var(--navy); color: #fff; border-radius: 50%;
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
    margin-left: -4px;
  }
  .sidebar .pie { margin-top: auto; border-top: 1px solid var(--surface-variant); padding: 16px 8px 0; }
  .sidebar .pie .usuario { display: flex; align-items: center; gap: 12px; }
  .sidebar .pie .usuario .t { font-weight: 600; }
  .sidebar .pie a.salir { display: flex; align-items: center; gap: 8px; color: var(--text-muted); margin-top: 14px; font-size: 13px; }

  .grid-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .grid-tiles.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile { min-height: 170px; }

  .dos-columnas { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .dos-columnas.mitades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dos-columnas > * > .seccion:first-child { margin-top: 0; }
  .lista-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .lista-grid .fila { margin: 6px 0; }
  .grid-graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .grid-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .grid-cards > .card { margin-top: 0 !important; }
  .agenda-dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 24px; }
  .form-ancho { max-width: 880px; }
  .form-ancho .fila-campos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grafico svg { max-height: 260px; }
}

/* ---- Ficha: aire entre la cabecera y las columnas ---- */
.card + .dos-columnas, .card + .grid-tiles { margin-top: 18px; }

/* ===================================================================
   Agenda (día / semana / mes) — mismo motor que la agenda de las demás
   cuentas (services/agenda_grid.py), con el estilo de la app.
   =================================================================== */
.ag-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ag-nav { display: flex; align-items: center; gap: 8px; }
.ag-titulo { font-weight: 700; font-size: 17px; margin-left: 6px; text-transform: capitalize; }
.ag-controles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ag-segmentos { display: inline-flex; background: var(--surface-variant); border-radius: 999px; padding: 4px; }
.ag-segmentos a { padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--text-muted); }
.ag-segmentos a.activo { background: var(--tarjeta); color: var(--indigo-deep); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ag-kine select {
  background: var(--surface-variant); border: 0; border-radius: var(--r-sm);
  padding: 10px 12px; font: 600 13px "Manrope", sans-serif; color: var(--text);
}

.ag-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--tarjeta); border: 1px solid var(--surface-variant); border-radius: var(--r-md);
}
.ag-tabla {
  display: grid;
  grid-template-columns: 56px repeat(var(--cols), minmax(var(--min), 1fr));
  min-width: calc(56px + var(--cols) * var(--min));
}
.ag-esquina, .ag-cab {
  position: sticky; top: 0; z-index: 2; background: var(--tarjeta);
  border-bottom: 1px solid var(--surface-variant); padding: 10px 6px;
}
.ag-esquina { left: 0; z-index: 3; }
.ag-cab { text-align: center; font-weight: 700; font-size: 13px; color: var(--text); border-left: 1px solid var(--surface-variant); }
.ag-cab.hoy { color: var(--indigo-light); }
.ag-horas { position: sticky; left: 0; z-index: 1; background: var(--tarjeta); }
.ag-horas span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11px; color: var(--text-muted); }
.ag-horas span:first-child { transform: none; }
.ag-col { display: grid; border-left: 1px solid var(--surface-variant); position: relative; }
.ag-col.hoy { background: var(--surface-low); }
.ag-slot {
  grid-column: 1; border: 0; border-top: 1px solid var(--borde-suave); background: transparent; cursor: pointer; padding: 0;
}
.ag-slot:nth-child(2n+1) { border-top-color: var(--borde-suave); }
.ag-slot:hover { background: var(--teal-pale); }
.ag-evento {
  grid-column: 1; z-index: 1; margin: 1px 3px; padding: 4px 8px; border: 0; border-radius: var(--r-xs);
  color: #fff; text-align: left; font: 500 12px/1.3 "Manrope", sans-serif; overflow: hidden; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.ag-evento b { font-weight: 700; }
.ag-evento small { display: block; opacity: .9; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-evento.cancelada { text-decoration: line-through; opacity: .75; }

.ag-mes {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--tarjeta); border: 1px solid var(--surface-variant); border-radius: var(--r-md); overflow: hidden;
}
.ag-mes-cab { text-align: center; font-size: 12px; font-weight: 700; color: var(--text-muted); padding: 10px 0; border-bottom: 1px solid var(--surface-variant); }
.ag-mes-celda {
  min-height: 112px; padding: 6px; border-right: 1px solid var(--borde-suave); border-bottom: 1px solid var(--borde-suave);
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.ag-mes-celda:nth-child(7n) { border-right: 0; }
.ag-mes-celda:hover { background: var(--surface-low); }
.ag-mes-celda.fuera { color: var(--text-tenue); background: var(--surface-low); }
.ag-mes-num { font-weight: 700; font-size: 13px; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.ag-mes-celda.hoy .ag-mes-num { background: var(--navy); color: #fff; }
.ag-mes-ev { display: flex; align-items: center; gap: 5px; font-size: 11px; min-width: 0; }
.ag-mes-ev i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ag-mes-ev span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-mes-mas { font-size: 11px; color: var(--text-muted); }
.ag-mes-cuenta { display: none; }

.ag-dialogo {
  border: 0; border-radius: var(--r-lg); padding: 20px; width: min(440px, calc(100vw - 32px));
  box-shadow: 0 12px 40px rgba(6, 48, 73, .25); font-family: "Manrope", sans-serif; color: var(--text);
}
.ag-dialogo::backdrop { background: rgba(6, 48, 73, .35); }
.ag-dialogo-cab { display: flex; align-items: center; justify-content: space-between; }
/* Arrastrar una sesión para cambiarla de hora (agenda.html). */
.ag-evento.movible { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ag-evento.ag-arrastrado { opacity: .35; }
.ag-fantasma {
  position: fixed; z-index: 60; pointer-events: none; cursor: grabbing; opacity: .92;
  box-shadow: 0 10px 24px rgba(6, 48, 73, .35); transform: scale(1.03); border-radius: 8px;
}
.ag-slot.ag-destino { background: var(--teal-pale); outline: 2px dashed var(--indigo-light); outline-offset: -2px; }
.ag-mover-texto { font-size: 16px; margin: 14px 0 6px; }
.ag-mover-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ag-estados { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-estados .chip { border: 0; cursor: pointer; font-size: 12px; padding: 7px 12px; }

/* Celular: barra en dos filas, mes con puntos compactos. */
@media (max-width: 640px) {
  .ag-barra { flex-direction: column; align-items: stretch; }
  .ag-nav { justify-content: space-between; }
  .ag-titulo { flex: 1; text-align: center; font-size: 15px; margin: 0; }
  .ag-controles { justify-content: space-between; }
  .ag-segmentos { flex: 1; }
  .ag-segmentos a { flex: 1; text-align: center; padding: 7px 8px; }
  .ag-kine { flex: 1; }
  .ag-kine select { width: 100%; }
  .ag-controles .btn { width: 100%; }
  .ag-mes-celda { min-height: 58px; padding: 4px 2px; align-items: center; }
  .ag-mes-ev, .ag-mes-mas { display: none; }
  .ag-mes-cuenta {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--indigo-light); color: #fff; font-size: 11px; font-weight: 700;
  }
}
.tile.cafe { background: linear-gradient(135deg, #8B6F5C, #6E5548); }
.tile.rojo { background: linear-gradient(135deg, #C0392B, #992E22); }
.tile.azul { background: linear-gradient(135deg, #2E6DA4, #1F4D7A); }
.tile.apagado { cursor: default; }
/* La última etiqueta de hora queda sobre el borde inferior: dejarle aire. */
.ag-tabla { padding-bottom: 12px; }
@media (max-width: 640px) {
  .ag-tabla { grid-template-columns: 48px repeat(var(--cols), minmax(calc(var(--min) - 22px), 1fr)); min-width: calc(48px + var(--cols) * (var(--min) - 22px)); }
  .ag-evento { padding: 3px 6px; font-size: 11px; }
}

/* ---- Ficha: franja de alertas (lo primero que ve el kine) ---- */
.chip.rojo { background: var(--error-fondo); color: var(--error-texto); }
.chip.azul { background: var(--info-fondo); color: var(--indigo-deep); }
.chip form { display: inline; }
.chip .x { background: none; border: 0; color: inherit; cursor: pointer; padding: 0 0 0 6px; font-size: 13px; line-height: 1; opacity: .7; }
.alertas {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--tarjeta); border: 1px solid var(--surface-variant); border-left: 5px solid var(--error);
  border-radius: var(--r-md); padding: 12px 14px; margin: 12px 0;
}
.alertas.sin-riesgo { border-left-color: var(--indigo-light); }
.alertas { position: relative; }
.alertas .chip { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
/* El panel se ancla a la franja (no al botón, que está a la derecha) para
   no salirse de la pantalla. */
.nueva-etiqueta { margin-left: auto; }
.nueva-etiqueta summary { list-style: none; cursor: pointer; }
.nueva-etiqueta summary::-webkit-details-marker { display: none; }
.panel-etiqueta {
  position: absolute; z-index: 5; top: calc(100% + 6px); right: 0;
  width: min(340px, 100%); background: var(--tarjeta); box-shadow: 0 8px 24px rgba(6,48,73,.18);
}
.alertas .chip { font-size: 12px; padding: 6px 12px; }
.alertas .contacto { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--indigo-deep); }
.alertas .contacto .material-icons { font-size: 16px; }
.estado-pago.pagado { background: var(--exito-fondo); color: var(--exito-texto); }
.estado-pago.pendiente { background: var(--aviso-fondo); color: var(--aviso-texto); }
.estado-pago.rechazado { background: var(--error-fondo); color: var(--error-texto); }

/* ---- Pauta: días de la semana como pastillas y progreso del día ---- */
.dias-semana { display: flex; gap: 6px; flex-wrap: wrap; }
.dias-semana label { cursor: pointer; }
.dias-semana input { position: absolute; opacity: 0; pointer-events: none; }
.dias-semana span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; font-weight: 700; font-size: 13px;
  background: var(--tarjeta); color: var(--text-muted); border: 1.5px solid var(--borde-suave);
}
.dias-semana input:checked + span { background: var(--indigo-light); color: #fff; border-color: var(--indigo-light); }
.dias-semana input:focus-visible + span { outline: 2px solid var(--indigo-deep); outline-offset: 2px; }
.veces { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.veces .cuenta { font-weight: 800; min-width: 34px; text-align: center; color: var(--indigo-deep); }
.veces .check.menos { width: 30px; height: 30px; border-width: 1.5px; opacity: .7; }
.fila.no-toca { opacity: .55; }

/* ===================================================================
   Mejoras kine 2026-09-30: secciones plegables, teléfonos, montos
   ocultables, pagos y fotos de perfil. Pensado primero para celular.
   =================================================================== */

/* Sección que se pliega tocando el título; recuerda su estado (ver
   base_app.html, data-recordar). */
details.seccion-plegable { margin-top: 22px; }
details.seccion-plegable > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px; min-height: 44px; -webkit-tap-highlight-color: transparent;
}
details.seccion-plegable > summary::-webkit-details-marker { display: none; }
details.seccion-plegable > summary .flecha { color: var(--text-muted); transition: transform .15s; }
details.seccion-plegable:not([open]) > summary .flecha { transform: rotate(-90deg); }
details.seccion-plegable > summary .title-medium { flex: 1; }
details.seccion-plegable > summary .cuenta { color: var(--text-muted); font-weight: 600; }

/* Teléfono con botones copiar / llamar (emergencias). */
/* Etiqueta, nombre y número en líneas separadas: el número nunca se corta
   (en celulares de 360 px con nombres largos se partía "· +56 9 …"). */
.tel { display: flex; align-items: center; gap: 8px; }
.tel .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tel .etq { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.tel .etq .material-icons { font-size: 16px; }
.tel .nombre { font-weight: 600; color: var(--text); overflow-wrap: anywhere; line-height: 1.3; }
.tel .tel-numero { font-weight: 700; font-size: 15px; color: var(--indigo-deep); white-space: nowrap; letter-spacing: .2px; }
.tel .icon-accion {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--indigo-pale); color: var(--indigo-deep);
}
.tel .icon-accion.llamar { background: var(--exito-fondo); color: var(--exito-texto); }
.tel .icon-accion .material-icons { font-size: 20px; }
.alertas .tel { flex-basis: 100%; }

/* Aviso flotante ("Número copiado"). */
.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  background: var(--navy-oscuro); color: #fff; padding: 10px 18px; border-radius: 999px;
  font-weight: 600; z-index: 50; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.toast.visible { opacity: 1; }

/* Montos ocultables con el ojo (preferencia del navegador). */
html.montos-ocultos .monto .valor { display: none; }
html:not(.montos-ocultos) .monto .oculto { display: none; }
.ojo { background: none; border: 0; cursor: pointer; color: var(--text-muted); padding: 8px; border-radius: 50%; }
html.montos-ocultos .ojo .ver, html:not(.montos-ocultos) .ojo .no-ver { display: none; }

.resumen-pagos { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.resumen-pagos .cabeza { flex-basis: 100%; display: flex; align-items: center; gap: 8px; }
.resumen-pagos .cabeza .title-small { flex: 1; }

/* Control segmentado (vista y estado de pagos): opciones de igual ancho que
   caben en la pantalla, sin scroll lateral. */
.segmentado {
  display: grid; gap: 4px; padding: 4px; margin: 10px 0;
  background: var(--surface-variant); border-radius: 999px;
}
.segmentado.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.segmentado.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.segmentado.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.segmentado a {
  text-align: center; padding: 9px 4px; border-radius: 999px; min-width: 0;
  font-weight: 600; font-size: 13px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.segmentado a.activo { background: var(--tarjeta); color: var(--indigo-deep); box-shadow: 0 1px 4px rgba(6,48,73,.15); }
@media (max-width: 380px) { .segmentado a { font-size: 12px; padding: 9px 2px; } }

/* ‹ Mes › centrado, con el atajo debajo del título. */
.mes-nav { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.mes-nav .flecha {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: var(--surface-variant); color: var(--indigo-deep);
}
.mes-nav .centro { flex: 1; min-width: 0; text-align: center; display: flex; flex-direction: column; }
.mes-nav .titulo { font-weight: 800; font-size: 17px; }
.mes-nav .atajo { font-size: 12px; font-weight: 600; color: var(--indigo-light); }
/* Paginación: « ‹  Página X de Y  › » — cabe en celular. */
.paginacion { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; }
.paginacion .grupo { display: flex; gap: 6px; }
.paginacion .pag {
  width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--surface-variant); color: var(--indigo-deep);
}
.paginacion .pag.off { opacity: .35; pointer-events: none; }

/* Buscador de pagos (nombre/RUT) + profesional. */
.buscador-pagos { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.buscador-pagos .caja-busqueda {
  flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: 6px;
  background: var(--surface-variant); border-radius: 999px; padding: 0 6px 0 14px; height: 46px;
}
.buscador-pagos .caja-busqueda .material-icons { color: var(--text-muted); font-size: 20px; }
.buscador-pagos .caja-busqueda input {
  flex: 1; min-width: 0; border: 0; background: transparent; font: 500 15px "Manrope", sans-serif; color: var(--text); outline: none;
}
.buscador-pagos .caja-busqueda input::-webkit-search-cancel-button { display: none; }
.buscador-pagos .limpiar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.buscador-pagos select {
  flex: 1 1 180px; height: 46px; border: 0; border-radius: 999px; padding: 0 14px;
  background: var(--surface-variant); font: 600 14px "Manrope", sans-serif; color: var(--indigo-deep);
}
.filtros-activos { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 6px; }
.filtros-activos .chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px 6px 12px; max-width: 100%; }
.filtros-activos .chip .material-icons { font-size: 16px; }

/* Recaudación por profesional. */
.profesional-card { display: block; background: var(--surface-variant); border-radius: var(--r-md); padding: 14px; margin: 10px 0; }
.profesional-card .cab { display: flex; align-items: center; gap: 12px; }
.profesional-card .nombre { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.profesional-card .trail { color: var(--text-muted); }
.profesional-card .montos { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 10px; }
.profesional-card .montos > span { display: flex; flex-direction: column; min-width: 0; }
.profesional-card .etq { font-size: 12px; color: var(--text-muted); }
.profesional-card .v { font-weight: 800; font-size: 17px; }
.profesional-card .v.verde { color: var(--success); }
.profesional-card .v.naranja { color: var(--aviso-texto); }

/* Tarjeta de pago. */
.pago-card {
  background: var(--surface-variant); border-radius: var(--r-md); padding: 14px 16px; margin: 10px 0;
  border-left: 4px solid #E2B05C;
}
.pago-card.estado-pagado { border-left-color: #16A34A; }
.pago-card.estado-rechazado { border-left-color: var(--error); }
.pago-card .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pago-card .pago-paciente, .pago-card .pago-fecha { font-weight: 700; color: var(--indigo-deep); font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.pago-card .linea-monto { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pago-card .monto-grande { font-size: 22px; font-weight: 800; color: var(--text); }
.pago-card .concepto { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.pago-card .meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.acciones-pago { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: flex-start; }
.acciones-pago > * { flex: 1 1 auto; }
.acciones-pago form, .acciones-pago .btn { display: flex; }
.acciones-pago form .btn, .acciones-pago .btn-ver-pago { width: 100%; justify-content: center; }
.acciones-pago details.rechazar > summary { list-style: none; width: 100%; justify-content: center; }
.acciones-pago details.rechazar > summary::-webkit-details-marker { display: none; }
.acciones-pago details.rechazar[open] { flex-basis: 100%; }
.acciones-pago details.rechazar form { display: block; margin-top: 8px; }
.acciones-pago details.rechazar .campo input { background: var(--tarjeta); }
.acciones-pago .btn-text { flex: 0 0 auto; }
/* Sin boleta: "Ver detalle" es un enlace discreto al final, no un botón grande. */
.acciones-pago .btn-ver-pago.sin-boleta {
  order: 9; flex: 0 0 100%; width: auto; height: auto; padding: 2px 0;
  display: inline-flex; align-items: center; gap: 4px; justify-content: flex-start; font-size: 13px;
}

/* Avatar con foto de perfil. */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cuenta activa (con varias cuentas: centro + consulta particular). */
.cuenta-actual {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--teal-pale); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 12px;
}
.cuenta-actual > .material-icons { color: var(--indigo-deep); }
.cuenta-actual .cuerpo { flex: 1; min-width: 140px; display: flex; flex-direction: column; }
.cuenta-actual .nombre { font-weight: 700; color: var(--indigo-deep); overflow-wrap: anywhere; }
.cuenta-actual .rol { font-size: 12px; color: var(--text-muted); }
.cuenta-actual .btn { gap: 4px; background: #fff; }
.fila.cuenta.activa { background: var(--teal-pale); }

/* Tarjeta de un kine en Equipo: foto, nombre, rol y correo; "Editar" la
   despliega con el formulario. */
.kine-card { background: var(--surface-variant); border-radius: var(--r-md); margin: 10px 0; overflow: hidden; }
.kine-card > summary, .kine-card > .cabecera {
  display: flex; align-items: center; gap: 12px; padding: 14px; list-style: none; cursor: pointer;
}
.kine-card > .cabecera { cursor: default; }
.kine-card > summary::-webkit-details-marker { display: none; }
.kine-card .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.kine-card .nombre { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.kine-card .correo { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.kine-card .chip { font-size: 11px; padding: 3px 10px; }
.kine-card .chip.gris { background: var(--tarjeta); color: var(--indigo-deep); }

/* Campos de archivo (fotos, documentos, comprobantes) con botón de la marca. */
.campo input[type="file"] { padding: 8px; font-size: 13px; color: var(--text-muted); }
.campo input[type="file"]::file-selector-button {
  border: 0; border-radius: 999px; padding: 9px 16px; margin-right: 10px; cursor: pointer;
  background: var(--indigo-pale); color: var(--indigo-deep); font: 600 13px "Manrope", sans-serif;
}
.kine-card .btn-editar {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 8px 12px; border-radius: 999px;
  background: var(--tarjeta); color: var(--indigo-deep); font-weight: 600; font-size: 13px;
}
.kine-card .btn-editar .material-icons { font-size: 18px; }
.kine-card[open] .btn-editar { background: var(--navy); color: #fff; }
.kine-card .panel { padding: 4px 14px 14px; border-top: 1px solid var(--borde-suave); }
.kine-card .panel .campo input, .kine-card .panel .campo select { background: var(--tarjeta); }
.kine-card .quitar { color: var(--error); display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 380px) { .kine-card .btn-editar .txt { display: none; } }

/* Tarjeta "Próxima sesión" del inicio kine (reemplaza al tile PRÓXIMA). */
.card.proxima-sesion {
  display: flex; align-items: center; gap: 14px;  /* el espacio con los tiles lo da .card + .grid-tiles */
  background: linear-gradient(135deg, var(--navy), var(--navy-oscuro)); color: #fff; border-radius: var(--r-lg);
}
.proxima-sesion .icono {
  width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.18); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.proxima-sesion .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.proxima-sesion .etq { font-size: 12px; opacity: .85; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.proxima-sesion .cuando { font-size: 20px; font-weight: 800; line-height: 1.25; }
.proxima-sesion .quien { font-size: 14px; opacity: .95; overflow-wrap: anywhere; }
.proxima-sesion .trail { opacity: .85; }

/* Mazo de avisos del inicio: una carta a la vista, la siguiente asoma por
   abajo; se desliza a la izquierda (o la ×) para darla por vista. */
.mazo-avisos { position: relative; margin-bottom: 14px; }
.mazo-avisos .cartas { position: relative; }
.mazo-avisos .cartas::after {
  content: ""; display: none; position: absolute; left: 14px; right: 14px; bottom: -7px; height: 24px; z-index: 0;
  border-radius: var(--r-lg); background: var(--navy); opacity: .55;
}
/* Solo asoma cuando queda más de una carta (clase que pone el JS de inicio.html). */
.mazo-avisos .cartas.con-mas::after { display: block; }
.mazo-avisos .carta {
  position: relative; z-index: 1; cursor: pointer; user-select: none; touch-action: pan-y; margin-bottom: 0;
  transition: transform .22s ease, opacity .22s ease; will-change: transform;
}
.mazo-avisos .carta[hidden] { display: none; }
.mazo-avisos .carta.saliendo { transform: translateX(-120%) rotate(-6deg) !important; opacity: 0 !important; }
.mazo-avisos .carta .cuando { font-size: 18px; }
.mazo-avisos .carta .cerrar {
  position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; display: flex; align-items: center; justify-content: center; padding: 0;
}
.mazo-avisos .carta .cerrar .material-icons { font-size: 18px; }
.mazo-avisos .carta .cerrar:hover { background: rgba(255,255,255,.3); }
.mazo-avisos .carta .trail { margin-right: 22px; }
.mazo-avisos .carta.navy { background: linear-gradient(135deg, var(--navy), var(--navy-oscuro)); }
.mazo-avisos .carta.teal { background: linear-gradient(135deg, #1C8484, #126161); }
.mazo-avisos .carta.verde { background: linear-gradient(135deg, #3FA34D, #2C7A3A); }
.mazo-avisos .carta.naranja { background: linear-gradient(135deg, #E89820, #C97A12); }
.mazo-avisos .carta.lila { background: linear-gradient(135deg, #6E5AA6, #52407F); }
.mazo-avisos .carta.rojo { background: linear-gradient(135deg, #C0392B, #992E22); }
.mazo-avisos .puntos { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.mazo-avisos .puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--navy); opacity: .25; }
.mazo-avisos .puntos i.activo { opacity: 1; width: 16px; border-radius: 3px; }
.mazo-avisos .puntos i.ida { display: none; }
.mazo-avisos .pista { text-align: center; margin-top: 4px; }
@media (hover: hover) and (pointer: fine) { .mazo-avisos .pista { display: none; } }

/* Botón "Ver boleta" y visor de comprobantes (pantalla completa en celular). */
.btn-ver-pago { height: 38px; gap: 6px; padding: 0 14px; font-size: 13px; }
dialog.visor-pago {
  border: 0; padding: 0; width: min(720px, 100vw); max-width: 100vw; height: min(92vh, 900px); max-height: 100vh;
  border-radius: var(--r-lg); overflow: hidden; background: #071A26; color: #fff;
  display: none; flex-direction: column;
}
dialog.visor-pago[open] { display: flex; }
dialog.visor-pago::backdrop { background: rgba(6, 20, 30, .7); }
.visor-pago .cab { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 18px; }
.visor-pago .cab .txt { flex: 1; min-width: 0; }
.visor-pago .titulo { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.visor-pago .sub { font-size: 12px; opacity: .8; }
.visor-pago .cerrar { background: rgba(255,255,255,.12); border: 0; color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.visor-pago .imagen { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 8px; }
.visor-pago .imagen img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; display: none; }
.visor-pago.con-imagen .imagen img { display: block; }
.visor-pago.con-imagen .sin, .visor-pago:not(.con-imagen) .acc { display: none; }
.visor-pago .imagen.ampliada { align-items: flex-start; justify-content: flex-start; }
.visor-pago .imagen.ampliada img { max-width: none; max-height: none; width: 220%; cursor: zoom-out; }
.visor-pago .pie { background: var(--tarjeta); color: var(--text); padding: 14px 18px; }
.visor-pago .fila-estado { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.visor-pago .acc { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
@media (max-width: 640px) {
  dialog.visor-pago { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}

/* Botones táctiles cómodos en celular. */
@media (max-width: 640px) {
  .btn.small { height: 44px; }
  .fila-campos.mediciones { grid-template-columns: 1fr 1fr !important; }
}

/* Sesión en el portal del paciente: Asistiré / No podré ir. */
.sesion-card {
  background: var(--surface-variant); border-radius: var(--r-md); padding: 14px 16px; margin: 10px 0;
  border-left: 4px solid #E2B05C;
}
.sesion-card.confirmada { border-left-color: var(--success); }
.sesion-card.cancelada { border-left-color: #aab4bd; opacity: .85; }
.sesion-card .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sesion-card .cuando { font-weight: 800; font-size: 17px; }
.sesion-card .s { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.sesion-card .aviso-limite { margin-top: 8px; }
.acciones-sesion { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: flex-start; }
.acciones-sesion > * { flex: 1 1 100px; }
.acciones-sesion form .btn, .acciones-sesion summary.btn { width: 100%; justify-content: center; gap: 4px; }
.acciones-sesion details > summary { list-style: none; }
.acciones-sesion details > summary::-webkit-details-marker { display: none; }
.acciones-sesion details[open] { flex-basis: 100%; }
.acciones-sesion details form { margin-top: 8px; }
.acciones-sesion .campo input { background: var(--tarjeta); }

/* ===================================================================
   AIRIN Mascotas (web personal), mismo diseño que PetDetailScreen.
   =================================================================== */
.mascota-ficha .cab { display: flex; align-items: center; gap: 14px; }
.mascota-ficha .foto {
  position: relative; width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  background: var(--teal-pale); display: flex; align-items: center; justify-content: center; overflow: visible;
}
.mascota-ficha .foto img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.mascota-ficha .foto > .material-icons { color: var(--indigo-mid); font-size: 30px; }
.mascota-ficha .foto .lapiz {
  position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface-variant);
}
.mascota-ficha .foto .lapiz .material-icons { font-size: 13px; }
.mascota-ficha.carnet .foto { cursor: default; }
.mascota-ficha .cuerpo { flex: 1; min-width: 0; }
.mascota-ficha .cab .nombre { font-size: 21px; font-weight: 800; overflow-wrap: anywhere; }
.mascota-ficha .s, .registro .s { font-size: 13px; color: var(--text-muted); }
.mascota-ficha .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mascota-ficha .chips .chip.gris { background: var(--tarjeta); color: var(--indigo-deep); }
.chip.precaucion.rojo { background: var(--error-fondo); color: var(--error-texto); }
.chip.precaucion.amarillo { background: var(--aviso-fondo); color: var(--aviso-texto); }
.chip.precaucion.verde { background: var(--exito-fondo); color: var(--exito-texto); }
.punto-precaucion { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.punto-precaucion.rojo { background: var(--error); }
.punto-precaucion.amarillo { background: #C9971C; }
.punto-precaucion.verde { background: var(--success); }
.acciones-mascota { margin-top: 12px; }
.acciones-mascota details.plegable { margin: 8px 0; }
.qr-blanco { display: inline-block; background: #fff; border-radius: var(--r-md); padding: 10px; }
.qr-blanco svg { display: block; max-width: 220px; height: auto; }

/* Registro de salud: datos arriba, acciones abajo (cómodo en celular). */
.registro { background: var(--surface-variant); border-radius: var(--r-md); padding: 14px; margin: 8px 0; }
.registro .cab { display: flex; gap: 12px; align-items: flex-start; }
.registro .cab .lead { color: var(--indigo-mid); }
.registro .cab .cuerpo { flex: 1; min-width: 0; }
.registro .cab .t { font-weight: 600; }
.acciones-registro { display: flex; gap: 4px 14px; flex-wrap: wrap; align-items: center; margin-top: 8px; padding-left: 36px; }
.acciones-registro .btn-text, .acciones-registro label.btn-text { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; }
.acciones-registro .btn-text .material-icons { font-size: 18px; }
.acciones-registro details.editar-registro { flex-basis: auto; }
.acciones-registro details.editar-registro[open] { flex-basis: 100%; order: 9; }
.acciones-registro details.editar-registro > summary { list-style: none; display: inline-flex; }
.acciones-registro details.editar-registro > summary::-webkit-details-marker { display: none; }
.acciones-registro details.editar-registro[open] form { margin-top: 8px; }
.acciones-registro .campo input, .acciones-registro .campo select, .acciones-registro .campo textarea { background: var(--tarjeta); }
@media (max-width: 480px) { .acciones-registro { padding-left: 0; } }

/* Especie como opciones segmentadas (radio). */
.segmentado .opcion-radio { display: block; min-width: 0; }
.segmentado .opcion-radio input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado .opcion-radio span {
  display: block; text-align: center; padding: 9px 4px; border-radius: 999px; cursor: pointer;
  font-weight: 600; font-size: 14px; color: var(--text-muted);
}
.segmentado .opcion-radio input:checked + span { background: var(--tarjeta); color: var(--indigo-deep); box-shadow: 0 1px 4px rgba(6,48,73,.15); }
.segmentado .opcion-radio input:focus-visible + span { outline: 2px solid var(--indigo-deep); }
.btn .material-icons { font-size: 20px; }

/* ------------------------------------------------------------------
   AIRIN Fit web (2026-09-30): réplica de ui/fit (FitHomeScreen y sus
   pestañas, FitEntrenarScreen, biblioteca). Ver routers/fit_web.py.
   ------------------------------------------------------------------ */
.fit-topbar { gap: 8px; padding-bottom: 8px; }
.fit-topbar .fit-titulo { flex: 1; min-width: 0; }
.fit-topbar .fit-titulo h1 { font-weight: 700; font-size: 22px; line-height: 28px; color: var(--indigo-deep); }
.fit-topbar .fit-titulo .sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fit-pill {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 9px 14px; border-radius: 999px; background: var(--teal-pale); color: var(--indigo-deep);
  font-weight: 600; font-size: 14px; white-space: nowrap;
}
.fit-pill .material-icons { font-size: 18px; }
.fit-pill.oscura { background: var(--navy); color: #fff; }
.fit-pill .corto { display: none; }
@media (max-width: 400px) { .fit-pill .largo { display: none; } .fit-pill .corto { display: inline; } }

/* Pestañas Hoy · Rutina · Ejercicios · Progreso (la FitBottomNav, arriba). */
.fit-tabs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  position: sticky; top: 0; z-index: 9; background: var(--surface);
  border-bottom: 1px solid var(--surface-variant); padding: 6px 12px 8px;
}
.fit-tabs a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; color: var(--text-muted); min-width: 0; }
.fit-tabs .pildora { width: 56px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; }
.fit-tabs .material-icons { font-size: 22px; }
.fit-tabs a.activo { color: var(--indigo-deep); font-weight: 700; }
.fit-tabs a.activo .pildora { background: var(--teal-pale); }

.fit-saludo { color: var(--text-muted); font-size: 16px; margin: 14px 0; }
.fit-grid { display: grid; gap: 16px; }
.fit-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fit-col > .card + .card, .fit-col > .card + a.card, .fit-col > a.card + .card { margin-top: 0; }
@media (min-width: 1024px) { .fit-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.card.fit-card { border-radius: 20px; padding: 16px; }
a.card.fit-card.enlace { display: block; color: inherit; }
a.card.fit-card.fit-fila.enlace { display: flex; }
.fit-fila { display: flex; align-items: center; gap: 12px; }
.fit-fila > .cuerpo { flex: 1; min-width: 0; }
.fit-fila .t, .fit-card .t { font-weight: 600; }
.fit-fila .trail { color: var(--text-muted); }
.fit-circulo {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--teal-pale); color: var(--indigo-deep); display: flex; align-items: center; justify-content: center;
}
.fit-circulo .material-icons { font-size: 22px; }
.fit-circulo.grande { width: 46px; height: 46px; }
.fit-circulo.naranja { background: var(--aviso-fondo); color: var(--violet); }
.fit-seccion { margin: 6px 0 0; }
.encabezado-accion { display: flex; align-items: center; justify-content: space-between; }

/* Entrenamiento de hoy (tarjeta con degradé). */
.entreno-hoy {
  border-radius: 24px; padding: 20px; color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--indigo-light));
}
.entreno-hoy .sobre { font-size: 12px; font-weight: 600; letter-spacing: 1px; opacity: .8; }
.entreno-hoy .titulo { font-size: 24px; line-height: 30px; font-weight: 700; margin-top: 6px; }
.entreno-hoy .detalle { margin: 4px 0 16px; opacity: .88; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.entreno-hoy .hecho { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.18); border-radius: 999px; padding: 6px 12px; font-weight: 600; margin-bottom: 12px; }
.entreno-hoy .hecho .material-icons { font-size: 16px; }
.btn.blanco { background: #fff; color: var(--indigo-deep); font-weight: 700; border-radius: 14px; }

/* Racha semanal. */
.racha-dias { display: flex; justify-content: space-between; margin-top: 16px; }
.racha-dias .dia { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.racha-dias .bola {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--surface); font-weight: 600; color: var(--text-muted);
}
.racha-dias .bola.futuro { color: var(--text-tenue); }
.racha-dias .bola.hoy { box-shadow: inset 0 0 0 2px var(--violet); }
.racha-dias .bola.hecho { background: var(--violet); color: #fff; box-shadow: none; }
.racha-dias .bola .material-icons { font-size: 18px; }
.racha-dias .etq { font-size: 11px; font-weight: 700; color: var(--violet); min-height: 15px; }

/* Agua (botella que se llena). */
.card.fit-card.agua { background: var(--info-fondo); }
.agua .botella { width: 64px; height: 112px; flex-shrink: 0; }
.agua.pulso .botella { animation: pulso-agua .35s; }
@keyframes pulso-agua { 50% { transform: scale(1.06); } }
.agua .nivel { transition: y .5s cubic-bezier(.34, 1.56, .64, 1); }
.agua .etq-agua { color: #2F8FD8; font-weight: 600; }
.agua .cantidad { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.agua .cantidad b { font-size: 28px; line-height: 34px; color: var(--indigo-deep); }
.agua .estado { color: var(--text-muted); }
.agua .estado.cumplida { color: var(--success); font-weight: 700; }
.agua .vasos { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 8px; }
.agua .vasos .material-icons { font-size: 18px; color: #2F8FD8; opacity: .3; }
.agua .vasos .material-icons.lleno { opacity: 1; }
.agua details.meta-agua { position: relative; }
.agua details.meta-agua > summary { list-style: none; cursor: pointer; color: var(--text-muted); font-size: 16px; }
.agua details.meta-agua > summary::-webkit-details-marker { display: none; }
.agua details.meta-agua > summary:hover { text-decoration: underline; }
.agua .menu-meta {
  position: absolute; z-index: 5; top: 28px; right: -10px; background: var(--tarjeta); border-radius: var(--r-md);
  box-shadow: 0 6px 24px rgba(6, 48, 73, .18); padding: 12px; display: flex; flex-wrap: wrap; gap: 6px; width: 210px;
}
.agua .menu-meta .body-small { flex-basis: 100%; }
.agua .menu-meta form { display: inline; }
.agua .menu-meta .chip { border: 0; cursor: pointer; font: 600 13px "Manrope", sans-serif; }
.botones-agua { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.botones-agua .crece { flex: 1; }
.botones-agua .btn { height: 50px; border-radius: 14px; padding: 0 14px; white-space: nowrap; gap: 4px; }
.btn.azul { background: #2F8FD8; }
.btn.outline.azul-borde { color: #2F8FD8; border-color: #2F8FD8; }
.fila-boton { display: flex; align-items: flex-end; gap: 10px; }
.fila-boton .campo { flex: 1; margin-bottom: 0; }
.fila-boton .btn { height: 46px; }

/* Rutina: selector de días y ejercicios. */
.selector-dias { display: flex; justify-content: space-between; gap: 4px; margin: 12px 0 8px; }
.selector-dias a {
  flex: 1; max-width: 48px; height: 52px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-weight: 700; font-size: 16px; background: var(--surface-variant);
}
.selector-dias a.hoy { color: var(--indigo-light); }
.selector-dias a.activo { background: var(--navy); color: #fff; }
.selector-dias .punto { width: 6px; height: 6px; border-radius: 50%; }
.selector-dias .punto.si { background: var(--indigo-light); }
.selector-dias a.activo .punto.si { background: #fff; }
.cab-dia { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 14px; }
.cab-dia .cuerpo { flex: 1; min-width: 0; }
details.renombrar > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
details.renombrar > summary::-webkit-details-marker { display: none; }
details.renombrar > summary .material-icons { font-size: 18px; color: var(--text-muted); }
.chips-sugeridos { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-sugeridos .chip { border: 0; cursor: pointer; font: 600 13px "Manrope", sans-serif; }
.lista-ejercicios { display: flex; flex-direction: column; gap: 10px; }
.lista-ejercicios .card + .card { margin-top: 0; }
details.ej-rutina > summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; }
details.ej-rutina > summary::-webkit-details-marker { display: none; }
details.ej-rutina > summary .cuerpo { flex: 1; min-width: 0; }
details.ej-rutina > summary .t { display: block; }
details.ej-rutina > summary .flecha { color: var(--text-muted); transition: transform .15s; }
details.ej-rutina[open] > summary .flecha { transform: rotate(180deg); }
details.ej-rutina[open] .form-ejercicio { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borde-suave); }
details.ej-rutina .campo input, details.ej-rutina .campo select { background: var(--tarjeta); }
.numero { width: 34px; height: 34px; border-radius: 50%; background: var(--indigo-pale); color: var(--indigo-deep); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.etiqueta { background: var(--tarjeta); border-radius: 8px; padding: 2px 8px; font-size: 12px; font-weight: 600; color: var(--indigo-deep); }
.ver-ejemplo { display: flex; flex-direction: column; align-items: center; font-size: 11px; font-weight: 600; color: var(--indigo-light); flex-shrink: 0; }
.ver-ejemplo .material-icons { font-size: 28px; }
.contador { display: flex; align-items: center; background: var(--surface-variant); border-radius: var(--r-sm); }
.contador button { width: 44px; height: 46px; border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--indigo-deep); flex-shrink: 0; }
.campo .contador input { text-align: center; font-weight: 700; font-size: 17px; background: transparent; border: 0; padding: 0; min-width: 0; -moz-appearance: textfield; }
.contador input::-webkit-outer-spin-button, .contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
details.plegable .contador, details.ej-rutina .contador { background: var(--tarjeta); }
details.plegable .campo .contador input, details.ej-rutina .campo .contador input { background: transparent; }
.segmentado.chips-pausa { grid-template-columns: repeat(5, minmax(0, 1fr)); border-radius: var(--r-sm); }
.segmentado.dias-opcion { grid-template-columns: repeat(7, minmax(0, 1fr)); border-radius: var(--r-sm); }
.segmentado.chips-pausa .opcion-radio span, .segmentado.dias-opcion .opcion-radio span { border-radius: 10px; font-size: 13px; padding: 9px 2px; }
.segmentado.chips-pausa .opcion-radio input:checked + span, .segmentado.dias-opcion .opcion-radio input:checked + span { background: var(--navy); color: #fff; }
details.plegable .segmentado, details.ej-rutina .segmentado { background: var(--tarjeta); }
.autocompletar { position: relative; }
.autocompletar .sugerencias {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 6; background: var(--tarjeta); border-radius: var(--r-sm);
  box-shadow: 0 6px 24px rgba(6, 48, 73, .18); overflow: hidden;
}
.autocompletar .sugerencias button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px;
  background: none; border: 0; border-bottom: 1px solid var(--surface-variant); cursor: pointer; font: 14px "Manrope", sans-serif; color: var(--text);
}
.autocompletar .sugerencias button:hover { background: var(--surface-variant); }
.autocompletar .sugerencias .material-icons { color: var(--indigo-light); font-size: 20px; }
.autocompletar .sugerencias .t { font-weight: 600; }
.autocompletar .sugerencias .s { font-size: 12px; color: var(--text-muted); }
details.agregar-ejercicio > summary { color: var(--indigo-light); }

/* Entrenar. */
.entreno-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.progreso-barra { height: 8px; border-radius: 4px; background: var(--indigo-pale); margin: 8px 0 16px; overflow: hidden; }
.progreso-barra span { display: block; height: 100%; width: 0; background: var(--indigo-light); transition: width .3s; }
.entreno .card + .card { margin-top: 12px; }
.ej-curso.completo { background: var(--teal-pale); }
.ej-curso .completo { display: none; color: var(--indigo-light); }
.ej-curso.completo .fit-fila > .completo { display: inline-block; }
.ej-curso .campo input { background: var(--tarjeta); }
.series { display: flex; flex-wrap: wrap; gap: 8px; }
.serie {
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--tarjeta); color: var(--text-muted); font: 700 16px "Manrope", sans-serif;
  display: flex; align-items: center; justify-content: center;
}
.serie.siguiente { box-shadow: inset 0 0 0 2px var(--indigo-light); color: var(--indigo-light); }
.serie.hecha { background: var(--indigo-light); color: #fff; }
.entreno-pie {
  position: sticky; bottom: 76px; margin: 16px -20px 0; padding: 10px 20px; background: var(--surface);
  border-top: 1px solid var(--surface-variant); z-index: 8;
}
@media (min-width: 900px) { .entreno-pie { bottom: 0; } }
.barra-descanso {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px;
  background: var(--navy); color: #fff; border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 10px;
}
.barra-descanso[hidden] { display: none; }
.barra-descanso .cuerpo { flex: 1; }
.barra-descanso .etq { font-size: 12px; opacity: .8; }
.barra-descanso .reloj { font-size: 28px; font-weight: 700; line-height: 32px; font-variant-numeric: tabular-nums; }
.barra-descanso .btn-text { color: #fff; }
.barra-descanso .avance { position: absolute; left: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .6); transition: width 1s linear; }

/* Biblioteca de ejercicios. */
.tabs.grupos { margin-top: 0; }
.biblio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.biblio-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--surface-variant); }
.biblio-card .imagen { position: relative; display: block; background: #fff; aspect-ratio: 1.15; }
.biblio-card .imagen img { width: 100%; height: 100%; object-fit: contain; display: block; }
.biblio-card .imagen .sin { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; color: var(--text-muted); text-align: center; padding: 8px; }
.biblio-card .imagen.fallo img { display: none; }
.biblio-card .imagen.fallo .sin { display: flex; }
.biblio-card .txt { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.biblio-card .t { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; }
.biblio-card .s { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biblio-card.grande .imagen { aspect-ratio: 1.3; }
.pastillas { display: flex; flex-wrap: wrap; gap: 6px; }
.pasos { padding-left: 22px; margin: 0 0 10px; }
.pasos li { margin-bottom: 8px; }
@media (min-width: 1024px) { .ejercicio-detalle { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } }

/* Progreso. */
.datos-fit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.datos-fit .card + .card { margin-top: 0; }
.dato b { display: block; font-size: 20px; line-height: 26px; color: var(--indigo-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dato span { font-size: 12px; color: var(--text-muted); }
.sparkline { flex-shrink: 0; }
.logros { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; font-size: 13px; }
.logros > span { display: inline-flex; align-items: center; gap: 4px; }
.logros .material-icons { font-size: 18px; }
.logros .sube { color: var(--success); font-weight: 600; }
.fit-col > section > .fit-card + .fit-card { margin-top: 10px; }

/* Ajustes Fit a 360 px. */
.cab-dia { flex-wrap: wrap; }
.cab-dia:has(details.renombrar[open]) .cuerpo { flex-basis: 100%; }
.segmentado.chips-pausa { display: flex; flex-wrap: wrap; border-radius: var(--r-sm); }
.segmentado.chips-pausa .opcion-radio { flex: 1 0 auto; }
.segmentado.chips-pausa .opcion-radio span { white-space: nowrap; padding: 9px 10px; }

/* ------------------------------------------------------------------
   AIRIN Hogar web (2026-09-30): réplica de ui/home (GrupoFamiliarScreen,
   TareasHogarScreen, ListaComprasScreen). Ver routers/hogar_web.py.
   ------------------------------------------------------------------ */
.hogar-vacio { text-align: center; padding: 18px 8px 8px; }
.hogar-vacio .circulo-grande {
  width: 72px; height: 72px; border-radius: 50%; background: var(--teal-pale); color: var(--indigo-deep);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.hogar-vacio .circulo-grande .material-icons { font-size: 34px; }
.hogar-vacio p { margin: 8px 0 14px; }
.navs-hogar { display: flex; flex-direction: column; gap: 10px; }
.fila.nav-hogar { background: var(--teal-pale); color: var(--indigo-deep); margin: 0; }
.fila.nav-hogar .cuerpo .t { color: var(--indigo-deep); }
.fila.nav-hogar .cuerpo .s { color: var(--text-muted); }
.fila.nav-hogar .material-icons.trail { color: var(--indigo-deep); }
.acciones-invitar { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
details.invitar .codigo { font-size: 24px; font-weight: 800; letter-spacing: 3px; color: var(--indigo-deep); margin-top: 8px; }
.icon-btn.chico { width: 36px; height: 36px; }

/* Tareas. */
.lista-tareas { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.lista-tareas .card + .card { margin-top: 0; }
.card.tarea { padding: 14px; scroll-margin-top: 90px; }
.tarea .cab { display: flex; align-items: flex-start; gap: 6px; }
.tarea .cab .cuerpo { flex: 1; min-width: 0; }
.tarea .t { font-weight: 600; font-size: 15px; }
.tarea .desc { white-space: pre-line; margin-top: 2px; }
.tachada { text-decoration: line-through; color: var(--text-muted); }
.chips-tarea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.estado-tarea {
  border: 0; cursor: pointer; border-radius: 999px; padding: 5px 12px; font: 700 12px "Manrope", sans-serif;
  background: rgba(220, 38, 38, .12); color: var(--error);
}
.estado-tarea.en_progreso { background: rgba(232, 152, 32, .16); color: var(--aviso-texto); }
.estado-tarea.hecha { background: rgba(22, 163, 74, .16); color: var(--success); }
.fecha-tarea { display: inline-flex; align-items: center; gap: 4px; background: var(--tarjeta); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--indigo-deep); }
.fecha-tarea .material-icons { font-size: 14px; }
.responsables { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip-resp {
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--borde-fuerte); background: transparent; cursor: pointer;
  border-radius: 8px; padding: 5px 10px; font: 600 12px "Manrope", sans-serif; color: var(--text-muted);
}
.chip-resp .material-icons { font-size: 14px; }
.chip-resp.activo { background: var(--indigo-pale); border-color: var(--indigo-pale); color: var(--indigo-deep); }
.filtros-tareas { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.filtros-tareas .filtro {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borde-fuerte); border-radius: 999px;
  padding: 6px 14px; font-weight: 600; font-size: 13px; color: var(--text-muted); text-decoration: none;
}
.filtros-tareas .filtro span { background: var(--tarjeta); border-radius: 999px; padding: 0 7px; font-size: 11px; }
.filtros-tareas .filtro.activo { background: var(--indigo-pale); border-color: var(--indigo-pale); color: var(--indigo-deep); }
.seccion-tareas { font-size: 14px; font-weight: 700; margin: 18px 0 0 2px; display: flex; align-items: center; gap: 6px; }
.seccion-tareas span { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.seccion-tareas.atrasadas { color: var(--error); }
.estado-circulo { border: 0; background: none; cursor: pointer; padding: 0 4px 0 0; display: flex; color: var(--text-muted); }
.estado-circulo .material-icons { font-size: 26px; }
.estado-circulo.en_progreso { color: var(--aviso-texto); }
.estado-circulo.hecha { color: var(--success); }
.card.tarea.hecha { opacity: .75; }
.chip-prio { display: inline-flex; align-items: center; gap: 2px; border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 700; }
.chip-prio .material-icons { font-size: 14px; }
.chip-prio.alta { background: rgba(220, 38, 38, .12); color: var(--error); }
.chip-prio.baja { background: var(--tarjeta); color: var(--text-muted); }
.chip-prio.progreso { background: rgba(232, 152, 32, .16); color: var(--aviso-texto); }
.fecha-tarea.vencida { background: rgba(220, 38, 38, .12); color: var(--error); }
.avatares { display: inline-flex; margin-left: auto; }
.ini {
  font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none;
  border-radius: 50%; background: var(--indigo-pale); color: var(--indigo-deep); font-size: 11px; font-weight: 700;
}
.avatares .ini { border: 2px solid var(--surface, var(--bg)); margin-left: -6px; }
.avatares .ini:first-child { margin-left: 0; }
.avatares .ini.yo { background: var(--indigo-light); color: #fff; }
.avatares .ini.mas { background: var(--tarjeta); color: var(--text-muted); }
.chips-personas span { display: inline-flex !important; align-items: center; gap: 6px; padding: 4px 12px 4px 4px !important; max-width: 160px; }
.chips-personas span b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips-personas .ini { width: 22px; height: 22px; font-size: 10px; }
.prioridad-check input:checked + span.p-alta { background: rgba(220, 38, 38, .12); border-color: var(--error); color: var(--error); }
.subtareas { border-top: 1px solid var(--borde-suave); margin-top: 10px; padding-top: 4px; }
.subtarea, .item-compra { display: flex; align-items: center; gap: 4px; }
.check { border: 0; background: none; cursor: pointer; color: var(--text-muted); padding: 6px; display: flex; }
.check.marcado { color: var(--indigo-light); }
.subtarea .cuerpo { flex: 1; min-width: 0; font-size: 14px; }
details.editar-tarea { margin-top: 6px; }
details.editar-tarea > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; }
details.editar-tarea > summary::-webkit-details-marker { display: none; }
details.editar-tarea > summary .material-icons { font-size: 18px; }
details.editar-tarea[open] > form:first-of-type { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--borde-suave); }
details.editar-tarea .campo input, details.editar-tarea .campo textarea, details.editar-tarea select, .nueva-subtarea input { background: var(--tarjeta); }
.chips-check { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-check label { display: inline-block; margin: 0; font-size: inherit; color: inherit; }
.chips-check input { position: absolute; opacity: 0; pointer-events: none; }
.chips-check span {
  display: inline-block; border: 1px solid var(--borde-fuerte); border-radius: 8px; padding: 6px 12px; cursor: pointer;
  font-weight: 600; font-size: 13px; color: var(--text-muted); background: var(--tarjeta);
}
.chips-check input:checked + span { background: var(--indigo-pale); border-color: var(--indigo-pale); color: var(--indigo-deep); }
.chips-check input:focus-visible + span { outline: 2px solid var(--indigo-deep); }
.sub-editar { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.sub-editar .cuerpo { flex: 1; min-width: 0; font-size: 14px; }
.sub-editar select, .nueva-subtarea select {
  border: 1px solid var(--borde-suave); border-radius: 10px; padding: 6px 8px; font: 13px "Manrope", sans-serif; max-width: 130px; background: var(--tarjeta);
}
.nueva-subtarea { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.nueva-subtarea input { flex: 1; min-width: 0; border: 1px solid var(--borde-suave); border-radius: var(--r-sm); padding: 10px 12px; font: 14px "Manrope", sans-serif; }

/* Lista de compras. */
.resultados-catalogo { background: var(--surface-variant); border-radius: var(--r-md); padding: 4px 6px 6px; }
.resultados-catalogo .fila { background: transparent; margin: 0; padding-top: 6px; padding-bottom: 6px; }
.resultados-catalogo .btn-text { padding-left: 10px; }
.categoria-lista { font-size: 13px; font-weight: 700; color: var(--indigo-deep); margin: 16px 0 6px 4px; }
.item-compra {
  background: var(--surface-variant); border-radius: var(--r-sm); padding: 4px 4px 4px 2px; margin-bottom: 6px; scroll-margin-top: 90px;
}
.item-compra.comprado { opacity: .7; }
.item-compra .cuerpo { flex: 1; min-width: 0; }
.item-compra .t { font-weight: 500; }
.item-compra.comprado .t { text-decoration: line-through; color: var(--text-muted); }
.item-compra .s { font-size: 12px; color: var(--text-muted); }
.item-compra .cantidad { min-width: 34px; text-align: center; font-weight: 700; font-size: 14px; white-space: nowrap; }
.mas-menos {
  width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--tarjeta); color: var(--indigo-deep);
  font: 700 17px "Manrope", sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mas-menos:disabled { opacity: .35; cursor: default; }
/* Precio por unidad en la lista y comparación con la compra anterior (hogar/lista.html, compra.html). */
.precio-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
.precio-item .signo { font-weight: 700; color: var(--text-muted); font-size: 13px; }
.precio-item input { width: 88px; padding: 4px 8px; border: 1px solid var(--indigo-pale); border-radius: 8px; background: var(--tarjeta); color: inherit; font: 600 14px "Manrope", sans-serif; }
.item-compra .anterior b.sube { color: var(--error); }
.item-compra .anterior b.baja { color: var(--success); }
.cerrar-compra { margin-top: 12px; }
.cerrar-compra .total { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.cerrar-compra .total strong { font-size: 20px; }
.mes-compras { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 4px 6px; }

/* ------------------------------------------------------------------
   AIRIN Auto web (2026-09-30): réplica de ui/auto (AutoHomeScreen y sus
   pestañas). Ver routers/auto_web.py. Reutiliza piezas de Fit.
   ------------------------------------------------------------------ */
.fit-tabs.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.selector-autos { display: flex; gap: 8px; overflow-x: auto; padding: 0 20px 8px; scrollbar-width: none; }
.selector-autos a {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--borde-fuerte); font-weight: 600; font-size: 13px; color: var(--text-muted);
}
.selector-autos a .material-icons { font-size: 18px; }
.selector-autos a.activo { background: var(--teal-pale); border-color: var(--teal-pale); color: var(--indigo-deep); }
.hogar-vacio .circulo-grande.rojo-auto { background: linear-gradient(135deg, #C0392B, #992E22); color: #fff; width: 84px; height: 84px; }
.hogar-vacio .circulo-grande.rojo-auto .material-icons { font-size: 42px; }

.tarjeta-auto {
  border-radius: 24px; padding: 18px 20px; color: #fff; margin-top: 8px;
  background: linear-gradient(135deg, #C0392B, #992E22);
}
.tarjeta-auto .fila-patente { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.patente-cl {
  background: #fff; color: var(--text); border: 2px solid var(--text); border-radius: 8px; padding: 3px 12px;
  font: 700 20px/26px ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 1px;
}
.tarjeta-auto .nombre { font-size: 20px; line-height: 26px; font-weight: 700; margin-top: 12px; }
.tarjeta-auto .color { opacity: .82; }
.tarjeta-auto details.editar-auto > summary { list-style: none; color: #fff; cursor: pointer; }
.tarjeta-auto details.editar-auto > summary::-webkit-details-marker { display: none; }
.tarjeta-auto details.editar-auto[open] { flex-basis: 100%; }
.tarjeta-auto .fila-patente:has(details.editar-auto[open]) { flex-wrap: wrap; }
.tarjeta-auto details.editar-auto > summary { margin-left: auto; }
.tarjeta-auto .panel { background: var(--tarjeta); color: var(--text); border-radius: var(--r-md); padding: 14px; margin-top: 8px; }
.tarjeta-auto details.km-auto { margin-top: 12px; }
.tarjeta-auto details.km-auto > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: rgba(255, 255, 255, .18); border-radius: 999px; padding: 6px 12px; font-weight: 600;
}
.tarjeta-auto details.km-auto > summary::-webkit-details-marker { display: none; }
.tarjeta-auto details.km-auto > summary .material-icons { font-size: 18px; }
.tarjeta-auto details.km-auto form { margin-top: 10px; }
.tarjeta-auto details.km-auto .campo label { color: rgba(255, 255, 255, .85); }
.tarjeta-auto details.km-auto .campo input { background: var(--tarjeta); }

.lista-auto { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.lista-auto .card + .card { margin-top: 0; }
details.vencimiento > summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; }
details.vencimiento > summary::-webkit-details-marker { display: none; }
details.vencimiento > summary .cuerpo { flex: 1; min-width: 0; }
details.vencimiento .detalle-venc { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde-suave); }
details.vencimiento .detalle-venc > form + form { margin-top: 10px; }
details.vencimiento .campo input, details.vencimiento .campo textarea { background: var(--tarjeta); }
.fit-circulo.rojo { background: var(--error-fondo); color: var(--error); }
.fit-circulo.naranja { background: var(--aviso-fondo); color: var(--aviso-texto); }
.fit-circulo.verde { background: var(--exito-fondo); color: var(--success); }
.estado-venc { font-size: 12px; font-weight: 700; text-align: right; flex-shrink: 0; max-width: 92px; }
.estado-venc.rojo { color: var(--error); }
.estado-venc.naranja { color: var(--aviso-texto); }
.estado-venc.verde { color: var(--success); }
.punto-estado { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.punto-estado.rojo { background: var(--error); }
.punto-estado.naranja { background: var(--violet); }
.punto-estado.verde { background: var(--success); }
.dos-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.dos-datos .card + .card { margin-top: 0; }
.monto-auto { font-weight: 700; white-space: nowrap; }
.card.total-auto { background: var(--teal-pale); color: var(--indigo-deep); margin-top: 6px; }
.proxima-mant { background: var(--tarjeta); border-radius: var(--r-sm); padding: 10px 12px 2px; margin-bottom: 12px; }
details.plegable .proxima-mant .campo input { background: var(--surface-variant); }
details.vencimiento .proxima-mant .campo input { background: var(--surface-variant); }
.usar-tipico { display: block; }

/* Columnas parejas aunque haya un campo de fecha. */
.fila-campos > * { min-width: 0; }
.campo input[type="date"] { min-width: 0; padding-left: 10px; padding-right: 6px; font-size: 14px; }

/* ------------------------------------------------------------------
   Mi nutrición web (AIRIN Médico → Nutrición), réplica de
   ui/fit/MiNutricionScreen. Ver routers/nutricion_web.py.
   ------------------------------------------------------------------ */
.fila-campos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fila-campos.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.fila-campos.cuatro .campo label { margin-left: 2px; }
.resumen-nutri { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.resumen-nutri .anillo { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.resumen-nutri .anillo svg { width: 100%; height: 100%; }
.resumen-nutri .anillo .centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.15; }
.resumen-nutri .anillo b { font-size: 22px; color: var(--indigo-deep); }
.resumen-nutri .anillo span { font-size: 11px; color: var(--text-muted); }
.resumen-nutri .anillo .resta { font-weight: 700; color: var(--indigo-light); }
.resumen-nutri .barras { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.fila-macro { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.pista { height: 8px; border-radius: 4px; background: var(--surface-variant); overflow: hidden; margin-top: 4px; }
.pista.grande { height: 10px; margin-top: 8px; }
.pista span { display: block; height: 100%; border-radius: 4px; background: var(--info-icono); }
.pista span.algo { background: var(--violet); }
.pista span.atrasado { background: var(--error); }
.agua-nutri { margin-top: 12px; }
.ritmo { margin-top: 6px; font-weight: 600; }
.ritmo.al_dia { color: var(--success); }
.ritmo.algo { color: var(--aviso-texto); }
.ritmo.atrasado { color: var(--error); }
.comida-dia { margin-top: 10px; }
.comida-dia.completa { box-shadow: inset 0 0 0 1.5px var(--success); }
.comida-dia .ok { color: var(--success); font-weight: 700; }
.alimento-dia, .alimento-pauta { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.alimento-dia .cuerpo, .alimento-pauta .cuerpo { flex: 1; min-width: 0; }
.alimento-dia .cantidad { min-width: 34px; text-align: center; font-weight: 700; font-size: 14px; }
.alimento-pauta { flex-wrap: wrap; }
.alimento-pauta details.editar-registro[open] { flex-basis: 100%; order: 9; }
.alimento-pauta details.editar-registro > summary { list-style: none; }
.alimento-pauta details.editar-registro > summary::-webkit-details-marker { display: none; }
.alimento-pauta details.editar-registro form { background: var(--tarjeta); border-radius: var(--r-sm); padding: 10px; margin-top: 6px; }
.alimento-pauta .campo input, details.comida-pauta .plegable .campo input { background: var(--surface-variant); }
.acciones-comida { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.acciones-comida details.editar-registro > summary { list-style: none; }
.acciones-comida details.editar-registro > summary::-webkit-details-marker { display: none; }
.acciones-comida details.editar-registro[open] { flex-basis: 100%; }
.acciones-comida .campo input { background: var(--tarjeta); }
.metas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; margin-top: 10px; }
.metas-grid b { display: block; color: var(--indigo-deep); font-size: 16px; }
.metas-grid span { font-size: 12px; color: var(--text-muted); }
.sub-pestanas { margin-top: 14px; }
.sub-pestanas a { display: flex; align-items: center; justify-content: center; gap: 6px; }
.sub-pestanas .material-icons { font-size: 18px; }
.panel-pestana { margin-top: 12px; }
.panel-pestana[hidden] { display: none; }
.metas-card .fila-macro { align-items: baseline; }
.meta-kcal { display: flex; align-items: center; gap: 14px; margin: 14px 0 12px; padding: 14px 16px; border-radius: var(--r-md, 16px); background: var(--teal-pale); }
.meta-kcal .material-icons { font-size: 34px; color: var(--indigo-light); }
.meta-kcal b { display: block; font-size: 32px; line-height: 1.1; color: var(--indigo-deep); }
.meta-kcal span { font-size: 13px; color: var(--text-muted); }
.meta-kcal.vacia { opacity: .6; }
.metas-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .metas-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.meta-tile { background: var(--surface-variant); border-radius: var(--r-sm); padding: 12px 12px 10px; border-top: 3px solid var(--indigo-light); }
.meta-tile b { display: block; font-size: 20px; color: var(--indigo-deep); }
.meta-tile span { font-size: 12px; color: var(--text-muted); }
.meta-tile.prot { border-top-color: var(--indigo-light); }
.meta-tile.carb { border-top-color: var(--violet); }
.meta-tile.gras { border-top-color: var(--indigo-deep); }
.meta-tile.agua { border-top-color: var(--info-icono); }
.meta-tile.vacia { opacity: .55; }
.porcion-dia { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.porcion-dia .cuerpo { flex: 1; min-width: 0; }
.porcion-dia .mas-menos, .alimento-dia .mas-menos { min-width: 40px; min-height: 40px; }
.chips-periodo { display: flex; gap: 8px; margin: 10px 0 4px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 10px; }
.stat-caja { background: var(--surface-variant); border-radius: var(--r-sm); padding: 10px 12px; }
.stat-caja b { display: block; font-size: 20px; color: var(--indigo-deep); }
.stat-caja span { font-size: 12px; color: var(--text-muted); }
.stat-caja .delta { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: 2px; }
.grafico-barras { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 140px; margin-top: 12px; padding-bottom: 2px; border-bottom: 1px solid var(--surface-variant); }
.grafico-barras .barra { flex: 1; min-width: 2px; border-radius: 3px 3px 0 0; background: var(--indigo-light); }
.grafico-barras .barra.sobre { background: var(--violet); }
.grafico-barras .linea-meta { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--text-muted); pointer-events: none; }
.leyenda-grafico { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Firma del consentimiento en pantalla (ficha del paciente). */
.lienzo-firma { width: 100%; height: auto; aspect-ratio: 600 / 220; background: #fff; border: 1.5px dashed var(--text-tenue); border-radius: var(--r-sm); touch-action: none; cursor: crosshair; display: block; }

/* Consentimiento de datos de salud (vincular con el profesional). */
.consentimiento { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--text); cursor: pointer; }
.consentimiento input { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; accent-color: var(--indigo-light); }
.consentimiento a { color: var(--indigo-light); font-weight: 600; }

@media print {
  .sidebar, .bottom-nav, .topbar, .no-imprimir, .aviso { display: none !important; }
  .app { margin: 0 !important; }
}

/* Horas con dos listas (hora : minutos) en vez del reloj del navegador (base_app.html). */
.hora-sel { display: flex; align-items: center; gap: 4px; min-width: 0; }
.hora-sel select { flex: 1; min-width: 0; padding-left: 8px; padding-right: 4px; }
.horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }

/* ---- Mi plan (kine/plan.html): tarjetas de planes y detalle ---- */
.planes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 6px; }
.plan-tarjeta { position: relative; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--surface);
  border: 1px solid var(--indigo-pale); border-radius: var(--r-lg); padding: 18px 16px 14px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 1px 2px rgba(6, 48, 73, .06); transition: transform .12s, box-shadow .12s; }
.plan-tarjeta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(6, 48, 73, .12); }
.plan-tarjeta.recomendado { border: 2px solid var(--indigo-light); }
.plan-tarjeta.actual { border: 2px solid var(--violet); }
.plan-cinta { position: absolute; top: -10px; right: 14px; background: var(--indigo-light); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.plan-cinta.actual { background: var(--violet); }
.plan-nombre { font-size: 18px; font-weight: 700; color: var(--indigo-dark); }
.plan-precio { font-size: 28px; font-weight: 800; color: var(--indigo-deep); line-height: 1.1; }
.plan-precio small { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.plan-kines { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.plan-kines .material-icons { font-size: 17px; color: var(--indigo-light); }
.plan-ver { margin-top: 6px; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--indigo-light); }
.plan-ver .material-icons { font-size: 18px; }

dialog.plan-detalle { border: 0; padding: 0; border-radius: var(--r-lg); width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  overflow: auto; box-shadow: 0 24px 60px rgba(6, 48, 73, .35); }
dialog.plan-detalle::backdrop { background: rgba(6, 48, 73, .45); }
.plan-detalle-cabeza { position: relative; color: #fff; padding: 26px 22px 20px;
  background: linear-gradient(135deg, var(--indigo-light) 0%, var(--navy) 70%, var(--navy-oscuro) 100%); }
.plan-detalle-cabeza.plan-deluxe { background: linear-gradient(135deg, #E89820 0%, #B86A0C 45%, var(--navy-oscuro) 100%); }
.plan-detalle-cabeza.plan-basico { background: linear-gradient(135deg, #2BA3A0 0%, var(--indigo-light) 55%, var(--navy) 100%); }
.plan-detalle-cabeza h2 { margin: 2px 0 6px; font-size: 28px; font-weight: 800; color: #fff; }
.plan-detalle-cabeza p { margin: 8px 0 0; font-size: 14px; opacity: .92; }
.plan-detalle-etq { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; opacity: .85; }
.plan-detalle-precio { font-size: 32px; font-weight: 800; }
.plan-detalle-precio small { font-size: 13px; font-weight: 500; opacity: .85; }
.plan-cerrar { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .18); color: #fff; display: flex; align-items: center; justify-content: center; }
.plan-detalle-cuerpo { padding: 18px 22px 22px; background: var(--surface); }
.plan-lista { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.plan-lista li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.35; }
.plan-lista .material-icons { font-size: 19px; color: var(--indigo-light); flex-shrink: 0; }
.plan-lista.destacada li { font-weight: 600; color: var(--indigo-dark); }
.plan-lista.destacada .material-icons { color: var(--success); }
.plan-sub { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin: 4px 0 8px; }
.plan-por-kine { font-size: 12px; color: var(--indigo-light); font-weight: 600; margin-top: -2px; }

/* Mensual / Anual en Mi plan */
.periodo-switch { display: inline-flex; background: var(--surface-variant); border-radius: 999px; padding: 4px; margin: 0 0 14px; gap: 4px; }
.periodo-switch button { border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--text-muted);
  padding: 8px 16px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.periodo-switch button.activo { background: var(--surface); color: var(--indigo-dark); box-shadow: 0 1px 3px rgba(6, 48, 73, .15); }
.chip-ahorro { background: var(--exito-fondo); color: var(--exito-texto); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.solo-anual { display: none; }
body[data-periodo="anual"] .solo-anual { display: inline; }
body[data-periodo="anual"] .solo-mensual { display: none; }
.precio-antes { font-size: .55em; font-weight: 500; opacity: .6; margin-right: 2px; }
.plan-detalle-lanz { font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .2); display: inline-block;
  padding: 3px 10px; border-radius: 999px; margin-top: 6px; }

/* AIRIN Kine: copiloto clínico en el episodio */
.airin-atajos { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.airin-atajo { cursor: pointer; border: 1px solid var(--indigo-pale); background: var(--surface); font: inherit; font-size: 13px; }
.airin-chat { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.airin-msg { max-width: 92%; }
.airin-msg.yo { align-self: flex-end; }
.airin-msg .burbuja { border-radius: var(--r-md); padding: 10px 14px; font-size: 14px; line-height: 1.45; }
.airin-msg.yo .burbuja { background: var(--navy); color: #fff; white-space: pre-wrap; }
.airin-msg.ia .burbuja { background: var(--surface); border: 1px solid var(--indigo-pale); }
.airin-msg.ia .burbuja p { margin: 0 0 8px; }
.airin-msg.ia .burbuja ul { margin: 0 0 8px; padding-left: 18px; }
.airin-msg .meta { font-size: 11px; color: var(--text-muted); margin: 3px 6px 0; }
.airin-msg.yo .meta { text-align: right; }
.airin-propuesta { margin-top: 10px; padding: 12px; border-radius: var(--r-sm); background: var(--teal-pale); }
.airin-soap { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
.airin-soap > span { width: 34px; font-weight: 700; color: var(--indigo-deep); padding-top: 8px; }
.airin-soap textarea { flex: 1; background: var(--tarjeta); }
.airin-ejercicio { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: 13px; }
/* Cuadro para escribirle a AIRIN: el texto a todo el ancho y los botones redondos al lado (como un chat). */
.airin-entrada { display: flex; gap: 6px; align-items: flex-end; position: sticky; bottom: 76px; z-index: 2;
  background: var(--surface, var(--tarjeta)); border: 1px solid rgba(13,77,112,.18); border-radius: 26px;
  padding: 5px 5px 5px 16px; box-shadow: 0 4px 14px rgba(13,77,112,.10); }
.airin-entrada textarea { flex: 1; min-width: 0; width: auto; border: 0; outline: 0; background: transparent; resize: none;
  padding: 11px 0; margin: 0; min-height: 44px; max-height: 160px; line-height: 20px; box-shadow: none; }
.airin-entrada textarea.pensando { opacity: .55; }
.airin-acciones { display: flex; gap: 4px; flex: none; }
.btn.airin-icono { width: 44px; height: 44px; padding: 0; border-radius: 50%; flex: none; }
.btn.airin-icono .material-icons { font-size: 22px; }
.airin-soap textarea, .airin-entrada textarea { font: inherit; font-size: 15px; }

/* Panorama del día (AIRIN Kine) */
.panorama .cabeza { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.panorama-fila { display:block; text-decoration:none; color:inherit; padding:10px 12px; margin:6px 0; border-radius:12px;
  border-left:4px solid #8AA1B1; background:rgba(0,0,0,.03); }
.panorama-fila.nivel-riesgo { border-left-color:#C62828; }
.panorama-fila.nivel-precaucion { border-left-color:#E08A00; }
.panorama-fila ul { margin:4px 0 0; padding-left:18px; }
.panorama-titulo { overflow-wrap:anywhere; }

/* AIRIN escucha: saludo y micrófono */
.airin-hola { background:linear-gradient(135deg,#1C8484,var(--navy)); color:#fff; }
.airin-burbuja { padding:12px 14px; border-radius:16px; margin:8px 0; max-width:92%; white-space:pre-line; overflow-wrap:anywhere; }
.airin-burbuja.yo { margin-left:auto; background:var(--indigo-pale); color:var(--indigo-deep); border-bottom-right-radius:4px; }
.airin-sugerencias { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 8px; }
.airin-sugerencia { cursor:pointer; border:1px solid var(--indigo-light); background:transparent; color:var(--indigo-deep); }
.airin-altavoz { background:none; border:0; color:inherit; opacity:.8; cursor:pointer; padding:0 0 0 6px; vertical-align:middle; }
.airin-altavoz .material-icons { font-size:18px; }
.airin-opcion { flex-direction:column; align-items:flex-start; height:auto; padding:10px 16px; margin:6px 0; text-align:left; gap:2px; }
.airin-burbuja.airin { background:linear-gradient(135deg,#1C8484,var(--navy)); color:#fff; border-bottom-left-radius:4px; }
.airin-mic.escuchando { background:#C62828; color:#fff; animation:airin-pulso 1.2s ease-in-out infinite; }
@keyframes airin-pulso { 0%,100% { box-shadow:0 0 0 0 rgba(198,40,40,.45); } 50% { box-shadow:0 0 0 8px rgba(198,40,40,0); } }

/* AIRIN te recibe: pantalla completa con saludo grande, resumen y acciones */
.airin-pantalla { max-width: 680px; margin: 0 auto; position: relative; }
.airin-cerrar { position: absolute; right: 0; top: 4px; z-index: 1; display: inline-flex; gap: 4px; align-items: center;
  font: 600 13px "Manrope", sans-serif; color: #fff; text-decoration: none; background: rgba(255,255,255,.18);
  padding: 6px 12px; border-radius: 20px; margin: 10px; }
.airin-cerrar .material-icons { font-size: 18px; }
.airin-hero { background: linear-gradient(140deg, #1C8484 0%, var(--navy) 70%, #0A3A55 100%); color: #fff; border-radius: 24px;
  padding: 26px 22px 20px; margin-bottom: 14px; box-shadow: 0 10px 30px rgba(13,77,112,.25); }
.airin-hero-fecha { display: flex; gap: 6px; align-items: center; opacity: .85; font-size: 13px; font-weight: 600; letter-spacing: .3px; }
.airin-hero-fecha .material-icons { font-size: 18px; }
.airin-hero h1 { font: 800 32px/38px "Manrope", sans-serif; margin: 14px 0 6px; letter-spacing: -.3px; }
.airin-hero p { margin: 0 0 14px; opacity: .92; font-size: 15px; }
.airin-escuchar { display: inline-flex; gap: 6px; align-items: center; border: 1px solid rgba(255,255,255,.5); background: transparent;
  color: #fff; border-radius: 20px; padding: 6px 14px; font: 600 13px "Manrope", sans-serif; cursor: pointer; }
.airin-escuchar .material-icons { font-size: 18px; }
.airin-items { display: flex; flex-direction: column; gap: 8px; }
.airin-item { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; cursor: pointer; text-decoration: none;
  color: inherit; background: var(--surface, var(--tarjeta)); border: 1px solid rgba(13,77,112,.10); border-left: 4px solid #1C8484;
  border-radius: 16px; padding: 12px 12px 12px 14px; font: inherit; }
.airin-item.nivel-precaucion { border-left-color: #E08A00; }
.airin-item.nivel-riesgo { border-left-color: #C62828; }
.airin-item-icono { color: var(--indigo-light); font-size: 26px; }
.airin-item.nivel-riesgo .airin-item-icono { color: #C62828; }
.airin-item.nivel-precaucion .airin-item-icono { color: var(--aviso-texto); }
.airin-item-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.airin-item-texto strong { font-size: 15px; }
.airin-item-texto span { font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
.airin-item-ir { color: var(--text-muted); }
.airin-subtitulo { margin: 18px 0 8px; }
.airin-rapidas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.airin-rapida { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 16px; cursor: pointer;
  background: var(--indigo-pale); color: var(--indigo-deep); border: 0; font: 600 12.5px/16px "Manrope", sans-serif; text-align: center; }
.airin-rapida .material-icons { font-size: 26px; }
.airin-propuesta { border-left: 4px solid var(--indigo-light); }
.airin-propuesta ul { margin: 6px 0 10px; padding-left: 18px; }
.airin-propuesta-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.airin-propuesta.hecha { border-left-color: #2E7D32; }
.airin-propuesta.descartada, .airin-propuesta.fallida { opacity: .6; }
.airin-episodios { margin-top: 18px; }
.airin-episodios summary { cursor: pointer; padding: 8px 0; }
@media (max-width: 420px) { .airin-hero h1 { font-size: 28px; line-height: 34px; } }

/* Agendar con un formato de sesiones (kine/_serie.html, kine/centro_formatos.html) */
.serie-modo { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.serie-modo label { flex: 1 1 auto; white-space: nowrap; text-align: center; padding: 9px 8px; border-radius: 999px; border: 1px solid var(--indigo-pale); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-muted); position: relative; }
.serie-modo input { position: absolute; opacity: 0; pointer-events: none; }
.serie-modo label:has(input:checked) { background: var(--indigo-light); border-color: var(--indigo-light); color: #fff; }
.serie-dias { display: flex; flex-wrap: wrap; gap: 6px; }
.serie-dias label { min-width: 44px; text-align: center; padding: 8px 6px; border-radius: var(--r-xs); border: 1px solid var(--indigo-pale); cursor: pointer; font-size: 13px; font-weight: 600; position: relative; }
.serie-dias input { position: absolute; opacity: 0; pointer-events: none; }
.serie-dias label:has(input:checked) { background: var(--teal-pale); border-color: var(--indigo-light); color: var(--indigo-dark); }
.serie-previa { margin: 6px 0 12px; font-size: 14px; }
.serie-previa ol { margin: 6px 0 0; padding-left: 22px; max-height: 240px; overflow: auto; }
.serie-previa li { padding: 3px 0; }
.serie-previa li.mal { color: var(--error); }
.semanas-formato { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.semanas-formato .semana { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 74px; }
.semanas-formato .semana span { font-size: 12px; color: var(--text-muted); }
.semanas-formato .semana input { width: 64px; text-align: center; background: var(--tarjeta); border: 1px solid var(--indigo-pale); border-radius: var(--r-sm); padding: 10px 6px; font: 600 18px/22px "Manrope", sans-serif; color: var(--text); outline: none; }
.semanas-formato .semana input:focus { border-color: var(--indigo-mid); }

/* Días y horas libres al agendar (kine/_disponibilidad.html) */
.disp-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.disp-cab .icon-btn[disabled] { opacity: .3; }
.disp-dias { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.disp-dia { flex: 0 0 58px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 2px; border-radius: var(--r-sm); border: 1px solid var(--indigo-pale); background: var(--tarjeta); cursor: pointer; font-family: inherit; color: var(--text); }
.disp-dia .dsem { font-size: 11px; text-transform: uppercase; color: var(--text-muted); }
.disp-dia .dnum { font-size: 18px; font-weight: 800; line-height: 22px; }
.disp-dia .dest { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.disp-dia.libre .dest { color: var(--success); font-weight: 600; }
.disp-dia.cerrado { background: var(--surface-variant); opacity: .65; }
.disp-dia.feriado { background: var(--aviso-fondo); }
.disp-dia.feriado .dest { color: var(--aviso-texto); font-weight: 600; }
.disp-dia.sel { border: 2px solid var(--indigo-light); opacity: 1; }
.disp-detalle { margin-top: 8px; }
.disp-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; }
.disp-hora { padding: 9px 4px; border-radius: var(--r-xs); border: 1px solid var(--indigo-pale); background: var(--tarjeta); font: 600 14px/18px "Manrope", sans-serif; color: var(--indigo-deep); cursor: pointer; }
.disp-hora.sel { background: var(--indigo-light); border-color: var(--indigo-light); color: #fff; }
/* Horario semanal (kine/centro_horarios.html) */
.horario-dia { display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--indigo-pale); }
.horario-dia .rangos { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 14px; }
.horario-dia.cerrado .rangos { opacity: .4; pointer-events: none; }
@media (max-width: 480px) { .horario-dia { grid-template-columns: 1fr; } }

/* ===================================================================
   Portal del coach (AIRIN Fit: box y gimnasio) — templates/gimnasio/.
   Reusa los componentes de arriba; esto es solo lo propio del coach.
   =================================================================== */
/* Barra inferior con 5 accesos (Inicio · Clases/Check-in · AIRIN · Socios · Perfil). */
.bottom-nav .inner:has(> a:nth-child(5)) > a { min-width: 0; flex: 1; }

.tile.rojo-box { background: linear-gradient(135deg, #D9480F, #A8380C); }
.chip.plan { color: #fff; }
.chip .material-icons { font-size: 14px; vertical-align: -2px; }

/* Elegir box o gimnasio (primera vez). */
.elegir-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.elegir-tipo button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  border: 2px solid var(--indigo-pale); background: var(--tarjeta); border-radius: var(--r-md);
  padding: 14px; cursor: pointer; font: inherit; color: var(--text); min-height: 120px;
}
.elegir-tipo button:hover, .elegir-tipo button.elegido { border-color: var(--indigo-deep); background: var(--teal-pale); }
.elegir-tipo button:disabled { cursor: default; color: inherit; opacity: 1; }
.elegir-tipo .material-icons { font-size: 30px; color: var(--indigo-deep); }
.elegir-tipo b { font-size: 15px; }
.elegir-tipo span.s { font-size: 12px; color: var(--text-muted); line-height: 1.35; }

/* WOD del día (box). */
.card.wod-hoy { background: linear-gradient(135deg, #10283A, var(--navy)); color: #fff; }
.card.wod-hoy .muted, .card.wod-hoy .body-small { color: rgba(255,255,255,.78); }
.card.wod-hoy .wod-texto { white-space: pre-line; font-size: 15px; line-height: 1.5; margin: 8px 0 4px; }
.card.wod-hoy .btn.outline { color: #fff; border-color: rgba(255,255,255,.6); }
.podio { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.podio .puesto { background: rgba(255,255,255,.12); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; }

/* Ranking de un WOD. */
.ranking .fila .puesto-n { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; background: var(--tarjeta); color: var(--indigo-deep); flex-shrink: 0; }
.ranking .fila.p1 .puesto-n { background: #F5C542; color: #5A4300; }
.ranking .fila.p2 .puesto-n { background: #D5DCE3; color: #33414E; }
.ranking .fila.p3 .puesto-n { background: #E6B48A; color: #5C3415; }
.ranking .valor { font-weight: 800; font-size: 16px; color: var(--indigo-deep); }

/* Check-in (gimnasio). */
.checkin-buscar input { font-size: 18px !important; height: 56px; }
.checkin-socio { display: flex; align-items: center; gap: 12px; background: var(--surface-variant); border-radius: var(--r-md); padding: 12px 14px; margin: 8px 0; }
.checkin-socio .cuerpo { flex: 1; min-width: 0; }
.checkin-socio .t { font-weight: 700; display: block; }
.checkin-socio .s { font-size: 12px; color: var(--text-muted); }
.checkin-socio form { margin: 0; }
.checkin-socio.sin-plan { background: var(--aviso-fondo); }
.checkin-socio.adentro { background: var(--exito-fondo); }
.contador-grande { font-size: 34px; font-weight: 800; line-height: 1; color: var(--indigo-deep); }

/* Socios: chips bajo el nombre. */
.fila .chips-linea { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.fila .chips-linea .chip { font-size: 11px; padding: 2px 8px; }

/* Rutina por días (instructor). */
.dias-rutina { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.dias-rutina a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: var(--r-sm);
  background: var(--surface-variant); font-weight: 700; font-size: 13px; }
.dias-rutina a .n { font-size: 10px; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dias-rutina a.con { background: var(--teal-pale); color: var(--indigo-deep); }
.dias-rutina a.activo { background: var(--navy); color: #fff; }
.dias-rutina a.activo .n { color: rgba(255,255,255,.8); }
.ej-rutina { display: flex; align-items: center; gap: 10px; background: var(--tarjeta); border: 1px solid var(--surface-variant); border-radius: var(--r-sm); padding: 10px 12px; margin: 6px 0; }
.ej-rutina .cuerpo { flex: 1; min-width: 0; }
.ej-rutina .s { font-size: 12px; color: var(--text-muted); }
.ej-rutina form { margin: 0; }

/* Tablas simples dentro de tarjetas (pagos, resultados). */
.tabla-simple { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-simple th { text-align: left; font-size: 11px; color: var(--text-muted); font-weight: 700; padding: 6px 4px; border-bottom: 1px solid var(--borde-suave); }
.tabla-simple td { padding: 8px 4px; border-bottom: 1px solid var(--borde-suave); vertical-align: top; }
.tabla-simple td.num, .tabla-simple th.num { text-align: right; white-space: nowrap; }
.tabla-scroll { overflow-x: auto; }

/* Calendario de clases. */
.cal-semana { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.cal-semana > .col { flex: 1 1 140px; min-width: 140px; background: var(--surface-variant); border-radius: var(--r-md); padding: 8px; }
.cal-semana > .col.hoy { outline: 2px solid var(--indigo-light); }
.cal-semana .cab { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.cal-clase { display: block; background: var(--tarjeta); border-radius: 10px; padding: 6px 8px; margin-bottom: 6px; font-size: 12px; line-height: 1.3;
  border-left: 4px solid var(--indigo-light); }
.cal-clase.llena { border-left-color: #E89820; }
.cal-clase.cancelada { opacity: .5; text-decoration: line-through; border-left-color: #9aa8b4; }
.cal-clase .cupo { display: block; color: var(--text-muted); font-size: 11px; }
.cal-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-mes .dn { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.cal-mes .celda { background: var(--surface-variant); border-radius: 10px; min-height: 84px; padding: 4px; min-width: 0; }
.cal-mes .celda.fuera { opacity: .45; }
.cal-mes .celda.hoy { outline: 2px solid var(--indigo-light); }
.cal-mes .celda .num { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; }
.cal-mes .celda .cal-clase { padding: 3px 5px; font-size: 11px; margin-bottom: 3px; }
@media (max-width: 600px) {
  .cal-mes .celda { min-height: 60px; }
  .cal-mes .celda .cal-clase .cupo, .cal-mes .celda .cal-clase .nom { display: none; }
}
.barra-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 14px; }
.barra-acciones .btn.small { height: 38px; }
.barra-acciones .espacio { flex: 1; }

/* Imagen de producto/evento en tarjetas. */
.miniatura { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--tarjeta); }
.form-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
details.plegable > summary { cursor: pointer; list-style: none; }
details.plegable > summary::-webkit-details-marker { display: none; }
.solo-escritorio { display: none; }
@media (min-width: 600px) { .solo-escritorio { display: inline; } }
/* Cabecera de la ficha del socio: datos arriba, acciones en su propia fila. */
.ficha-socio { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ficha-socio > div:nth-child(2) { flex: 1; min-width: 0; }
.chips-ficha { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; scrollbar-width: none; }
.chips-ficha::-webkit-scrollbar { display: none; }
.chips-ficha .chip { white-space: nowrap; flex: 0 0 auto; }
.acciones-ficha { display: flex; gap: 8px; width: 100%; }
.acciones-ficha > * { flex: 1; }
.acciones-ficha .btn { width: 100%; }
@media (min-width: 1024px) { .acciones-ficha { width: auto; } .acciones-ficha > * { flex: 0 0 auto; } }

/* ===================================================================
   Portal del coach — usabilidad (2026-10-03, pedido de Ulises): los
   campos se confundían con texto (gris sin borde sobre tarjetas grises).
   En el portal del coach (body.portal-coach) todo campo es blanco, con
   borde visible, y en el celular los formularios van en una columna.
   =================================================================== */
.portal-coach .campo label { color: var(--text); font-size: 13px; margin-left: 2px; }
.portal-coach .campo input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
.portal-coach .campo select, .portal-coach .campo textarea,
.portal-coach .fila-boton > input, .portal-coach .otra-hora input {
  background: var(--tarjeta); border: 1.5px solid var(--borde-fuerte); border-radius: 12px;
  min-height: 48px; padding: 11px 14px; font: 500 16px/22px "Manrope", sans-serif; color: var(--text); width: 100%;
}
.portal-coach .campo input::placeholder, .portal-coach .campo textarea::placeholder { color: var(--text-tenue); font-weight: 400; }
.portal-coach .campo input:focus, .portal-coach .campo select:focus, .portal-coach .campo textarea:focus,
.portal-coach .otra-hora input:focus, .portal-coach .fila-boton > input:focus {
  border-color: var(--indigo-light); box-shadow: 0 0 0 3px rgba(28,132,132,.15); outline: none; background: var(--tarjeta);
}
.portal-coach .campo select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%2343566A' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.portal-coach .hora-sel select { padding-right: 28px; background-position: right 6px center; }
.portal-coach .card, .portal-coach .bloque-form { --sombra: 0 1px 2px rgba(10,18,25,.04); }
.bloque-form { background: var(--tarjeta); border: 1px solid var(--borde-suave); border-radius: var(--r-md); padding: 16px; margin-bottom: 12px; }
.bloque-form > h2 { margin: 0 0 12px; color: var(--indigo-deep); }
.portal-coach details.plegable .campo input, .portal-coach details.plegable .campo select { background: var(--tarjeta); }
@media (max-width: 600px) {
  .portal-coach .fila-campos { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .portal-coach .fila-campos.tres, .portal-coach .fila-campos.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
  .portal-coach .form-acciones .btn { flex: 1; }
}

/* Interruptor grande (Una vez / Se repite) y chips de días y horas. */
.segmentado.interruptor { border-radius: 14px; margin: 0 0 14px; }
.segmentado.interruptor .opcion-radio span { border-radius: 11px; padding: 12px 6px; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.segmentado.interruptor .opcion-radio input:checked + span { background: var(--navy); color: #fff; }
.portal-coach .segmentado.dias-opcion { background: none; padding: 0; gap: 6px; }
.portal-coach .segmentado.dias-opcion .opcion-radio span { border: 1.5px solid var(--borde-fuerte); background: var(--tarjeta); border-radius: 12px; padding: 11px 0; font-size: 15px; color: var(--text); }
.portal-coach .segmentado.dias-opcion .opcion-radio input:checked + span { background: var(--navy); border-color: var(--indigo-deep); color: #fff; box-shadow: none; }
.chips-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.chips-horas .opcion-radio input { position: absolute; opacity: 0; pointer-events: none; }
.chips-horas .opcion-radio span { display: block; text-align: center; padding: 10px 0; border: 1.5px solid var(--borde-fuerte); border-radius: 10px;
  background: var(--tarjeta); font-weight: 600; font-size: 14px; cursor: pointer; }
.chips-horas .opcion-radio input:checked + span { background: var(--navy); border-color: var(--indigo-deep); color: #fff; }
.chips-horas .opcion-radio input:focus-visible + span, .segmentado .opcion-radio input:focus-visible + span { outline: 2px solid var(--indigo-light); outline-offset: 2px; }
.otra-hora { display: flex; gap: 8px; margin-top: 8px; }
.otra-hora input { flex: 1; }
.otra-hora .btn { height: 48px; }
.atajos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.creador .solo-repite { display: none; }
.creador.modo-repite .solo-repite { display: block; }
.creador.modo-repite label .solo-repite { display: inline; }
.creador.modo-repite .solo-unica { display: none; }
.resumen-creador { display: flex; gap: 10px; align-items: flex-start; background: var(--teal-pale); color: var(--indigo-dark);
  border-radius: var(--r-md); padding: 12px 14px; margin: 4px 0 12px; font-size: 14px; line-height: 1.45; }
.resumen-creador .material-icons { font-size: 20px; color: var(--indigo-light); }
.barra-guardar { position: sticky; bottom: 76px; z-index: 15; background: linear-gradient(transparent, var(--surface) 30%); padding: 10px 0 4px; }
.barra-guardar .btn { height: 52px; font-size: 16px; }
@media (min-width: 1024px) { .barra-guardar { position: static; max-width: 420px; } }

/* Botón flotante (crear) en el celular. */
.fab { position: fixed; right: 18px; bottom: 88px; z-index: 18; width: 58px; height: 58px; border-radius: 18px;
  background: var(--indigo-light); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(6,48,73,.28); }
.fab .material-icons { font-size: 30px; }
.solo-pc { display: none !important; }
@media (min-width: 1024px) { .fab { display: none; } .solo-pc { display: inline-flex !important; } span.solo-pc { display: inline !important; } }

/* Calendario de clases. */
.cal-cabecera { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 12px; }
.cal-cabecera .cal-titulo { flex: 1; min-width: 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cal-cabecera .cal-titulo .btn-text { padding: 0; font-size: 13px; }
.cal-cabecera .cal-vistas { order: 5; flex: 1 0 100%; margin: 4px 0 0; }
@media (min-width: 1024px) {
  .cal-cabecera { flex-wrap: nowrap; }
  .cal-cabecera .cal-titulo { flex: 0 1 auto; min-width: 220px; }
  .cal-cabecera .cal-vistas { order: 0; flex: 0 0 200px; margin: 0 0 0 auto; }
}
.tira-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tira-dias a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; border-radius: 14px; background: var(--surface-variant); }
.tira-dias .l { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.tira-dias .n { font-size: 18px; font-weight: 800; }
.tira-dias .puntos { display: flex; gap: 2px; height: 5px; }
.tira-dias .puntos i { width: 5px; height: 5px; border-radius: 50%; background: var(--indigo-light); }
.tira-dias a.hoy { box-shadow: inset 0 0 0 2px var(--indigo-light); }
.tira-dias a.activo { background: var(--navy); color: #fff; }
.tira-dias a.activo .l { color: rgba(255,255,255,.8); }
.tira-dias a.activo .puntos i { background: #fff; }
.clase-card { display: flex; align-items: center; gap: 12px; background: var(--tarjeta); border: 1px solid var(--borde-suave); border-left: 5px solid var(--nivel, var(--indigo-light));
  border-radius: 14px; padding: 12px 14px; margin: 8px 0; }
.clase-card .hora { display: flex; flex-direction: column; align-items: center; min-width: 48px; }
.clase-card .hora b { font-size: 17px; }
.clase-card .hora span { font-size: 11px; color: var(--text-muted); }
.clase-card .cuerpo { flex: 1; min-width: 0; }
.clase-card .t { display: block; font-weight: 700; }
.clase-card .s { display: block; font-size: 12px; color: var(--text-muted); }
.clase-card .cupos { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.clase-card .cupos b { font-size: 18px; color: var(--text); }
.ocupacion { display: block; height: 5px; border-radius: 3px; background: var(--barra); margin-top: 7px; overflow: hidden; }
.ocupacion span { display: block; height: 100%; background: var(--nivel, var(--indigo-light)); border-radius: 3px; }
.libre { --nivel: #2E9E5B; } .media { --nivel: #D4A106; } .casi { --nivel: #E8780C; } .llena { --nivel: #D93025; } .cancelada { --nivel: #9AA8B4; }
.clase-card.cancelada { opacity: .6; }
.clase-card.cancelada .t { text-decoration: line-through; }
.cal-grilla { display: none; }
@media (min-width: 1024px) {
  .cal-movil { display: none; }
  .cal-grilla { display: block; background: var(--tarjeta); border: 1px solid var(--borde-suave); border-radius: var(--r-md); overflow: hidden; }
  .cg-cab, .cg-cuerpo { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
  .cg-cab { border-bottom: 1px solid var(--borde-suave); background: var(--surface); }
  .cg-cab a { text-align: center; padding: 10px 0; font-size: 13px; color: var(--text-muted); }
  .cg-cab a b { color: var(--text); font-size: 16px; margin-left: 2px; }
  .cg-cab a.hoy b { background: var(--indigo-light); color: #fff; border-radius: 999px; padding: 2px 8px; }
  .cg-cuerpo { position: relative; }
  .cg-horas { position: relative; }
  .cg-horas span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11px; color: var(--text-muted); margin-top: 1px; }
  .cg-horas span:first-child { transform: none; }
  .cg-dia { position: relative; border-left: 1px solid var(--borde-suave);
    background-image: linear-gradient(#EDF2F5 1px, transparent 1px); background-size: 100% var(--alto-hora); }
  .cg-dia.hoy { background-color: var(--surface-low); }
  .cg-dia .hueco { position: absolute; left: 0; right: 0; height: var(--alto-hora); display: flex; align-items: center; justify-content: center;
    color: transparent; border-radius: 8px; }
  .cg-dia .hueco:hover { background: var(--teal-pale); color: var(--indigo-light); }
  .cg-clase { position: absolute; z-index: 2; border-radius: 8px; padding: 4px 6px; overflow: hidden; font-size: 12px; line-height: 1.25;
    background: color-mix(in srgb, var(--nivel) 14%, var(--tarjeta)); border-left: 4px solid var(--nivel); color: var(--text); }
  .cg-clase:hover { box-shadow: 0 4px 12px rgba(6,48,73,.18); z-index: 3; }
  .cg-clase b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cg-clase span { display: block; color: var(--text-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cg-clase.cancelada { text-decoration: line-through; opacity: .6; }
}
.cal-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 2px; align-items: center; }
.cal-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--nivel); margin-right: 5px; vertical-align: -1px; }
.cal-mes .celda { display: block; color: inherit; }
.cal-mes .cal-clase { border-left-color: var(--nivel, var(--indigo-light)); }
.cal-links { margin-top: 16px; }
.hora-chip { background: var(--navy); color: #fff; font-weight: 800; border-radius: 10px; padding: 6px 8px; font-size: 14px; }
.creador [hidden] { display: none !important; }
.input-chico { height: 42px; border: 1.5px solid var(--borde-fuerte); border-radius: 10px; padding: 0 10px; background: var(--tarjeta); font: 600 15px "Manrope", sans-serif; color: var(--text); }
.input-chico:focus { outline: none; border-color: var(--indigo-light); box-shadow: 0 0 0 3px rgba(28,132,132,.15); }
.creador { max-width: 760px; }
.segmentado.interruptor .material-icons { font-size: 20px; }
/* Inputs ocultos de las opciones (días, horas, segmentados): sin esto heredan width:100% de .campo
   input y, al ser absolutos, ensanchan la página en el celular (franja blanca al deslizar). */
.opcion-radio { position: relative; }
.opcion-radio input { width: 1px !important; height: 1px !important; left: 0; top: 0; margin: 0; }

/* Detalle de una clase (coach). */
.clase-cabecera { background: var(--tarjeta); border: 1px solid var(--borde-suave); border-top: 6px solid var(--nivel, var(--indigo-light)); border-radius: var(--r-md); padding: 14px 16px; }
.clase-cabecera .cuando { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.clase-cabecera .dia { font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
.clase-cabecera .horas { font-size: 20px; font-weight: 800; }
.clase-cabecera .nombre { font-size: 22px; font-weight: 700; margin-top: 2px; overflow-wrap: anywhere; }
.clase-cabecera .detalle { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 13px; color: var(--text-muted); }
.clase-cabecera .detalle .material-icons { font-size: 16px; margin-right: 4px; vertical-align: -3px; }
.clase-cabecera .cupo-linea { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.clase-cabecera .cupo-linea .ocupacion { flex: 1; margin: 0; height: 8px; }
.clase-cabecera .cupo-linea .txt { font-size: 13px; white-space: nowrap; }
.clase-cabecera .cupo-linea .txt b { font-size: 16px; }
.reserva { display: flex; align-items: center; gap: 10px; background: var(--tarjeta); border: 1px solid var(--borde-suave); border-radius: 12px; padding: 8px 6px 8px 10px; margin: 6px 0; }
.reserva .nom { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reserva form { margin: 0; flex-shrink: 0; }
.reserva .asistio { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border-radius: 999px; border: 1.5px solid var(--borde-fuerte);
  background: var(--tarjeta); color: var(--text-muted); font: 600 13px "Manrope", sans-serif; cursor: pointer; }
.reserva .asistio .material-icons { font-size: 18px; }
.reserva .asistio.si { background: var(--exito-fondo); border-color: var(--exito-fondo); color: var(--exito-texto); }
.linea-accion { display: flex; gap: 8px; align-items: stretch; }
.linea-accion > input, .linea-accion > select { flex: 1; min-width: 0; }
.linea-accion > .btn { height: 48px; flex-shrink: 0; }
.resultado-linea { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--borde-suave); }
.resultado-linea .nom { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultado-linea .input-chico { width: 96px; flex-shrink: 0; }
.bloque-form > .fila { margin: 4px 0 12px; }
.portal-coach .linea-accion > input:not([type="checkbox"]), .portal-coach .linea-accion > select {
  background-color: var(--tarjeta); border: 1.5px solid var(--borde-fuerte); border-radius: 12px; min-height: 48px; padding: 11px 14px; font: 500 16px/22px "Manrope", sans-serif; }
.grupo-horas { margin-bottom: 10px; }
.grupo-horas .etq { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; margin: 0 0 4px 2px; }
.chips-horas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 700px) { .chips-horas { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cg-dia .hueco { height: calc(var(--alto-hora) / 2); font-size: 11px; font-weight: 600; gap: 2px; } .cg-dia .hueco .material-icons { font-size: 16px; } }
@media (max-width: 1023px) {
  .acciones-ficha > * { flex: 1 1 0; min-width: 0; }
  .acciones-ficha form { display: flex; }
  .acciones-ficha .btn { flex-direction: column; height: auto; min-height: 54px; padding: 6px 4px; gap: 2px; font-size: 12px; border-radius: 12px; white-space: nowrap; }
  .acciones-ficha .btn .material-icons { font-size: 20px; }
}
.tabs.tabs-ficha { margin-top: 12px; }
.tabs-ficha a { display: inline-flex; align-items: center; gap: 6px; }
.tabs-ficha a .material-icons { font-size: 16px; }
@media (max-width: 1023px) {
  .tabs.tabs-ficha { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; overflow: visible; }
  .tabs-ficha a { flex-direction: column; gap: 2px; padding: 8px 2px; border-radius: 12px; font-size: 11px; text-align: center; min-width: 0; }
  .tabs-ficha a span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .tabs-ficha a .material-icons { font-size: 20px; }
}
.fit-tabs.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 4px 8px; }
.fit-tabs.cinco .pildora { width: 48px; }
.fit-tabs.cinco a { font-size: 11px; }
/* Vista del alumno (box) / cliente (gimnasio) en AIRIN Fit. */
.box-hoy { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.box-hoy .card + .card { margin-top: 0; }
.clase-card.reservar .accion { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.clase-card.reservar .accion form { margin: 0; }
.clase-card.reservar .accion .btn-text { padding: 2px 0; font-size: 13px; }
.clase-card.mia { background: var(--exito-fondo-suave); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.mi-box-cab { display: flex; gap: 12px; align-items: center; }

/* Perfil → Apariencia (kine/_apariencia.html). */
.apariencia { max-width: 420px; margin: 0 auto; }

/* Logo para fondo oscuro (el mismo de la app en modo oscuro). */
:root[data-tema="oscuro"] .marca img { content: url("/static/img/airin_icon_oscuro.png"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .marca img { content: url("/static/img/airin_icon_oscuro.png"); }
}

/* Ejercicios sueltos: anotar, "Mis marcas" y ahora vs antes (mi_fit). */
.mis-marcas { margin-bottom: 16px; }
.chips-sugeridos { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.chips-sugeridos .chip { border: 0; cursor: pointer; font: inherit; font-size: 12px; }
.dif { font-weight: 700; }
.dif.sube { color: var(--exito-texto); }
.dif.baja { color: var(--error-texto); }
.comparacion { display: flex; align-items: center; gap: 12px; margin-top: 12px; background: var(--tarjeta); }
.comparacion > div { display: flex; flex-direction: column; }
.comparacion .s { font-size: 12px; color: var(--text-muted); }
.comparacion b { font-size: 18px; }
.comparacion .flecha { color: var(--text-muted); }
.comparacion .dif { margin-left: auto; font-size: 18px; }

/* AIRIN Fit: selector «Fit personal | Mi box» (mi_fit/_fit.html, encabezado). */
.fit-modo { margin: 0 0 6px; border-radius: 14px; }
.fit-modo a { border-radius: 11px; padding: 11px 6px; font-size: 15px; }
.fit-modo a.activo { background: var(--navy); color: #fff; box-shadow: none; }

/* Quiénes van a la clase (mi_fit/clases.html). */
details.asistentes { margin: -4px 0 10px; padding: 0 4px; }
details.asistentes summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 4px 0; }
details.asistentes summary::-webkit-details-marker { display: none; }
details.asistentes .fotos { display: flex; }
details.asistentes .fotos .avatar { margin-right: -8px; border: 2px solid var(--surface); font-size: 11px; }
details.asistentes summary .material-icons { margin-left: auto; color: var(--text-muted); transition: transform .15s; }
details.asistentes[open] summary .material-icons { transform: rotate(180deg); }
details.asistentes .fila { padding: 6px 0; }
.coronas { font-size: 13px; }

/* Mi próxima clase (mi_fit/mis_clases.html), como TarjetaOscura en Android. */
.tarjeta-oscura { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, var(--navy), var(--navy-oscuro)); color: #fff; text-decoration: none; }
.tarjeta-oscura .icono { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.tarjeta-oscura .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tarjeta-oscura .eti { font-size: 11px; letter-spacing: 1px; font-weight: 600; opacity: .85; }
.tarjeta-oscura .titulo { font-size: 20px; font-weight: 700; }
.tarjeta-oscura .detalle { font-size: 13px; opacity: .9; }
.clase-card a.hora, .clase-card a.cuerpo { color: inherit; text-decoration: none; }

/* ===================================================================
   Cotizador (dashboard, cotizaciones, clientes, plantillas) — mismo
   lenguaje visual que Kine/Dental/personal (2026-10-07: antes estas
   páginas seguían en Bootstrap). Ítems como tarjetas en el celular y en
   una sola fila en escritorio; diálogos nativos en vez de modales.
   =================================================================== */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.kpis .card { margin: 0; }
.kpi b { display: block; font-size: 28px; font-weight: 800; color: var(--indigo-deep); line-height: 1.1; }
.kpi span { font-size: 12px; color: var(--text-muted); }
.monto-mes { display: flex; align-items: center; gap: 12px; }
.monto-mes .cuerpo { flex: 1; }
.monto-mes .etq { font-size: 12px; color: var(--text-muted); }
.monto-mes .valor-grande { font-size: 26px; font-weight: 800; color: var(--indigo-deep); }
.viz-card { background: var(--tarjeta); border: 1px solid var(--surface-variant); }
.viz-card .cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; }
.viz-card .cab b { font-weight: 700; }

/* Filtros de la lista: buscador siempre a la vista, el resto plegado. */
.filtros-cot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.filtros-cot .campo { margin-bottom: 8px; }
.filtros-cot .campo input, .filtros-cot .campo select { padding: 10px 12px; font-size: 15px; border-radius: var(--r-sm); background: var(--tarjeta); border-color: var(--borde-suave); }
.filtros-cot .ancho { grid-column: 1 / -1; }
.fila .monto-col { text-align: right; white-space: nowrap; font-weight: 700; color: var(--indigo-deep); }
.fila .cuerpo .chips-linea { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }

/* Ítems de una cotización o plantilla. */
.tipos-item { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.items-cot { display: flex; flex-direction: column; gap: 10px; }
.item-cot {
  background: var(--surface-variant); border-radius: var(--r-md); padding: 12px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; align-items: end;
}
.item-cot .cab { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.item-cot .desc { grid-column: 1 / -1; }
.item-cot label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); margin: 0 0 3px 4px; }
.item-cot input {
  width: 100%; background: var(--tarjeta); border: 1px solid var(--borde-suave); border-radius: var(--r-sm);
  padding: 10px 12px; font: 400 15px/20px "Manrope", sans-serif; color: var(--text); outline: none;
}
.item-cot input:focus { border-color: var(--indigo-mid); }
.item-cot input.num { text-align: right; }
.item-cot .cantidad .con-unidad { display: flex; align-items: center; gap: 6px; }
.item-cot .cantidad .unidad { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.item-cot .sub { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; }
.item-cot .sub b { font-size: 16px; }
.item-cot .quitar {
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--tarjeta); color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.item-cot .quitar:hover { color: var(--error); }
.item-cot .quitar .material-icons { font-size: 20px; }
@media (min-width: 1024px) {
  /* Escritorio: cabecera (tipo y quitar) y debajo una sola línea
     descripción · precio · cantidad · subtotal. */
  .item-cot { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr); padding: 10px 14px 12px; }
  .item-cot .desc { grid-column: auto; }
  .item-cot .sub { grid-column: auto; display: block; text-align: right; padding-bottom: 8px; }
  .item-cot .sub label { margin-right: 0; }
}
.totales .linea { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; gap: 10px; }
.totales .linea.total { border-top: 1px solid var(--borde-suave); margin-top: 6px; padding-top: 12px; font-weight: 700; }
.totales .linea.total b { font-size: 24px; color: var(--indigo-deep); }
.lineas-cot { margin: 0; padding: 0; list-style: none; }
.lineas-cot li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--borde-suave); }
.lineas-cot li:first-child { border-top: 0; }
.lineas-cot .s { font-size: 12px; color: var(--text-muted); }
.lineas-cot .m { white-space: nowrap; font-weight: 600; }
.switch { display: flex; align-items: center; gap: 10px; font-size: 14px; margin: 6px 0; cursor: pointer; }
.switch input { width: 20px; height: 20px; accent-color: var(--indigo-light); }

/* Autocompletar del catálogo: caja flotante (position: fixed, la mueve el JS). */
.ac-flotante {
  position: fixed; z-index: 3000; display: none; max-height: 260px; overflow-y: auto;
  background: var(--tarjeta); border-radius: var(--r-sm); box-shadow: 0 6px 24px rgba(6, 48, 73, .18); border: 1px solid var(--borde-suave);
}
.ac-flotante button {
  display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 10px 12px;
  background: none; border: 0; border-bottom: 1px solid var(--surface-variant); cursor: pointer; font: 14px "Manrope", sans-serif; color: var(--text);
}
.ac-flotante button:hover { background: var(--surface-variant); }
.ac-flotante button .p { color: var(--text-muted); white-space: nowrap; }
.ac-flotante button.crear { color: var(--indigo-light); font-weight: 600; }

/* Diálogo genérico (enviar por correo, guardar plantilla). */
dialog.dialogo {
  border: 0; border-radius: var(--r-lg); padding: 20px; width: min(520px, calc(100vw - 32px));
  background: var(--tarjeta); color: var(--text); box-shadow: 0 20px 60px rgba(6, 20, 30, .35);
}
dialog.dialogo::backdrop { background: rgba(6, 20, 30, .6); }
dialog.dialogo h2 { margin: 0 0 12px; font-size: 18px; }
dialog.dialogo .acciones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.sidebar .contexto select { width: 100%; margin-top: 6px; background: var(--surface-variant); border: 0; border-radius: var(--r-sm); padding: 8px 10px; font: 600 13px "Manrope", sans-serif; color: var(--indigo-deep); }

/* ===================================================================
   Migración del resto de vistas (2026-10-07): públicas (login/registro),
   Ajustes del cotizador, agenda, AIRIN chat/actividad y superadmin.
   =================================================================== */
body.publico { margin: 0; min-height: 100vh; background: linear-gradient(160deg, var(--navy) 0%, var(--indigo-light) 100%); }
.publico-centro { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; }
.publico-tarjeta { width: 100%; max-width: 440px; background: var(--tarjeta); color: var(--text); border-radius: var(--r-lg); padding: 28px 24px; box-shadow: 0 20px 60px rgba(6, 20, 30, .35); }
.publico-marca { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 800; color: var(--indigo-deep); margin-bottom: 14px; }
.publico-marca img { height: 34px; }
.publico-titulo { font-size: 24px; line-height: 1.2; margin: 0 0 6px; }
.publico-pie { color: #fff; opacity: .85; font-size: 12px; margin-top: 16px; }
.publico-pie a { color: #fff; }

/* Rejillas de dos columnas para formularios/listas de configuración. */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.grid-2 > .card { margin: 0; }
.ajustes-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; margin-bottom: 8px; }
@media (min-width: 900px) { .ajustes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ajustes-grid .fila { margin: 4px 0; }

/* Opciones excluyentes como botones (tipo de negocio, meses pagados, plan). */
.opciones-radio { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones-radio label { cursor: pointer; position: relative; }
.opciones-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.opciones-radio span { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--borde-fuerte); font-weight: 600; font-size: 14px; color: var(--text); }
.opciones-radio span .material-icons { font-size: 20px; }
.opciones-radio input:checked + span { background: var(--navy); color: #fff; border-color: var(--navy); }
.opciones-radio input:focus-visible + span { outline: 2px solid var(--indigo-light); }
.opciones-radio.grandes label { flex: 1 1 140px; }
.opciones-radio.grandes span { width: 100%; flex-direction: column; justify-content: center; padding: 16px 10px; gap: 8px; }
.opciones-radio.grandes span .material-icons { font-size: 30px; }

/* Interruptor de una función (superadmin) con su descripción. */
.interruptor-func { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--borde-suave); border-radius: var(--r-sm); padding: 12px; cursor: pointer; background: var(--tarjeta); }
.interruptor-func input { width: 20px; height: 20px; accent-color: var(--indigo-light); flex-shrink: 0; margin-top: 2px; }
.interruptor-func .d { font-size: 12px; color: var(--text-muted); }
.interruptor-func .dep { font-size: 12px; color: var(--aviso-texto); }

.paso-num { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; margin-right: 8px; vertical-align: -6px; }
pre.codigo { background: var(--surface-variant); padding: 12px; border-radius: var(--r-sm); overflow-x: auto; font-size: 12px; line-height: 1.5; margin: 0; }
pre.codigo .mas { color: var(--exito-texto); }
pre.codigo .menos { color: var(--error-texto); }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar .8s linear infinite; vertical-align: -2px; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Editor de PDF: bloques arrastrables. */
.bloque-pdf { display: flex; align-items: center; gap: 10px; background: var(--surface-variant); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px; }
.bloque-pdf.oculto { opacity: .5; }
.bloque-pdf .handle { cursor: grab; color: var(--text-muted); }
.bloque-pdf .cuerpo { flex: 1; min-width: 0; font-weight: 600; }
.bloque-pdf .acc { display: flex; gap: 4px; }
.bloque-pdf .acc form { display: inline; }
.bloque-pdf.arrastrando { opacity: .4; }
.marco-pdf { border: 1px solid var(--borde-suave); border-radius: var(--r-sm); overflow: hidden; background: #fff; }
.marco-pdf iframe { width: 100%; height: 70vh; border: 0; display: block; }

/* Correo personalizado: vista previa. */
.previa-correo { border: 1px solid var(--borde-suave); border-radius: var(--r-sm); overflow: hidden; background: #fff; color: #222; }
.previa-correo .cab { background: #f5f5f5; padding: 8px 12px; font-size: 12px; color: #666; border-bottom: 1px solid #eee; }
.previa-correo .cuerpo { padding: 16px; line-height: 1.5; }
.previa-correo .pie { padding: 8px 16px; border-top: 1px solid #eee; color: #888; font-size: 12px; }

/* Horarios de atención: una fila por día. */
.fila-horario { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--borde-suave); }
.fila-horario .dia { font-weight: 600; }
.fila-horario .horas { display: flex; align-items: center; gap: 6px; grid-column: 1 / -1; }
.fila-horario .horas .hora-sel select { padding: 8px; }
@media (min-width: 700px) { .fila-horario { grid-template-columns: 120px auto minmax(0, 1fr); } .fila-horario .horas { grid-column: auto; } }
.tabla-simple td .switch { margin: 0; }

/* Chat con AIRIN (cotizador / coach): burbujas reutilizan .airin-msg. */
.airin-msg.sis .burbuja { background: var(--aviso-fondo); color: var(--aviso-texto); }
.airin-msg .burbuja .btn-text { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 0; }
.airin-msg.yo .burbuja .btn-text { color: #fff; }
.caja-chat { max-height: 60vh; overflow-y: auto; padding: 4px 2px; }

/* Actividad de AIRIN: tarjeta por acción. */
.accion-airin .cab { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.accion-airin code { background: var(--surface-variant); padding: 2px 6px; border-radius: 6px; font-size: 12px; }
.accion-airin .propuesta { background: var(--tarjeta); border: 1px solid var(--borde-suave); border-radius: var(--r-sm); padding: 12px; margin-bottom: 10px; }
.accion-airin .propuesta p { margin: 0 0 6px; }
.chip.lila { background: #EDE7F6; color: #52407F; }
.lista-planes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 900px) { .lista-planes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan-opcion { border: 1px solid var(--borde-suave); border-radius: var(--r-md); padding: 14px; background: var(--tarjeta); display: flex; flex-direction: column; gap: 6px; }
.plan-opcion.actual { border-color: var(--indigo-light); box-shadow: 0 0 0 2px var(--teal-pale); }
.modulo-item { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--borde-suave); border-radius: var(--r-sm); padding: 12px; background: var(--tarjeta); }
.modulo-item.off { opacity: .6; }
.modulo-item .material-icons { flex-shrink: 0; }

/* Segmentado con radios (formularios): misma pinta que el de enlaces. */
.segmentado label {
  text-align: center; padding: 9px 4px; border-radius: 999px; min-width: 0; cursor: pointer;
  font-weight: 600; font-size: 13px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.segmentado label input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado label:has(input:checked) { background: var(--tarjeta); color: var(--indigo-deep); box-shadow: 0 1px 4px rgba(6,48,73,.15); }
.segmentado label:has(input:focus-visible) { outline: 2px solid var(--indigo-deep); }
/* Dirección del paciente: usar ubicación y enlace a Maps. */
.ubicacion-acciones { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 12px; }
.ubicacion-acciones .btn-text { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.ubicacion-acciones .muted { font-size: 13px; }
.ubicacion-acciones [hidden] { display: none; }

/* ------------------------------------------------ AIRIN Finanzas (§24) */
.fin-carita {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: var(--r-lg);
  background: var(--info-fondo); color: var(--text); margin-bottom: 12px;
}
.fin-carita.feliz { background: var(--exito-fondo); }
.fin-carita.afligido, .fin-carita.preocupado { background: var(--aviso-fondo); }
.fin-carita.llorando { background: var(--error-fondo); }
.fin-carita .cara { font-size: 52px; line-height: 1; }
.fin-carita .txt { flex: 1; min-width: 0; }
.fin-carita .titulo { font-weight: 800; font-size: 20px; }
.fin-carita .exp { margin-top: 2px; font-size: 14px; }
.fin-carita .per { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.fin-carita .icon-btn { margin: -6px -6px 0 0; }
.fin-objetivo .fila-tit { display: flex; justify-content: space-between; align-items: center; font-weight: 700; gap: 8px; }
.fin-objetivo .fila-tit .btn-text { font-size: 13px; padding: 0; }
.fin-objetivo .cifra { font-size: 22px; font-weight: 800; margin: 6px 0 8px; }
.fin-objetivo .cifra .muted { font-size: 14px; font-weight: 600; }
.fin-objetivo .barra { height: 10px; border-radius: 999px; background: var(--barra); overflow: hidden; }
.fin-objetivo .barra span { display: block; height: 100%; border-radius: inherit; background: var(--success); }
.fin-cta { display: flex; gap: 12px; align-items: center; background: var(--aviso-fondo); color: var(--aviso-texto); text-decoration: none; }
.fin-cta .material-icons { font-size: 28px; }
.fin-totales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
@media (min-width: 900px) { .fin-totales { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fin-total {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--tarjeta); border: 1px solid var(--surface-variant); color: var(--text); text-decoration: none; min-width: 0;
}
.fin-total .et { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.fin-total .v { font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }
.fin-total .s { font-size: 12px; color: var(--text-muted); }
.fin-total .s.pend { color: var(--error-texto); font-weight: 600; }
.fin-mov { background: var(--tarjeta); border: 1px solid var(--surface-variant); border-radius: var(--r-md); margin-bottom: 8px; }
.fin-mov summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.fin-mov summary::-webkit-details-marker { display: none; }
.fin-mov .e { font-size: 24px; width: 32px; text-align: center; flex-shrink: 0; }
.fin-mov .cuerpo { flex: 1; min-width: 0; }
.fin-mov .cuerpo .t { font-weight: 600; overflow-wrap: anywhere; }
.fin-mov .cuerpo .s { font-size: 12px; color: var(--text-muted); }
.fin-mov .monto-mov { font-weight: 800; white-space: nowrap; }
.fin-mov.ingreso .monto-mov { color: var(--exito-texto); }
.fin-mov.ahorro .monto-mov { color: var(--indigo-light); }
.fin-mov .contenido { padding: 4px 12px 12px; border-top: 1px solid var(--surface-variant); }
.fin-mov .contenido form { margin-top: 10px; }
.fin-mov .btn-text.peligro { color: var(--error); display: inline-flex; align-items: center; gap: 4px; }
.fin-resumen-lista { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 4px 10px; font-weight: 700; }
.fin-registrar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 21; display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border: 0; border-radius: 999px;
  background: var(--navy); color: #fff; font: 800 16px "Manrope", sans-serif; letter-spacing: .5px; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(6, 48, 73, .35); cursor: pointer;
}
@media (min-width: 1024px) { .fin-registrar { bottom: 28px; left: auto; right: 40px; transform: none; } }
dialog.fin-registro {
  border: 0; padding: 0; width: min(480px, 100vw); max-width: 100vw; border-radius: var(--r-lg);
  background: var(--surface); color: var(--text);
}
dialog.fin-registro::backdrop { background: rgba(6, 20, 30, .55); }
dialog.fin-registro { padding: 14px 18px 20px; max-height: 92dvh; overflow-y: auto; }
.fin-registro .tipos.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fin-registro .tipo .det { font-size: 12px; font-weight: 600; color: var(--text-muted); text-align: center; }
.fin-participantes { margin-top: 6px; }
.fin-participantes .fila-part { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--surface-variant); }
.fin-participantes .quien { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.fin-participantes .quien input { width: 20px; height: 20px; accent-color: var(--navy); }
.fin-participantes .quien input[hidden], .fin-participantes [hidden] { display: none; }
.fin-participantes .cuota { font-weight: 800; }
.fin-participantes .monto-ind {
  width: 130px; border: 1px solid var(--borde-suave); border-radius: var(--r-xs); background: var(--tarjeta);
  color: var(--text); padding: 8px 10px; font: 700 15px "Manrope", sans-serif; text-align: right;
}
.fin-participantes .suma { margin: 8px 4px 0; font-weight: 600; }
.fin-sin-ingresos { text-align: center; padding: 6px 4px 14px; }
.fin-sin-ingresos .e { font-size: 44px; }
.fin-sin-ingresos p { margin: 6px 0 0; }
button.fin-cta { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
.fin-objetivo .fila-tit button.btn-text { font-size: 15px; font-weight: 800; padding: 0; }
.fila.fin-nav-compartidos { margin: 12px 0 0; background: var(--tarjeta); border: 1px solid var(--surface-variant); color: var(--text); }
.fila.fin-nav-compartidos .material-icons.lead, .fila.fin-nav-compartidos .material-icons.trail { color: var(--indigo-light); }
.fila.fin-nav-compartidos .cuerpo .s { color: var(--text-muted); font-weight: 600; }
.fin-deuda.pagada { opacity: .75; }
.fin-mov .contenido .fila-parte { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--surface-variant); }
.fin-mov .contenido .fila-parte > span:first-child { flex: 1; font-weight: 600; }
.fin-registro .cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.fin-registro .cab .titulo { font-weight: 800; font-size: 18px; }
.fin-registro .cerrar { background: var(--surface-variant); border: 0; color: var(--text); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
.fin-registro .tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fin-registro .tipo {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 6px; border-radius: var(--r-md);
  border: 1px solid var(--borde-suave); background: var(--tarjeta); color: var(--text); font: 700 14px "Manrope", sans-serif; cursor: pointer;
}
.fin-registro .tipo .e { font-size: 30px; }
.fin-registro .sub { margin: 16px 0 8px; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.chips-fin { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip-fin {
  border: 1px solid var(--borde-suave); background: var(--tarjeta); color: var(--text); border-radius: 999px;
  padding: 8px 12px; font: 600 14px "Manrope", sans-serif; cursor: pointer;
}
.chip-fin.activo { background: var(--navy); border-color: var(--navy); color: #fff; }
.fin-registro .que { font-weight: 700; color: var(--text-muted); text-align: center; }
.fin-registro .monto-grande { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 8px 0 4px; }
.fin-registro .monto-grande span { font-size: 34px; font-weight: 800; color: var(--text-muted); }
.fin-registro .monto-grande input {
  width: 100%; max-width: 280px; border: 0; border-bottom: 2px solid var(--borde-fuerte); background: transparent; color: var(--text);
  font: 800 40px "Manrope", sans-serif; text-align: center; outline: none; padding: 4px 0;
}
.fin-registro .monto-grande input:focus { border-color: var(--indigo-light); }
.fin-registro .ayuda { text-align: center; margin: 10px 0 14px; }
.fin-registro [hidden] { display: none; }
@media (max-width: 640px) {
  dialog.fin-registro { width: 100vw; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: env(safe-area-inset-bottom); }
}

/* Hogar → Recetario */
.filtro-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
.filtro-chips .chip { white-space: nowrap; text-decoration: none; flex: none; }
.ingrediente-receta { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--borde-suave); }
.ingrediente-receta:last-of-type { border-bottom: 0; }
.ingrediente-receta .material-icons { font-size: 20px; margin-top: 1px; }
.pasos-receta { margin: 0; padding-left: 20px; }
.pasos-receta li { margin-bottom: 10px; line-height: 1.5; }
.dia-menu { margin-bottom: 10px; }
.dia-menu.hoy { border: 2px solid var(--indigo-light); }
.dia-menu-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dia-menu-receta { display: block; text-decoration: none; color: inherit; margin: 6px 0 10px; }
.dia-menu-receta .t { display: block; font-weight: 700; font-size: 1.05rem; }
.dia-menu-receta .s { font-size: .85rem; }
.dia-menu-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.dia-menu-acciones form { margin: 0; }
.aviso-recetario { display: flex; gap: 10px; align-items: flex-start; background: var(--aviso-fondo); color: var(--aviso-texto); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 12px; font-size: .9rem; line-height: 1.4; }
.aviso-recetario .material-icons { font-size: 20px; }

/* Recetario: filtros de la familia, tira de días y 3 opciones por día */
.filtros-recetario { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.filtros-recetario::-webkit-scrollbar { display: none; }
.filtros-recetario form { margin: 0; flex: none; }
.filtros-recetario .filtro { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--borde-suave); background: var(--tarjeta); color: var(--text); border-radius: 999px; padding: 6px 12px; font: 600 13px "Manrope", sans-serif; cursor: pointer; white-space: nowrap; }
.filtros-recetario .filtro.activo { background: var(--navy); border-color: var(--navy); color: #fff; }
.filtros-recetario .filtro .material-icons { font-size: 16px; }
.tira-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.tira-dias a { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 0 6px; border-radius: var(--r-md); background: var(--surface-variant); color: var(--text); text-decoration: none; }
.tira-dias a .n { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.tira-dias a .f { font-size: 17px; font-weight: 800; }
.tira-dias a .estado { font-size: 15px; color: var(--text-tenue); }
.tira-dias a .estado:not(:empty) { line-height: 1; }
.tira-dias a.activo { background: var(--navy); color: #fff; }
.tira-dias a.activo .n, .tira-dias a.activo .estado { color: rgba(255,255,255,.85); }
.dia-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.dia-cab h2 { margin: 0; }
.opciones-dia { margin: 0; }
.opcion-receta { display: flex; align-items: center; gap: 12px; background: var(--tarjeta); border: 1.5px solid var(--borde-suave); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 8px; cursor: pointer; }
.opcion-receta:has(input:checked) { border-color: var(--indigo-light); background: var(--indigo-pale); }
.opcion-receta input { width: 20px; height: 20px; accent-color: var(--indigo-light); flex: none; margin: 0; }
.opcion-receta .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.opcion-receta .t { font-weight: 700; }
.opcion-receta .s { font-size: 12px; color: var(--text-muted); }
.opcion-receta .calce { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; align-items: center; }
.opcion-receta .ver { flex: none; color: var(--indigo-light); font-weight: 700; font-size: 14px; text-decoration: none; padding: 8px 4px; }
.mini-etq { display: inline-block; font-size: 11px; font-weight: 600; color: var(--indigo-light); margin-right: 6px; }
.mini-etq::before { content: "• "; }
.acciones-dia { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.acciones-dia form { margin: 0; }
.acciones-dia .btn-text { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.acciones-dia .material-icons, .btn-text .material-icons { font-size: 18px; }
.selector-categoria { display: flex; align-items: center; gap: 8px; margin: 4px 0 4px; }
.selector-categoria select { flex: 1; max-width: 280px; }
.etiquetas-receta { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.fila .cuerpo-link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.fila form { margin: 0; }
.filtros-recetario, .tira-dias { contain: inline-size; }
.selector-categoria select { background: var(--surface-variant); color: var(--text); border: 1px solid var(--borde-campo); border-radius: 999px; padding: 8px 14px; font: 600 14px "Manrope", sans-serif; }
.opciones-dia .btn[hidden] { display: none; }