/* ============================================================
   AGENDA ARI — Panel interno
   Sistema de diseño premium (independiente de css/style.css,
   que sigue usando el sitio público que ven los pacientes).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Oculta por completo el contenido de las páginas privadas del panel hasta que auth.js
   confirme que hay sesión iniciada (ver exigirSesion en js/auth.js). Así, si alguien sin
   sesión llega a una de estas ligas por error o adivinando la URL, nunca alcanza a ver el
   menú lateral ni la estructura de la página antes de ser mandado a login. */
body.verificando-sesion { visibility: hidden; }

:root {
  /* ---- Paleta de marca (se mantiene igual en todo el proyecto) ---- */
  --lila: #D9C7DD;
  --orquidea: #A66FA8;
  --purpura: #6E5578;
  --purpura-oscuro: #453349;
  --teal: #128585;
  --blanco: #FFFFFF;

  --bg: #F5EDF7;
  --borde: #DFCCE4;
  --texto: #3A2C40;
  --texto-suave: #6E5578;
  --texto-apagado: #B7A3BC; /* placeholders y días fuera de rango; cada paleta lo redefine */
  --rojo: #B5495B;

  /* ---- Tokens nuevos del sistema de diseño ---- */
  --surface: #FFFFFF;
  --surface-subtle: #FAF4FB;
  --surface-hover: #F0E3F3;
  --border-subtle: #E8D8EC;
  --border-strong: #D5BEDC;
  --sidebar-bg: rgba(249, 241, 251, 0.92);

  --teal-soft: #E6F5F4;
  --purpura-soft: #F1E9F3;
  --rojo-soft: #FBEBEE;
  --orquidea-soft: #F5EAF6;

  /* Naranja-coral: mismo tono que las citas autoagendadas en Google Calendar (colorId
     Tangerine), reutilizado aquí para que el cuadro de "Seguimiento/Autoagendar" del
     expediente resalte y se asocie visualmente con esas citas. */
  --coral: #E0703F;
  --coral-soft: #FCEEE6;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --shadow-xs: 0 1px 2px rgba(69, 51, 73, 0.05);
  --shadow-sm: 0 1px 3px rgba(69, 51, 73, 0.06), 0 1px 2px rgba(69, 51, 73, 0.04);
  --shadow-md: 0 4px 16px rgba(69, 51, 73, 0.08), 0 1px 3px rgba(69, 51, 73, 0.05);
  --shadow-lg: 0 12px 32px rgba(69, 51, 73, 0.12), 0 2px 6px rgba(69, 51, 73, 0.06);
  --shadow-focus: 0 0 0 4px rgba(166, 111, 168, 0.16);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 280ms;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Red de seguridad: ninguna imagen debería poder desbordar su contenedor en pantallas
   angostas. Las fotos de perfil/paciente ya traen su propio ancho/alto fijo en px, y esos
   son más específicos que esta regla, así que siguen mandando ellos. */
img { max-width: 100%; display: block; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--lila); color: var(--purpura-oscuro); }

/* Scrollbar discreto (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--orquidea); }

/* ============================================================
   Animaciones
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.page-header { animation: fadeInUp var(--t-slow) var(--ease) both; }
main > .card,
main > form,
.grupo-fecha,
.page-header + .card { animation: fadeInUp var(--t-slow) var(--ease) both; }
main > .card:nth-of-type(2) { animation-delay: 40ms; }
main > .card:nth-of-type(3) { animation-delay: 80ms; }
main > .card:nth-of-type(4) { animation-delay: 120ms; }
main > .card:nth-of-type(5) { animation-delay: 160ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   Menú lateral — estilo Linear/Notion, fijo en desktop,
   barra horizontal en móvil (misma marcación, solo cambia el layout)
   ============================================================ */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 232px;
  background: var(--sidebar-bg, rgba(255, 255, 255, 0.9));
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-right: 1px solid var(--border-subtle);
  box-shadow: 6px 0 24px rgba(30, 25, 40, 0.07), 2px 0 8px rgba(30, 25, 40, 0.04);
  padding: var(--space-5) 14px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  z-index: 40;
  overflow-y: auto;
}

.sidebar h1 { display: none; } /* el título de página ahora vive en .page-header, dentro de <main> */

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 6px 8px;
  margin-bottom: var(--space-5);
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--orquidea), var(--purpura-oscuro));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex: none;
  box-shadow: 0 2px 6px rgba(69, 51, 73, 0.25);
}

.brand-mark svg { width: 16px; height: 16px; }

.brand-name {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--purpura-oscuro);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-spacer { flex: 1; }

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.sidebar a.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--texto-suave);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 10px;
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.sidebar a.nav-link svg { width: 17px; height: 17px; flex: none; }

.sidebar a.nav-link:hover {
  background: var(--surface-hover);
  color: var(--purpura-oscuro);
}

.sidebar a.nav-link.active {
  background: var(--purpura-oscuro);
  color: #fff;
}

/* "+ Nueva cita" — acción destacada dentro del menú */
.sidebar a.nav-link-cta {
  background: var(--teal-soft);
  color: var(--teal);
  font-weight: 700;
}

.sidebar a.nav-link-cta:hover { background: var(--teal); color: #fff; }

.sidebar a.nav-link-exit:hover {
  background: var(--rojo-soft);
  color: var(--rojo);
}

/* ============================================================
   Layout general
   ============================================================ */
main {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) 64px;
}

@media (min-width: 720px) {
  main { padding: 48px 32px 80px; }
}

@media (min-width: 880px) {
  /* 1280px en vez de 900px: con pantallas anchas quedaba mucho espacio muerto a la
     derecha, sobre todo en tablas con varias columnas (ej. Seguimiento). */
  main { margin: 0 0 0 232px; max-width: 1280px; padding: 48px 40px 80px; }
}

@media (max-width: 879px) {
  .sidebar {
    position: sticky;
    top: 0;
    left: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 10px 14px;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
  }

  .sidebar::-webkit-scrollbar { display: none; }
  /* El logo/marca se oculta en móvil: en el espacio reducido se veía como un
     segundo ícono de "Inicio" (mismo destino, distinto color), así que solo
     queda el ícono "Inicio" del menú para esa función. */
  .sidebar .brand { display: none; }
  .sidebar nav { flex-direction: row; }
  .sidebar-spacer { flex: none; width: 8px; }
  .sidebar-footer { flex-direction: row; border-top: none; padding-top: 0; margin-left: auto; padding-left: 8px; border-left: 1px solid var(--border-subtle); }
  .sidebar a.nav-link span { display: none; }
  .sidebar a.nav-link { padding: 10px; }
  .sidebar a.nav-link svg { width: 23px; height: 23px; }
}

@media (max-width: 400px) {
  /* Con la Agenda dividida en Horarios + Citas ya son 6 links + Configuración + Cerrar
     sesión = 8 iconos en la barra superior; en teléfonos muy angostos (iPhone SE y
     similares, 320-375px) se apretaban demasiado. La barra sigue siendo desplazable
     (overflow-x: auto, ver arriba) por si aun así no caben todos de corridito. */
  .sidebar a.nav-link { padding: 8px; }
  .sidebar a.nav-link svg { width: 20px; height: 20px; }
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}

.page-header-text { display: flex; align-items: flex-start; gap: 14px; }

.page-header-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--purpura-soft);
  color: var(--purpura-oscuro);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 2px;
}

.page-header-icon svg { width: 22px; height: 22px; }

.page-header h1.page-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--purpura-oscuro);
  margin: 0 0 4px;
}

.page-header p.page-subtitle {
  margin: 0;
  color: var(--texto-suave);
  font-size: 14px;
  max-width: 52ch;
}

/* ============================================================
   Tarjetas
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

@media (min-width: 720px) {
  .card { padding: 28px 28px; }
}

.card:hover { box-shadow: var(--shadow-md); }

.separador {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-6) 0 var(--space-4);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-2);
}

/* Sin esto, un título largo (ej. "Información administrativa", "Historia clínica
   psicológica") empuja el chevron/botón fuera de la tarjeta en pantallas angostas en vez
   de partirse en dos líneas — los flex items no se encogen bajo su ancho de contenido a
   menos que se les dé min-width:0 explícito. */
