/* ================================================================================================
   LA tarjeta de profesional. Una sola definición, para las dos pantallas que la muestran.

   El portal (`/especialistas`) y el paso «Elegí quién te atenderá» del wizard mostraban al MISMO
   profesional con dos diseños distintos: uno alto con la foto al costado y todo el texto adentro,
   otro compacto con la foto arriba. El paciente comparaba en uno, elegía y volvía al otro.

   ── Por qué este archivo y no una clase en cada hoja ────────────────────────────────────────────
   Las dos pantallas viven en pipelines distintos: el portal sirve `cedars.css` estático y el wizard
   compila por Vite. Copiar la tarjeta en las dos hojas es exactamente lo que produjo el problema.
   Un archivo suelto que ambas ENLAZAN es la única forma de que exista una vez sin unificar los dos
   pipelines, que es un trabajo mucho mayor y para otra cosa.

   ── Los tokens ─────────────────────────────────────────────────────────────────────────────────
   Cada pipeline nombra distinto lo mismo (`--line` vs `--border`, `--muted` vs `--text-muted`), y
   los dos tienen su modo oscuro. Por eso acá se declaran ALIAS con respaldo: toma el del portal si
   existe, y si no el del app. Así la tarjeta hereda el tema de la página que la muestra, sin que
   este archivo sepa en cuál está.
   ================================================================================================ */

