/* Cedars - Portal del paciente */
:root {
  /* Marca CEDARS (naranja). Igual en ambos temas salvo ajuste de contraste. */
  --cedars-50: #fff6ed;
  --cedars-100: #fdebd8;
  --cedars-200: #f5d4b6;
  --cedars-600: #f26f21;
  --cedars-700: #d95d17;

  /* Semánticos — TEMA CLARO (valores originales del portal). */
  --accent:        var(--cedars-600);
  --accent-strong: var(--cedars-700);
  --accent-weak:   var(--cedars-50);
  --accent-weak-2: var(--cedars-100);
  --accent-ring:   rgba(242, 111, 33, .12);
  --accent-shadow: rgba(242, 111, 33, .9);
  --on-accent:     #ffffff;

  --ink:          #14213d;
  --muted:        #6b7488;
  --line:         #eadfd4;
  /* Verde sobrio de confirmación (no decorativo): «Atiende con X». */
  --ok:           #15803d;
  --bg:           #fbf8f4;
  --surface:      #ffffff;
  --surface-soft: var(--cedars-50);
  --glass:        rgba(255, 255, 255, .72);   /* botones/badges translúcidos sobre bg */
  --glass-strong: rgba(255, 255, 255, .96);   /* píldora de horarios del hero */
  --nav-bg:       rgba(251, 248, 244, .96);

  --shadow-card:  0 1px 3px rgba(0, 0, 0, .04);
  --shadow-soft:  0 14px 34px -24px rgba(20, 33, 61, .55);
  --shadow-hover: 0 14px 34px -24px rgba(132, 66, 18, .45);

  /* Footer: oscuro por diseño también en claro. */
  --footer-bg:     #0f172a;
  --footer-fg:     #cbd5e1;
  --footer-head:   #ffffff;
  --footer-muted:  #94a3b8;
  --footer-line:   #1e293b;
  --footer-bottom: #64748b;

  --radius: 10px;
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

/* TEMA OSCURO — mismos valores base que el sistema (tokens.css) para que combine
   con la app. El naranja de marca se aclara para conservar contraste sobre fondo oscuro. */
:root[data-theme="dark"] {
  --accent:        color-mix(in oklab, var(--cedars-600) 82%, #fff);
  --accent-strong: color-mix(in oklab, var(--cedars-600) 92%, #fff);
  --accent-weak:   color-mix(in srgb, var(--cedars-600) 20%, #13212e);
  --accent-weak-2: color-mix(in srgb, var(--cedars-600) 26%, #13212e);
  --accent-ring:   color-mix(in srgb, var(--cedars-600) 32%, transparent);
  --accent-shadow: rgba(0, 0, 0, .55);
  --on-accent:     #1a0e05;

  --ink:          #e8eef3;
  --muted:        #93a6b8;
  --line:         #26384a;
  --ok:           #6ee7b7;
  --bg:           #0c1620;
  --surface:      #13212e;
  --surface-soft: #182838;
  --glass:        rgba(255, 255, 255, .06);
  --glass-strong: rgba(19, 33, 46, .96);
  --nav-bg:       rgba(12, 22, 32, .92);

  --shadow-card:  0 1px 3px rgba(0, 0, 0, .4);
  --shadow-soft:  0 16px 36px -24px rgba(0, 0, 0, .7);
  --shadow-hover: 0 16px 36px -24px rgba(0, 0, 0, .8);

  --footer-bg:     #0a121b;
  --footer-fg:     #93a6b8;
  --footer-head:   #e8eef3;
  --footer-muted:  #6b8096;
  --footer-line:   #1e2f3f;
  --footer-bottom: #5b7186;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
/* Columna flexible para que el footer SIEMPRE cierre la pagina.
   `min-height: 100vh` sola no alcanza: estira el body, pero el footer queda donde termina el
   contenido y debajo queda una franja de fondo. Se ve en cualquier pagina corta —el perfil de un
   profesional con poca informacion cargada es el caso tipico— y da la impresion de que la pagina
   esta rota. Con la columna, `margin-top: auto` del footer se come el sobrante. */
body {
  display: flex; flex-direction: column; min-height: 100vh;
  font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.55;
}
.footer { margin-top: auto; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* ── LA retícula del portal ─────────────────────────────────────────────────────────────────────
   UN solo ancho para todas las secciones, en todas las páginas. `.container` es el contenedor
   estructural y no hay variantes: si una sección pudiera ser más ancha que su vecina, la portada
   deja de leerse como una sola página.

   Ya pasó dos veces. Primero el directorio ensanchaba a 1280 y la portada quedaba en 1110, así que
   la MISMA tarjeta de profesional medía 401px allá y 345px acá —los nombres se partían y los
   seguros se apilaban—. Al arreglar solo esa sección, quedó peor: «Estudios» empezaba en x=158 y
   «Profesionales» en x=73, y el ojo veía una portada quebrada.

   El ancho del TEXTO es otra cosa y se resuelve en el texto (`--ancho-lectura`), nunca metiendo un
   contenedor angosto adentro del ancho: eso vuelve a desalinear los bordes. */
:root {
  --ancho-portal:  1280px;   /* el contenedor: uno solo, para todo */
  --ancho-lectura:   68ch;   /* la línea de texto cómoda, dentro de ese contenedor */
}

.container { width: 100%; max-width: var(--ancho-portal); margin: 0 auto; padding: 0 24px; }

.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.navbar .inner { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 20px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); }
.brand-logo { width: 34px; height: 42px; object-fit: contain; flex: 0 0 auto; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.06; min-width: 0; }
.brand-copy strong { font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
/* Un punto más grande y con algo más de contraste: a 11px sobre --muted casi no se leía.
   La altura del header no cambia: el lockup ya tenía aire de sobra. */
.brand-copy small { margin-top: 4px; color: color-mix(in srgb, var(--ink) 62%, transparent); font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-mark { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 900; }

.nav-links { display: flex; align-items: center; justify-content: center; gap: 28px; }
.nav-links a { color: var(--muted); font-size: 14px; font-weight: 500; transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
/* Derivado del acento de la clínica (antes eran dos hex naranjas fijos: toda clínica veía CEDARS). */
.nav-links a.active { color: var(--accent-strong); background: var(--accent-weak-2); padding: 8px 20px; border-radius: 9999px; font-weight: 500; transition: background-color .2s ease; }
.nav-links a.active:hover { color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 24%, #fff); }
.nav-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-cta,
.login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  transition: .2s;
}
.nav-cta {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 8px 20px -12px var(--accent-shadow);
}
.login-link {
  border: 1px solid var(--line);
  background: var(--glass);
  color: var(--ink);
}
.nav-cta:hover { background: var(--accent-strong); }
.login-link:hover { background: var(--accent-strong); border-color: var(--cedars-200); color: var(--on-accent); }
.nav-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; font-size: 22px; color: var(--ink); }

/* Selector de tema (claro · sistema · oscuro) — mismo patrón segmentado del sistema. */
.theme-switch { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; }
.theme-switch__opt {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  border: none;
  background: none;
  color: var(--muted);
  border-radius: 7px;
  cursor: pointer;
  transition: .2s;
}
.theme-switch__opt svg { width: 15px; height: 15px; display: block; }
.theme-switch__opt:hover { color: var(--ink); }
.theme-switch__opt.is-active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-card); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 30px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  transition: .2s;
}
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 20px -14px var(--accent-shadow); }
.btn-primary:hover { background: var(--accent-strong); }
/* Secundaria. Los tres colores estaban escritos a mano (#ffffff, #1e293b, #d1d5db): en modo oscuro
   quedaba un botón blanco sobre fondo oscuro, y ninguna clínica podía cambiarlo. Ahora salen de los
   tokens del tema, que ya se derivan del acento configurado en el gestor. */
.btn-outline { padding: 12px 28px; background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 500; border: 1px solid var(--line); border-radius: 9999px; transition: background-color .2s ease, border-color .2s ease; }
.btn-outline:hover { background: var(--glass); border-color: var(--accent); }
.btn-block { width: 100%; }

.hero {
  padding: clamp(40px, 4.5vw, 60px) 0 48px;
  background-color: #fefbf9;
  background-image: radial-gradient(circle at 30% 40%, #fefbf9 0%, #f7f1ec 100%);
  overflow: hidden;
}
/* En oscuro se mantiene el fondo del tema (el degradado crema es solo para claro). */
:root[data-theme="dark"] .hero { background-color: var(--bg); background-image: none; }
.hero .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.07fr); gap: clamp(32px, 4.5vw, 58px); align-items: start; }
.hero-copy { padding-top: 2px; min-width: 0; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.hero-badge::before {
  content: "";
  width: 15px;
  height: 15px;
  border: 1.5px solid #8d97aa;
  border-radius: 50%;
  background: radial-gradient(circle at center, transparent 45%, #8d97aa 47%, #8d97aa 53%, transparent 55%);
  flex: 0 0 auto;
}
.hero h1 { max-width: 500px; margin-bottom: 22px; font-family: var(--serif); font-size: clamp(34px, 4.6vw, 48px); font-weight: 700; line-height: 1.08; letter-spacing: 0; }
.hero h1 span { display: block; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero p { max-width: 462px; margin-bottom: 28px; color: var(--muted); font-size: 16px; line-height: 1.48; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 34px);
  max-width: 448px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.hero-stats strong { display: block; color: var(--ink); font-family: var(--serif); font-size: 27px; line-height: 1; }
.hero-stats span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.hero-card { position: relative; width: 100%; overflow: visible; }
.hero-card > img:first-child {
  width: 100%;
  height: clamp(300px, 34vw, 402px);
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 30px 58px -32px rgba(132, 66, 18, .26);
}
.hero-logo { display: none; }
/* Ficha de horarios: DEBAJO de la imagen, centrada, separada ~12px (no tapa la foto ni compite con los dots). */
.hero-hours {
  position: static;
  margin: 9px auto 0;
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass-strong);
  color: var(--ink);
  font-size: 13.5px;
  box-shadow: 0 2px 8px -6px rgba(20, 33, 61, .22);
  backdrop-filter: blur(6px);
}
.hero-hours span { display: grid; place-items: center; width: 18px; height: 18px; border: 2px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 11px; flex: 0 0 auto; }
.hero-hours strong { color: var(--ink); }
.hero-hours-copy { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; line-height: 1.25; }
.hero-hours-copy div { white-space: nowrap; }
.hero-hours-copy div + div { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line); }

/* Carrusel del hero */
.hero-carousel {
  position: relative;
  width: 100%;
  max-width: 640px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 4px solid #ffffff;
}
.hero-carousel__track { position: relative; width: 100%; height: 400px; }
.hero-carousel__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease-in-out; }
.hero-carousel__slide.active { opacity: 1; }
.hero-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* El video ocupa EXACTAMENTE la diapositiva: mismo alto que las imágenes, sin agrandar el carrusel
   al reproducir. `cover` igual que las imágenes: llena el recuadro sin bandas negras. El costo es
   que recorta los bordes, así que el encuadre importante del video tiene que ir centrado.
   El fondo queda neutro (no negro) por si el archivo tarda en pintar el primer fotograma. */
.hero-carousel__video {
  width: 100%; height: 100%; display: block;
  object-fit: cover; background: var(--surface-soft);
}
/* Una diapositiva inactiva no debe capturar clics en los controles del video. */
.hero-carousel__slide:not(.active) { pointer-events: none; }
.hero-carousel__dots {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 10;
}
.hero-carousel__dot {
  width: 8px; height: 8px; border-radius: 9999px; background: rgba(255, 255, 255, 0.7);
  border: none; cursor: pointer; padding: 0; transition: all 0.3s ease;
}
.hero-carousel__dot:hover { background: #ffffff; }
.hero-carousel__dot.active { width: 24px; background: #E67E22; }
@media (max-width: 900px) { .hero-carousel__track { height: 300px; } }

.search-band { padding: 16px 0 0; background: var(--surface); }
.portal-search {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.portal-search label {
  font-family: var(--serif);
  color: var(--ink);
  font-size: clamp(20px, 3vw, 25px);
  font-weight: 700;
  line-height: 1.2;
}
.portal-search input {
  width: 100%;
  height: 52px;
  padding: 0 22px 0 52px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  box-shadow: 0 14px 34px -28px rgba(20, 33, 61, .55);
}
.portal-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring), 0 14px 34px -28px rgba(20, 33, 61, .55);
}
.portal-search-field { position: relative; }
.portal-search-field::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 50%;
  width: 13px;
  height: 13px;
  border: 2px solid var(--muted);
  border-radius: 50%;
  transform: translateY(-58%);
  z-index: 1;
}
.portal-search-field::after {
  content: "";
  position: absolute;
  left: 37px;
  top: 50%;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: var(--muted);
  transform: translateY(5px) rotate(45deg);
  z-index: 1;
}
.search-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 42px -28px rgba(20, 33, 61, .45);
  text-align: left;
}
.suggestion-group p {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.suggestion-item {
  display: grid;
  width: 100%;
  gap: 2px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.suggestion-item:hover { background: var(--accent-weak); }
.suggestion-item span { color: var(--accent); font-size: 11px; font-weight: 800; }
.suggestion-item strong { font-size: 14px; line-height: 1.25; }
.suggestion-item small { color: var(--muted); font-size: 12px; }

/* 24 en vez de 34 (-30%). Entre dos secciones eso son 48 px de aire en lugar de 68: sigue
   habiendo respiro pero ya no se lee como si hubiera un bloque vacio en el medio. */
.section { padding: 24px 0; background: var(--surface); }
.section.soft { background: var(--surface-soft); }
/* Dos secciones que el paciente lee como UNA (servicios → profesionales: ambas son «qué ofrecen»).
   Con el aire completo de sección a cada lado parecían bloques desconectados. */
.section--pega-abajo { padding-bottom: 0; }
.section--pega-arriba { padding-top: 4px; }
.section-title { text-align: center; margin-bottom: 24px; }
.section-title h2 { margin-bottom: 10px; font-size: clamp(28px, 4vw, 34px); letter-spacing: 0; }
.section-title p { color: var(--muted); }
.section-title .accent { color: var(--accent); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.section-actions { display: flex; justify-content: center; margin-top: 22px; }
.card,
.doctor-card,
.panel,
.appt-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.card { position: relative; min-height: 124px; padding: 24px 28px; overflow: hidden; transition: .2s; }
.card::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px; border-radius: 0 999px 999px 0; background: var(--accent); opacity: .9; }
.card:hover,
.doctor-card:hover,
.appt-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--cedars-200); }
.card .icon { width: 48px; height: 48px; border-radius: 8px; background: var(--accent-weak-2); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; margin-bottom: 18px; }
.card-kicker { display: inline-flex; margin-bottom: 10px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.card h3 { max-width: calc(100% - 70px); font-size: 18px; margin-bottom: 8px; }
.card p { color: var(--accent); font-size: 15px; }
.card .price { color: var(--accent); font-weight: 800; margin-top: 12px; }
.card-link { position: absolute; right: 22px; bottom: 20px; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 13px; font-weight: 700; background: var(--surface); transition: .2s; }
.card-link:hover { border-color: var(--cedars-200); color: var(--accent-strong); background: var(--accent-weak); }
/* Cuatro por fila: la tarjeta de especialidad es un bloque de texto corto y entra cómoda. No se
   toca la de profesionales, que lleva foto al costado y a cuatro columnas se comprime. */
.specialties-section .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Escalón intermedio: cuatro columnas necesitan bajar a tres antes que a dos, si no las tarjetas
   se angostan de golpe y los nombres largos («Cirugía General») se parten. */
@media (max-width: 1099px) { .specialties-section .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.specialty-card { min-height: 112px; padding: 18px 24px; }
.specialty-card::before { top: 18px; bottom: 18px; }
.specialty-card .card-kicker { margin-bottom: 7px; font-size: 10px; }
.specialty-card h3 { max-width: none; margin-bottom: 3px; font-size: 17px; line-height: 1.3; }
.specialty-card p {
  color: var(--muted); font-size: 13px; line-height: 1.45;
  /* Dos líneas como máximo: las descripciones las carga cada clínica y no tienen largo garantizado;
     sin tope, una tarjeta larga desalinea toda la fila. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin-top: 12px; }
.card-actions .card-link { position: static; }
.card-actions .card-link { white-space: nowrap; }
.card-text-link {
  flex: 1;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.card-text-link span { color: var(--accent); }
.card-text-link:hover { color: var(--accent-strong); }
.card-link-soft { flex: 1; color: var(--ink); background: var(--glass); }
.specialty-card .card-actions .card-link:not(.card-link-soft) {
  color: var(--accent-strong);
  background: var(--accent-weak);
}
.empty-state {
  grid-column: 1 / -1;
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
  background: var(--glass);
}

.doctor-card {
  display: flex;
  align-items: stretch;
  gap: 15px;
  min-height: 148px;
  padding: 12px;
  overflow: hidden;
  transition: .2s;
}
#doctors.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.doctor-media,
.doctor-photo,
.doctor-avatar { width: 112px; height: 124px; }
.doctor-media {
  flex: 0 0 112px;
  display: grid;
  place-items: center;
  background: transparent;
}
.doctor-photo {
  border: 1px solid var(--line);
  border-radius: 10px;
  object-fit: cover;
  object-position: center top;
  background: var(--surface);
}
.doctor-avatar {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.doctor-avatar span {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
}
.doctor-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 3px 0 2px;
}
.doctor-body h3 { font-size: 15px; line-height: 1.28; margin-bottom: 5px; }
.doctor-body .specialty { color: var(--accent); font-weight: 700; font-size: 12px; line-height: 1.35; margin-bottom: 0; }
.doctor-body .bio { display: none; }
.doctor-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; padding-top: 4px; }
.doctor-footer .btn { width: auto; min-height: 30px; }
.doctor-fee { display: none; font-weight: 800; color: var(--accent-strong); }

.toolbar { display: flex; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; }
.toolbar input,
.toolbar select,
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
}
.toolbar input,
.toolbar select { flex: 1; min-width: 180px; }
.toolbar input:focus,
.toolbar select:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

.split { display: grid; grid-template-columns: 320px 1fr; gap: 32px; align-items: start; }
.panel { padding: 24px; position: sticky; top: 88px; }
.panel h3 { margin-bottom: 16px; font-size: 16px; }
.doctor-pick { display: flex; gap: 12px; padding: 12px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: .2s; }
.doctor-pick:hover,
.doctor-pick.active { background: var(--accent-weak); border-color: var(--cedars-200); }
.doctor-pick img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.doctor-pick .nm { font-weight: 700; font-size: 14px; }
.doctor-pick .sp { font-size: 12px; color: var(--muted); }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.time-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
.time-slot { padding: 8px; text-align: center; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 14px; transition: .2s; }
.time-slot:hover { border-color: var(--cedars-200); }
.time-slot.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.appt-card { padding: 22px; display: flex; gap: 18px; align-items: center; justify-content: space-between; margin-bottom: 16px; transition: .2s; }
.appt-left { display: flex; gap: 18px; align-items: center; min-width: 0; }
.appt-date { min-width: 64px; padding: 10px 14px; border-radius: 8px; background: var(--accent-weak); text-align: center; }
.appt-date .d { font-size: 22px; font-weight: 900; color: var(--accent-strong); }
.appt-date .m { font-size: 11px; text-transform: uppercase; color: var(--accent); font-weight: 800; }
.appt-info { min-width: 0; }
.appt-info h4 { font-size: 16px; margin-bottom: 2px; }
.appt-info .meta { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.badge { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.badge-pendiente { background: #fef3c7; color: #92400e; }
.badge-confirmada { background: #d1fae5; color: #065f46; }
.badge-cancelada { background: #fee2e2; color: #991b1b; }
.badge-completada { background: #dbeafe; color: #1e40af; }

.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.spinner { width: 36px; height: 36px; border: 4px solid var(--accent-weak-2); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

.contact-strip {
  padding: 28px 0 34px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.final-cta h2 {
  margin-bottom: 6px;
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 28px);
  line-height: 1.2;
}
.final-cta p { color: var(--muted); font-size: 15px; }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 22px;
  align-items: center;
}
.contact-grid div {
  min-height: 62px;
  padding: 4px 0;
}
.contact-grid span {
  display: block;
  margin-bottom: 5px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.contact-grid strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
}

/* ============================================================================================
   FOOTER — cierre institucional COMPACTO (~240 px en escritorio).
   El CTA es una FILA, no una tarjeta: el panel con fondo, radio y sombra lo inflaba a casi 400 px.
   Tres columnas (Marca · Contacto · Clínica); la navegación vive en la barra inferior porque el
   navbar ya la tiene y una columna entera era redundante.
   ============================================================================================ */
.footer {
  background: var(--footer-bg); color: var(--footer-fg);
  padding: 0;                                    /* el aire lo ponen las filas, no el contenedor */
  --footer-sep: color-mix(in srgb, #ffffff 10%, transparent);
}

/* ---- Contenido: 40% marca · 25% contacto · 35% clínica ---- */
/* Solo el ritmo VERTICAL: el lateral lo pone `.container` y pisarlo con el shorthand sacaba al
   footer de la retícula —su contenido empezaba 24px antes que el de las demás secciones—. */
.footer-main { display: grid; grid-template-columns: 1.4fr .8fr 1.2fr; gap: 48px; padding-top: 24px; padding-bottom: 22px; }
.footer-col h4 { color: var(--footer-head); margin-bottom: 9px; font-size: 15px; font-weight: 700; }
.footer-col p,
.footer-col a { display: block; font-size: 14.5px; color: var(--footer-fg); margin-bottom: 6px; line-height: 1.5; }
.footer-col a { transition: color .2s; }
.footer-col a:hover { color: var(--accent); }
.footer-col__link { display: inline !important; color: var(--accent) !important; font-weight: 600; white-space: nowrap; }
.footer-col__horario { color: var(--footer-muted); font-size: 14px; margin-bottom: 0; }
.footer-col__horario span { display: inline; }
.footer-col__horario span + span::before { content: " · "; }
/* Redes como ICONOS: una fila de botones redondos. Escritas competian con el correo por la misma
   atencion y ocupaban tres veces el ancho; el logo se reconoce de un vistazo. */
.footer-redes { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 10px 0 0 !important; }
.footer-redes__i {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin: 0 !important; border-radius: 50%;
  color: var(--footer-fg); background: color-mix(in srgb, #ffffff 8%, transparent);
  border: 1px solid var(--footer-sep);
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.footer-redes__i:hover {
  color: var(--on-accent); background: var(--accent); border-color: var(--accent);
  transform: translateY(-2px);
}
/* Direccion con su chincheta, y el enlace del mapa debajo. */
.footer-col__dir { display: flex !important; align-items: flex-start; gap: 7px; }
.footer-col__pin { flex: 0 0 auto; margin-top: 2px; color: var(--accent); }

/* ---- Marca ---- */
.footer-marca__lockup { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.footer-marca__logo { width: 32px; height: 32px; object-fit: contain; flex: 0 0 auto; }
/* line-height:1 para que el nombre centre contra el logo y no quede montado por el interlineado. */
.footer-marca__nombre { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--footer-head); line-height: 1; }
.footer-marca__bajada { font-size: 14px; color: var(--footer-muted); line-height: 1.45; max-width: 40ch; }

/* ---- Barra inferior ---- */
.footer-bottom { border-top: 1px solid var(--footer-sep); }
.footer-bottom__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  min-height: 44px; padding: 12px 24px; font-size: 13.5px; color: var(--footer-muted);
}
.footer-bottom__nav { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.footer-bottom__nav a + a::before { content: "· "; color: var(--footer-muted); }
/* Más contraste que el gris del copyright: son enlaces, tienen que leerse como tales. */
.footer-bottom a { color: var(--footer-fg); transition: color .2s; }
.footer-bottom a:hover { color: var(--accent); }

/* ---- Tablet: la marca toma la fila entera; Contacto y Clínica quedan debajo en dos ---- */
@media (max-width: 1199px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: 24px 40px; }
  .footer-marca { grid-column: 1 / -1; }
}

/* ---- Móvil: todo apilado. Sin achicar la letra: se apila, no se comprime ---- */
@media (max-width: 767px) {
  .footer-main { display: flex; flex-direction: column; gap: 22px; padding-top: 22px; padding-bottom: 22px; }
  .footer-bottom__inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-bottom__nav { gap: 8px 14px; }
  /* Cada enlace tiene que poder tocarse con el dedo, no solo verse. */
  .footer-col a,
  .footer-bottom a { min-height: 30px; display: flex; align-items: center; }
  .footer-col__redes a { min-height: 30px; }
  /* Barra de gestos del teléfono: que el último enlace no quede debajo. */
  .footer-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
  .container { padding-left: 20px; padding-right: 20px; }
}

/* ---- Móvil chico: los horarios se parten en renglones en vez de comprimirse ---- */
@media (max-width: 420px) {
  .footer-col__horario span { display: block; }
  .footer-col__horario span + span::before { content: none; }
}
.toast { position: fixed; bottom: 24px; right: 24px; max-width: min(360px, calc(100vw - 32px)); background: #0f172a; color: #fff; padding: 14px 20px; border-radius: 8px; box-shadow: 0 14px 34px -24px rgba(0, 0, 0, .8); z-index: 100; opacity: 0; transform: translateY(20px); pointer-events: none; transition: .3s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: #991b1b; }
.toast.success { background: #065f46; }

/* Badges: suavizar sobre fondo oscuro para no encandilar. */
:root[data-theme="dark"] .badge-pendiente { background: color-mix(in srgb, #fef3c7 22%, var(--surface)); color: #fcd77a; }
:root[data-theme="dark"] .badge-confirmada { background: color-mix(in srgb, #d1fae5 22%, var(--surface)); color: #6ee7b7; }
:root[data-theme="dark"] .badge-cancelada { background: color-mix(in srgb, #fee2e2 22%, var(--surface)); color: #fca5a5; }
:root[data-theme="dark"] .badge-completada { background: color-mix(in srgb, #dbeafe 22%, var(--surface)); color: #93c5fd; }

@media (max-width: 1180px) {
  .hero h1 { font-size: clamp(38px, 4.4vw, 46px); }
}

@media (max-width: 900px) {
  /* Solo el alto: el lateral lo pone `.container`, que abajo de 640 baja a 18px. Fijarlo en 24
     dejaba la marca del navbar corrida respecto del contenido de la página. */
  .navbar .inner { grid-template-columns: 1fr auto auto; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
  .nav-toggle { display: block; grid-column: 3; grid-row: 1; }
  .nav-actions { display: none; grid-column: 1 / -1; width: 100%; }
  .nav-actions.open { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 8px; }
  .nav-actions.open .nav-cta,
  .nav-actions.open .login-link { flex: 1; min-width: 140px; min-height: 40px; }
  .nav-links { display: none; grid-column: 1 / -1; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 4px; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 0; }
  .nav-links a.active { align-self: flex-start; }
  .nav-theme { grid-column: 2; grid-row: 1; justify-self: end; }
  .hero { padding: 44px 0 44px; }
  .hero .grid,
  .split { grid-template-columns: 1fr; }
  .hero-card { width: 100%; max-width: 560px; margin: 0 auto; }
  .hero-card > img:first-child { height: 300px; }
  .panel { position: static; }
  .specialties-section .cards,
  #doctors.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .container { padding: 0 18px; }
  /* Barra móvil: la marca comparte fila con el selector de tema y el menú; se compacta para no recortarse. */
  .navbar .inner { gap: 10px; }
  .brand-logo { width: 30px; height: 38px; }
  .brand-copy strong { font-size: 16px; }
  .brand-copy small { display: none; }
  .theme-switch { padding: 2px; gap: 1px; }
  .theme-switch__opt { width: 26px; height: 24px; }
  .theme-switch__opt svg { width: 14px; height: 14px; }
  .hero h1 { font-size: clamp(30px, 8vw, 36px); }
  .hero h1 span { white-space: normal; }
  .hero .actions { flex-direction: column; }
  .hero .actions .btn { width: 100%; }
  .hero-stats { gap: 18px; }
  /* En celular la ficha va en UNA sola fila (no apilada): se achica la tipografía para que entre. */
  .hero-hours { transform: none; font-size: 12px; padding: 7px 14px; gap: 8px; }
  .hero-hours-copy div + div { margin-left: 8px; padding-left: 8px; }
  .search-band { padding-top: 24px; }
  .specialties-section .cards,
  #doctors.cards { grid-template-columns: 1fr; }
  .doctor-card { min-height: 146px; }
  .doctor-footer .btn { width: auto; }
  .final-cta { flex-direction: column; align-items: flex-start; }
  .final-cta .btn { width: 100%; }
  .contact-grid { grid-template-columns: 1fr; gap: 10px; }
  .footer .grid { grid-template-columns: 1fr; }
  .appt-card,
  .appt-left { align-items: flex-start; }
  .appt-card { flex-direction: column; }
}

@media (max-width: 420px) {
  .doctor-card { gap: 12px; padding: 12px; }
  .doctor-media { flex-basis: 96px; }
  .doctor-media,
  .doctor-photo,
  .doctor-avatar { width: 96px; height: 118px; }
  .doctor-avatar span { width: 58px; height: 58px; font-size: 23px; }
  .doctor-body h3 { font-size: 14px; }
  /* Ficha de horarios en pantallas mínimas: una sola fila, aún más compacta. */
  .hero-hours { font-size: 11px; padding: 6px 12px; gap: 6px; }
  .hero-hours-copy div + div { margin-left: 6px; padding-left: 6px; }
}

@media (max-width: 340px) {
  /* Pantallas mínimas: el nombre de marca manda; el isotipo cede espacio para que no se recorte. */
  .brand-logo { display: none; }
}

/* ============================================================================================
   SECCIÓN "NUESTROS ESPECIALISTAS"  ·  tarjeta vertical (foto arriba, datos abajo)
   --------------------------------------------------------------------------------------------
   Todo scopeado bajo `.especialistas` A PROPÓSITO: las clases `.doctor-card`, `.doctor-media` y
   compañía ya las usa el mini-sitio estático de public/portal/ con un layout HORIZONTAL distinto.
   Al acotar acá, el diseño nuevo convive con el viejo sin pisarlo.

   Usa los tokens del portal (--accent, --ink, --muted, --line, --surface), NO una paleta propia:
   así el modo oscuro sigue funcionando y el día que el portal inyecte los colores de cada clínica
   esta sección los toma sola.
   ============================================================================================ */

.especialistas {
  padding: 72px 0;
  /* Tokens propios de la sección. La tarjeta pide grises NEUTROS (no el crema de la marca): con el
     crema, la foto vacía y el borde tiran a naranja y la grilla pierde el aire del diseño. El acento
     de marca sigue saliendo de --accent, así que la especialidad y los links no cambian. */
  --card-line:     #e2e8f0;
  --card-line-hov: #cbd5e1;
  --card-media:    #f1f5f9;
  --card-media-2:  #e8eef4;
  --card-ph:       #cbd5e1;
  --card-ini:      #94a3b8;
  --card-shadow:   rgba(15, 23, 42, .10);
}
:root[data-theme="dark"] .especialistas {
  --card-line:     #26384a;
  --card-line-hov: #35506b;
  --card-media:    #16232f;
  --card-media-2:  #1b2b3a;
  --card-ph:       #47617a;
  --card-ini:      #5d7a96;
  --card-shadow:   rgba(0, 0, 0, .55);
}

/* ---- Encabezado: label + título + bajada a la izquierda, "Ver todos" a la derecha ---- */
.especialistas__header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 28px;                /* 40 → 28: el titulo no necesitaba tanto colchon */
}
.especialistas__header-left { max-width: 520px; }

.especialistas__label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.especialistas__label-line {
  display: inline-block; width: 32px; height: 1px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}

.especialistas__title {
  font-size: 36px; font-weight: 700; color: var(--ink);
  letter-spacing: -.02em; line-height: 1.1;
}
/* La bajada se acota a una línea de lectura cómoda, pero NO se centra: arranca en el mismo borde
   izquierdo que el título y que las tarjetas. Acotar el contenedor en vez del texto es lo que
   desalineaba las secciones entre sí. */
.especialistas__desc {
  margin-top: 9px; max-width: var(--ancho-lectura);
  font-size: 16px; color: var(--muted); line-height: 1.5;
}

.especialistas__ver-todos {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: var(--accent);
  text-decoration: none; white-space: nowrap; transition: color .2s;
}
.especialistas__ver-todos:hover { color: var(--accent-strong); }
.especialistas__ver-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9999px;
  background: var(--accent-weak); transition: background .2s, transform .2s; font-size: 14px;
}
.especialistas__ver-todos:hover .especialistas__ver-icon {
  background: var(--accent-weak-2); transform: translateX(2px);
}

/* Acciones de la tarjeta: «Ver perfil» a la izquierda, «Agendar» a la derecha.

   La tarjeta ES un <article>, no un <a> (ver el partial: un enlace dentro de otro es HTML
   invalido y el navegador desarma la tarjeta). Para que siga siendo clickeable entera, el enlace
   de AGENDAR proyecta una capa invisible sobre toda la superficie; «Ver perfil» vive por encima
   de esa capa. Dos destinos, un solo <a> que cubre el fondo. */
.doctor-card { position: relative; }


.dir-head__quitar {
  color: var(--accent); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.dir-head__quitar:hover { color: var(--accent-strong); }

/* ---- Pagina de perfil ---- */
.prof-volver {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px;
  font-size: 13.5px; color: var(--muted); text-decoration: none; transition: color .18s;
}
.prof-volver:hover { color: var(--accent); }
.prof-cab { display: flex; gap: 28px; align-items: flex-start; }
.prof-cab__foto {
  position: relative; flex: 0 0 180px; width: 180px; aspect-ratio: 4 / 5;
  border-radius: 14px; overflow: hidden; background: var(--accent-weak);
}
.prof-cab__ph, .prof-cab__foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.prof-cab__ph { display: grid; place-items: center; }
.prof-cab__ph span { font-size: 44px; font-weight: 700; color: var(--accent); }
.prof-cab__b { min-width: 0; }
.prof-cab__n { font-family: var(--serif); font-size: 34px; font-weight: 700; line-height: 1.15; color: var(--ink); }
.prof-cab__e { margin-top: 6px; font-size: 16px; color: var(--accent); font-weight: 600; }
.prof-datos { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.prof-datos li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--muted); }
.prof-datos svg { color: var(--accent); }
.prof-cab__cta { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; }

.prof-cuerpo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.prof-bloque__t { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.prof-bloque__p { font-size: 14.5px; line-height: 1.6; color: var(--muted); white-space: pre-line; }

@media (max-width: 700px) {
  .prof-cab { flex-direction: column; gap: 18px; }
  .prof-cab__foto { flex-basis: auto; width: 140px; }
  .prof-cab__n { font-size: 27px; }
  .prof-cab__cta { width: 100%; justify-content: center; }
}

/* ---- Grilla ---- */
.especialistas__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

/* ---- Tarjeta ---- */
.especialistas .doctor-card {
  position: relative; display: flex; flex-direction: column;
  min-height: 0;                                  /* anula el min-height del card horizontal legacy */
  background: var(--surface); border: 1px solid var(--card-line); border-radius: 16px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: box-shadow .3s, border-color .3s, transform .3s;
}
.especialistas .doctor-card:hover {
  border-color: var(--card-line-hov);
  box-shadow: 0 18px 38px -14px var(--card-shadow);
  transform: translateY(-4px);
}

/* El hijo directo de la grilla es la celda: en la portada es la propia tarjeta y en la página es un
   envoltorio con los datos de filtrado. Se estiran los dos para que la fila quede pareja. */
.especialistas__grid > * { display: flex; min-width: 0; }
/* La celda es flex para que todas las tarjetas de una fila midan igual; la de adentro estira.
   Apuntaba a `.doctor-card`, una clase que ya no existía, así que las tarjetas quedaban 40px más
   angostas que su columna. Ahora nombra la que se dibuja de verdad. */
.especialistas__grid > .pcard { display: flex; }
.especialistas__item > .pcard { flex: 1; }

/* Aparición escalonada, sobre la CELDA (sirva de envoltorio o de tarjeta). */
.especialistas__grid > * { opacity: 0; transform: translateY(24px); animation: cardIn .5s forwards; }
.especialistas__grid > *:nth-child(4n+1) { animation-delay: .05s; }
.especialistas__grid > *:nth-child(4n+2) { animation-delay: .12s; }
.especialistas__grid > *:nth-child(4n+3) { animation-delay: .19s; }
.especialistas__grid > *:nth-child(4n+4) { animation-delay: .26s; }
@keyframes cardIn { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .especialistas__grid > * { opacity: 1; transform: none; animation: none; }
  .especialistas .doctor-card:hover { transform: none; }
}
/* Una celda oculta por el filtro no debe seguir ocupando lugar ni re-animarse. */
.especialistas__grid > [hidden] { display: none; }

/* ---- Responsive ---- */
@media (max-width: 1100px) { .especialistas__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .especialistas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .especialistas__grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .especialistas { padding: 52px 0; }
  .especialistas__header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .especialistas__title { font-size: 26px; }
  .especialistas__grid { gap: 14px; }
}

/* ---- Página de especialistas: volver, buscador, chips y conteo ---- */
.especialistas__volver {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px;
  font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .2s;
}
.especialistas__volver:hover { color: var(--accent); }

.especialistas__filtros { display: flex; flex-direction: column; gap: 16px; margin-bottom: 22px; }

.especialistas__search {
  position: relative; display: flex; align-items: center; gap: 10px;
  max-width: 420px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  color: var(--muted); transition: border-color .2s, box-shadow .2s;
}
.especialistas__search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.especialistas__search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  padding: 11px 0; font: inherit; font-size: 14px; color: var(--ink);
}
.especialistas__search input::placeholder { color: var(--muted); }

.especialistas__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 7px 15px; border-radius: 9999px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 500;
  transition: background .2s, border-color .2s, color .2s;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.especialistas__conteo {
  display: flex; align-items: center; gap: 8px; margin-bottom: 20px;
  font-size: 14px; color: var(--muted);
}

@media (max-width: 640px) {
  .especialistas__search { max-width: none; }
  .especialistas__chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .especialistas__chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }
}

/* Dentro de una <section> el padding ya lo pone la sección: la del bloque sería doble. */
.section > .container > .especialistas { padding: 20px 0 8px; }

/* ============================================================================================
   CABECERA DEL DIRECTORIO DE PROFESIONALES  ·  compacta
   Antes: kicker + raya + título + bajada de 2 líneas + buscador angosto + chips en 2 filas +
   contador suelto = mucha altura antes de la primera tarjeta. Ahora: título y contador en una fila,
   buscador a todo el ancho y filtros acotados a 5 + "Más filtros".
   ============================================================================================ */

/* (El ancho de esta página ya no se declara acá: `.container` es el mismo en todo el portal.) */

.especialistas__volver {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px;
  font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .2s;
}
.especialistas__volver:hover { color: var(--accent); }

/* Anula el padding grande de la sección: acá la cabecera manda el ritmo. */
.dir-page .especialistas { padding: 0 0 8px; }

.dir-head { margin-bottom: 24px; }          /* 24px exactos antes de las tarjetas */

.dir-head__fila {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.dir-head__title {
  font-size: clamp(26px, 3.2vw, 32px); font-weight: 700; color: var(--ink);
  letter-spacing: -.02em; line-height: 1.15;
}
.dir-head__conteo { font-size: 14px; color: var(--muted); white-space: nowrap; }
.dir-head__conteo b { color: var(--ink); font-weight: 600; }

.dir-head__desc { margin-top: 6px; font-size: 15px; color: var(--muted); line-height: 1.45; }

.dir-head__search {
  display: flex; align-items: center; gap: 10px;
  width: 100%; margin-top: 16px; padding: 0 16px;
  background: var(--surface); border: 1px solid var(--card-line, var(--line)); border-radius: 12px;
  color: var(--muted); transition: border-color .2s, box-shadow .2s;
}
.dir-head__search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.dir-head__search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  padding: 12px 0; font: inherit; font-size: 14px; color: var(--ink);
}
.dir-head__search input::placeholder { color: var(--muted); }

.dir-head__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* "Más filtros": mismo chip pero sin peso visual de filtro activo. */
.chip--mas { color: var(--muted); border-style: dashed; }
.chip--mas:hover { color: var(--accent); border-style: solid; }

@media (max-width: 640px) {
  .dir-head__fila { align-items: flex-start; }
  .dir-head__chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .dir-head__chips::-webkit-scrollbar { display: none; }
}




/* ============================================================
   Catálogo público de servicios y estudios (portal.publico.servicios)

   Composición EDITORIAL, con el mismo lenguaje que la portada: cabecera cálida con eyebrow naranja
   y título serif, toolbar blanca elevada, tarjetas con presencia y un cierre antes del footer.
   La versión anterior usaba tipografía sans y bordes casi invisibles: parecía una pantalla
   administrativa, no un catálogo clínico.

   Tokens del portal (--serif, --accent, --surface, --line, --ink, --muted). Nada de CSS en el Blade.
   ============================================================ */

/* La página se estira para que el footer quede apoyado abajo y no flote tras una franja blanca. */
body.svc-page { display: flex; flex-direction: column; }
body.svc-page main { flex: 1 0 auto; }

.svc-vacio { margin-top: 34px; }

/* ---- 1 · Cabecera COMPACTA ----
   Es una página interna: el hero grande vive en Inicio. Acá alcanza con ubicar al visitante en
   ~150 px, para que el buscador y los servicios se vean casi de entrada. La primera versión
   interpretó "editorial" como un segundo hero y empujaba el catálogo fuera de la pantalla. */
.svc-head {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
  border-bottom: 1px solid var(--line);
  padding: 26px 0 22px;
}
.svc-head__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.svc-head__eyebrow::before {
  content: ""; display: inline-block; width: 32px; height: 1px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}
/* Sin `max-width`: el ancho estrecho partía el título en dos líneas y duplicaba la altura. */
.svc-head__t {
  font-family: var(--serif); font-size: clamp(28px, 2.2vw, 34px); font-weight: 700;
  line-height: 1.08; letter-spacing: 0; color: var(--ink); margin: 0 0 8px; max-width: none;
}
.svc-head__s { color: var(--muted); font-size: 14px; margin: 0; }

/* ---- 2 · Toolbar blanca, apoyada sobre el borde de la cabecera ---- */
.svc-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
  padding: 12px; margin: 18px 0 30px;
  /* En el FLUJO normal: sin margen negativo, sin sticky y sin z-index. El único sticky del portal
     es el navbar; con la toolbar superpuesta, al desplazar quedaba tapada por él. */
}
.svc-toolbar__buscar {
  display: flex; align-items: center; gap: 9px; flex: 1 1 300px; min-width: 200px; height: 40px;
  padding: 0 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 3%, var(--surface));
  border: 1px solid var(--line); color: var(--muted);
}
.svc-toolbar__buscar input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 14.5px; color: var(--ink);
}
.svc-toolbar__buscar input::placeholder { color: var(--muted); }
.svc-toolbar__chips { display: flex; gap: 6px; flex: 0 1 auto; }
.svc-toolbar__chips .chip {
  height: 40px; padding: 0 15px; display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 13.5px; font-weight: 500; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer;
  transition: background .18s, color .18s;
}
.svc-toolbar__chips .chip:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
/* Seleccionado: FONDO naranja muy claro + texto naranja, no solo borde. */
.svc-toolbar__chips .chip.is-on {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent); font-weight: 600;
}

/* ============================================================================================
   CATEGORIAS DE ESTUDIOS — tarjeta de grupo.
   Sin dibujos ni iconos: el nombre de la categoria es el protagonista. No lleva «Reservar» porque
   un grupo no tiene duracion, preparacion, profesional ni precio propios.
   ============================================================================================ */
#servicios .especialistas__header { margin-bottom: 14px; }
/* En esta sección el «Ver todos» NO está en la cabecera (bajó junto a las tarjetas), así que el
   bloque de texto no tiene que dejarle lugar a la derecha. Con el tope de 520 px heredado, el
   título necesitaba 562 y se partía en dos renglones. 640 lo entra en UNA línea en escritorio y en
   tablet, y sigue siendo un ancho de lectura cómodo para la bajada. En móvil envuelve, como debe. */
#servicios .especialistas__header-left { max-width: 640px; }
.grp-grid { display: grid; gap: var(--grp-gap, 20px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* La grilla mantiene SIEMPRE tres columnas: con dos categorias las tarjetas conservan su ancho y
   no se estiran, asi no cambian de tamano el dia que aparezca la tercera. El vacio a la derecha
   es correcto.
   `--grp-ocupadas` lo escribe el Blade con cuantas tarjetas hay de verdad. Con el se recorta esta
   fila al mismo ancho, para que el enlace termine donde terminan las tarjetas y no en el borde de
   la pagina. La cuenta es la del propio grid: n columnas + los huecos que quedan entre ellas. */
.grp-acciones {
  /* Esta fila vive DENTRO del respiro que hay entre la bajada y las tarjetas: por eso el
     encabezado no aporta su margen (lo anula la clase de abajo) y el aire total queda en ~26 px,
     no en los 56 que daban los dos sumados. */
  display: flex; justify-content: flex-end; margin: 0 0 12px;
  --grp-gap: 20px;
  width: calc(
    (100% - 2 * var(--grp-gap)) / 3 * var(--grp-ocupadas, 3)
    + (var(--grp-ocupadas, 3) - 1) * var(--grp-gap)
  );
  margin-left: 0;
}
.grp-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 22px 20px 18px; border-radius: 16px; text-decoration: none;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05); overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
/* Misma franja de acento que la tarjeta de servicio: son piezas del mismo catalogo. */
.grp-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent);
}
.grp-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08); transform: translateY(-2px);
}
.grp-card__k { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.grp-card__n { font-family: var(--serif); font-size: 21px; font-weight: 700; line-height: 1.2; color: var(--ink); }
/* Gris azulado, no naranja: el contador es un dato, no una accion. Con los dos en naranja la
   tarjeta tenia dos puntos de atencion y «Ver estudios» perdia fuerza. */
.grp-card__c { font-size: 14px; font-weight: 600; color: var(--muted); }
.grp-card__e {
  font-size: 13px; line-height: 1.45; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.grp-card__a {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px;
  font-size: 14px; font-weight: 600; color: var(--accent); transition: gap .18s;
}
.grp-card:hover .grp-card__a { gap: 10px; }
/* Enlace para salir del filtro, junto al titulo que explica por que la lista es corta. */
.svc-head__quitar { margin-left: 8px; color: var(--accent); font-weight: 600; text-decoration: underline; }

@media (max-width: 1000px) {
  .grp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Con menos columnas la cuenta de arriba deja de valer: el enlace vuelve al ancho completo. */
  .grp-acciones { width: 100%; }
}
@media (max-width: 620px)  { .grp-grid { grid-template-columns: 1fr; } }

/* ---- 3 · Grilla y tarjetas ---- */
.svc__grid {
  display: grid; gap: 20px; align-items: stretch;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.svc__card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  /* `height: 100%` ademas de `align-items: stretch` en la grilla: el stretch solo aplica si el
     item no tiene altura propia, y bastaba un contenido de distinto largo para que las tres
     tarjetas de una fila terminaran con alturas distintas (193 / 221 / 241 px medidos). */
  min-height: 0; height: 100%; padding: 20px; border-radius: 16px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
/* Acento naranja fino arriba: identidad sin recuadrar de color toda la tarjeta. */
.svc__card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent);
}
.svc__card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.svc__grupo {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}

.svc__nombre { font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1.25; margin: 0; color: var(--ink); }
.svc__descripcion {
  font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- 4 · Preparación: una LÍNEA con filete arriba, no un recuadro ---- */
.svc__prep {
  /* `auto` y no un margen fijo: preparacion y pie se pegan ABAJO como un bloque, asi el aire
     sobrante queda debajo de la descripcion —que es donde no se nota— y no entre la preparacion y
     el boton. Sin esto, una descripcion de una linea dejaba el «Reservar» 28 px mas arriba que el
     de al lado y la fila se leia desprolija. */
  margin: auto 0 0; padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  font-size: 13.5px; line-height: 1.45;
}
.svc__prep-l { font-weight: 700; color: var(--accent); }
/* El punto separador lo pone el CSS y solo cuando hay rótulo: cuando no hay preparación, la línea
   arranca directo con «No requiere…» sin un « · » suelto adelante. */
.svc__prep-l + .svc__prep-t::before { content: " · "; color: var(--muted); }
.svc__prep-t { color: var(--ink); }
.svc__prep--no .svc__prep-t { color: var(--muted); }

/* ---- 5 · Pie ---- */
.svc__pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  /* El empuje lo hace `.svc__prep`, que va justo arriba y siempre esta presente. Dejarlo tambien
     aca separaria los dos. */
  margin-top: 0; padding-top: 14px;
  min-height: 36px;                              /* la fila existe aunque no haya precio ni boton */
}
/* Sin precio no hay nada a la izquierda que sostener: el pie se achica ~14 px. Es UNA variante del
   mismo pie, no otro diseno — el boton sigue alineado con el de las tarjetas que si tienen precio,
   porque la altura la iguala la grilla. */
.svc__pie--sin-precio { padding-top: 6px; min-height: 30px; }
.svc__precio { font-size: 18px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.svc__accion {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  height: 36px; padding: 0 15px; border-radius: 9px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  transition: filter .18s;
}
.svc__accion:hover { filter: brightness(.94); }
.svc__accion--alt { background: transparent; color: var(--accent); }

@media (max-width: 1100px) { .svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .svc-head { padding: 22px 0 18px; }
  .svc__grid { grid-template-columns: 1fr; }
  .svc-toolbar { flex-wrap: nowrap; }
  .svc-toolbar__chips { overflow-x: auto; scrollbar-width: none; }
  .svc-toolbar__chips::-webkit-scrollbar { display: none; }
}

/* ============================================================
   Barra de VISTA PREVIA del editor de portal (solo /…/portal/preview).
   Vive acá y no embebida en el Blade para que no haya CSS en las vistas. El desplazamiento del
   contenido es una CLASE del body (`pv-on`) y no un `body { padding-top }` global: así solo aplica
   cuando la barra está, en vez de depender de que el bloque no se renderice.
   Sobria, sin violeta ni gradientes; no altera el diseño del portal público.
   ============================================================ */
.pv-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: #1e293b; color: #fff; text-align: center;
  font: 500 13px/1.35 system-ui, -apple-system, sans-serif; padding: 7px 14px;
}
.pv-bar b { color: #fbbf24; }
body.pv-on { padding-top: 32px; }

/* ── Filtro por seguro del directorio (E2) ───────────────────────────────────────────────────── */
.dir-head__seguro {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.dir-head__seguro label { font-size: 13px; font-weight: 700; color: var(--muted); }
.dir-head__seguro select {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  max-width: 100%;
}
/* Con JS el select navega solo; el botón queda como respaldo sin JS. */
.dir-head__seguro[data-auto] [data-seguro-go] { display: none; }

.seg-drawer { position: fixed; inset: 0; z-index: 60; }
.seg-drawer__fondo { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.seg-drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(380px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 40px rgba(15, 23, 42, .18);
  overflow-y: auto;
}
.seg-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.seg-drawer__head h2 { margin: 0; font-size: 16px; }
.seg-drawer__x { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; }
.seg-drawer__body { padding: 16px 18px; }
.seg-drawer__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.seg-drawer__lista li { display: grid; gap: 2px; }
.seg-drawer__planes { font-size: 13px; color: var(--muted); }
.seg-drawer__estado { margin: 0 0 6px; font-size: 14px; }
.seg-drawer__nota { margin: 12px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
/* El drawer pasó de mostrar solo seguros a mostrar el detalle completo: días, seguros y contacto,
   cada uno en su bloque. Es lo que salió de la tarjeta cuando se unificó con la del wizard. */
.seg-drawer__b + .seg-drawer__b { margin-top: 18px; }
.seg-drawer__t { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.seg-drawer__l { font-size: 14px; line-height: 1.5; }
.seg-drawer__vias { display: grid; gap: 3px; }
.seg-drawer__via { font-size: 14px; color: var(--accent); text-decoration: none; }
.seg-drawer__via:hover { text-decoration: underline; }
/* La ficha va al final y separada: se lee DESPUÉS de decidir, no compite con el detalle. */
.seg-drawer__perfil {
  display: inline-block; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line);
  width: 100%; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none;
}
.seg-drawer__perfil:hover { text-decoration: underline; }

/* Contacto institucional del directorio: dos accesos discretos, dentro del recorrido. Nunca
   reemplazan «Ver profesionales» ni la acción propia de cada profesional. */
.dir-head__contacto { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.dir-head__contacto a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.dir-head__contacto a:hover { border-color: var(--accent); color: var(--accent-strong); }

/* Cuántos atienden con el seguro elegido. Afirma adhesión, nunca cobertura: el convenio es por
   servicio y en esta pantalla todavía no hay servicio elegido. */
.card-seguro {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ok);
}

/* ── Tarjeta de profesional COMPACTA ─────────────────────────────────────────────────────────────
   El problema no era la falta de datos sino su acumulación: encabezados repetidos en cada tarjeta,
   una foto que empujaba todo hacia abajo y acciones a distinta altura según lo que cada uno tuviera.
   Acá se le da jerarquía: nombre, cuándo atiende, cómo contactarlo, con qué seguros, y la acción
   siempre al fondo. */
.doctor-card { display: flex; flex-direction: column; }




/* == DIRECTORIO * toolbar + tarjeta horizontal ==================================================
   La version anterior apilaba foto grande, especialidades, horarios, dos contactos, seguros y dos
   botones en una columna angosta: 519px de alto, imposible de comparar y con las acciones a
   distinta altura. Aca se reordena por jerarquia y se acuesta la tarjeta. */

.dir-tb {
  display: grid;
  grid-template-columns: minmax(200px, 1.6fr) minmax(150px, 1fr) minmax(150px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.dir-tb__buscar { position: relative; display: flex; align-items: center; }
.dir-tb__buscar svg { position: absolute; left: 11px; color: var(--muted); pointer-events: none; }
.dir-tb input[type="search"], .dir-tb select {
  width: 100%; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: 14px;
}
/* DESPUES del shorthand de arriba: puesto antes, `padding: 0 12px` lo anulaba y el texto quedaba
   escrito encima de la lupa. */
.dir-tb__buscar input[type="search"] { padding-left: 34px; }
/* Con JS el formulario se envia solo al cambiar; el boton queda de respaldo sin JS. */
.dir-tb[data-auto] .dir-tb__go { display: none; }
/* Los cuatro controles en una fila son ilegibles en pantallas angostas. */
@media (max-width: 980px) {
  .dir-tb { grid-template-columns: 1fr 1fr; }
  .dir-tb__buscar, .switch, .dir-tb__go { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .dir-tb { grid-template-columns: 1fr; } }

/* Interruptor, no una casilla: es un modo que se enciende. El input real queda debajo. */
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__pista {
  position: relative; flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  transition: background-color .18s ease;
}
.switch__perilla {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .18s ease;
}
.switch input:checked + .switch__pista { background: var(--accent); }
.switch input:checked + .switch__pista .switch__perilla { transform: translateX(16px); }
.switch input:focus-visible + .switch__pista { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch__txt { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.switch input:checked ~ .switch__txt { color: var(--ink); font-weight: 600; }

/* Filtros PUESTOS. Solo los activos, y cada uno se quita solo. */
.dir-tb__puestos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 4px; }
.chip-f {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong); font-size: 13px; font-weight: 600;
}
.chip-f:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.dir-tb__limpiar { font-size: 13px; color: var(--muted); text-decoration: underline; }

/* -- La tarjeta ------------------------------------------------------------------------------- */
.pcard {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  /* Ancho GOBERNADO POR LA GRILLA, no por el contenido: sin `min-width: 0` un nombre largo ensancha
     la columna y las tarjetas dejan de medir igual. */
  width: 100%; min-width: 0; height: 100%;
}

/* Izquierda: SOLO foto y accion. Ningun texto pasa por debajo de la foto — eso partia la tarjeta
   en dos columnas distintas y la dejaba descuadrada. */
.pcard__media { display: flex; flex-direction: column; gap: 10px; }
.pcard__foto {
  position: relative;
  width: 150px; height: 180px; border-radius: 10px; overflow: hidden;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  display: grid; place-items: center;
}
/* Posicionada, no `height: 100%`: con `place-items: center` el alto porcentual no estiraba y la
   foto sobresalia del recuadro. Es el mismo patron que usa la pagina de perfil. */
.pcard__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard__foto span { font-size: 30px; font-weight: 800; color: var(--muted); }

/* Derecha: TODO el texto. */
.pcard__info { min-width: 0; display: flex; flex-direction: column; }
.pcard__info > * { min-width: 0; overflow-wrap: anywhere; }

.pcard__nombre { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.pcard__esp { margin: 2px 0 0; font-size: 12.5px; color: var(--accent-strong); font-weight: 600; }

.pcard__match {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  margin: 8px 0 0; padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 13%, var(--surface));
  color: var(--ok); font-size: 12px; font-weight: 700;
}
/* Los seguros del profesional: rotulo chico y los nombres como badges. Toda la zona es el boton
   que abre el detalle —incluido el «+N»—, asi no hay un blanco donde tocar no hace nada. */
.pcard__seguros {
  display: block; margin: 8px 0 0; padding: 0; border: 0; background: none;
  align-self: flex-start; text-align: left; cursor: pointer;
}
.pcard__seguros-l {
  display: block; margin-bottom: 3px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}
.pcard__seguros-b { display: flex; flex-wrap: wrap; gap: 4px; }
.pcard__seg {
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 6%, var(--surface));
  border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 600; color: var(--ink); line-height: 1.5;
}
/* El «+N» se lee como accion: es el que invita a abrir el resto. */
.pcard__seg--mas { background: var(--accent-weak); border-color: transparent; color: var(--accent-strong); }
.pcard__seguros:hover .pcard__seg--mas { background: var(--accent); color: var(--on-accent); }

.pcard__dias { margin: 0; font-size: 13px; color: var(--ink); line-height: 1.4; }
.pcard__horas { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.pcard__nota { margin: 0; font-size: 12.5px; color: var(--muted); font-style: italic; }

.pcard__vias { margin: 6px 0 0; display: grid; gap: 2px; }
.pcard__via { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
.pcard__via:hover { color: var(--accent-strong); }
.pcard__via-i { flex: 0 0 auto; color: var(--accent); }

/* flex-wrap para que en columnas angostas la accion baje entera en vez de partir el texto. */
.pcard__perfil {
  margin-top: auto; padding-top: 10px; align-self: flex-start;
  font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap;
}
.pcard__perfil:hover { color: var(--ink); border-bottom-color: color-mix(in srgb, var(--ink) 30%, transparent); }
/* Debajo de la foto y EXACTAMENTE de su ancho: las dos piezas de la columna izquierda leen como
   una sola unidad. `white-space: normal` queda como red: la etiqueta la elige cada clinica por su
   modalidad y una mas larga que 150px debe partirse, no desbordar. */
.pcard__accion {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 150px; min-height: 34px; padding: 7px 10px; border-radius: 9px;
  border: 1px solid transparent; text-align: center; line-height: 1.25;
  font-size: 13px; font-weight: 700; text-decoration: none; white-space: normal;

  /* En reposo el relleno es SUAVE y las letras llevan el color: relleno solido en cada tarjeta
     convertia la grilla en una fila de bloques naranjas que competian entre si. Al pasar el mouse
     se invierte, y ahi si manda el color pleno.

     `--accent-weak` y `--accent` se derivan del acento que la clinica configura en el gestor, y
     tienen su propia version en modo oscuro. Nada de naranja escrito a mano. */
  background: var(--accent-weak);
  color: var(--accent-strong);
  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}
/* El hover va dentro de `hover: hover` porque en tactil no existe: sin el guardia, el navegador
   del celular deja el estado PEGADO despues del tap y el boton se quedaba naranja hasta tocar
   otra cosa. El feedback tactil equivalente es `:active`, que si dispara al tocar. */
@media (hover: hover) {
  .pcard__accion:hover {
    background: var(--accent); color: var(--on-accent); border-color: var(--accent);
  }
}
.pcard__accion:active {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
/* Con teclado se conserva el relleno suave y se agrega el anillo de la marca: invertir en foco
   confundiria «donde estoy» con «que estoy tocando». */
.pcard__accion:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
/* El icono usa `currentColor`, asi que cambia junto con el texto. */
.pcard__accion svg { color: currentColor; }

.pcard__accion--sec { background: var(--surface); color: var(--ink); border-color: var(--line); }
.pcard__accion--sec:hover { background: var(--glass); border-color: var(--accent); color: var(--ink); }

/* -- Combobox: el select de siempre, con un campo para escribir y filtrar ---------------------- */
.combo { position: relative; }
/* El <select> real sigue en el DOM y es quien viaja en el formulario: sin JS se ve el, con JS el
   campo de texto. Se esconde con clip para no romper la validacion nativa del navegador. */
/* `position: absolute` lo saca del flujo pero NO del ancho: el select medía su opción más larga y
   empujaba la pagina 230px a la derecha. Con `clip` ademas queda recortado a 1px de verdad. */
.combo__oculto {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px; max-width: 1px;
  opacity: 0; pointer-events: none;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}
.combo__campo {
  width: 100%; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: 14px;
}
.combo__campo:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.combo__lista {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 240px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  box-shadow: 0 12px 28px -18px rgba(15, 23, 42, .5);
}
.combo__lista li {
  padding: 7px 10px; border-radius: 7px; font-size: 13.5px; color: var(--ink); cursor: pointer;
}
.combo__lista li:hover, .combo__lista li.is-marcada { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.combo__vacio { color: var(--muted); font-style: italic; cursor: default; }
.combo__vacio:hover { background: none; }

/* La tarjeta HORIZONTAL necesita ancho: con 4 columnas los nombres se partian en tres lineas y
   la etiqueta larga del boton se salia de su caja, dejando scroll horizontal en la pagina.
   Estas reglas van al final para pisar las de la grilla vertical, que sigue sirviendo a la portada. */
.especialistas__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1099px) { .especialistas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px)  { .especialistas__grid { grid-template-columns: 1fr; } }
/* La accion no puede empujar la tarjeta: si el texto es largo, baja de linea. */
.pcard__accion { max-width: 100%; }
/* Todas estiran a la altura de su fila: sin esto la mas corta deja un hueco. */
.especialistas__grid { align-items: stretch; }
.especialistas__grid > * { min-width: 0; }

/* -- Movil: las MISMAS dos columnas, con la foto proporcionalmente mas chica ------------------ */
/* No se apila: apilar dejaba el texto debajo de la imagen, que es justo lo que descuadraba. */
@media (max-width: 700px) {
  .pcard { grid-template-columns: 115px minmax(0, 1fr); gap: 12px; }
  .pcard__foto { width: 115px; height: 140px; }
  .pcard__foto span { font-size: 24px; }
  .pcard__accion { width: 115px; font-size: 12.5px; padding: 7px 8px; }
  .pcard__nombre { font-size: 15px; }
}