.card-header h2 { flex: 1; min-width: 0; }

.card-header .card-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--teal-soft);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.card-header .card-icon svg { width: 16px; height: 16px; }

/* Cuadro destacado (ej. Seguimiento/Autoagendar en el expediente): mismo .card pero con
   acento coral para que no se pierda entre el resto de bloques colapsables. */
.card-destacada {
  border: 1px solid #F0C7AE;
  background: var(--coral-soft);
  border-left: 4px solid var(--coral);
}

.card-destacada .card-icon-destacado {
  background: #F6DBC8;
  color: var(--coral);
}

.check-inline {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--texto);
  margin: var(--space-3) 0;
  cursor: pointer;
}

.check-inline input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--coral);
  flex: none;
  cursor: pointer;
}

/* ============================================================
   Bloques colapsables del expediente (acordeón)
   ============================================================ */
.card-colapsable > .card-header {
  cursor: pointer;
  user-select: none;
}

.card-colapsable > .card-header .chevron {
  margin-left: auto;
  color: var(--texto-suave);
  flex-shrink: 0;
  transition: transform var(--t-base) var(--ease);
}

.card-colapsable.abierto > .card-header .chevron { transform: rotate(180deg); }

.card-colapsable > .card-body { display: none; }
.card-colapsable.abierto > .card-body { display: block; }

.link-whatsapp {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.link-whatsapp:hover { text-decoration: underline; }

/* ============================================================
   Excepciones de horario agrupadas por día (acordeón anidado,
   para no obligar a hacer scroll por una lista interminable de
   horarios sueltos)
   ============================================================ */
.lista-excepciones { display: flex; flex-direction: column; gap: 10px; }

.grupo-excepcion {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.grupo-excepcion-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  background: var(--surface-subtle);
  flex-wrap: wrap;
}

.grupo-excepcion-header .grupo-excepcion-fecha {
  font-weight: 600;
  color: var(--purpura-oscuro);
}

.grupo-excepcion-header .grupo-excepcion-resumen {
  flex: 1;
  min-width: 0;
}

.grupo-excepcion-header .chevron {
  color: var(--texto-suave);
  flex-shrink: 0;
  width: 18px; height: 18px;
  transition: transform var(--t-base) var(--ease);
}

.grupo-excepcion.abierto .grupo-excepcion-header .chevron { transform: rotate(180deg); }

.grupo-excepcion-body { display: none; padding: 4px 14px 12px; }
.grupo-excepcion.abierto .grupo-excepcion-body { display: block; }

.fila-excepcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid var(--border-subtle);
}
.fila-excepcion:first-child { border-top: none; }

.fila-excepcion-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

h2 {
  margin: 0 0 var(--space-1);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--purpura-oscuro);
}

.card > p.muted:first-of-type,
.card-header + p.muted {
  margin-top: 0;
}

/* ============================================================
   Formularios
   ============================================================ */
label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin: var(--space-4) 0 6px;
  color: var(--texto-suave);
  letter-spacing: 0.01em;
}

label:first-of-type { margin-top: var(--space-2); }

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: inherit;
  color: var(--texto);
  background: var(--surface-subtle);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
}

input::placeholder, textarea::placeholder { color: var(--texto-apagado); }

input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--orquidea);
  background: var(--surface);
  box-shadow: var(--shadow-focus);
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E5578' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

textarea { min-height: 78px; resize: vertical; line-height: 1.5; }

/* La flechita del select va en un data-URL (no acepta var()), así que cada
   paleta la redefine con su color de texto secundario. Se re-declara también
   no-repeat y posición: la regla de :focus usa el shorthand "background" y,
   sin esto, la flechita se repetía por todo el ancho al enfocar el select. */
body[data-paleta="primaveral"] select,
body[data-paleta="sobria"] select,
body[data-paleta="spa"] select,
body[data-paleta="citto"] select {
  background-repeat: no-repeat;
  background-position: right 12px center;
}

body[data-paleta="primaveral"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2346788A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
body[data-paleta="sobria"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C6F75' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
body[data-paleta="spa"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8378' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
body[data-paleta="citto"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

input[readonly] {
  background: var(--surface-hover);
  color: var(--texto-suave);
  border-style: dashed;
}

/* Buscador de paciente existente (autocompletar) */
.autocomplete-wrap { position: relative; }

.sugerencias-lista {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-height: 240px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: var(--shadow-lg);
  animation: scaleIn var(--t-base) var(--ease) both;
}

.sugerencia-item {
  padding: 10px 14px;
  font-size: 13.5px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--t-fast) var(--ease);
}

.sugerencia-item:last-child { border-bottom: none; }
.sugerencia-item:hover { background: var(--surface-hover); }

.sugerencia-item .sugerencia-tel {
  display: block;
  font-size: 12px;
  color: var(--texto-suave);
  margin-top: 1px;
}

/* Fila de lada + número de WhatsApp */
.fila-tel { display: flex; gap: 8px; }
.fila-tel #lada, .fila-tel #m-lada { width: 68px; flex: none; text-align: center; }
.fila-tel #phone, .fila-tel #m-phone { flex: 1; }

/* ============================================================
   Botones
   ============================================================ */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--teal);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  margin-top: var(--space-3);
  margin-right: 8px;
  text-align: center;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}

button svg, .btn svg { width: 15px; height: 15px; flex: none; }

button:hover, .btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  opacity: 1;
}

button:active, .btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }

button:disabled, .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn {
  background: linear-gradient(135deg, var(--purpura-oscuro), var(--purpura));
}

button.secundario, .btn.secundario {
  background: var(--surface);
  color: var(--texto);
  border: 1.5px solid var(--border-subtle);
  box-shadow: none;
}

button.secundario:hover, .btn.secundario:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

button.rechazar, .btn.rechazar {
  background: var(--surface);
  color: var(--rojo);
  border: 1.5px solid var(--rojo-soft);
  box-shadow: none;
}

button.rechazar:hover, .btn.rechazar:hover {
  background: var(--rojo);
  color: #fff;
  border-color: var(--rojo);
}

button.confirmar, .btn.confirmar { background: var(--teal); }

/* Botones dentro de celdas de tabla: más compactos */
td button { margin-top: 0; padding: 7px 12px; font-size: 12.5px; }

/* ============================================================
   Badges
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.badge.pending { background: var(--purpura-soft); color: var(--purpura-oscuro); }
.badge.confirmed { background: var(--teal-soft); color: var(--teal); }
.badge.rejected { background: var(--rojo-soft); color: var(--rojo); }
.badge.cancelled { background: var(--rojo-soft); color: var(--rojo); }
.badge.completed { background: var(--orquidea-soft); color: var(--orquidea); }
.badge.no_asistio { background: var(--rojo-soft); color: var(--rojo); }
.badge.modalidad-presencial { background: var(--orquidea-soft); color: var(--orquidea); }
.badge.modalidad-en-linea { background: var(--teal-soft); color: var(--teal); }

/* Select o input editable dentro de una celda de tabla (ej. "Frecuencia"/"Última sesión"
   en Seguimiento) */
td select.select-celda { width: auto; min-width: 150px; padding: 7px 30px 7px 10px; font-size: 13px; margin: 0; }
td input.input-celda { padding: 7px 10px; font-size: 13px; margin: 0; }

/* Botón de la columna "Acciones" en Seguimiento: sin esto, "Agendar cita" se partía en
   dos líneas dentro de una columna angosta, haciendo cada renglón de la tabla más alto. */
#tabla-seguimiento-completo td:nth-child(6) button { white-space: nowrap; }