.prof {
  --tp-fondo:  var(--surface, #fff);
  --tp-linea:  var(--line, var(--border, #DCE3E8));
  --tp-linea2: var(--border-strong, var(--line, #C4D0DA));
  --tp-texto:  var(--ink, var(--text, #172B4D));
  --tp-suave:  var(--muted, var(--text-muted, #5E7288));
  --tp-tenue:  var(--text-subtle, var(--muted, #7A8CA0));
  --tp-acento: var(--accent, #E87722);
  --tp-ok:     var(--st-success-fg, var(--ok, #15803d));

  display: flex; flex-direction: column; align-items: center; position: relative;
  /* El padding superior baja de 14 a 11: la foto creció y el aire de arriba compensa, así la
     tarjeta gana cara sin ganar altura. */
  text-align: center; padding: 11px 14px 13px;
  background: var(--tp-fondo); border: 1.5px solid var(--tp-linea); border-radius: 16px;
  color: var(--tp-texto);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.prof:hover { border-color: var(--tp-acento); transform: translateY(-2px); }

/* Elegido: el borde manda, no un relleno fuerte —cuatro tarjetas rellenas compiten entre sí—. */
.prof.is-active {
  border-color: var(--tp-acento);
  background: color-mix(in srgb, var(--tp-acento) 5%, var(--tp-fondo));
  box-shadow: 0 0 0 1.5px var(--tp-acento);
}

.prof__star { position: absolute; top: 10px; right: 10px; color: var(--tp-linea2); font-size: 1.05rem; line-height: 1; }
.prof.is-active .prof__star { color: var(--tp-acento); }

/* La foto es el dato que más rápido reconoce el paciente, y a 58px no se reconocía a nadie: era
   un adorno redondo. A 84 la cara se lee y la tarjeta sigue siendo una tarjeta —más grande empieza
   a mandar sobre el nombre y el próximo turno, que es lo que se compara—.
   El ancho de la tarjeta NO cambia: lo que se achica es el aire de arriba y el hueco hasta el nombre.
   Una sola medida (`--tp-av`) para la foto y para las iniciales: si se separan, las tarjetas con y
   sin foto dejan de alinear. */
.prof { --tp-av: 84px; }
.prof__av {
  width: var(--tp-av); height: var(--tp-av); border-radius: 50%; margin-bottom: 6px;
  display: grid; place-items: center; overflow: hidden;
  font-weight: 800; font-size: 1.45rem;
  color: var(--c, var(--tp-acento));
  background: color-mix(in srgb, var(--c, var(--tp-acento)) 16%, var(--tp-fondo));
  border: 1px solid color-mix(in srgb, var(--c, var(--tp-acento)) 30%, transparent);
}
/* `center top`: en los retratos de cuerpo entero el recorte cuadrado se lleva el torso y deja la
   cara arriba, medio cortada. Anclando arriba, la cabeza entra siempre. */
.prof__av img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* Menos ancho de tarjeta, menos foto: a 84 en un móvil la cara empuja al nombre fuera de vista. */
@media (max-width: 1023px) { .prof { --tp-av: 76px; } }
@media (max-width: 639px)  { .prof { --tp-av: 68px; } }

.prof__name { font-weight: 700; font-size: .9rem; line-height: 1.2; }
.prof__spec { font-size: .76rem; color: var(--tp-suave); margin-top: 1px; }

/* La sede y los badges de seguro salieron de la tarjeta.
   La sede repetía la clínica en la que ya está parado el paciente. Los seguros hacían de la
   tarjeta un resumen en vez de una comparación: dos nombres largos y un «+N» que igual obligaba a
   abrir el detalle, con la altura de cada tarjeta dependiendo de cuántos seguros tuviera cada
   médico. La lista COMPLETA vive en «Ver detalles», y el filtro de seguro está arriba del listado
   —que es donde el seguro sirve para decidir, no para leer—. */

/* Quien no agenda por la web: el pie deja de ser un botón de elección y pasa a ser el enlace de
   salida —«Contactar», «Ver perfil»—. Se distingue del naranja de «Seleccionar» para que no se lea
   como la misma acción, y la tarjeta no responde al hover de elegible. */
/* El PIE absorbe el sobrante. Es lo único con `margin-top: auto`, así todas las tarjetas de una
   fila terminan con el botón a la misma altura sin deformar lo de arriba. */
.prof__accion { margin-top: auto; padding-top: 14px; width: 100%; }

.prof--no-elegible { cursor: default; }
.prof--no-elegible:hover { border-color: var(--tp-linea); transform: none; }
.prof__sel--alt {
  border-color: var(--tp-linea2); color: var(--tp-suave); text-decoration: none;
  display: grid; place-items: center;
}
.prof__sel--alt:hover { border-color: var(--tp-texto); color: var(--tp-texto); background: none; }

/* El próximo turno arranca pegado a la identidad, con un respiro y nada más.
   Antes llevaba `margin-top: auto` para alinear los botones de la fila, y el efecto colateral era
   un hueco enorme entre la especialidad y el horario: la tarjeta más alta estiraba ese vacío en
   todas las demás. Alinear los botones es trabajo del PIE, que es lo que tiene que quedar al
   fondo; el sobrante se acumula ahí y no en el medio de la información. */
.prof__prox { margin-top: 16px; width: 100%; }
.prof__proxlbl { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tp-tenue); font-weight: 700; }
.prof__proxval { display: block; font-size: .8rem; font-weight: 800; color: var(--tp-ok); margin-top: 1px; }
.prof__prox.prof__status--some .prof__proxval { color: #C77700; }
.prof__prox.prof__status--none .prof__proxval { color: var(--tp-tenue); }
/* En el directorio el renglón son los días: texto normal, no un dato destacado. */
.prof__prox.prof__status--dias .prof__proxval { color: var(--tp-texto); font-weight: 600; font-size: .76rem; }

/* «Ver detalles» es un enlace, no un botón: no puede competir con la acción principal. */
.prof__ver {
  margin-top: 8px; padding: 0; border: 0; background: none;
  font: inherit; font-size: .76rem; font-weight: 600; color: var(--tp-suave);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.prof__ver:hover { color: var(--tp-acento); }

.prof__sel {
  width: 100%; height: 34px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px solid var(--tp-acento); background: transparent; color: var(--tp-acento);
  border-radius: 9px; font: inherit; font-weight: 700; font-size: .82rem;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.prof__sel:hover { background: var(--tp-acento); color: #fff; }
.prof.is-active .prof__sel { background: var(--tp-acento); color: #fff; }