/* SUELO DE 12px
   Nada de lo que lee un paciente baja de 12px. Por debajo la lectura se
   resiente en un telefono, y esta es una aplicacion de salud: la usan personas
   mayores y con baja vision. Habia tamanos de 9, 10 y 11px repartidos por las
   tarjetas, los badges y los pies. Ver JEA-183.
   El panel de administracion es otra cosa —se usa en escritorio y con raton—
   y ahi el suelo se queda en 11. */
/* Estilos de la Aplicación Móvil de Pacientes (MediConnect Mobile) */

.mobile-app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
  position: relative;
  overflow: hidden;
}

/* Header Móvil */
.mobile-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
}

.header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--primary-700);
}

.brand-logo svg {
  color: var(--primary-600);
}

.location-selector-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-800);
  cursor: pointer;
}

.location-selector-trigger:hover {
  background: var(--primary-100);
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrapper svg {
  position: absolute;
  left: 12px;
  color: var(--slate-500);
  pointer-events: none;
}

.search-input-wrapper input {
  width: 100%;
  padding: 10px 38px 10px 38px;
  background: var(--slate-100);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: 13px;
  transition: all var(--transition-fast);
}

.search-input-wrapper input:focus {
  background: var(--bg-surface);
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.search-clear-btn {
  position: absolute;
  right: 12px;
  color: var(--slate-500);
  font-size: 14px;
}

/* Contenido Principal con Scroll */
.mobile-content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: calc(var(--mobile-nav-height) + 16px);
  -webkit-overflow-scrolling: touch;
}

/* Banner de Geolocalización Cercanía */
.gps-banner {
  margin: 12px 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #0277b0 0%, #0369a1 100%);
  border-radius: var(--radius-lg);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.gps-banner-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gps-banner-text h4 {
  font-size: 13px;
  font-weight: 700;
}

.gps-banner-text p {
  font-size: 12px;
  opacity: 0.9;
}

.gps-btn {
  background: var(--bg-surface);
  color: var(--primary-700);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* Carrusel de Especialidades */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px 16px;
}

.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--slate-800);
}

.section-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-600);
}

.specialty-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 16px 12px 16px;
  scrollbar-width: none;
}

.specialty-scroll::-webkit-scrollbar {
  display: none;
}

.specialty-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 74px;
  padding: 10px 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.specialty-pill:hover {
  border-color: var(--primary-300);
  transform: translateY(-2px);
}

.specialty-pill.active {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.3);
}

.specialty-icon-box {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-50);
  color: var(--primary-600);
}

.specialty-pill.active .specialty-icon-box {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.specialty-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70px;
}

/* Lista de Doctores */
.doctors-list {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doctor-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.doctor-card:hover {
  border-color: var(--primary-200);
  box-shadow: var(--shadow-md);
}

.doctor-card-top {
  display: flex;
  gap: 12px;
}

.doctor-avatar-wrapper {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--slate-100);
}

.doctor-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doctor-verified-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: var(--accent-600);
  color: #ffffff;
  border-radius: var(--radius-full);
  padding: 2px;
}

.doctor-info-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.doctor-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.doctor-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.3;
  /* Dos lineas como mucho. Hay nombres de tres —titulo, dos nombres y dos
     apellidos— y una sola tarjeta larga descuadraba su fila entera. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fav-btn {
  color: var(--slate-500);
  padding: 4px;
}

.fav-btn.is-fav {
  color: var(--danger-500);
}

.doctor-specialty {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-600);
  /* Una linea: "Oftalmologia & Cirugia Refractiva Laser" ocupaba dos. */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.doctor-clinic {
  font-size: 12px;
  color: var(--slate-500);
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 2px;
}

/* El nombre de la clinica llega a ser largo ("Centro Medico Real - Edificio
   de Consultorios, Piso 3"): dos lineas y elipsis. */
.doctor-clinic > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* La fila de seguros tampoco puede crecer sin limite. */
.doctor-metrics-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 4px;
  font-size: 12px;
}

.rating-badge {
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  color: var(--warning-600);   /* #d97706 daba 3.19 sobre blanco; este, 5.02 */
}

.distance-badge {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--slate-600);
  font-weight: 500;
}

/* Insurances Pills */
.doctor-insurances-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--slate-200);
  /* Dos lineas de seguros como mucho: son los que mas hacian crecer una
     tarjeta por encima de sus vecinas. Ver JEA-212. */
  max-height: 52px;
  overflow: hidden;
}

.insurance-tag {
  font-size: 12px;
  font-weight: 600;
  background: var(--slate-100);
  color: var(--slate-600);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

/* Bottom Actions of Card */
.doctor-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--border-color-subtle);
  /* Empuja el precio y el boton al fondo de la tarjeta, pase lo que pase
     arriba. Sin esto, estirar la tarjeta solo dejaba hueco vacio debajo. */
  margin-top: auto;
}

.doctor-price-col {
  display: flex;
  flex-direction: column;
}

.price-label {
  font-size: 12px;
  color: var(--slate-500);
  text-transform: uppercase;
  font-weight: 600;
}

.price-amount {
  font-size: 14px;
  font-weight: 800;
  color: var(--slate-900);
}

.doctor-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-book-sm {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-md);
  background: var(--primary-600);
  color: #ffffff;
}

/* Vista Mapa (MapView) */
.map-view-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.map-element {
  width: 100%;
  height: 100%;
  z-index: 1;
}

.map-floating-controls {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radius-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  padding: 6px 10px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  overflow-x: auto;
}

.radius-pill {
  /* 24px de alto minimo: son botones que se pulsan con el dedo sobre el mapa,
     y a 22 quedaban por debajo del minimo de WCAG 2.5.8. */
  min-height: 26px;
  padding: 5px 11px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-600);
  background: var(--slate-100);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.radius-pill.active {
  background: var(--primary-600);
  color: #ffffff;
}

.map-floating-card {
  position: absolute;
  bottom: calc(var(--mobile-nav-height) + 16px);
  left: 16px;
  right: 16px;
  z-index: 10;
  animation: slideUp 0.25s ease-out;
}

/* Bottom Navigation Bar */
.bottom-nav-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--mobile-nav-height);
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--slate-500);
  font-size: 12px;
  font-weight: 600;
  position: relative;
  padding: 6px 12px;
}

.nav-item.active {
  color: var(--primary-600);
}

.nav-badge {
  /* Rojo un paso mas oscuro que --danger-500. Con #ef4444, el numero blanco
     daba 3.76 sobre el fondo y no llegaba al 4.5 que pide WCAG AA para texto
     pequeno. Este da 4.83 y a simple vista es el mismo rojo. Es el que ya usa
     el contador de la campana. */
  position: absolute;
  top: 2px;
  right: 8px;
  background: var(--danger-600);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: var(--radius-full);
}

/* Módulo de Agendamiento (Wizard 5 Pasos) */
.wizard-steps-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
}

.wizard-step-dot {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--slate-200);
  color: var(--slate-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  z-index: 2;
}

.wizard-step-dot.active {
  background: var(--primary-600);
  color: #ffffff;
  box-shadow: 0 0 0 4px var(--primary-100);
}

.wizard-step-dot.done {
  background: var(--accent-600);
  color: #ffffff;
}

/* Modality Options */
.modality-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.modality-card {
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modality-card.selected {
  border-color: var(--primary-600);
  background: var(--primary-50);
}

.time-slots-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  margin-top: 10px;
}