/* Anchos de columnas en la tabla de Seguimiento: "Paciente" con un mínimo cómodo para
   que los nombres largos no se quiebren en varias líneas, y "Acciones" en su propia
   columna de ancho fijo para que el botón siempre quede alineado sin importar cuánto
   texto tenga "Próxima cita" al lado. Solo en escritorio: en móvil la tabla se apila
   en tarjetas y estos anchos no aplican. */
@media (min-width: 641px) {
  #tabla-seguimiento-completo th:nth-child(1), #tabla-seguimiento-completo td:nth-child(1) { width: 140px; }
  #tabla-seguimiento-completo th:nth-child(2), #tabla-seguimiento-completo td:nth-child(2) { width: 130px; }
  #tabla-seguimiento-completo th:nth-child(3), #tabla-seguimiento-completo td:nth-child(3) { width: 145px; }
  #tabla-seguimiento-completo th:nth-child(4), #tabla-seguimiento-completo td:nth-child(4) { width: 160px; }
  #tabla-seguimiento-completo th:nth-child(5), #tabla-seguimiento-completo td:nth-child(5) { width: 170px; }
  #tabla-seguimiento-completo th:nth-child(6), #tabla-seguimiento-completo td:nth-child(6) { width: 170px; }
}

/* ============================================================
   Mensajes / alerts inline
   ============================================================ */
.mensaje {
  margin-top: var(--space-3);
  font-size: 13px;
  font-weight: 500;
}

.mensaje:not(:empty) {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  animation: fadeIn var(--t-base) var(--ease) both;
}

.mensaje.error { color: var(--rojo); background: var(--rojo-soft); }
.mensaje.ok { color: var(--teal); background: var(--teal-soft); }

.muted { color: var(--texto-suave); font-size: 13px; }

/* ============================================================
   Empty states
   ============================================================ */
p.muted[id^="sin-"] {
  text-align: center;
  padding: 36px 16px;
  font-size: 13.5px;
  background: var(--surface-subtle);
  border: 1.5px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  margin-top: 10px;
}

/* ============================================================
   Tablas
   ============================================================ */
table { width: 100%; border-collapse: collapse; margin-top: var(--space-4); font-size: 13.5px; }

th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border-subtle); }

th {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--texto-suave);
  letter-spacing: 0.04em;
  font-weight: 700;
  padding-top: 0;
}

tbody tr { transition: background var(--t-fast) var(--ease); }
tbody tr:hover { background: var(--surface-subtle); }
tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   Tabs (Horarios / Citas) — segmented control
   ============================================================ */
.tabs, .segmented {
  display: inline-flex;
  gap: 2px;
  margin-bottom: var(--space-6);
  padding: 4px;
  background: var(--surface-hover);
  border-radius: var(--radius-md);
  border: none;
  overflow-x: auto;
}

.segmented { margin-bottom: var(--space-4); }

.tab-btn, .segmented-btn {
  background: none;
  border: none;
  padding: 8px 16px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-suave);
  cursor: pointer;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.tab-btn svg, .segmented-btn svg { width: 14px; height: 14px; }

.tab-btn:hover, .segmented-btn:hover { color: var(--purpura-oscuro); }

.tab-btn.active, .segmented-btn.active {
  color: var(--purpura-oscuro);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn var(--t-base) var(--ease) both; }

/* ============================================================
   Filtros / grupos de fecha (Horarios abiertos)
   ============================================================ */
.filtros-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: var(--space-2) 0 var(--space-4);
}

.filtros-slots select, .filtros-slots input[type="date"] { width: auto; flex: 1; min-width: 160px; }
.filtros-slots button { margin: 0; flex: none; }

.grupo-fecha {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--surface-subtle);
}

.grupo-fecha-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.grupo-fecha-header button { margin: 0; padding: 6px 12px; font-size: 12px; flex: none; }

.grupo-fecha-titulo { font-weight: 700; font-size: 13.5px; color: var(--purpura-oscuro); }

.chips-horarios { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }

.chip-horario {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--teal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  transition: all var(--t-fast) var(--ease);
}

.chip-horario:hover { background: var(--rojo); border-color: var(--rojo); color: #fff; transform: translateY(-1px); }
.chip-horario .quitar-x { font-weight: 700; opacity: 0.7; }
.chip-horario.chip-seleccionado { background: var(--rojo); border-color: var(--rojo); color: #fff; }

/* ============================================================
   Overlay / Modal
   ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(58, 44, 64, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 50;
  animation: fadeIn var(--t-base) var(--ease) both;
}

.overlay .card {
  max-width: 440px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  margin: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  animation: scaleIn var(--t-slow) var(--ease) both;
}

/* ============================================================
   Foto de perfil / paciente
   ============================================================ */
.foto-picker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.perfil-foto-preview {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--lila);
  box-shadow: var(--shadow-sm);
}

.foto-picker input[type="file"] { font-size: 13px; padding: 0; border: none; }

/* ============================================================
   Resumen del paciente (expediente.html)
   ============================================================ */
.resumen-paciente {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  flex-wrap: wrap;
}

.resumen-paciente-foto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 96px;
  flex-shrink: 0;
  text-align: center;
}

.resumen-foto-img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--lila);
  box-shadow: var(--shadow-sm);
}

.resumen-foto-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1.5px dashed var(--border-subtle);
  background: var(--surface-subtle);
  color: var(--texto-suave);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.resumen-foto-placeholder:hover { border-color: var(--teal); color: var(--teal); }
.resumen-foto-placeholder svg { width: 20px; height: 20px; }

.resumen-foto-cambiar {
  font-size: 12px;
  color: var(--teal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.resumen-foto-cambiar svg { width: 12px; height: 12px; }

.resumen-paciente-info { flex: 1; min-width: 220px; }
.resumen-paciente-info h2 { margin: 0 0 12px; font-size: 20px; }

.resumen-paciente-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 20px;
}
.resumen-paciente-lista li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--texto);
}
.resumen-paciente-lista li svg {
  width: 16px;
  height: 16px;
  color: var(--teal);
  flex-shrink: 0;
}

/* ============================================================
   "Próxima cita" (inicio.html)
   ============================================================ */
.proxima-cita { display: flex; flex-direction: column; gap: 10px; }

.proxima-cita-fecha {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--teal);
  letter-spacing: 0.01em;
}

.proxima-cita-nombre {
  margin: 0;
  font-size: 20px;
}
.proxima-cita-nombre a { color: var(--purpura-oscuro); text-decoration: none; }
.proxima-cita-nombre a:hover { text-decoration: underline; }

.proxima-cita-badges { display: flex; gap: 8px; flex-wrap: wrap; }

.proxima-cita-acciones { margin-top: 4px; }
.proxima-cita-acciones .btn { margin: 0; }

/* ============================================================
   Notas de sesión (expediente.html)
   ============================================================ */
.note-card {
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.note-card:hover { box-shadow: var(--shadow-xs); border-color: var(--border-strong); }

.note-card .note-fecha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--purpura-oscuro);
  margin-bottom: 6px;
}

.note-card .note-fecha svg { width: 14px; height: 14px; color: var(--orquidea); }

.note-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--texto);
  white-space: pre-line;
}

/* ============================================================
   Login
   ============================================================ */
body.login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 0%, var(--lila) 0%, transparent 45%),
    radial-gradient(circle at 85% 100%, var(--teal-soft) 0%, transparent 45%),
    var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

body.login-page header.top { display: none; }

main.login-main {
  max-width: 380px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-8);
  text-align: center;
}

.login-brand .brand-mark { width: 44px; height: 44px; border-radius: var(--radius-md); }
.login-brand .brand-mark svg { width: 22px; height: 22px; }
.login-brand h1 { font-size: 18px; font-weight: 800; color: var(--purpura-oscuro); margin: 0; letter-spacing: -0.01em; }
.login-brand p { margin: 0; font-size: 13px; color: var(--texto-suave); }

main.login-main .card {
  animation: scaleIn var(--t-slow) var(--ease) both;
  box-shadow: var(--shadow-lg);
}

main.login-main button[type="submit"] { width: 100%; justify-content: center; padding: 12px; margin-right: 0; }

