/* ==========================================================================
   FICHAS DE MÉDICOS
   Hoja propia, encima de styles.css: no toca ninguna regla del sitio, así un
   despliegue de una cosa no rompe la otra. Reutiliza los tokens de marca
   (--primary, --secondary, --tertiary, --outline) que ya define styles.css.
   ========================================================================== */

.ficha{padding:clamp(28px,4vw,44px) 0 clamp(56px,7vw,96px);background:var(--surface,#F8FAFC)}

/* Dos columnas: la izquierda es identidad y contacto —lo que el paciente
   necesita para decidir y para llamar—, la derecha es la trayectoria. En la
   izquierda todo cabe sin scroll, así que se queda fija mientras se lee la
   derecha, que es larga. */
.ficha-grid{
  display:grid;grid-template-columns:minmax(260px,320px) 1fr;
  gap:clamp(18px,2.2vw,28px);align-items:start;margin-top:22px;
}
.ficha-lateral{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}

.ficha-perfil{
  padding:26px 24px;background:#fff;border:1px solid var(--outline);border-radius:16px;
}
.ficha-perfil .eyebrow{display:block;margin:18px 0 0}
.ficha-perfil h1{
  margin:6px 0 0;font-size:clamp(22px,2vw,27px);font-weight:500;
  color:var(--primary);line-height:1.2;
}
.ficha-especialidad{margin:8px 0 0;font-size:15px;color:var(--text-2);line-height:1.45}

.ficha-foto{
  width:132px;height:132px;object-fit:cover;object-position:50% 20%;
  border-radius:50%;background:#EEF2F8;display:block;
}
.ficha-foto--ini{
  display:flex;align-items:center;justify-content:center;
  font-size:40px;font-weight:500;color:var(--primary);
}

.ficha-datos{
  margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--outline);
  display:flex;flex-direction:column;gap:14px;
}
.ficha-dato{position:relative;padding-left:26px}
.ficha-dato::before{
  content:"";position:absolute;left:0;top:2px;width:17px;height:17px;
  background:var(--secondary);
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
}
.ficha-dato--lugar{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E")}
.ficha-dato--tel{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .58 3.6 1 1 0 0 1-.25 1z'/%3E%3C/svg%3E")}
.ficha-dato--mail{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm8 7L4.5 6.5h15z'/%3E%3C/svg%3E")}
.ficha-dato--idioma{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4V6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E")}
.ficha-dato dt{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-2);
}
.ficha-dato dd{margin:3px 0 0;font-size:15px;color:var(--text);line-height:1.4}
.ficha-dato a{color:var(--primary);text-decoration:none}
.ficha-dato a:hover{text-decoration:underline}

/* Turquesa, no magenta: el magenta es el punto de la marca. Y una sola acción:
   "Reprogramar" prometería una agenda en línea que Q·RA todavía no tiene. */
.ficha-btn{
  display:block;margin-top:22px;text-align:center;
  background:var(--secondary);color:#fff;padding:13px 20px;font-size:15px;
}
.ficha-btn:hover{background:#0090c4}

.ficha-indice{padding:18px 20px;background:#fff;border:1px solid var(--outline);border-radius:16px}
.ficha-indice ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ficha-indice a{
  display:block;padding:8px 10px;border-radius:8px;font-size:14.5px;
  color:var(--text-2);text-decoration:none;transition:background .2s ease,color .2s ease;
}
.ficha-indice a:hover{background:#F1F6FB;color:var(--primary)}

.ficha-cuerpo{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);min-width:0}
.ficha-bloque{
  padding:clamp(20px,2.4vw,30px);background:#fff;
  border:1px solid var(--outline);border-radius:16px;scroll-margin-top:96px;
}
.ficha-bloque h2{
  margin:0 0 18px;font-size:clamp(18px,1.7vw,22px);font-weight:500;color:var(--primary);
}

.ficha-lista{list-style:none;margin:0;padding:0}
/* Los años en su propia columna: una lista de formación de diez líneas se lee
   por la izquierda, y con el período embebido en el texto no se puede. */
.ficha-lista li{
  display:grid;grid-template-columns:minmax(96px,150px) 1fr;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--outline);
}
.ficha-lista li:last-child{border-bottom:0;padding-bottom:0}
.ficha-lista li:first-child{padding-top:0}
.ficha-periodo{font-size:13.5px;color:var(--secondary);line-height:1.5}
.ficha-detalle{font-size:15px;color:var(--text);line-height:1.55}
.ficha-bloque--pubs .ficha-detalle{font-size:14px}
.ficha-nota{font-size:15px;line-height:1.6;color:var(--text-2);font-style:italic}

.ficha-aviso{
  display:none;   /* solo con ?revision=1 — lo pinta el script del <head> */
  margin:18px 0 0;padding:14px 18px;border-radius:12px;
  background:#FFF7E6;border:1px solid #F5D89A;font-size:14px;color:#7A5A12;
}
.en-revision .ficha-aviso{display:block}
.ficha-aviso-det{display:block;margin-top:4px;opacity:.8}

@media (max-width:900px){
  .ficha-grid{grid-template-columns:1fr}
  .ficha-lateral{position:static}
  /* El índice sobra cuando ya no hay columna fija: sin sticky, el enlace queda
     arriba del todo y volver a él cuesta más que seguir bajando. */
  .ficha-indice{display:none}
  .ficha-lista li{grid-template-columns:1fr;gap:4px}
  .ficha-periodo{font-size:12.5px}
}

/* ---------- Índice del equipo ---------- */
.equipo{padding:clamp(48px,6vw,96px) 0}
/* El índice completo usa la misma pieza que las páginas de área; lo único
   propio es el separador que abre cada especialidad. */
.equipo{padding:0}
/* Rejilla plana: una celda por médico, con el nombre de su especialidad encima.
   Agrupar en secciones dejaba dos tercios de fila vacíos cuando el área tenía
   un solo médico; repitiendo el rótulo, las filas van siempre llenas y ningún
   médico aparece bajo el título de otra especialidad. */
.equipo-rejilla{
  list-style:none;margin:0;padding:0;display:grid;align-items:start;
  gap:clamp(26px,3vw,40px) clamp(18px,2.2vw,28px);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.equipo-celda{display:flex;flex-direction:column;min-width:0;scroll-margin-top:110px}
.equipo-celda h2{
  margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--outline);
  font-size:clamp(17px,1.5vw,21px);font-weight:500;color:var(--primary);
}
/* La tarjeta ocupa lo que quede de la celda para que todas las de una fila
   terminen a la misma altura aunque el nombre ocupe una línea más. */
.equipo-celda .med-grid{flex:1;display:flex}
.equipo-celda .med-tarjeta{flex:1}

/* Rejilla de tarjetas de las páginas de área. En el índice del equipo cada
   celda lleva una sola tarjeta y la regla de .equipo-celda la vuelve columna. */
.med-grid{
  list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}

/* auto-FIT y no auto-fill: con auto-fill, un área de dos médicos generaba
   cuatro columnas y dejaba dos vacías a la derecha. Con auto-fit las columnas
   sobrantes se colapsan y las tarjetas que hay reparten el ancho.

   Y cuando el área tiene un solo médico, esa tarjeta ocuparía sola toda la
   fila: pasa a formato horizontal —retrato, nombre, datos y botón en línea—,
   que sí usa el ancho en vez de dejarlo vacío dentro de la tarjeta. */
@media (min-width:760px){
  .med-grid > .med-tarjeta:only-child{
    flex-direction:row;align-items:center;gap:clamp(20px,3vw,44px);
  }
  .med-grid > .med-tarjeta:only-child .med-cabeza{flex:1 1 40%;min-width:0}
  .med-grid > .med-tarjeta:only-child .med-metas{margin:0;flex:1 1 auto;min-width:0}
  .med-grid > .med-tarjeta:only-child .med-btn{margin-left:auto;flex:none}

  /* En el índice del equipo cada celda tiene una sola tarjeta, pero mide un
     tercio de pantalla: ahí el formato horizontal no cabe y los tres bloques se
     montaban unos sobre otros. La celda lo devuelve a columna, y hay que
     deshacer también las reglas de los hijos, no solo la dirección. */
  .equipo-celda .med-grid > .med-tarjeta:only-child{
    flex-direction:column;align-items:stretch;gap:14px;
  }
  .equipo-celda .med-grid > .med-tarjeta:only-child .med-cabeza{flex:0 0 auto}
  .equipo-celda .med-grid > .med-tarjeta:only-child .med-metas{margin-top:auto;flex:0 0 auto}
  .equipo-celda .med-grid > .med-tarjeta:only-child .med-btn{margin-left:0}
}
.equipo-mas{margin:16px 0 0}
.equipo-mas a{color:var(--secondary);text-decoration:none;font-size:14.5px;font-weight:500}
.equipo-mas a:hover{text-decoration:underline}
/* Flex en columna para que el boton quede alineado abajo en toda la fila:
   con nombres y especialidades de largo distinto, sin esto la fila se dienta. */
.med-tarjeta{
  position:relative;display:flex;flex-direction:column;gap:14px;padding:22px;
  min-width:0;
  border:1px solid var(--outline);border-radius:14px;background:#fff;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.med-tarjeta:hover{
  border-color:var(--secondary);transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(29,79,145,.08);
}
.med-cabeza{display:flex;align-items:center;gap:14px}
.med-avatar{
  flex:0 0 72px;width:72px;height:72px;border-radius:50%;
  object-fit:cover;object-position:50% 22%;background:#EEF2F8;
}
.med-avatar--ini{
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:500;color:var(--primary);
}
.med-nombre{
  display:block;font-size:17px;font-weight:500;color:var(--primary);
  text-decoration:none;line-height:1.3;
}
.med-nombre:hover{text-decoration:underline}
/* El enlace del nombre cubre la tarjeta entera: toda la superficie es clicable
   sin duplicar enlaces, y el lector de pantalla anuncia el nombre del medico. */
.med-nombre::after{content:"";position:absolute;inset:0}
.med-esp{margin:5px 0 0;font-size:14.5px;color:var(--text-2);line-height:1.4}

.med-metas{display:flex;flex-direction:column;gap:7px;margin-top:auto}
.med-meta{position:relative;padding-left:24px;font-size:13.5px;color:var(--text-2)}
.med-meta::before{
  content:"";position:absolute;left:0;top:1px;width:16px;height:16px;
  background:var(--secondary);
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
}
.med-meta--lugar{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E")}
.med-meta--idioma{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4V6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E")}

/* Turquesa, no magenta: el magenta es el acento de marca y se reserva para el
   punto. Un boton magenta por tarjeta lo convierte en color de interfaz. */
.med-btn{
  align-self:flex-start;position:relative;z-index:1;
  background:var(--secondary);color:#fff;font-size:14px;padding:10px 22px;
}
.med-btn:hover{background:#0090c4}

/* ---------- Pagina de area ---------- */
.area-hero{padding:clamp(28px,4vw,44px) 0 clamp(28px,4vw,40px);border-bottom:1px solid var(--outline);background:#fff}
.area-hero-cuerpo{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(18px,3vw,32px);margin-top:22px;
}
.area-ico{width:clamp(76px,8vw,108px);height:auto;flex:none}
.area-texto h1{margin:4px 0 0;font-size:clamp(30px,4.2vw,46px);font-weight:300;color:var(--primary);line-height:1.1}
.area-desc{margin:12px 0 0;max-width:52ch;font-size:16.5px;color:var(--text-2);line-height:1.55}
.area-cta{text-align:right}
.area-btn{background:var(--secondary);color:#fff;padding:14px 30px;font-size:15px}
.area-btn:hover{background:#0090c4}
.area-tel{margin:10px 0 0;font-size:13.5px;color:var(--text-2)}
.area-tel a{color:var(--primary);text-decoration:none;font-weight:500}
.area-tel a:hover{text-decoration:underline}

.area-equipo{padding:clamp(32px,5vw,56px) 0 clamp(48px,6vw,88px);background:var(--surface,#F8FAFC)}
.area-cuenta{margin:0 0 20px;font-size:14px;color:var(--text-2)}
.area-volver{margin:clamp(28px,4vw,44px) 0 0}
.area-volver a{color:var(--secondary);text-decoration:none;font-weight:500}
.area-volver a:hover{text-decoration:underline}

@media (max-width:860px){
  .area-hero-cuerpo{grid-template-columns:auto 1fr;row-gap:22px}
  .area-cta{grid-column:1/-1;text-align:left}
}
@media (max-width:480px){
  .med-grid{grid-template-columns:1fr}
  .med-avatar{flex-basis:60px;width:60px;height:60px}
  .area-hero-cuerpo{grid-template-columns:1fr}
}




/* Marca de trabajo del equipo ("⚠ verificar" escrito dentro del campo). Nunca
   pública: publicada le dice al paciente que Q·RA no confía en el título de su
   propio médico. Solo se ve con ?revision=1. */
.ficha-verificar{display:none}
.en-revision .ficha-verificar{
  display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;
  background:#FFF3D6;color:#8A6100;font-size:11.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;vertical-align:2px;
}