.time-slot-btn {
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  background: var(--slate-100);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.time-slot-btn.selected {
  background: var(--primary-600);
  color: #ffffff;
}

/* Pase de Cita con Código QR */
.appointment-pass {
  background: var(--bg-surface);
  border: 2px dashed var(--primary-300);
  border-radius: var(--radius-xl);
  padding: 20px;
  text-align: center;
  margin: 16px 0;
  box-shadow: var(--shadow-md);
}

.qr-code-wrapper {
  margin: 16px auto;
  padding: 12px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  display: inline-block;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Animación del Láser del Escáner QR */
@keyframes laserScan {
  0% {
    top: 5%;
    opacity: 0.8;
  }
  100% {
    top: 90%;
    opacity: 1;
  }
}

/* ============================================================
   VISTA DE PACIENTE EN PANTALLAS GRANDES

   Hasta ahora la app del paciente se dibujaba siempre como un teléfono de
   480px: en un iPad o un portátil aparecía un móvil flotando en medio de la
   pantalla, desaprovechando todo el espacio.

   Estas reglas la convierten en una web de verdad a partir de 768px, sin
   tocar el HTML ni la lógica: el marco del dispositivo desaparece, la
   navegación inferior sube y se vuelve horizontal, y las tarjetas de médicos
   pasan a una rejilla de varias columnas.

   Por debajo de 768px no se aplica nada de esto: el móvil sigue exactamente
   como estaba, que es donde el diseño original funciona bien.

     768–1023px  iPad y portátiles pequeños — dos columnas
     ≥1024px     escritorio — tres columnas y más aire
   ============================================================ */

/* Dos columnas ya desde 480px. Antes la rejilla no entraba hasta 768, asi que
   un telefono en horizontal o una pantalla pequena mostraban una sola columna
   con la mitad del ancho sin usar. Ver JEA-212. */
@media (min-width: 480px) and (max-width: 767px) {
  .doctors-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
  }

  /* La tarjeta se diseno para ocupar el ancho entero del telefono. En media
     columna hay que apretar: foto mas pequena, y el pie en dos lineas para
     que el precio y los dos botones no compitan por el mismo renglon. */
  .doctors-list .doctor-avatar-wrapper { width: 56px; height: 56px; }
  .doctors-list .doctor-card-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .doctors-list .doctor-card-actions { display: flex; gap: 8px; }
  .doctors-list .doctor-card-actions > * { flex: 1; }
}

@media (min-width: 768px) {

  /* El contenedor deja de ser una pantalla de móvil y pasa a ser la página. */
  .mobile-app-container {
    overflow: visible;
    height: auto;
    min-height: 100%;
    background: var(--bg-app);
  }

  /* La navegación sube: en escritorio, una barra inferior fija es un patrón
     de móvil que aquí solo estorba. El reordenado va en el contenedor, que es
     el hijo directo del flex; la nav vive un nivel más abajo. */
  #patient-bottom-nav-root {
    order: -1;
    position: sticky;
    top: 0;
    z-index: 20;
  }

  #patient-header-root {
    order: 0;
  }

  #patient-main-content {
    order: 1;
  }

  .bottom-nav-bar {
    position: static;
    height: auto;
    border-top: none;
    border-bottom: 1px solid var(--border-color);
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  }

  .bottom-nav-bar .nav-item {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 13px;
    min-width: 0;
  }

  .bottom-nav-bar .nav-item span {
    font-size: 13px;
  }

  .bottom-nav-bar .nav-item.active {
    background: var(--primary-50);
  }

  /* La cabecera ya no necesita simular la de una app. */
  .mobile-header {
    align-items: center;
    padding: 18px 24px;
  }

  .mobile-header > * {
    width: 100%;
    max-width: 1140px;
  }

  /* El contenido respira y se centra, en vez de estirarse a lo ancho. */
  .mobile-content {
    padding-bottom: 40px;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .mobile-content > *,
  #specialties-carousel-root {
    width: 100%;
    max-width: 1140px;
  }

  /* Las especialidades caben todas a la vista: ya no hace falta arrastrar
     en horizontal para descubrirlas. */
  .specialty-scroll {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: flex-start;
    padding: 4px 24px 16px;
  }

  /* Varias tarjetas por fila en lugar de una columna infinita. */
  .doctors-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 0 24px;
    /* `start` dejaba que cada tarjeta midiera lo suyo: en la misma fila salian
       de 236 y de 251 segun lo largo que fuera el nombre o cuantos seguros
       tuviera, y el boton "Agendar" quedaba a distinta altura en cada una.
       Con `stretch` todas las de una fila miden igual. Ver JEA-212. */
    align-items: stretch;
  }

  .gps-banner {
    margin: 0 24px 14px;
    border-radius: var(--radius-lg);
  }
}

@media (min-width: 1024px) {
  .doctors-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .mobile-header {
    padding: 22px 32px;
  }

  .mobile-content {
    padding-top: 6px;
  }
}

/* El mapa es la excepción: necesita ocupar todo el alto disponible, así que
   se le devuelve el comportamiento de pantalla completa. */
@media (min-width: 768px) {
  .mobile-content:has(.map-container),
  .mobile-content:has(#map-view-container) {
    display: block;
    padding-bottom: 0;
  }
}

/* ============================================================
   PORTAL MÉDICO EN PANTALLAS GRANDES

   El portal comparte contenedor con la app del paciente, así que heredaba
   sus reglas de escritorio a medias: la cabecera se estiraba a todo lo ancho
   mientras el contenido quedaba centrado, y no cuadraban entre sí.

   Aquí se le da tratamiento propio. El médico trabaja sobre todo desde un
   portátil o una tablet en consulta, así que en pantalla grande interesa ver
   varias citas de un vistazo, no una columna estrecha.

   Por debajo de 768px no se aplica nada: el portal en el móvil queda igual.
   ============================================================ */

@media (min-width: 768px) {

  /* La cabecera oscura ocupa todo el ancho, pero su contenido se alinea con
     el del cuerpo: si no, el nombre del médico queda pegado al borde
     izquierdo y la agenda empieza mucho más adentro. */
  .doctor-portal .portal-header > * {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .doctor-portal .portal-header {
    padding: 18px 32px 0;
  }

  .doctor-portal .mobile-content {
    align-items: stretch;
  }

  .doctor-portal .portal-cuerpo {
    max-width: 1100px;
    margin: 0 auto;
    padding: 22px 32px 32px;
    width: 100%;
  }

  /* El botón de escanear QR no necesita ocupar todo el ancho de un portátil:
     a pantalla completa resultaba una franja azul desproporcionada. */
  .doctor-portal #open-qr-scanner-btn {
    width: auto !important;
    min-width: 320px;
    padding: 13px 28px !important;
  }

  /* Los indicadores del día ganan tamaño en vez de quedarse diminutos. */
  .doctor-portal .portal-kpis {
    gap: 16px !important;
    margin-bottom: 22px !important;
  }

  .doctor-portal .portal-kpis > div {
    padding: 16px !important;
  }

  /* Varias citas por fila: lo que en el móvil es una lista vertical, en
     pantalla grande cabe en dos columnas sin apretarse. */
  .doctor-portal .portal-agenda {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px !important;
    align-items: start;
  }
}

@media (min-width: 1200px) {
  .doctor-portal .portal-agenda {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Gestión de agenda del médico en pantallas grandes --- */
@media (min-width: 768px) {
  /* Igual que en el resto del portal: la banda oscura llega a los bordes,
     pero su contenido se alinea con el del cuerpo. */
  .gestor-agenda-header > * {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .gestor-agenda-header {
    padding: 20px 32px 0 !important;
  }

  .gestor-agenda-cuerpo {
    padding: 24px 32px !important;
  }

  .gestor-agenda-cuerpo > * {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- Pantalla de acceso del médico en escritorio --- */
@media (min-width: 768px) {
  /* Sin límite de ancho, un formulario de dos campos se estiraba de lado a
     lado del portátil. */
  .pantalla-acceso > * {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

/* --- Accesos de cuenta en la barra de navegación --- */

.nav-cuenta {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

/* En móvil la barra tiene cinco pestañas repartidas a partes iguales. El
   acceso de cuenta se reduce a su icono para no robarles sitio: la
   navegación principal manda sobre los accesos de cuenta. */
@media (max-width: 767px) {
  .nav-cuenta {
    position: absolute;
    top: -52px;
    right: 12px;
    margin-left: 0;
  }

  .cuenta-btn-texto {
    display: none;
  }

  .nav-cuenta .cuenta-btn-entrar {
    padding: 8px;
    border-radius: 50%;
  }
}

/* En escritorio la barra es horizontal y hay sitio de sobra: el acceso se
   va al extremo derecho, separado de la navegación. */
@media (min-width: 768px) {
  .bottom-nav-bar {
    position: relative;
    padding-right: 200px;
  }

  .nav-cuenta {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* ============================================================
   BUSCADOR, FILTROS, ESPECIALIDADES Y RESULTADOS

   Todo lo de aquí abajo se escribe primero para el móvil (menos de 768px)
   y se ajusta después para tablet y escritorio. Dos reglas que se repiten:
   ningún texto se trunca —si no cabe, pasa a la siguiente línea— y toda
   zona pulsable mide al menos 44px de alto en el móvil.
   ============================================================ */

/* --- Fila del buscador con su botón de filtros --- */
.buscador-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}

.buscador-fila .search-input-wrapper {
  flex: 1 1 240px;
  position: relative;
}

.buscador-fila .search-input-wrapper input {
  min-height: 46px;
  font-size: 14px;
}

/* El botón de filtros va relleno con el color de acento: al lado de un campo
   de texto gris, un botón blanco con un icono pasaba desapercibido. */
.boton-filtros {
  position: relative;
  flex: 1 0 100%;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--primary-700);
  border-radius: var(--radius-full);
  background: var(--primary-600);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1px;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}

.boton-filtros:hover { background: var(--primary-700); }
.boton-filtros:focus-visible { outline: 3px solid var(--primary-200); outline-offset: 2px; }

/* Con filtros puestos el botón se oscurece y muestra cuántos: sin esa
   pista, el paciente puede no entender por qué ve tan pocos resultados. */
.boton-filtros.con-activos {
  background: var(--primary-800);
  border-color: var(--primary-900);
}

.boton-filtros-punto {
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--primary-800);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.boton-filtros-punto::before {
  content: '·';
  margin-right: 4px;
  color: var(--primary-400);
}

/* --- Sugerencias --- */
.sugerencias-lista {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.13);
  overflow: hidden;
  z-index: 60;
  max-height: 320px;
  overflow-y: auto;
}

.sugerencia {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 13px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: var(--slate-700);
}

.sugerencia:hover,
.sugerencia.activa { background: var(--primary-50); }

.sugerencia-texto {
  flex: 1;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sugerencia-extra {
  font-size: 12px;
  color: var(--slate-500);
  flex-shrink: 0;
}

/* --- Especialidades: cinco tarjetas y el acceso al catálogo --- */
.especialidades-seccion { padding: 16px 16px 6px; }

.especialidades-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.especialidades-cabecera h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--slate-900);
}

/* Tres columnas y dos filas en el móvil: cinco especialidades y el botón. */
.especialidades-rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.especialidad-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 108px;
  min-width: 0;
  padding: 12px 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--slate-800);
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.especialidad-tarjeta:hover {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.especialidad-tarjeta:focus-visible { outline: 3px solid var(--primary-200); outline-offset: 2px; }

.especialidad-tarjeta-icono {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--primary-50);
  color: var(--primary-600);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* El nombre nunca se corta: pasa a una segunda línea, y si una sola palabra
   no cabe en el ancho de la tarjeta, se parte con guion. */
.especialidad-tarjeta-nombre {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.especialidad-tarjeta.activa {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(2, 132, 199, 0.28);
}

.especialidad-tarjeta.activa .especialidad-tarjeta-icono {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* La sexta posición es un botón, no una especialidad: se distingue con borde
   punteado y fondo de acento suave. */
.especialidad-ver-todas {
  border: 2px dashed var(--primary-300);
  background: var(--primary-50);
  color: var(--primary-800);
  box-shadow: none;
}

.especialidad-ver-todas:hover {
  border-color: var(--primary-500);
  background: var(--primary-100);
}

.especialidad-ver-todas .especialidad-tarjeta-icono {
  background: var(--bg-surface);
  color: var(--primary-600);
}

.especialidad-ver-todas-cuenta {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary-600);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Catálogo completo de especialidades --- */
.especialidades-modal-caja {
  max-width: 620px;
  display: flex;
  flex-direction: column;
  padding: 16px 18px 0;
}

.especialidades-modal-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.especialidades-modal-cabecera h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--slate-900);
}

.especialidades-modal-cabecera p {
  font-size: 12px;
  color: var(--slate-500);
  margin-top: 2px;
}

.especialidades-modal-cabecera .btn-icon { width: 40px; height: 40px; flex-shrink: 0; }

.especialidades-modal-buscador {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}

.especialidades-modal-buscador svg {
  position: absolute;
  left: 13px;
  color: var(--slate-500);
  pointer-events: none;
}

.especialidades-modal-buscador input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: var(--slate-50);
  font-size: 14px;
}

.especialidades-modal-buscador input:focus {
  background: var(--bg-surface);
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.especialidades-modal-lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.especialidades-grupo { margin-bottom: 20px; }

.especialidades-grupo h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--slate-900);
  margin-bottom: 10px;
}

.especialidades-grupo-cuenta {
  font-size: 12px;
  font-weight: 800;
  color: var(--slate-500);
  background: var(--slate-100);
  padding: 2px 8px;
  border-radius: 999px;
}

.especialidades-grupo-chips {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.especialidad-modal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-800);
  text-align: left;
}

.especialidad-modal-item:hover { border-color: var(--primary-400); background: var(--primary-50); }

/* Las que no tienen médicos se atenúan, pero siguen accesibles: puede que
   mañana sí los tengan y esconderlas ocultaría la oferta futura. */
.especialidad-modal-item.sin-medicos { opacity: .6; }

.especialidad-modal-icono {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--primary-50);
  color: var(--primary-600);
  display: flex;
  align-items: center;
  justify-content: center;
}

.especialidad-modal-nombre {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.especialidad-modal-cuenta {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--slate-500);
  background: var(--slate-100);
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.especialidades-modal-vacio {
  text-align: center;
  padding: 24px;
  color: var(--slate-500);
  font-size: 13px;
}

/* --- Resultados --- */
.resultados-seccion { padding: 10px 0 20px; }

.resultados-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px 10px;
}

.resultados-cabecera h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--slate-900);
  line-height: 1.4;
  min-width: 0;
}