/* ============================================================
   Responsive: tablas -> tarjetas apiladas en móvil
   ============================================================ */
@media (max-width: 640px) {
  .tabla-responsive thead { display: none; }

  .tabla-responsive, .tabla-responsive tbody, .tabla-responsive tr, .tabla-responsive td {
    display: block; width: 100%;
  }

  .tabla-responsive tr {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
  }

  .tabla-responsive tr:hover { background: var(--surface); }

  .tabla-responsive td { border-bottom: none; padding: 6px 0; }

  .tabla-responsive td::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--texto-suave);
    margin-bottom: 3px;
  }

  .tabla-responsive td button, .tabla-responsive td .btn {
    display: block;
    width: 100%;
    white-space: nowrap;
    margin: 6px 0 0;
  }
}

/* ============================================================
   EXTENSIÓN MULTI-CLIENTE
   Agregados sobre el sistema de diseño original del panel de Ari,
   para las páginas del sistema multi-cliente (2026-08-06).
   ============================================================ */

.oculto { display: none !important; }

/* Alias de los mensajes con la nomenclatura del sistema nuevo */
.mensaje-error { color: var(--rojo); background: var(--rojo-soft); }
.mensaje-ok { color: var(--teal); background: var(--teal-soft); }
.mensaje-info { color: var(--purpura-oscuro); background: var(--purpura-soft); }
.mensaje-error, .mensaje-ok, .mensaje-info {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 500;
  margin: 10px 0;
  animation: fadeIn var(--t-base) var(--ease) both;
}

/* Alias de botones con la nomenclatura del sistema nuevo */
button.boton-secundario, .btn.boton-secundario {
  background: var(--surface);
  color: var(--purpura);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-xs);
}
button.boton-secundario:hover, .btn.boton-secundario:hover {
  background: var(--surface-hover);
  color: var(--purpura-oscuro);
}
button.boton-peligro, .btn.boton-peligro { background: var(--rojo); }
button.boton-peligro:hover, .btn.boton-peligro:hover { background: #9d3d4e; }
button.boton-teal, .btn.boton-teal { background: var(--teal); }
button.boton-chico, .btn.boton-chico { padding: 7px 12px; font-size: 12.5px; }

/* Badges con los estados en español del esquema nuevo */
.badge.pendiente { background: var(--purpura-soft); color: var(--purpura-oscuro); }
.badge.confirmada { background: var(--teal-soft); color: var(--teal); }
.badge.rechazada, .badge.cancelada { background: var(--rojo-soft); color: var(--rojo); }
.badge.completada { background: var(--orquidea-soft); color: var(--orquidea); }
.badge.manual { background: var(--coral-soft); color: var(--coral); }
.badge.primera-vez { background: var(--orquidea-soft); color: var(--orquidea); }
.badge.en-linea { background: var(--teal-soft); color: var(--teal); }
.badge.presencial { background: var(--orquidea-soft); color: var(--orquidea); }

/* Filas de lista (citas, pacientes, diagnósticos...) */
.fila-lista {
  border-bottom: 1px solid var(--border-subtle);
  padding: 13px 6px;
}
.fila-lista:last-child { border-bottom: none; }
.fila-lista.clickeable { cursor: pointer; border-radius: var(--radius-sm); transition: background var(--t-fast) var(--ease); }
.fila-lista.clickeable:hover { background: var(--surface-hover); }
.fila-titulo { font-weight: 600; color: var(--texto); font-size: 14px; }
.fila-detalle { font-size: 12.5px; color: var(--texto-suave); margin-top: 3px; line-height: 1.5; }
.fila-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.fila-acciones button { margin: 0; }
.fila-lista .quitar-flotante { float: right; margin-left: 8px; }

.check-linea { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0; }
.check-linea input { width: auto; margin-top: 2px; accent-color: var(--orquidea); }
.check-linea span { font-size: 13px; color: var(--texto-suave); line-height: 1.5; }

/* ---- Página pública de agendado (agendar.html) ---- */
body.publica main {
  max-width: 520px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) 64px;
}

.perfil { text-align: center; }
.perfil img {
  width: 96px; height: 96px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 3px solid var(--lila);
  margin: 0 auto var(--space-3);
  box-shadow: var(--shadow-md);
}
.perfil h1 { font-size: 20px; font-weight: 800; color: var(--purpura-oscuro); margin: 4px 0; letter-spacing: -0.01em; }
.perfil .badge-perfil {
  display: inline-block;
  background: var(--purpura-soft);
  color: var(--purpura-oscuro);
  border-radius: var(--radius-full);
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 600;
  margin: 6px 3px;
}

.cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.cal-nav .mes { font-weight: 700; color: var(--purpura-oscuro); text-transform: capitalize; font-size: 14.5px; }
.cal-nav button { margin: 0; padding: 8px 14px; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-dia-nombre {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-suave);
  padding: 4px 0;
}
.cal-dia {
  aspect-ratio: 1;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  color: #C4B5C9;
  position: relative;
}
.cal-dia.disponible {
  background: var(--purpura-soft);
  color: var(--purpura-oscuro);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.cal-dia.disponible:hover { background: var(--orquidea); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.cal-dia.hoy::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--teal);
}

.horas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: var(--space-3); }
.horas-grid button {
  background: var(--surface);
  color: var(--purpura);
  border: 1.5px solid var(--border-strong);
  padding: 11px 4px;
  font-size: 13px;
  margin: 0;
  justify-content: center;
  box-shadow: var(--shadow-xs);
}
.horas-grid button:hover { background: var(--orquidea); border-color: var(--orquidea); color: #fff; }

.pie { text-align: center; font-size: 11.5px; color: var(--texto-suave); margin: 28px 0 8px; }

/* ============================================================
   TEMAS POR CONSULTORIO — Diseño visual configurable
   Cada consultorio elige paleta y fuente en Configuración.
   Se aplican con data-paleta / data-fuente en el <body> (tema.js).
   ============================================================ */

/* Fuentes adicionales (la base ya carga Inter) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Lora:wght@400;500;600;700&display=swap');

/* ---- Paleta "primaveral": tomada de la imagen de referencia de Marce
   (persimmons sobre plato azul): azul suave, azul acero, durazno crema,
   naranja vivo y naranja rojizo ---- */
body[data-paleta="primaveral"] {
  --lila: #A9C8D4;              /* azul suave */
  --orquidea: #F28C28;          /* naranja vivo = acento principal (botones) */
  --purpura: #46788A;           /* azul acero = textos secundarios */
  --purpura-oscuro: #2C4854;    /* azul acero profundo = titulares */
  --teal: #3F7486;              /* azul acero = acento de confirmación */
  --bg: #FAF1E4;
  --borde: #E9D8BC;
  --texto: #2C444E;
  --texto-suave: #46788A;
  --texto-apagado: #9DB6C2;     /* azul grisáceo suave para placeholders */
  --rojo: #D64425;              /* naranja rojizo para acciones de riesgo */
  --surface: #FFFFFF;
  --surface-subtle: #FCF7ED;
  --surface-hover: #F5EAD6;
  --border-subtle: #ECDFC6;
  --border-strong: #D8C29D;
  --sidebar-bg: rgba(252, 244, 230, 0.92);
  --teal-soft: #E1EDF1;
  --purpura-soft: #FBE9CC;      /* durazno crema (dias disponibles, badges) */
  --rojo-soft: #FCE7DF;
  --orquidea-soft: #FDE9D2;
  --coral: #EF5B2B;             /* naranja rojizo = destacados/seguimiento */
  --coral-soft: #FCE7DF;
  --shadow-focus: 0 0 0 4px rgba(242, 140, 40, 0.2);
}

/* ---- Paleta "sobria": escalas de grises con detalles dorados ---- */
body[data-paleta="sobria"] {
  --lila: #E5E5E8;
  --orquidea: #46484D;          /* gris carbón = acento principal */
  --purpura: #6C6F75;
  --purpura-oscuro: #1E1F23;
  --teal: #A8843C;              /* dorado = acento de confirmación/detalle */
  --bg: #E9EAEC;
  --borde: #D0D1D6;
  --texto: #26272B;
  --texto-suave: #6C6F75;
  --texto-apagado: #A6A8AE;     /* gris medio para placeholders */
  --rojo: #A94452;
  --surface: #FFFFFF;
  --surface-subtle: #F5F5F7;
  --surface-hover: #E3E4E8;
  --border-subtle: #DCDDE1;
  --border-strong: #B8B9C1;
  --sidebar-bg: rgba(238, 239, 241, 0.95);
  --teal-soft: #F1EADB;
  --purpura-soft: #E7E8EB;
  --rojo-soft: #F3E6E8;
  --orquidea-soft: #E7E8EB;
  --coral: #A8843C;
  --coral-soft: #F4ECD9;
  --shadow-focus: 0 0 0 4px rgba(168, 132, 60, 0.18);
}

/* ---- Fuentes ---- */
body[data-fuente="poppins"],
body[data-fuente="poppins"] button, body[data-fuente="poppins"] input,
body[data-fuente="poppins"] select, body[data-fuente="poppins"] textarea {
  font-family: 'Poppins', -apple-system, "Segoe UI", sans-serif;
}
body[data-fuente="lora"],
body[data-fuente="lora"] button, body[data-fuente="lora"] input,
body[data-fuente="lora"] select, body[data-fuente="lora"] textarea {
  font-family: 'Lora', Georgia, serif;
}

/* ---- Selector de diseño (página Configuración) ---- */
.opcion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: var(--space-3) 0;
}
.opcion-card {
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  cursor: pointer;
  text-align: center;
  background: var(--surface);
  transition: all var(--t-fast) var(--ease);
}
.opcion-card:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.opcion-card.activa { border-color: var(--orquidea); box-shadow: var(--shadow-focus); }
.opcion-card .nombre-opcion { font-size: 13px; font-weight: 700; color: var(--purpura-oscuro); }
.opcion-card .desc-opcion { font-size: 11.5px; color: var(--texto-suave); margin-top: 3px; }
.swatches { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.08); }
.muestra-fuente { font-size: 24px; font-weight: 700; color: var(--purpura-oscuro); margin-bottom: 6px; }
.muestra-fuente.f-inter { font-family: 'Inter', sans-serif; }
.muestra-fuente.f-poppins { font-family: 'Poppins', sans-serif; }
.muestra-fuente.f-lora { font-family: 'Lora', serif; }

/* ---- Paleta "spa": de la imagen "sweet sunset" de Marce (atardecer
   sobre el mar): gris neblina, taupe, arena, rosa durazno y rosa viejo ---- */
body[data-paleta="spa"] {
  --lila: #DCD3C3;              /* arena clara */
  --orquidea: #C08490;          /* rosa viejo = acento principal (botones) */
  --purpura: #8A8378;           /* taupe = textos secundarios */
  --purpura-oscuro: #55565C;    /* gris profundo = titulares */
  --teal: #CE837B;              /* rosa durazno hondo = acento de confirmación */
  --bg: #F3EBDF;
  --borde: #DFD0BB;
  --texto: #4E4A48;
  --texto-suave: #8A8378;
  --texto-apagado: #B9B0A4;     /* taupe arena suave para placeholders */
  --rojo: #B0575F;
  --surface: #FFFFFF;
  --surface-subtle: #FAF5ED;
  --surface-hover: #EDE1D0;
  --border-subtle: #E4D7C5;
  --border-strong: #CDBBA3;
  --sidebar-bg: rgba(247, 240, 230, 0.93);
  --teal-soft: #F9E6E2;
  --purpura-soft: #F1E9E1;      /* arena suave (días disponibles, badges) */
  --rojo-soft: #F6E5E7;
  --orquidea-soft: #F4E3E6;
  --coral: #EFA8A0;             /* rosa durazno = destacados */
  --coral-soft: #F9E6E2;
  --shadow-focus: 0 0 0 4px rgba(192, 132, 144, 0.2);
}

/* ============================================================
   CALENDARIO DE FECHAS PROPIO (flatpickr) — tematizado con los
   tokens de la app para que respete la paleta elegida.
   Reemplaza al calendario nativo del navegador en los campos de
   fecha del panel.
   ============================================================ */
.flatpickr-calendar {
  font-family: inherit;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--purpura-oscuro);
  fill: var(--purpura-oscuro);
  font-weight: 700;
}
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
  color: var(--purpura); fill: var(--purpura);
}
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--orquidea);
}
span.flatpickr-weekday {
  color: var(--texto-suave);
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
}
.flatpickr-day {
  color: var(--texto);
  border-radius: var(--radius-md);
  font-weight: 500;
}
.flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover {
  background: var(--surface-hover);
  border-color: var(--surface-hover);
}
.flatpickr-day.today {
  border-color: var(--teal);
}
.flatpickr-day.today:hover { background: var(--teal-soft); color: var(--texto); }
.flatpickr-day.selected, .flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--orquidea);
  border-color: var(--orquidea);
  color: #fff;
  font-weight: 700;
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
  color: var(--texto-apagado);
}

/* ============================================================
   IDENTIDAD DE MARCA CITTO (manual de marca, 2026-08-06)
   Colores: Midnight Navy #0F172A, Electric Blue #2563EB, Aqua #14B8A6.
   Tipografías: Manrope (marca/títulos) + Inter (interfaz).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&display=swap');

/* El isotipo (SVG inline en el HTML) sustituye al cuadrito con icono */
.brand-mark.citto-logo {
  background: none;
  box-shadow: none;
  width: 32px;
  height: 32px;
}
.brand-mark.citto-logo svg { width: 32px; height: 32px; }

.brand-name {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: #0F172A;
}

.login-brand .brand-mark.citto-logo { width: 52px; height: 52px; }
.login-brand .brand-mark.citto-logo svg { width: 52px; height: 52px; }
.login-brand h1 { font-family: 'Manrope', 'Inter', sans-serif; font-weight: 800; }

/* ---- Paleta "citto": la identidad azul del manual de marca ---- */
body[data-paleta="citto"] {
  --lila: #BFDBFE;              /* azul claro */
  --orquidea: #2563EB;          /* electric blue = acento principal */
  --purpura: #334155;           /* slate 700 = textos secundarios */
  --purpura-oscuro: #0F172A;    /* midnight navy = titulares */
  --teal: #2563EB;              /* Citto Blue = botón primario (manual v1.0) */
  --acento-hover: #1D4EDB;      /* hover del botón primario (manual v1.0) */
  --bg: #ECF2FA;                /* snow azulado */
  --borde: #D3DFEF;
  --texto: #1E293B;
  --texto-suave: #64748B;       /* Text Secondary del manual */
  --texto-apagado: #94A3B8;     /* slate 400 para placeholders */
  --rojo: #EF4444;              /* coral del manual */
  --surface: #FFFFFF;
  --surface-subtle: #F5F8FC;
  --surface-hover: #E2EBF6;
  --border-subtle: #D8E2F0;
  --border-strong: #B9C9DF;
  --sidebar-bg: rgba(240, 245, 252, 0.93);
  --teal-soft: #DBEAFE;
  --purpura-soft: #DBEAFE;      /* azul suave (días disponibles, badges) */
  --rojo-soft: #FEE2E2;
  --orquidea-soft: #DBEAFE;
  --coral: #14B8A6;             /* Citto Aqua = acento/destacados */
  --coral-soft: #D7F5F1;
  --shadow-focus: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

/* Logo oficial (imagen) dentro del brand-mark */
.brand-mark.citto-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Manual Citto v1.0: hover del botón primario (#2563EB → #1D4EDB), sin
   tocar botones secundarios, de peligro, segmentados ni chips */
body[data-paleta="citto"] button:hover:not(.secundario):not(.rechazar):not(.confirmar):not(.boton-secundario):not(.boton-peligro):not(.boton-teal):not(.segmented-btn):not(.tab-btn):not(.chip-horario),
body[data-paleta="citto"] .btn:hover:not(.boton-secundario):not(.boton-peligro):not(.boton-teal) {
  background: #1D4EDB;
}

/* Login: lockup vertical oficial de Citto (imagen completa del manual) */
.login-brand .login-lockup {
  width: 128px;
  max-width: 45vw;
  display: block;
  margin: 0 auto var(--space-2);
}

/* ---- Botón "Copiar mi link" (barra lateral) ---- */
.btn-mi-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 var(--space-3);
  padding: 9px 10px;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--teal);
  border-radius: var(--radius-md);
}
.btn-mi-link svg { width: 15px; height: 15px; flex: none; }