/* Va en línea con el título, como una sola frase que se parte donde haga
   falta: "Resultados de búsqueda · 12 médicos". */
.resultados-contador {
  display: inline;
  margin-left: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-500);
  white-space: nowrap;
}

.resultados-limpiar {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 8px;
  background: none;
  border: none;
  color: var(--primary-700);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.chips-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 12px;
}

.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 12px 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--primary-200);
  background: var(--primary-50);
  color: var(--primary-800);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  max-width: 100%;
}

.chip-filtro span { overflow-wrap: anywhere; text-align: left; }
.chip-filtro svg { flex-shrink: 0; }
.chip-filtro:hover { background: var(--primary-100); }

.resultados-vacio {
  text-align: center;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.resultados-vacio h4 { font-size: 15px; font-weight: 800; color: var(--slate-700); }

.resultados-vacio p {
  font-size: 12.5px;
  color: var(--slate-500);
  max-width: 320px;
  line-height: 1.55;
  margin-bottom: 6px;
}

/* --- Panel de filtros --- */

/* En el móvil es una hoja que sube desde abajo y ocupa hasta el 85% de la
   pantalla. Por encima de 768px pasa a ser un panel lateral (más abajo). */
.panel-lateral-overlay {
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.panel-lateral {
  width: 100%;
  height: 85vh;
  height: 85dvh;
  max-height: 85vh;
  max-height: 85dvh;
  background: var(--bg-surface);
  border-radius: 24px 24px 0 0;
  box-shadow: var(--shadow-sheet);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp .28s cubic-bezier(0.16, 1, 0.3, 1);
  touch-action: pan-y;
}

@keyframes panelEntra {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.panel-lateral-cabecera {
  flex-shrink: 0;
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--border-color);
  cursor: grab;
}

.panel-lateral-asa { margin-bottom: 10px; }

.panel-lateral-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.panel-lateral-titulo h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--slate-900);
}

.panel-lateral-titulo .btn-icon { width: 40px; height: 40px; }

.panel-lateral-cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px 8px;
  -webkit-overflow-scrolling: touch;
}

/* Los botones quedan fijos abajo, fuera del scroll: siempre a mano. */
.panel-lateral-pie {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.panel-lateral-btn-limpiar {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 18px;
  font-weight: 700;
}

.panel-lateral-btn-aplicar {
  flex: 1;
  min-height: 48px;
  font-weight: 800;
  justify-content: center;
  gap: 6px;
}

.panel-lateral-btn-aplicar span { font-weight: 600; opacity: .85; }

/* Con cero resultados el botón se apaga visualmente pero sigue activo: el
   paciente puede querer aplicar igualmente y ver la pantalla vacía con el
   consejo de quitar filtros. */
.panel-lateral-btn-aplicar.sin-resultados {
  /* Fondo de un botón con texto blanco: tiene que seguir en la mitad oscura de
     la rampa aunque se vea apagado. --slate-400 es ahora un gris claro y aquí
     dejaría el texto ilegible. */
  background: var(--slate-500);
  box-shadow: none;
}

/* Cada grupo con su título en negrita y una línea que lo separa del
   anterior: sin esto, las opciones se leían como una lista plana. */
.filtro-grupo { padding-bottom: 18px; }

.filtro-grupo + .filtro-grupo {
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}

.filtro-grupo h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--slate-900);
  margin-bottom: 12px;
}

.filtro-opciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* Variante en cuadricula (JEA-222). Los chips de servicios y seguros medían lo
   que medía su texto, asi que las filas quedaban en dientes de sierra y los
   parentesis de cada uno arrancaban a distinta altura. En celdas iguales se
   alinean solos.
   Es un MODIFICADOR y no un cambio de `.filtro-opciones`: los filtros del
   portal del paciente usan la misma clase y ahi el ancho variable esta bien
   --son etiquetas sueltas, no una lista que se compare consigo misma. */
.filtro-opciones.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 8px;
  align-items: stretch;
}
.filtro-opciones.rejilla > .filtro-opcion {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}
@media (max-width: 480px) {
  .filtro-opciones.rejilla { grid-template-columns: 1fr; }
}

.filtro-opcion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--slate-700);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  max-width: 100%;
}

.filtro-opcion span { overflow-wrap: anywhere; text-align: left; }
.filtro-opcion:hover { border-color: var(--primary-400); background: var(--primary-50); }

/* Estado activo con relleno, no solo borde: se ve de un vistazo qué hay
   elegido en cada grupo. */
.filtro-opcion.activa {
  border-color: var(--primary-600);
  background: var(--primary-600);
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.25);
}

.filtro-precio { padding: 6px 2px 0; }

.filtro-precio input[type="range"] {
  width: 100%;
  height: 44px;
  accent-color: var(--primary-600);
  cursor: pointer;
}

.filtro-precio-escala {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--slate-500);
  margin-top: 2px;
}

.filtro-precio-escala strong {
  color: var(--primary-700);
  font-size: 14px;
  font-weight: 800;
}

/* ============================================================
   MÉDICOS DESTACADOS
   ============================================================ */

.destacados-seccion {
  padding: 16px 0 8px;
  border-bottom: 1px solid var(--border-color);
}

.destacados-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px 12px;
}

.destacados-cabecera h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--slate-900);
}

/* Que sea espacio pagado se dice, no se insinúa: ocultarlo convertiría la
   sección en publicidad encubierta. */
.destacados-nota {
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}

/* En el móvil, carrusel con una tarjeta y media a la vista: la segunda se
   asoma por el borde y deja claro que hay más a la derecha. */
.destacados-carrusel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 16px 16px;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.destacados-carrusel::-webkit-scrollbar { display: none; }

.destacado-tarjeta {
  flex: 0 0 64%;
  max-width: 300px;
  scroll-snap-align: start;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
  /* Columna con el pie anclado abajo: las especialidades de dos lineas
     ("Cardiologia & Ecocardiografia") hacian una tarjeta mas alta que sus
     vecinas y la valoracion quedaba a distinta altura en cada una.
     Ver JEA-212. */
  display: flex;
  flex-direction: column;
}

.destacado-tarjeta:hover,
.destacado-tarjeta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  outline: none;
  border-color: var(--primary-300);
}