@media (max-width: 879px) {
  /* En móvil la barra es horizontal: el botón se compacta a solo icono */
  .btn-mi-link { width: auto; margin: 0; padding: 10px; }
  .btn-mi-link span { display: none; }
}

/* ---- "Mi link" (barra lateral, sobre Configuración) ---- */
.mi-link {
  margin-bottom: 8px;
  padding: 9px 10px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.mi-link-etiqueta {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-suave);
  margin-bottom: 5px;
}
.mi-link-fila { display: flex; align-items: center; gap: 6px; }
.mi-link-url {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--purpura);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;          /* muestra el FINAL del link (lo distintivo) */
  text-align: left;
}
.mi-link-copiar {
  margin: 0;
  padding: 7px 8px;
  background: var(--orquidea);   /* acento de la paleta seleccionada */
  border-radius: var(--radius-sm);
  flex: none;
}
.mi-link-copiar svg { width: 13px; height: 13px; }
.mi-link-copiar:hover { background: var(--purpura-oscuro); }

@media (max-width: 879px) {
  /* Barra horizontal en móvil: solo el botón de copiar, compacto */
  .mi-link { padding: 0; margin: 0; background: none; border: none; }
  .mi-link-etiqueta, .mi-link-url { display: none; }
  .mi-link-copiar { padding: 10px; }
}

/* ---- Pestañas de Configuración ---- */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Foto de perfil en Configuración */
.foto-picker { display: flex; align-items: center; gap: 14px; margin: 8px 0 4px; }
.foto-preview {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--lila);
  background: var(--surface-subtle);
}
.foto-picker input[type="file"] { border: none; padding: 0; font-size: 12.5px; }


/* ============================================================
   VISTA PREVIA DEL PERFIL PÚBLICO (Configuración → Perfil)
   Miniatura de la página de citas que ven los pacientes; usa los
   tokens de la paleta activa, así también refleja el Diseño visual.
   ============================================================ */
.perfil-grid { display: grid; grid-template-columns: 1fr 400px; gap: 20px; align-items: start; }
.preview-card { position: sticky; top: 20px; }
@media (max-width: 1150px) { .perfil-grid { grid-template-columns: 1fr; } .preview-card { position: static; } }

.preview-publico {
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
}
.pv-hero { text-align: center; padding-bottom: 14px; }
.pv-foto, .pv-foto-ini {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 10px;
  object-fit: cover; box-shadow: var(--shadow-sm); border: 3px solid var(--surface);
}
.pv-foto-ini { display: flex; align-items: center; justify-content: center; font-size: 30px; background: var(--purpura-soft); }
.pv-nombre { font-weight: 800; font-size: 16.5px; color: var(--purpura-oscuro); }
.pv-info { font-size: 12px; color: var(--texto-suave); margin: 6px 0 10px; line-height: 1.5; }
.pv-chip {
  display: inline-block; background: var(--teal-soft); color: var(--teal);
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 12px;
}
.pv-dir { font-size: 11.5px; color: var(--texto-suave); margin: 10px 0 4px; white-space: pre-line; }
.pv-maps { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--teal); }
.pv-form {
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 14px; box-shadow: var(--shadow-xs);
}
.pv-campo {
  border: 1px solid var(--borde); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 11.5px; color: var(--texto-apagado);
  background: var(--surface-subtle); margin-bottom: 8px;
}
.pv-boton {
  background: var(--orquidea); color: #fff; text-align: center; font-weight: 700;
  font-size: 12.5px; border-radius: var(--radius-sm); padding: 9px; margin-top: 2px;
}
.pv-aviso {
  font-size: 11px; color: var(--texto-suave); text-align: center;
  margin: 12px 4px 0; line-height: 1.5; white-space: pre-line;
}

/* Botón nativo de "Seleccionar archivo" vestido como botón del sistema */
.foto-picker input[type="file"] { font-size: 12.5px; color: var(--texto-suave); }
.foto-picker input[type="file"]::file-selector-button {
  background: var(--surface); color: var(--purpura-oscuro);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 7px 14px; font-weight: 600; font-family: inherit; font-size: 12.5px;
  cursor: pointer; margin-right: 10px;
  transition: background var(--t-fast) var(--ease);
}
.foto-picker input[type="file"]::file-selector-button:hover { background: var(--surface-hover); }


/* ============================================================
   MODO NOCHE — versión nocturna de cada paleta.
   Se activa con body[data-modo="oscuro"] (tema.js). Cada bloque
   redefine los mismos tokens del sistema, así todos los
   componentes se adaptan solos.
   ============================================================ */

/* ---- Base nocturna (paleta lila) ---- */
body[data-modo="oscuro"] {
  --bg: #141019;
  --surface: #1D1826;
  --surface-subtle: #211B2B;
  --surface-hover: #2A2237;
  --border-subtle: #2E2639;
  --border-strong: #473B56;
  --borde: #352C42;
  --texto: #EBE5F0;
  --texto-suave: #AC9EB8;
  --texto-apagado: #6F6180;
  --lila: #4A3C57;
  --orquidea: #C18BC3;
  --purpura: #AC9EB8;
  --purpura-oscuro: #E7DAEB;
  --teal: #35B5B0;
  --rojo: #E27488;
  --teal-soft: rgba(53, 181, 176, 0.16);
  --purpura-soft: rgba(193, 139, 195, 0.14);
  --rojo-soft: rgba(226, 116, 136, 0.14);
  --orquidea-soft: rgba(193, 139, 195, 0.16);
  --coral: #F0915E;
  --coral-soft: rgba(240, 145, 94, 0.15);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 4px rgba(193, 139, 195, 0.25);
}

/* ---- Primaveral nocturna: azul profundo con naranjas vivos ---- */
body[data-modo="oscuro"][data-paleta="primaveral"] {
  --bg: #0D181E;
  --surface: #142229;
  --surface-subtle: #16262E;
  --surface-hover: #1D303A;
  --border-subtle: #21343E;
  --border-strong: #375260;
  --borde: #263C47;
  --texto: #E3EEF3;
  --texto-suave: #8FB0BE;
  --texto-apagado: #567380;
  --lila: #27424E;
  --orquidea: #FF9B45;
  --purpura: #8FB0BE;
  --purpura-oscuro: #DBEAF1;
  --teal: #5CA8BD;
  --rojo: #F0704A;
  --teal-soft: rgba(92, 168, 189, 0.16);
  --purpura-soft: rgba(255, 155, 69, 0.13);
  --rojo-soft: rgba(240, 112, 74, 0.15);
  --orquidea-soft: rgba(255, 155, 69, 0.16);
  --coral: #F0704A;
  --coral-soft: rgba(240, 112, 74, 0.15);
  --shadow-focus: 0 0 0 4px rgba(255, 155, 69, 0.22);
}