.destacado-foto {
  position: relative;
  height: 150px;
  background: var(--slate-100);
}

.destacado-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.destacado-etiqueta {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.74);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.destacado-cuerpo {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.destacado-cuerpo h4 {
  font-size: 15px;
  font-weight: 800;
  color: var(--slate-900);
  line-height: 1.3;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.destacado-especialidad {
  font-size: 12px;
  color: var(--primary-700);
  font-weight: 600;
  line-height: 1.35;
  margin-top: 4px;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserva las dos lineas aunque solo ocupe una, para que el pie caiga a la
     misma altura en toda la fila. */
  min-height: calc(2 * 1.35em);
}

.destacado-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;      /* siempre al fondo de la tarjeta */
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.destacado-valoracion {
  font-size: 12px;
  font-weight: 800;
  color: var(--warning-600);
}

.destacado-tarifa {
  font-size: 12px;
  font-weight: 800;
  color: var(--slate-700);
}

/* ============================================================
   MÓVIL: la navegación inferior no debe tapar el final del contenido
   ============================================================ */

@media (max-width: 767px) {
  .bottom-nav-bar {
    height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-content {
    padding-bottom: calc(var(--mobile-nav-height) + 28px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   TABLET Y ESCRITORIO (≥ 768px)
   ============================================================ */

@media (min-width: 768px) {
  /* El botón de filtros vuelve al lado del buscador, con su misma altura. */
  .buscador-fila { flex-wrap: nowrap; }
  .buscador-fila .search-input-wrapper { flex: 1 1 auto; }
  .boton-filtros { flex: 0 0 auto; padding: 0 22px; }

  .especialidades-seccion { padding: 20px 24px 8px; }
  .especialidades-cabecera h3 { font-size: 16px; }

  .especialidades-rejilla { gap: 12px; }

  .especialidad-tarjeta {
    min-height: 118px;
    padding: 14px 10px;
    gap: 10px;
  }

  .especialidad-tarjeta-nombre { font-size: 12.5px; }

  .especialidades-grupo-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resultados-seccion { padding-top: 14px; }
  .resultados-cabecera,
  .chips-filtros { padding-left: 24px; padding-right: 24px; }
  .resultados-cabecera h3 { font-size: 17px; }
  .resultados-contador { font-size: 14px; }

  .chip-filtro { min-height: 38px; }
  .resultados-limpiar { min-height: 38px; }

  /* Panel de filtros lateral, por la derecha. */
  .panel-lateral-overlay {
    align-items: stretch;
    justify-content: flex-end;
  }

  .panel-lateral {
    max-width: 400px;
    height: 100%;
    max-height: none;
    border-radius: 0;
    animation: panelEntra .22s ease-out;
  }

  .panel-lateral-cabecera { padding: 16px 20px; cursor: default; }
  .panel-lateral-asa { display: none; }
  .panel-lateral-cuerpo { padding: 20px 20px 10px; }
  .panel-lateral-pie { padding: 14px 20px; }
  .filtro-opcion { min-height: 40px; padding: 6px 14px; font-size: 12.5px; }
  .filtro-precio input[type="range"] { height: 32px; }

  /* Destacados: las cinco a la vista, sin carrusel. */
  .destacados-seccion { padding: 20px 0 10px; }
  .destacados-cabecera { padding: 0 24px 14px; }
  .destacados-cabecera h3 { font-size: 16px; }

  .destacados-carrusel {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    overflow: visible;
    scroll-snap-type: none;
    padding: 4px 24px 18px;
    align-items: stretch;
  }

  .destacado-tarjeta { flex: none; max-width: none; min-width: 0; }
  .destacado-foto { height: 130px; }
  .destacado-cuerpo { padding: 12px 12px 14px; }
  .destacado-cuerpo h4 { font-size: 13.5px; }
  .destacado-especialidad { font-size: 12px; }
}

@media (min-width: 1024px) {
  /* Una fila de seis: cinco especialidades y el botón del catálogo. */
  .especialidades-rejilla { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .especialidad-tarjeta { min-height: 128px; padding: 16px 12px; }
  .especialidad-tarjeta-icono { width: 46px; height: 46px; }
  .especialidad-tarjeta-nombre { font-size: 13px; }

  .destacados-carrusel { gap: 18px; }
  .destacado-foto { height: 168px; }
  .destacado-cuerpo { padding: 14px 16px 16px; }
  .destacado-cuerpo h4 { font-size: 15px; }
  .destacado-especialidad { font-size: 12px; }
}

/* ============================================================
   MÓVIL: zonas táctiles y hojas a media altura
   ============================================================ */

@media (max-width: 767px) {
  /* El catálogo de especialidades sube desde abajo y se queda en el 85% de
     la pantalla: así se sigue viendo que hay página detrás y se cierra
     tocándola. */
  .modal-overlay:has(.especialidades-modal-caja) { align-items: flex-end; }

  .especialidades-modal-caja {
    height: 85vh;
    height: 85dvh;
    max-height: 85dvh;
    border-radius: 24px 24px 0 0;
  }

  /* Ningún botón por debajo de 44px: en la tarjeta del médico los de
     "Ver perfil", "Agendar" y el corazón eran demasiado pequeños para el
     dedo. */
  .doctor-card .btn-secondary,
  .doctor-card .btn-book-sm {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .doctor-card .fav-btn {
    width: 44px;
    height: 44px;
    margin: -10px -10px 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .doctor-card-actions { gap: 8px; }
}

/* ============================================================
   ESCÁNER QR DEL PORTAL MÉDICO
   El visor es cuadrado y de tamaño fijo: el QR del pase se lee
   mejor centrado que ocupando toda la pantalla.
   ============================================================ */

.qr-visor {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0 auto 12px;
  background: var(--slate-900);
  border: 3px solid var(--primary-500);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 0 20px rgba(14, 165, 233, 0.35);
}

.qr-visor video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Estado sin cámara: mismo hueco, para que el panel no dé un salto
   cuando falla el permiso. */
.qr-visor-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  text-align: center;
  background: var(--slate-50);
  border-color: var(--border-color);
  box-shadow: none;
}

.qr-visor-error h4 { font-size: 13px; font-weight: 800; color: var(--slate-800); }
.qr-visor-error p { font-size: 12px; line-height: 1.45; color: var(--slate-600); }
.qr-visor-error .btn { margin-top: 4px; padding: 10px 18px; font-size: 12px; font-weight: 700; min-height: 44px; }

.qr-marco {
  position: absolute;
  inset: 26px;
  border: 2px dashed rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  pointer-events: none;
}

.qr-laser {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8;
  animation: laserScan 2s ease-in-out infinite alternate;
  pointer-events: none;
}

.qr-ayuda {
  font-size: 12px;
  color: var(--slate-600);
  margin-bottom: 14px;
}

/* Quien prefiere menos movimiento no necesita el láser: es decorativo. */
@media (prefers-reduced-motion: reduce) {
  .qr-laser { animation: none; opacity: 0.5; }
}

/* ============================================================
   MI PERFIL DEL MÉDICO
   ============================================================ */

/* Identidad de la cabecera: es un botón, así que necesita verse pulsable
   sin parecer un botón de acción. */
/* JEA-222 · Ancho al contenido, no a la pantalla.
   Con `width: 100%` y el texto en `flex: 1`, la flecha se iba al extremo
   derecho y dejaba un vacio enorme en medio: el nombre a un lado, la flecha a
   un palmo, y nada entre los dos. Ahora el boton mide lo que mide su contenido
   y la flecha va pegada al texto, que es donde dice algo. */
.portal-identidad {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 12px;
  padding: 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  min-height: 44px;
}

.portal-identidad:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--slate-700); }
.portal-identidad:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }

.portal-identidad img {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  border: 2px solid var(--primary-400);
  object-fit: cover;
  flex-shrink: 0;
}

.portal-identidad-texto { min-width: 0; text-align: left; }
/* El nombre manda en la cabecera. A 14px competia con la etiqueta "Portal del
   Médico" --12px, mayusculas, negrita-- y las dos se leian igual de plano.
   Ahora hay jerarquia: quien es, y debajo y mas discreto, de que. */
.portal-identidad-texto h3 { font-size: 19px; font-weight: 800; color: #ffffff; line-height: 1.15; }
.portal-identidad-texto p { font-size: 12px; color: var(--primary-300); margin-top: 1px; }

/* JEA-222 · Pestañas de seccion: anchas lo que pide su texto.
   Iban con `flex: 1`, asi que las tres se repartian la pantalla entera y en
   escritorio quedaban tres islas de texto separadas por vacio. Ahora miden lo
   suyo y el grupo se alinea a la izquierda, que es por donde se empieza a leer.
   En movil vuelven a repartirse: ahi el ancho completo SI sirve, porque agranda
   la zona donde cae el dedo. */
.portal-tabs { display: flex; gap: 0; justify-content: flex-start; }

.portal-tab-btn {
  padding: 10px 16px;
  font-size: 12px; font-weight: 700; font-family: inherit;
  background: transparent; border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.portal-tab-btn:hover { color: #fff; }
.portal-tab-btn:focus-visible { outline: 2px solid var(--primary-400); outline-offset: -2px; }

@media (max-width: 768px) {
  .portal-tab-btn { flex: 1; padding: 10px 6px; }
}

.perfil-medico { padding: 14px; display: flex; flex-direction: column; gap: 14px; }

.perfil-tarjeta {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.perfil-tarjeta h4 {
  font-size: 13px;
  font-weight: 800;
  color: var(--slate-900);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.perfil-campo { display: flex; flex-direction: column; gap: 4px; }
.perfil-campo > span { font-size: 12px; font-weight: 700; color: var(--slate-700); }

.perfil-campo input,
.perfil-campo textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: inherit;
  background: var(--bg-surface);
  min-height: 44px;
}

.perfil-campo textarea { resize: vertical; line-height: 1.45; }
.perfil-campo input:focus,
.perfil-campo textarea:focus { outline: none; border-color: var(--primary-500); }

/* Los datos verificados se ven distintos: que no parezcan editables evita
   que el médico los intente cambiar y se lleve el chasco. */
.perfil-bloqueado input {
  background: var(--slate-50);
  color: var(--slate-500);
  cursor: not-allowed;
}

.perfil-rejilla { display: grid; grid-template-columns: 1fr; gap: 12px; }

.perfil-grupo { display: flex; flex-direction: column; gap: 8px; }
.perfil-etiqueta { font-size: 12px; font-weight: 700; color: var(--slate-700); }
.perfil-etiqueta em { font-weight: 600; color: var(--slate-500); font-style: normal; }

.perfil-nota { font-size: 12px; color: var(--slate-500); line-height: 1.4; }
.perfil-nota-aviso {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--slate-50);
  border-radius: var(--radius-sm);
  color: var(--slate-600);
}

.perfil-contador { font-size: 12px; color: var(--slate-500); align-self: flex-end; }
.perfil-contador.al-limite { color: var(--warning-600); font-weight: 700; }

.perfil-foto-fila { display: flex; align-items: center; gap: 14px; }
.perfil-foto-fila img {
  width: 76px;
  height: 76px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--slate-100);
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}
.perfil-foto-fila .perfil-portada { width: 112px; height: 76px; }
.perfil-foto-fila .btn { min-height: 44px; padding: 10px 16px; font-size: 12px; font-weight: 700; }

/* El campo de "otra subespecialidad" no necesita toda la fila (JEA-222): se
   escribe un nombre corto y al lado va el boton de anadir. En movil vuelve a
   ancho completo, donde el sitio escasea de verdad. */
.perfil-anadir { display: flex; gap: 8px; align-items: center; }
@media (min-width: 769px) {
  .perfil-anadir input { max-width: 30ch; flex: 0 1 30ch; }
}
.perfil-anadir input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  min-height: 44px;
}
.perfil-anadir .btn { min-height: 44px; padding: 10px 16px; font-size: 12px; font-weight: 700; }

.perfil-mapa {
  height: 240px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  overflow: hidden;
  z-index: 0;
}

.perfil-acciones { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(to top, #f8fafc 70%, transparent); }
.perfil-acciones .btn { width: 100%; min-height: 48px; font-size: 14px; font-weight: 800; justify-content: center; }

@media (min-width: 768px) {
  .perfil-medico {
    max-width: 780px;
    margin: 0 auto;
    padding: 20px 24px;
  }
  .perfil-rejilla { grid-template-columns: 1fr 1fr; }
  .perfil-mapa { height: 300px; }
}

.perfil-sedes { display: flex; flex-direction: column; gap: 8px; }
.perfil-sedes li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--slate-50);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}
.perfil-sedes li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perfil-sedes strong { font-size: 13px; font-weight: 800; color: var(--slate-800); }
.perfil-sedes span { font-size: 12px; color: var(--slate-600); overflow-wrap: anywhere; }

.perfil-sede-quitar {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 12px;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--danger-700);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.perfil-sede-quitar:hover { background: var(--danger-50); border-color: var(--danger-200); }

.perfil-sede-nueva { display: grid; grid-template-columns: 1fr; gap: 8px; }
.perfil-sede-nueva input {
  padding: 10px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  min-height: 44px;
}
.perfil-sede-nueva .btn { min-height: 44px; font-size: 12px; font-weight: 700; justify-content: center; }

@media (min-width: 768px) {
  .perfil-sede-nueva { grid-template-columns: 1fr 1fr; }
  .perfil-sede-nueva .btn { grid-column: 1 / -1; }
}

/* ============================================================
   FICHA DE LA CITA Y REAGENDA (portal médico)
   ============================================================ */

.cita-tarjeta { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.cita-tarjeta:hover { border-color: var(--primary-300) !important; box-shadow: var(--shadow-md); }
.cita-tarjeta:focus-visible { outline: 3px solid var(--primary-200); outline-offset: 2px; }

.ficha-bloque { padding-bottom: 16px; border-bottom: 1px solid var(--border-color); margin-bottom: 16px; }
.ficha-bloque:last-child { border-bottom: none; }
.ficha-bloque h4 {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--slate-500);
  margin-bottom: 10px;
}

.ficha-dato { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.ficha-dato > span { font-size: 12px; font-weight: 700; color: var(--slate-500); }
.ficha-dato > strong { font-size: 13.5px; font-weight: 700; color: var(--slate-800); overflow-wrap: anywhere; }

.ficha-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.ficha-pago.ok { color: var(--success-700); }
.ficha-pago.aviso { color: var(--warning-600); }

.ficha-motivo {
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate-800);
  background: var(--slate-50);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  overflow-wrap: anywhere;
}

.ficha-vacio { font-size: 12px; color: var(--slate-500); line-height: 1.45; }

.ficha-titular,
.ficha-aviso-reagenda {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  margin-top: 8px;
}
.ficha-titular { background: var(--primary-50); color: var(--primary-800); }
.ficha-aviso-reagenda { background: var(--warning-50); color: var(--warning-700); border: 1px solid #fde68a; margin-bottom: 16px; }
.ficha-titular strong,
.ficha-aviso-reagenda strong { font-size: 12.5px; font-weight: 800; display: block; }
.ficha-titular p,
.ficha-aviso-reagenda p { font-size: 12px; line-height: 1.4; }

.ficha-nota-aviso { font-size: 12px; color: var(--slate-500); margin-bottom: 6px; }
#ficha-nota {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 8px;
}
#ficha-guardar-nota { min-height: 44px; padding: 10px 16px; font-size: 12px; font-weight: 700; }

.ficha-historial { display: flex; flex-direction: column; gap: 8px; }
.ficha-historial li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: var(--slate-50);
  border-radius: var(--radius-md);
}
.ficha-historial li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ficha-historial strong { font-size: 12.5px; font-weight: 700; color: var(--slate-800); }
.ficha-historial span { font-size: 12px; color: var(--slate-600); overflow-wrap: anywhere; }
.ficha-historial-estado {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--slate-200);
  color: var(--slate-700);
}
.ficha-historial-estado.atendida { background: #d1fae5; color: var(--success-700); }
.ficha-historial-estado.cancelada { background: #fee2e2; color: var(--danger-700); }

.ficha-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-acciones .btn { flex: 1; min-width: 120px; min-height: 44px; font-size: 12.5px; font-weight: 700; justify-content: center; }
.ficha-btn-cancelar { background: var(--danger-50); color: var(--danger-700); border: 1px solid #fecaca; }
.ficha-btn-cancelar:hover { background: #fee2e2; }
.ficha-ya-atendida {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--success-700);
}

/* --- Reagenda --- */
.reagenda-caja { max-height: 88vh; display: flex; flex-direction: column; padding: 16px 18px 0; }
.reagenda-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.reagenda-cabecera h3 { font-size: 16px; font-weight: 800; color: var(--slate-900); }
.reagenda-cabecera p { font-size: 12px; color: var(--slate-600); }

.reagenda-cuerpo { flex: 1; overflow-y: auto; min-height: 0; padding-bottom: 8px; }
.reagenda-paso { margin-bottom: 18px; }
.reagenda-etiqueta { display: block; font-size: 12px; font-weight: 800; color: var(--slate-700); margin-bottom: 8px; }
.reagenda-etiqueta em { font-weight: 600; color: var(--slate-500); font-style: normal; }
.reagenda-nota { font-size: 12px; color: var(--slate-500); margin-bottom: 6px; }

.reagenda-dias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.reagenda-dias::-webkit-scrollbar { display: none; }
.reagenda-dia {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 56px;
  min-height: 66px;
  padding: 8px 6px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  cursor: pointer;
}
.reagenda-dia span { font-size: 12px; font-weight: 700; color: var(--slate-500); text-transform: uppercase; }
.reagenda-dia strong { font-size: 17px; font-weight: 800; color: var(--slate-800); }
.reagenda-dia.activa { background: var(--primary-600); border-color: var(--primary-600); }
.reagenda-dia.activa span, .reagenda-dia.activa strong { color: #fff; }

.reagenda-horas { display: flex; flex-wrap: wrap; gap: 8px; }
.reagenda-hora {
  min-height: 44px;
  padding: 10px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-700);
  cursor: pointer;
}
.reagenda-hora.activa { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }
.reagenda-vacio { font-size: 12px; color: var(--slate-500); }

#reagenda-motivo {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}

.reagenda-rapidos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.reagenda-rapido {
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--primary-200);
  background: var(--primary-50);
  color: var(--primary-800);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.reagenda-rapido:hover { background: var(--primary-100); }

.reagenda-pie { padding: 12px 0 16px; border-top: 1px solid var(--border-color); }
.reagenda-pie .btn { width: 100%; min-height: 48px; font-size: 14px; font-weight: 800; justify-content: center; }
.reagenda-pie .btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- Mensaje de cancelación y propuestas de reagenda (vista paciente) --- */

.cita-mensaje-cancelacion {
  background: var(--danger-50);
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.cita-mensaje-cancelacion strong { display: block; font-size: 12px; font-weight: 800; color: var(--danger-700); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 3px; }
.cita-mensaje-cancelacion p { font-size: 12.5px; line-height: 1.45; color: var(--slate-700); overflow-wrap: anywhere; }

.cita-reagenda {
  background: var(--warning-50);
  border: 1px solid #fde68a;
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 12px;
}
.cita-reagenda.esperando { background: var(--slate-50); border-color: var(--border-color); }
.cita-reagenda strong { display: block; font-size: 12.5px; font-weight: 800; color: var(--warning-700); margin-bottom: 4px; }
.cita-reagenda.esperando strong { color: var(--slate-700); }
.cita-reagenda p { font-size: 12px; line-height: 1.45; color: var(--slate-700); overflow-wrap: anywhere; }
.cita-reagenda-motivo { font-style: italic; margin-bottom: 8px; }

.cita-reagenda-horas { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.cita-reagenda-horas span { font-size: 12px; color: var(--slate-600); }
.cita-reagenda-horas .nueva { font-weight: 800; color: var(--warning-700); }

.cita-reagenda-acciones { display: flex; gap: 8px; }
.cita-reagenda-acciones .btn { flex: 1; min-height: 44px; font-size: 12.5px; font-weight: 700; justify-content: center; }

/* ============================================================
   AGENDA EN CALENDARIO (día / semana / mes)
   ============================================================ */

.cal { margin-bottom: 16px; }
.cal-solo-modos { margin-bottom: 12px; }

.cal-modos {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--slate-100);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}
.cal-modo {
  flex: 1;
  min-height: 38px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  color: var(--slate-600);
  cursor: pointer;
}
.cal-modo.activo { background: var(--bg-surface); color: var(--primary-700); box-shadow: var(--shadow-sm); }

.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cal-flecha {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--slate-600);
  cursor: pointer;
  flex-shrink: 0;
}
.cal-flecha:hover { border-color: var(--primary-300); color: var(--primary-600); }

.cal-titulo { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.cal-titulo strong { font-size: 13.5px; font-weight: 800; color: var(--slate-800); }
.cal-hoy {
  border: none; background: none; padding: 2px 8px;
  font-size: 12px; font-weight: 700; color: var(--primary-600); cursor: pointer;
  /* 24px minimo de alto: es un boton que se pulsa. WCAG 2.5.8, ver JEA-183. */
  min-height: 26px;
  display: inline-flex;
  align-items: center;
}

.cal-cuerpo { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; }
.cal-vacio { padding: 24px 16px; text-align: center; font-size: 12.5px; color: var(--slate-500); }

/* --- Día --- */
.cal-dia { display: flex; flex-direction: column; }
.cal-fila { display: flex; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border-color-subtle, #f1f5f9); }
.cal-fila:last-child { border-bottom: none; }
.cal-hora { flex: 0 0 44px; font-size: 12px; font-weight: 700; color: var(--slate-500); padding-top: 4px; }
.cal-huecos { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cal-todo-el-dia { padding: 8px 12px; border-bottom: 1px solid var(--border-color); background: var(--slate-50); display: flex; flex-direction: column; gap: 6px; }

/* --- Bloques --- */
.cal-bloque {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-left: 3px solid var(--slate-300);
  border-radius: var(--radius-sm);
  background: var(--slate-50);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.cal-bloque:hover { filter: brightness(0.97); }
.cal-bloque.externo { cursor: default; }
.cal-bloque-hora { font-size: 12px; font-weight: 800; color: var(--slate-500); flex-shrink: 0; }
.cal-bloque-nombre { font-size: 12.5px; font-weight: 700; color: var(--slate-800); overflow-wrap: anywhere; flex: 1; min-width: 0; }
.cal-bloque-tag { font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--primary-700); background: var(--primary-50); padding: 2px 6px; border-radius: 999px; flex-shrink: 0; }

.cal-bloque.esperando { border-left-color: var(--warning-500); background: var(--warning-50); }
.cal-bloque.en-sala   { border-left-color: #10b981; background: var(--success-50); }
.cal-bloque.atendida  { border-left-color: var(--slate-400); background: var(--slate-50); }
.cal-bloque.reagenda  { border-left-color: #8b5cf6; background: #f5f3ff; }
.cal-bloque.cancelada { border-left-color: var(--danger-500); background: var(--danger-50); }
.cal-bloque.externo   { border-left-color: var(--slate-500); background: var(--slate-100); border-style: dashed; }

/* --- Semana --- */
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-col { border-right: 1px solid var(--border-color-subtle, #f1f5f9); min-width: 0; }
.cal-col:last-child { border-right: none; }
.cal-col.es-hoy { background: var(--primary-50); }
.cal-col-cab {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 8px 2px;
  min-height: 48px;
  border: none; border-bottom: 1px solid var(--border-color);
  background: transparent; cursor: pointer;
}
.cal-col-cab span { font-size: 12px; font-weight: 700; color: var(--slate-500); text-transform: uppercase; }
.cal-col-cab strong { font-size: 14px; font-weight: 800; color: var(--slate-800); }
.cal-col-cuerpo { display: flex; flex-direction: column; gap: 4px; padding: 6px 3px; min-height: 90px; }
.cal-col-cuerpo .cal-bloque { min-height: 34px; padding: 5px 6px; }
.cal-col-cuerpo .cal-bloque-nombre { font-size: 12px; }
.cal-col-vacia { text-align: center; font-size: 12px; color: var(--slate-500); }

/* --- Mes --- */
.cal-mes-cabecera { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border-color); }
.cal-mes-cabecera span { text-align: center; padding: 8px 0; font-size: 12px; font-weight: 800; color: var(--slate-500); text-transform: uppercase; }
.cal-mes { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-celda {
  position: relative;
  min-height: 56px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px;
  border: none;
  border-right: 1px solid var(--border-color-subtle, #f1f5f9);
  border-bottom: 1px solid var(--border-color-subtle, #f1f5f9);
  background: transparent;
  cursor: pointer;
}
.cal-celda.vacia { cursor: default; background: var(--slate-50); }
.cal-celda.es-hoy { background: var(--primary-50); }
.cal-celda.con-citas:hover { background: var(--slate-50); }
.cal-celda-num { font-size: 12px; font-weight: 700; color: var(--slate-700); }
.cal-celda.es-hoy .cal-celda-num { color: var(--primary-700); font-weight: 800; }
.cal-celda-puntos { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
.cal-celda-mas { font-size: 12px; font-weight: 700; color: var(--slate-500); }

.cal-punto { width: 6px; height: 6px; border-radius: 999px; background: var(--slate-300); display: inline-block; }
.cal-punto.esperando { background: var(--warning-500); }
.cal-punto.en-sala   { background: #10b981; }
.cal-punto.atendida  { background: var(--slate-500); }   /* indica estado: tiene que verse */
.cal-punto.reagenda  { background: #8b5cf6; }
.cal-punto.externo   { background: var(--slate-500); }

.cal-leyenda { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 2px 0; }
.cal-leyenda span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--slate-500); }

@media (min-width: 768px) {
  .cal-col-cuerpo { min-height: 130px; }
  .cal-col-cuerpo .cal-bloque-nombre { font-size: 12px; }
  .cal-celda { min-height: 76px; }
  .cal-titulo strong { font-size: 15px; }
}

/* --- Integración de calendario en Mi Perfil --- */
.integracion-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--slate-50);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}
.integracion-fila > div { flex: 1; min-width: 0; }
.integracion-fila strong { display: block; font-size: 13px; font-weight: 800; color: var(--slate-800); }
.integracion-fila p { font-size: 12px; color: var(--slate-600); line-height: 1.4; }
.integracion-fila .btn { flex-shrink: 0; min-height: 44px; padding: 10px 16px; font-size: 12px; font-weight: 700; }
.integracion-estado { font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.integracion-estado.on { background: #d1fae5; color: var(--success-700); }
.integracion-estado.off { background: var(--slate-200); color: var(--slate-600); }

/* ============================================================
   BOTÓN FLOTANTE DE AVISOS (los tres portales)
   ============================================================ */

.feedback-fab {
  position: fixed;
  right: 16px;
  z-index: 900;               /* por debajo de los modales, encima de todo lo demás */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  background: var(--slate-900);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.28);
  transition: transform .15s ease, box-shadow .15s ease;
}

.feedback-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.34); }
.feedback-fab:focus-visible { outline: 3px solid var(--primary-300); outline-offset: 3px; }

/* En el portal del paciente la barra inferior ocupa el fondo: el botón sube
   por encima de ella y respeta el área segura del iPhone. */
.feedback-fab-paciente {
  bottom: calc(var(--mobile-nav-height, 64px) + 16px + env(safe-area-inset-bottom, 0px));
}
.feedback-fab-medico {
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* En pantallas estrechas se queda solo el icono: la etiqueta se comía media
   pantalla y el botón tapaba contenido. */
@media (max-width: 480px) {
  .feedback-fab { padding: 12px; }
  .feedback-fab-texto { display: none; }
}

/* --- Formulario --- */
.feedback-caja { max-height: 88vh; display: flex; flex-direction: column; padding: 16px 18px 0; }
.feedback-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.feedback-cabecera h3 { font-size: 16px; font-weight: 800; color: var(--slate-900); }
.feedback-cabecera p { font-size: 12px; color: var(--slate-600); }

.feedback-cuerpo { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }

.feedback-campo { display: flex; flex-direction: column; gap: 4px; }
.feedback-campo > span { font-size: 12px; font-weight: 700; color: var(--slate-700); }
.feedback-campo em { font-weight: 600; color: var(--slate-500); font-style: normal; }
.feedback-campo textarea,
.feedback-campo input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: inherit;
  min-height: 44px;
  resize: vertical;
}
.feedback-campo textarea:focus,
.feedback-campo input:focus { outline: none; border-color: var(--primary-500); }
.feedback-contador { font-size: 12px; color: var(--slate-500); align-self: flex-end; }

.feedback-nota {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--slate-500);
  background: var(--slate-50);
  padding: 9px 11px;
  border-radius: var(--radius-md);
}

.feedback-pie { padding: 12px 0 16px; border-top: 1px solid var(--border-color); }
.feedback-pie .btn { width: 100%; min-height: 48px; font-size: 14px; font-weight: 800; justify-content: center; }
.feedback-pie .btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- Bandeja del admin --- */
.fb-cabecera { margin-bottom: 14px; }
.fb-cabecera h2 { font-size: 18px; font-weight: 800; color: var(--slate-900); }
.fb-cabecera p { font-size: 12.5px; color: var(--slate-600); }
.fb-filtros { margin-bottom: 16px; }
.fb-cargando, .fb-vacio { font-size: 13px; color: var(--slate-500); padding: 20px 0; }

.fb-lista { display: flex; flex-direction: column; gap: 12px; }
.fb-tarjeta {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--slate-300);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.fb-tarjeta.fb-error { border-left-color: var(--danger-500); }
.fb-tarjeta.fb-sugerencia { border-left-color: var(--warning-500); }

.fb-tarjeta-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.fb-etiquetas { display: flex; flex-wrap: wrap; gap: 5px; }
.fb-tag { font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px; }
/* 5 y no 3: `fb-tag-linear` es un enlace pulsable y con 3px se quedaba en
   21 de alto, por debajo del minimo tactil de 24. */
.fb-tag-error { background: #fee2e2; color: var(--danger-700); }
.fb-tag-sugerencia { background: #fef3c7; color: var(--warning-700); }
.fb-tag-pregunta { background: var(--slate-200); color: var(--slate-700); }
.fb-tag-portal { background: var(--primary-50); color: var(--primary-800); }
.fb-tag-estado { background: var(--slate-100); color: var(--slate-600); }
.fb-fecha { flex-shrink: 0; font-size: 12px; color: var(--slate-500); }

.fb-mensaje { font-size: 13.5px; line-height: 1.5; color: var(--slate-800); overflow-wrap: anywhere; margin-bottom: 10px; }

.fb-contexto { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.fb-contexto span { font-size: 12px; color: var(--slate-500); font-family: ui-monospace, monospace; }
.fb-contexto .fb-contacto { color: var(--primary-700); font-family: inherit; font-weight: 700; }

.fb-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-acciones .btn { min-height: 40px; padding: 9px 14px; font-size: 12px; font-weight: 700; }

/* --- Cambiar contraseña (compartido médico / admin) --------------------- */

.tarjeta-clave {
  background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 14px;
}
.tarjeta-clave-cabecera { display: flex; align-items: flex-start; gap: 10px; }
.tarjeta-clave-cabecera > i,
.tarjeta-clave-cabecera > svg { color: var(--primary-600); margin-top: 2px; flex-shrink: 0; }
.tarjeta-clave-cabecera h3 { font-size: 14px; font-weight: 800; color: var(--slate-900); margin: 0; }
.tarjeta-clave-cabecera p { font-size: 12px; color: var(--slate-500); margin: 2px 0 0; }

/* Apilados y a media anchura en escritorio, ancho completo en movil (JEA-221).
   Una contrasena son doce o quince caracteres: una caja de mil pixeles no la
   hace mas legible, solo alarga la tarjeta. El maximo va en `ch` --unidades de
   caracter-- porque lo que limita es cuanto texto entra, no cuantos pixeles. */
.tarjeta-clave-campos { display: flex; flex-direction: column; gap: 12px; }
.tarjeta-clave-campos .campo-clave { max-width: 34ch; }
@media (max-width: 768px) {
  .tarjeta-clave-campos .campo-clave { max-width: none; }
}
.campo-clave { display: flex; flex-direction: column; gap: 5px; }
.campo-clave > span { font-size: 12px; font-weight: 700; color: var(--slate-700); }
.campo-clave input {
  padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  font-size: 14px; font-family: inherit; background: var(--slate-50); color: var(--slate-900);
}
.campo-clave input:focus { outline: none; border-color: var(--primary-500); background: var(--bg-surface); }
.campo-clave-aviso { font-size: 12px; color: var(--danger-700); min-height: 16px; }

/* El medidor no certifica nada: empuja hacia algo mejor. */
.medidor { height: 4px; border-radius: 2px; background: var(--slate-200); overflow: hidden; margin-top: 3px; }
.medidor i { display: block; height: 100%; width: 0; border-radius: 2px; transition: width .2s ease, background .2s ease; }
.medidor i.muy-debil { background: var(--danger-600); }
.medidor i.debil     { background: #f97316; }
.medidor i.aceptable { background: #eab308; }
.medidor i.buena     { background: #65a30d; }
.medidor i.fuerte    { background: #16a34a; }

.medidor-texto { font-size: 12px; font-weight: 700; min-height: 16px; }
.medidor-texto.muy-debil { color: var(--danger-600); }
.medidor-texto.debil     { color: #ea580c; }
.medidor-texto.aceptable { color: #a16207; }
.medidor-texto.buena     { color: #4d7c0f; }
.medidor-texto.fuerte    { color: #15803d; }

.tarjeta-clave-pie { border-top: 1px solid var(--border-color); padding-top: 13px; }
.tarjeta-clave-pie .btn { width: 100%; min-height: 44px; justify-content: center; font-weight: 800; }
.tarjeta-clave-pie .btn:disabled { opacity: .5; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) { .medidor i { transition: none; } }

/* --- Agenda del médico sin citas hoy ------------------------------------ */
/* Antes esto era un hueco en blanco: la condición del estado vacío miraba
   todas las citas mientras la lista pintaba solo las de hoy. */

.agenda-vacia {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 20px; text-align: center;
  background: var(--bg-surface); border: 1px dashed var(--border-color); border-radius: var(--radius-lg);
}
.agenda-vacia > i,
.agenda-vacia > svg { color: var(--slate-300); }
.agenda-vacia h4 { font-size: 15px; font-weight: 800; color: var(--slate-800); margin: 4px 0 0; }
.agenda-vacia-fecha {
  font-size: 12.5px; color: var(--slate-500); margin: 0;
  text-transform: capitalize;   /* toLocaleDateString devuelve "lunes", no "Lunes" */
}
.agenda-vacia-nota { font-size: 12px; color: var(--slate-500); margin: 8px 0 0; }

.agenda-vacia-proxima {
  display: flex; flex-direction: column; gap: 2px; margin-top: 14px;
  padding: 11px 16px; border-radius: var(--radius-md);
  background: var(--primary-50); border: 1px solid var(--primary-100);
}
.agenda-vacia-etiqueta {
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--primary-700);
}
.agenda-vacia-proxima strong { font-size: 13.5px; font-weight: 700; color: var(--slate-900); }
.agenda-vacia-proxima span:last-child { font-size: 12.5px; color: var(--slate-600); }

.agenda-vacia-accesos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.agenda-vacia-boton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-full);
  background: var(--slate-50); color: var(--slate-700);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.agenda-vacia-boton:hover { border-color: var(--primary-400); color: var(--primary-700); }
.agenda-vacia-boton:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }

/* --- Selector de ubicación con GPS al lado ------------------------------ */
/* El GPS sale del menú desplegable: era la acción más útil y estaba escondida
   dentro de un modal que había que abrir para verla. */

.selector-ubicacion { display: flex; align-items: center; gap: 6px; min-width: 0; }

.boton-gps {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 7px 11px; border: 1px solid var(--border-color); border-radius: var(--radius-full);
  background: var(--bg-surface); color: var(--slate-700);
  font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.boton-gps:hover { border-color: var(--primary-400); color: var(--primary-700); background: var(--primary-50); }
.boton-gps:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }
.boton-gps:disabled { opacity: .75; cursor: progress; }

.gps-spinner {
  width: 13px; height: 13px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--slate-300); border-top-color: var(--primary-600);
  animation: gps-girar .7s linear infinite;
}
@keyframes gps-girar { to { transform: rotate(360deg); } }

.location-selector-trigger .ubicacion-nombre {
  max-width: 26vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* En pantallas estrechas el botón se queda en el ícono. El nombre sigue
   disponible para lectores de pantalla por su aria-label. */
@media (max-width: 480px) {
  .boton-gps-texto { display: none; }
  .boton-gps { padding: 7px 9px; }
  .location-selector-trigger .ubicacion-nombre { max-width: 34vw; }
}

/* --- Orientación por síntoma (JEA-189) --------------------------------- */

.sintoma-bloque {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; margin-bottom: 16px;
  background: var(--primary-50); border: 1px solid var(--primary-100);
  border-radius: var(--radius-md);
}
.sintoma-bloque.con-alarma { background: var(--bg-surface); border-color: var(--danger-200); }

.sintoma-intro { font-size: 13.5px; line-height: 1.5; color: var(--slate-700); margin: 0; }
.sintoma-intro strong { color: var(--slate-900); font-weight: 700; }

.sintoma-especialidades { display: flex; flex-wrap: wrap; gap: 8px; }
.sintoma-chip {
  padding: 8px 14px; border: 1px solid var(--primary-300); border-radius: var(--radius-full);
  background: var(--bg-surface); color: var(--primary-800);
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.sintoma-chip:hover { background: var(--primary-600); color: #fff; border-color: var(--primary-600); }
.sintoma-chip:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }

.sintoma-descargo { margin: 0; font-size: 12px; line-height: 1.45; color: var(--slate-500); }

/* El aviso ámbar: importa, pero no es una ambulancia. */
.sintoma-prioritario {
  display: flex; align-items: flex-start; gap: 8px; margin: 0;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--warning-50); border: 1px solid #fde68a;
  font-size: 12.5px; line-height: 1.45; color: var(--warning-700); font-weight: 600;
}
.sintoma-prioritario i,
.sintoma-prioritario svg { flex-shrink: 0; margin-top: 1px; }

/* El aviso rojo. Va primero en el orden del documento a propósito: a quien
   tiene dolor en el pecho no se le ofrece antes pedir cita para el martes. */
.sintoma-alarma {
  display: flex; flex-direction: column; gap: 11px;
  padding: 13px 14px; border-radius: var(--radius-md);
  background: var(--danger-50); border: 1.5px solid #dc2626;
}
.sintoma-alarma-texto { display: flex; align-items: flex-start; gap: 9px; color: #991b1b; }
.sintoma-alarma-texto i,
.sintoma-alarma-texto svg { flex-shrink: 0; margin-top: 1px; color: var(--danger-600); }
.sintoma-alarma-texto strong { display: block; font-size: 13.5px; font-weight: 800; margin-bottom: 3px; }
.sintoma-alarma-texto span { font-size: 12.5px; line-height: 1.45; }

.sintoma-alarma-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.sintoma-alarma-acciones .btn {
  flex: 1 1 auto; min-height: 42px; justify-content: center;
  font-size: 13px; font-weight: 800; text-decoration: none; gap: 7px;
}
.btn-emergencia { background: var(--danger-600); color: #fff; }
.btn-emergencia:hover { background: var(--danger-700); }
.btn-emergencia-alt { background: var(--bg-surface); color: #991b1b; border: 1px solid #fca5a5; }
.btn-emergencia-alt:hover { background: var(--danger-50); }

@media (prefers-reduced-motion: reduce) {
  .gps-spinner { animation-duration: 2s; }
}

/* --- Adjuntar una captura (JEA-189) ------------------------------------ */
/* El adjunto es opcional y no debe competir con el texto, que es lo que de
   verdad hace falta. De ahí el botón discreto en vez de una zona grande. */

.feedback-captura { display: flex; flex-direction: column; gap: 8px; }

.feedback-adjuntar {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 8px 12px; border: 1px dashed var(--border-color); border-radius: 10px;
  background: var(--slate-50); color: var(--slate-600);
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.feedback-adjuntar:hover { border-color: var(--primary-400); color: var(--primary-700); }
.feedback-adjuntar:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }
.feedback-adjuntar:disabled { opacity: .6; cursor: progress; }

.feedback-vista { position: relative; align-self: flex-start; margin: 0; }
.feedback-vista img {
  display: block; max-width: 100%; max-height: 160px;
  border-radius: 10px; border: 1px solid var(--border-color);
}
.feedback-quitar {
  position: absolute; top: 6px; right: 6px;
  background: rgba(15, 23, 42, .72); color: #fff; border-radius: 999px;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
}
.feedback-quitar:hover { background: rgba(15, 23, 42, .88); }

/* --- Bandeja: aviso, consola y captura --------------------------------- */

.fb-alerta {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; margin-bottom: 14px;
  background: var(--warning-50); border: 1px solid #fde68a; border-radius: 10px;
  font-size: 12.5px; line-height: 1.45; color: var(--warning-700);
}
.fb-alerta i,
.fb-alerta svg { flex-shrink: 0; margin-top: 2px; }
.fb-alerta code {
  font-family: ui-monospace, monospace; font-size: 12px;
  background: rgba(146, 64, 14, .1); padding: 1px 4px; border-radius: 4px;
}

.fb-tag-linear { background: var(--primary-600); color: #fff; text-decoration: none; }
.fb-tag-linear:hover { background: var(--primary-700); }

.fb-consola { margin-bottom: 12px; }
.fb-consola summary {
  font-size: 12px; font-weight: 700; color: var(--slate-600);
  cursor: pointer; padding: 4px 0;
}
.fb-consola summary:hover { color: var(--slate-800); }
.fb-consola pre {
  margin-top: 6px; padding: 10px; border-radius: 8px;
  background: var(--slate-900); color: var(--slate-200);
  font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.5;
  /* La traza se desborda dentro de su caja, no empuja la tarjeta a lo ancho. */
  overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 200px; overflow-y: auto;
}

.fb-captura-zona { margin-bottom: 12px; }
.fb-ver-captura {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--border-color); border-radius: 8px;
  background: var(--slate-50); color: var(--slate-600);
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.fb-ver-captura:hover { border-color: var(--primary-400); color: var(--primary-700); }
.fb-ver-captura:disabled { opacity: .6; cursor: progress; }
.fb-captura {
  display: block; max-width: 100%; max-height: 320px;
  border-radius: 10px; border: 1px solid var(--border-color);
}

/* Subespecialidades en la ficha pública del médico (JEA-211). */
.ficha-subesp {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 5px;
}
.ficha-subesp li {
  font-size: 12px; font-weight: 600; color: var(--primary-700);
  background: var(--primary-50); border: 1px solid var(--primary-200);
  padding: 3px 9px; border-radius: var(--radius-full);
}

/* Pestaña del portal que no se pudo pintar.
   Se ve como un aviso, no como una pantalla de error de sistema: el médico
   sigue teniendo portal, solo le falta una parte. */
.portal-fallo {
  margin: 14px;
  padding: 20px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-left: 3px solid #f59e0b;
  border-radius: var(--radius-lg);
  text-align: center;
}
.portal-fallo svg { width: 26px; height: 26px; color: var(--warning-500); margin-bottom: 8px; }
.portal-fallo h4 { font-size: 14px; font-weight: 800; color: var(--slate-900); margin-bottom: 5px; }
.portal-fallo p { font-size: 12.5px; color: var(--slate-600); margin-bottom: 10px; }
.portal-fallo code {
  display: block;
  font-size: 12px;
  text-align: left;
  color: var(--slate-700);
  background: var(--slate-50);
  border: 1px solid var(--border-color-subtle, #f1f5f9);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}


/* =====================================================================
 * HORARIOS Y BLOQUEOS EN DOS COLUMNAS  ·  JEA-222
 * =====================================================================
 *
 * "Dias de consulta" ocupaba toda la franja horizontal para siete botones, y
 * "Horario de atencion" colgaba debajo ocupando otra franja entera. Dos bloques
 * anchos y medio vacios, uno encima del otro, donde cabian dos columnas.
 *
 * Van lado a lado y con `align-items: stretch`, asi que comparten borde
 * superior y altura: si una crece, la otra la acompaña. Sin eso, dos tarjetas
 * de distinta altura una al lado de otra se leen como un descuido.
 */
.horario-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.horario-tarjeta { display: flex; flex-direction: column; }

/* Los siete dias, en celdas del MISMO ancho.
   Con `flex-wrap` y relleno, cada boton medía lo que medía su palabra: "Lunes"
   corto, "Miercoles" largo, y la fila quedaba en dientes de sierra. En
   cuadricula todas las celdas miden igual y las palabras se centran dentro.
   `auto-fill` decide cuantas caben --cuatro y tres, o menos si la columna se
   estrecha-- sin tener que fijarlo a mano. */
.dias-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: 8px;
}
.day-toggle-btn {
  padding: 8px 6px;
  border-radius: var(--radius-md);
  font-size: 12px; font-weight: 700; font-family: inherit;
  border: 2px solid var(--border-color);
  background: #fff; color: var(--slate-600);
  cursor: pointer;
  /* Las tres propiedades que cambian, y no `all`, que anima cosas que nadie
     pidio.
     Llegue aqui creyendo que arreglaba un fallo: medi que al quitar la clase el
     fondo se quedaba azul. Era mentira, y de las utiles. La pagina de pruebas
     mete la aplicacion en un iframe que el navegador NO esta pintando --su
     `requestAnimationFrame` no llega a dispararse-- asi que un cambio de clase
     no provoca el recalculo de estilo que yo intentaba leer. Los botones que no
     habia tocado salian correctos; solo el que llevaba pulsando estaba
     descuadrado.
     El cambio se queda porque acotar la transicion es mejor que `all` de todos
     modos, pero no arregla ningun fallo: no lo habia. */
  transition: background-color .15s, border-color .15s, color .15s;
  min-height: 34px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.day-toggle-btn:hover { border-color: var(--primary-400); }
.day-toggle-btn:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 1px; }
.day-toggle-btn.active {
  border-color: var(--primary-500);
  background: var(--primary-600);
  color: #fff;
}

/* Una debajo de otra cuando dos columnas dejan de caber, con la misma
   organizacion dentro. */
@media (max-width: 768px) {
  .horario-columnas { grid-template-columns: 1fr; }
}