/* ---- Sobria nocturna: carbón con dorado ---- */
body[data-modo="oscuro"][data-paleta="sobria"] {
  --bg: #121316;
  --surface: #1A1C20;
  --surface-subtle: #1E2025;
  --surface-hover: #26292F;
  --border-subtle: #2A2D34;
  --border-strong: #454953;
  --borde: #30343C;
  --texto: #E8E9EC;
  --texto-suave: #A2A6B0;
  --texto-apagado: #676C78;
  --lila: #34373F;
  --orquidea: #C8CAD1;
  --purpura: #A2A6B0;
  --purpura-oscuro: #F0F1F4;
  --teal: #D3AD5F;
  --rojo: #D9707E;
  --teal-soft: rgba(211, 173, 95, 0.15);
  --purpura-soft: rgba(200, 202, 209, 0.10);
  --rojo-soft: rgba(217, 112, 126, 0.14);
  --orquidea-soft: rgba(200, 202, 209, 0.12);
  --coral: #D3AD5F;
  --coral-soft: rgba(211, 173, 95, 0.15);
  --shadow-focus: 0 0 0 4px rgba(211, 173, 95, 0.20);
}

/* ---- Spa nocturna: café-taupe cálido con rosas ---- */
body[data-modo="oscuro"][data-paleta="spa"] {
  --bg: #191512;
  --surface: #221D19;
  --surface-subtle: #27211C;
  --surface-hover: #302823;
  --border-subtle: #342C26;
  --border-strong: #52453C;
  --borde: #3B322B;
  --texto: #F0E9E3;
  --texto-suave: #B5A99C;
  --texto-apagado: #786C60;
  --lila: #453A31;
  --orquidea: #D99AA6;
  --purpura: #B5A99C;
  --purpura-oscuro: #F1E4DB;
  --teal: #E09A91;
  --rojo: #D97883;
  --teal-soft: rgba(224, 154, 145, 0.16);
  --purpura-soft: rgba(217, 154, 166, 0.13);
  --rojo-soft: rgba(217, 120, 131, 0.15);
  --orquidea-soft: rgba(217, 154, 166, 0.16);
  --coral: #EFA8A0;
  --coral-soft: rgba(239, 168, 160, 0.15);
  --shadow-focus: 0 0 0 4px rgba(217, 154, 166, 0.22);
}

/* ---- Citto nocturna: midnight con Citto Blue y Aqua ---- */
body[data-modo="oscuro"][data-paleta="citto"] {
  --bg: #0B1220;
  --surface: #111A2C;
  --surface-subtle: #131E32;
  --surface-hover: #1A2740;
  --border-subtle: #1E2A44;
  --border-strong: #32436A;
  --borde: #243250;
  --texto: #E2E8F0;
  --texto-suave: #94A3B8;
  --texto-apagado: #5B6B85;
  --lila: #1E3A8A;
  --orquidea: #3B82F6;
  --acento-hover: #2563EB;
  --purpura: #94A3B8;
  --purpura-oscuro: #EDF2F9;
  --teal: #3B82F6;
  --rojo: #F87171;
  --teal-soft: rgba(59, 130, 246, 0.16);
  --purpura-soft: rgba(59, 130, 246, 0.14);
  --rojo-soft: rgba(248, 113, 113, 0.14);
  --orquidea-soft: rgba(59, 130, 246, 0.16);
  --coral: #2DD4BF;
  --coral-soft: rgba(45, 212, 191, 0.15);
  --shadow-focus: 0 0 0 4px rgba(59, 130, 246, 0.25);
}
body[data-modo="oscuro"][data-paleta="citto"] button:hover:not(.secundario):not(.rechazar):not(.confirmar):not(.boton-secundario):not(.boton-peligro):not(.boton-teal):not(.segmented-btn):not(.tab-btn):not(.chip-horario),
body[data-modo="oscuro"][data-paleta="citto"] .btn:hover:not(.boton-secundario):not(.boton-peligro):not(.boton-teal) {
  background: #2563EB;
}

/* ---- Ajustes de componentes en modo noche (para todas las paletas) ---- */
body[data-modo="oscuro"] .sidebar {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 8px 0 28px rgba(0, 0, 0, 0.5), 2px 0 8px rgba(0, 0, 0, 0.35);
}
body[data-modo="oscuro"] .sidebar a.nav-link.active {
  background: var(--orquidea);
  color: #fff;
}
body[data-modo="oscuro"] .brand-name { color: var(--texto); }
body[data-modo="oscuro"] .flatpickr-day.selected,
body[data-modo="oscuro"] .flatpickr-day.selected:hover { color: #fff; }
body[data-modo="oscuro"] ::selection { background: var(--orquidea); color: #fff; }

/* En modo noche, la flechita del select se aclara (gana a las reglas por
   paleta porque está declarada al final con la misma especificidad). */
body[data-modo="oscuro"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA3B5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* ============================================================
   "Que lo llene el paciente" (expediente): historia clínica por link
   ============================================================ */

/* Botones a la derecha del encabezado de página (ej. el del formulario). */
.page-header-acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.page-header-acciones button { margin: 0; white-space: nowrap; }

/* Ventana que se abre DESDE otra ventana (ej. "Ver sus respuestas", que se
   toca dentro de "Que lo llene el paciente"). Sin esto quedaba por detrás:
   todas las .overlay comparten z-index, y cuando dos empatan gana la que va
   después en el HTML — la ventana nueva se abría escondida detrás de la que
   ya estaba abierta y parecía que el botón no hacía nada. */
.overlay.overlay-encima { z-index: 60; }

/* ---- Campos sueltos dentro de una sección, en "Que lo llene el paciente" ----
   La línea a la izquierda deja claro que cuelgan de la sección de arriba y
   no son secciones nuevas. */
.subcampos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 12px 24px;
  padding-left: 14px;
  border-left: 2px solid var(--border-subtle);
}

.check-inline.check-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--texto);
  margin: 0;
  padding: 3px 0;
}

.ya-registrado {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--texto-suave);
  background: var(--surface-hover);
  border-radius: var(--radius-full);
  padding: 2px 8px;
}

/* ---- "Ver sus respuestas": lo que mandó el paciente, tal cual ---- */
.resp-bloque { margin-bottom: var(--space-5); }

.resp-titulo {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.resp-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.resp-fila:last-child { border-bottom: none; }

.resp-pregunta { font-size: 12.5px; color: var(--texto-suave); flex: 0 0 145px; }
.resp-valor { font-size: 14px; color: var(--texto); flex: 1 1 220px; min-width: 0; white-space: pre-wrap; }
/* Lo que el paciente dejó en blanco: se distingue de un dato real de un vistazo. */
.resp-valor.resp-vacio { color: var(--texto-suave); font-style: italic; opacity: 0.75; }

/* Contestó, pero no llegó al expediente. Es el hallazgo importante de esta ventana. */
.resp-marca {
  font-size: 11px;
  font-weight: 700;
  color: var(--coral);
  background: var(--coral-soft);
  border-radius: var(--radius-full);
  padding: 2px 9px;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .resp-pregunta { flex: 1 0 100%; }
}

/* ============================================================
   Inicio estilo mockup: los números del día + próxima cita con avatar
   (el diseño que Marce eligió de la propuesta, sin la tarjeta de dinero)
   ============================================================ */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: var(--space-5);
}

.kpi {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.kpi-etiqueta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.kpi-etiqueta svg { width: 13px; height: 13px; }

.kpi-num {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

/* La línea chica de contexto: en color positivo cuando dice algo bueno
   ("+7 este mes"), apagada cuando no hay nada que presumir. */
.kpi-sub { font-size: 12px; font-weight: 600; color: var(--teal); min-height: 15px; }
.kpi-sub.apagado { color: var(--texto-suave); font-weight: 500; }

/* Fecha discreta a la derecha del título de una tarjeta ("Citas de hoy"). */
.card-fecha {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--texto-suave);
  flex-shrink: 0;
}

/* ---- Próxima cita: avatar + datos + chip de "en cuánto" ---- */
.prox-fila {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--teal-soft);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

.prox-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--orquidea), var(--purpura));
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  flex: none;
  user-select: none;
}

.prox-datos { flex: 1; min-width: 180px; }
.prox-datos h3 { margin: 0 0 3px; font-size: 16.5px; font-weight: 700; }
.prox-datos h3 a { color: var(--texto); text-decoration: none; }
.prox-datos h3 a:hover { color: var(--teal); }
.prox-meta { margin: 0; font-size: 13px; color: var(--texto-suave); line-height: 1.5; }

.prox-lado {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: none;
}
.prox-lado .btn { margin: 0; white-space: nowrap; }

.prox-cuando {
  font-size: 12px;
  font-weight: 700;
  color: var(--teal);
  background: var(--surface);
  border-radius: var(--radius-full);
  padding: 3px 11px;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .prox-lado { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}

/* ============================================================
   Horarios: la semana visual (diseño del mockup de la propuesta)
   ============================================================ */

.semana-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.semana-nav button { margin: 0; padding: 6px 12px; }
.semana-stats { font-size: 12.5px; color: var(--texto-suave); white-space: nowrap; }

/* En pantallas angostas la semana se desliza de lado dentro de su tarjeta. */
.semana-scroll { overflow-x: auto; padding-bottom: 4px; }

.semana-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(104px, 1fr));
  gap: 8px;
  min-width: 780px;
}

.dia-col {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 120px;
}
.dia-col.hoy { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-soft); }
.dia-col.pasado { opacity: 0.55; }

.dia-col-header {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 2px;
}
.dia-col.hoy .dia-col-header { color: var(--teal); }

/* Un horario ofrecido. Al pasar el mouse insinúa que se puede quitar. */
.slot {
  border: none;
  border-radius: 10px;
  padding: 7px 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  background: var(--purpura-soft);
  color: var(--purpura-oscuro);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.dia-col:not(.pasado) .slot:hover { background: var(--rojo-soft); color: var(--rojo); }
.dia-col.pasado .slot { cursor: default; }

/* Con cita agendada: se ve "tomado". */
.slot.ocupado { background: var(--orquidea); color: var(--blanco); }
.dia-col:not(.pasado) .slot.ocupado:hover { background: var(--orquidea); color: var(--blanco); filter: brightness(1.08); }

/* Abierto por única vez (no es de la semana fija): bordecito punteado. */
.slot.unica { outline: 1.5px dashed var(--teal); outline-offset: -1.5px; }

.dia-descanso {
  font-size: 12px;
  color: var(--texto-suave);
  text-align: center;
  padding: 10px 0;
  background: var(--surface-subtle);
  border-radius: 10px;
}

/* El "+" suave para abrir un horario en ese día. */
.btn-mas-slot {
  margin: auto auto 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px dashed var(--border-strong);
  background: var(--surface);
  color: var(--texto-suave);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.btn-mas-slot:hover { color: var(--teal); border-color: var(--teal); opacity: 1; }

.semana-leyenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--texto-suave); }
.semana-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-cuadro { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }

/* Botones apilados del modal de horarios (las 2 opciones + cancelar). */
.modal-horario-botones { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.modal-horario-botones button { margin: 0; width: 100%; }

/* ============================================================
   Tarjeta de resumen del paciente (expediente) — el rediseño de Ari:
   identidad (nombre + fichas de contacto) arriba, y la franja del
   proceso abajo con su propia jerarquía. Iniciales en vez de foto.
   ============================================================ */

.resumen-identidad { margin-bottom: var(--space-5); }

.resumen-identidad h2 {
  margin: 0 0 10px;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.resumen-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Ficha de contacto. El teléfono es un enlace de verdad a WhatsApp, así que
   se ve y se comporta como algo que se puede tocar. */
.chip-contacto {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.chip-contacto svg { width: 15px; height: 15px; flex: none; }
a.chip-contacto:hover { background: var(--teal); color: var(--blanco); transform: translateY(-1px); }

/* Dato registrado que no es una acción (ej. el contacto de emergencia). */
.chip-contacto.chip-dato {
  background: var(--purpura-soft);
  color: var(--purpura-oscuro);
}

/* Dato que FALTA: borde punteado, hueco por llenar, no error. */
.chip-contacto.chip-falta {
  background: transparent;
  color: var(--texto-suave);
  border-color: var(--border-strong);
  border-style: dashed;
  font-weight: 500;
}

/* Franja del proceso: se separa de la identidad con fondo y borde propios. */
.resumen-proceso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 14px 18px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.resumen-proceso-datos { display: flex; flex-wrap: wrap; gap: 12px 30px; }

.resumen-dato { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }

.resumen-etiqueta {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-suave);
  opacity: 0.8;
}

.resumen-valor { font-size: 14.5px; font-weight: 600; color: var(--texto); line-height: 1.3; }
.resumen-valor.vacio { font-weight: 500; color: var(--texto-suave); }

.resumen-proceso > button { margin: 0; flex: none; }

.badge.neutro { background: var(--surface-hover); color: var(--texto-suave); }

/* Iniciales del paciente (sin subir foto en Citto, por ahora). */
.resumen-foto-placeholder {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(140deg, var(--orquidea), var(--purpura));
  color: var(--blanco);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: default;
}
.resumen-foto-placeholder:hover { border-color: transparent; color: var(--blanco); }

.resumen-iniciales {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--blanco);
  line-height: 1;
  user-select: none;
}

@media (max-width: 620px) {
  .resumen-proceso { justify-content: flex-start; }
  .resumen-proceso > button { width: 100%; white-space: nowrap; }
  .resumen-paciente-foto { width: 72px; }
  .resumen-foto-placeholder { width: 72px; height: 72px; }
  .resumen-iniciales { font-size: 24px; }
  .resumen-identidad h2 { font-size: 20px; }
}

/* Zona de horarios con altura tope: un día con muchas horas se desplaza
   dentro de su columna en vez de estirar toda la pantalla. */
.dia-col { max-height: 400px; }
.dia-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-width: thin;
}
.dia-slots::-webkit-scrollbar { width: 5px; }
.dia-slots::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.dia-slots .slot { flex-shrink: 0; }

/* Dos tarjetas lado a lado (Tus servicios + Candado anti-empalme). */
.fila-cards-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  align-items: start;
}
@media (max-width: 860px) {
  .fila-cards-2 { grid-template-columns: 1fr; gap: 0; }
}

/* Banda verde de tranquilidad (el candado anti-empalme del mockup). */
.banner-ok {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--teal-soft);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.banner-ok-icono {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.banner-ok-icono svg { width: 18px; height: 18px; }
.banner-ok strong { font-size: 14.5px; }

/* El "+" nunca se encoge ni se recorta, y en días pasados se ve apagado. */
.dia-col { overflow: hidden; }
.btn-mas-slot { flex: none; margin-top: 8px; }
.btn-mas-slot:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.btn-mas-slot:disabled:hover { color: var(--texto-suave); border-color: var(--border-strong); }

/* Casillas del formulario en la vista previa de "Mi página". */
.pv-check { font-size: 12px; color: var(--texto-suave); padding: 5px 4px; }
.pv-check.pv-sub { margin-left: 16px; }
/* El previo acompaña a las dos tarjetas de la columna izquierda. */
.perfil-grid .preview-card { grid-row: 1 / span 2; align-self: start; }

/* ===== Expediente en dos columnas (vista de la propuesta) =====
   Izquierda los datos, derecha las notas de sesión siempre a la vista.
   Cada columna apila sus tarjetas con su margen normal; en pantallas
   angostas (tablet/celular) vuelve a ser una sola columna. */
.expediente-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 18px;
  align-items: start;
}
@media (max-width: 1080px) {
  .expediente-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Previo de "Mi página": marco tipo navegador + iframe =====
   Adentro va la página pública real (css/publico.css), así el previo
   es idéntico a lo que ve el paciente: columna centrada, sus tarjetas,
   su calendario y su formulario, con la paleta elegida. */
.pv-marco {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}
.pv-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-subtle);
}
.pv-punto {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--border-subtle); flex: none;
}
.pv-url {
  flex: 1;
  margin-left: 8px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 11.5px;
  color: var(--texto-suave);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pv-iframe {
  display: block;
  width: 100%;
  height: 700px;
  border: 0;
  background: #fff;
}