/* El calendario y el formulario de apartar hora.
 *
 * Vivía dentro de sitio.css, y la portada no carga sitio.css (tiene su propia
 * hoja): el calendario que abre la encuesta de la portada se pintaba sin un
 * solo estilo —treinta y un botones de día en fila, sin rejilla—. Es una hoja
 * aparte para que la cargue toda página donde corra agenda.js, y ninguna más.
 *
 * Trae también .campo, que es del formulario de aquí; las demás páginas con
 * formularios (empresas, círculo, tablero) definen el suyo. */

/* --------------------------------------------------- apartar una hora
   Nada crece ni rebota: el panel aparece deslizándose desde la derecha,
   como el resto del sitio. La quietud es parte del mensaje. */
.agenda{margin-top:22px;padding:26px;border:1px solid var(--linea);border-radius:3px;
        background:var(--papel);animation:entra-lado .34s ease both}
@keyframes entra-lado{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.agenda{animation:none}}

.agenda-espera{font-size:14px;color:var(--suave);margin:0}
.agenda-titulo{font-family:"Cormorant Garamond",serif;font-weight:400;
               font-size:25px;margin:10px 0 20px;color:var(--tinta)}

/* ---------- el calendario ----------
   Antes era una tira horizontal de días sueltos: "MAR 18 · JUE 20 · MAR 25",
   con el mes de canto entre medias. No se veía qué día de la semana tocaba,
   ni cuánto faltaba, ni qué días NO había — y para ver más había que
   arrastrar de lado. Un mes completo contesta las cuatro cosas de un vistazo:
   los días con hueco se ven, los que no, también. */
.agenda-cal{max-width:330px;margin-top:4px}
.cal-barra{display:flex;align-items:center;justify-content:space-between;
           gap:10px;margin-bottom:14px}
.cal-mes{font-size:14.5px;color:var(--tinta);letter-spacing:.02em}
.cal-mes::first-letter{text-transform:uppercase}
.cal-nav{width:31px;height:31px;flex:0 0 auto;border:1px solid var(--linea);
         border-radius:50%;background:var(--blanco);cursor:pointer;color:var(--tinta);
         font-size:16px;line-height:1;display:flex;align-items:center;
         justify-content:center;transition:border-color .2s,opacity .2s}
.cal-nav:hover:not(:disabled){border-color:var(--lila-marca)}
.cal-nav:disabled{opacity:.28;cursor:default}
.cal-rejilla{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{font-size:10px;letter-spacing:.06em;text-transform:uppercase;
         color:var(--lila-marca);text-align:center;padding-bottom:4px}
.cal-hueco{aspect-ratio:1}
.cal-dia{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
         border:1px solid transparent;border-radius:50%;background:none;
         font-family:inherit;font-size:14px;color:var(--suave);cursor:default;
         font-variant-numeric:lining-nums tabular-nums;
         transition:border-color .2s,background .2s,color .2s}
.cal-dia:disabled{opacity:.3}
.cal-dia.libre{color:var(--tinta);border-color:var(--linea);background:var(--blanco);
               cursor:pointer}
.cal-dia.libre:hover{border-color:var(--uva)}
.cal-dia.es{background:var(--uva);border-color:var(--uva);color:var(--blanco)}

.agenda-fecha{font-size:13px;color:var(--suave);margin:20px 0 10px;
              text-transform:lowercase}
.agenda-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:8px}
.agenda-hora{padding:11px 4px;border:1px solid var(--linea);border-radius:3px;
             background:var(--blanco);cursor:pointer;font-family:inherit;font-size:14px;
             color:var(--tinta);transition:border-color .2s,background .2s}
.agenda-hora:hover{border-color:var(--lila-marca)}
.agenda-hora.es{border-color:var(--uva);background:var(--uva);color:var(--blanco)}

/* ---------- el precio ----------
   Va en la cara de display, como el título: es el otro dato con el que se
   decide, y el sitio promete enseñarlo ANTES de agendar. La cifra en tinta y
   "por sesión" en el gris de apoyo — que además dice, sin decirlo, que no hay
   mensualidad. Tokens, no tintes nuevos (design.md). */
.agenda-precio{font-family:var(--display);font-size:26px;font-weight:500;
               color:var(--tinta);margin:0 0 20px;
               display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.agenda-titulo + .agenda-precio{margin-top:-12px}
.agenda-precio span{font-family:var(--texto);font-size:12.5px;font-weight:400;
                    letter-spacing:.06em;color:var(--suave)}

/* La misma cifra, en el renglón del horario elegido. */
.agenda-elegida-precio{color:var(--suave)}

/* Que la hora se aparta sin pagar por adelantado: es promesa del sitio y este
   es el único punto donde alguien se pregunta si el botón cobra. */
.agenda-aparta{font-size:12.5px;line-height:1.55;color:var(--suave);margin:0}

.agenda-zona{font-size:11.5px;color:var(--suave);margin:14px 0 0;letter-spacing:.02em}

/* En celular, que es de donde llega casi todo el mundo a agendar. */
@media (max-width:559px){
  .agenda{padding:18px 16px}
  .agenda-titulo{font-size:22px;margin:8px 0 16px}
  .agenda-precio{font-size:23px;margin-bottom:16px}
  .agenda-cal{max-width:none}
  .cal-dia{font-size:15px}
  .agenda-rejilla{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:7px}
  .agenda-forma:not(:empty){gap:13px}
  .agenda-par{gap:13px}
}

.agenda-forma:not(:empty){margin-top:22px;padding-top:22px;
                          border-top:1px solid var(--linea);
                          display:flex;flex-direction:column;gap:15px}
.agenda-elegida{font-size:14px;color:var(--tinta);margin:0}

/* .campo no estaba definido en NINGUNA parte de esta hoja. La etiqueta es
   inline, así que se sentaba a la izquierda del recuadro en lugar de encima y
   el formulario se leía como una tabla rota. empresas.html ya había topado
   con esto y se definió el suyo aparte; el de la agenda se quedó sin nadie. */
.campo{display:flex;flex-direction:column;gap:7px}
.campo label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
             color:var(--lila-marca)}
.campo input,.campo textarea,.campo select{width:100%;padding:13px 14px;
             border:1px solid var(--linea);border-radius:3px;
             background:var(--blanco);font-family:inherit;color:var(--tinta);
             /* 16px no es capricho: por debajo de eso, Safari en iPhone hace
                zoom solo al enfocar el campo y deja la página descuadrada.
                Es la causa más común de que un formulario "se sienta raro"
                en celular. */
             font-size:16px}
.campo textarea{min-height:96px;resize:vertical}
/* Debajo del campo, no dentro de la etiqueta: dice para qué se pide el dato.
   Un campo opcional sin explicación no lo llena nadie, y sin teléfono no hay
   recordatorio que pueda llegar. */
.campo-nota{font-size:12px;color:var(--suave);letter-spacing:.01em}
.campo input:focus,.campo textarea:focus,.campo select:focus{
             outline:2px solid var(--uva);outline-offset:1px;
             border-color:var(--uva)}
.agenda-elegida b{font-weight:500}
.agenda-par{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:559px){.agenda-par{grid-template-columns:1fr}}
.agenda-error:empty{display:none}
.agenda-error{color:var(--riesgo);font-size:13px;margin:0}
.agenda-ref{display:block;margin-top:5px;font-size:11px;color:var(--suave);
            letter-spacing:.06em;opacity:.8}

.agenda-listo h3{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:26px;
                 color:var(--tinta);margin:0 0 8px}
.agenda-listo p{font-size:14.5px;color:var(--suave);margin:0 0 16px;line-height:1.6}

/* Pagar es el paso siguiente, no la condición: el botón vive DEBAJO de la
   confirmación, y la nota deja claro que también se puede pagar después. */
.agenda-pagar{margin-top:4px}
.agenda-pagar-nota{font-size:12.5px;color:var(--suave);margin:10px 0 0;line-height:1.55}
/* Lo que sigue después de apartar: un botón primario y, si hay pago, la
   salida honesta «pagar después» a la misma altura visual que un enlace. */
.agenda-siguiente{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:6px}
.agenda-siguiente .agenda-pagar{margin-top:0}
.agenda-siguiente .agenda-pagar-nota{margin-top:0}
.agenda-despues{font-size:14px;color:var(--acento);text-decoration:underline;text-underline-offset:3px;
                padding:6px 0;min-height:32px;display:inline-flex;align-items:center}
.agenda-despues:hover{color:var(--tinta)}
.agenda-despues:focus-visible{outline:var(--foco-anillo) solid var(--foco);outline-offset:3px;border-radius:4px}

/* Lada + número en una fila; la lada mide lo que mide «+52 México». */
/* La rejilla la manda ahora forma.css (`.sh-tel`, 84px fijos): la lada
   compacta enseña «+52» y no necesita 38% del ancho. Se deja la regla por si
   alguna pantalla vieja usa la clase sola, pero sin el ancho grande. */
.agenda-tel-par{display:grid;grid-template-columns:84px 1fr;gap:8px}
.agenda-tel-par select{min-height:44px;font:inherit;font-size:14.5px;color:var(--tinta);
                       background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio-chico,8px);padding:0 10px}
.agenda-tel-par select:focus-visible{outline:var(--foco-anillo) solid var(--foco);outline-offset:2px}
/* Ya NO se apila en móvil. Esa regla existía cuando la lada medía 38% del
   ancho y no cabía; con «+52» en 84px sí cabe, y dos renglones para un solo
   dato se leen como dos datos. El estrechamiento fino lo hace forma.css a
   partir de 380px. */

.agenda-forma label i{font-style:normal;color:var(--suave);letter-spacing:.04em;
                      text-transform:none;font-size:.92em}

/* ── de quién es la sesión (sesiones para menores) ──
   Un recuadro y no campos sueltos: son los datos de OTRA persona —la paciente
   es ella— y mezclarlos con los de quien llena el formulario es exactamente el
   error que db/menores.sql existe para no repetir. Los tokens son los de
   siempre; no hay tinte nuevo. */
.agenda-menor{border:1px solid var(--linea);border-radius:var(--radio-chico,8px);
              padding:16px 16px 18px;display:flex;flex-direction:column;gap:14px;
              background:var(--acento-lavado)}
.agenda-menor .agenda-menor-tit{font-size:11px;letter-spacing:.16em;
              text-transform:uppercase;color:var(--lila-marca);margin:0}
.agenda-menor .campo-nota{margin:-6px 0 0}
/* Los campos del menor, en una sola columna y con clase propia.
   `.agenda-par` no sirve aquí: se parte en dos con una media query, que mide la
   VENTANA —y este panel vive dentro de una tarjeta angosta, así que en un
   monitor grande la ventana decía «cabe» y la columna no cabía—: la fecha de
   nacimiento se quedaba con todo el ancho y «Tú eres su…» quedaba de un
   centímetro. `min-width:0` porque una casilla de fecha trae un ancho mínimo
   propio que empuja a su vecina hasta desaparecerla. */
.agenda-menor-campos{display:flex;flex-direction:column;gap:14px}
.agenda-menor-campos > *{min-width:0}
.agenda-menor input{min-width:0}
/* Los hijos que ya tienen expediente: se escogen, no se vuelven a capturar.
   Recapturar a la misma niña con el nombre escrito distinto abre un segundo
   expediente, que es la forma silenciosa de partir una historia clínica. */
.agenda-hijos{display:flex;flex-wrap:wrap;gap:8px}
.agenda-hijo{appearance:none;border:1px solid var(--linea);background:var(--blanco);
             color:var(--tinta);font:inherit;font-size:14.5px;padding:9px 14px;
             border-radius:999px;cursor:pointer;min-height:40px}
.agenda-hijo:hover{border-color:var(--linea-fuerte)}
.agenda-hijo[aria-pressed="true"]{border-color:var(--uva);
             background:var(--blanco);box-shadow:inset 0 0 0 1px var(--uva)}
.agenda-hijo:focus-visible{outline:var(--foco-anillo) solid var(--foco);outline-offset:2px}
/* El bloque de «tus datos» se rotula solo cuando hay DOS personas en la
   pantalla; en una sesión de adulto no hay nada que distinguir. */
.agenda-tuyos-tit{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
                  color:var(--lila-marca);margin:4px 0 -6px}

/* La salida honesta: la sesión no está conectada, o la agenda no contestó. */
.agenda-respaldo .agenda-nota{font-size:14.5px;line-height:1.6;color:var(--tinta);margin:0 0 16px;max-width:54ch}

/* La misma nota, pero DENTRO del calendario: la línea del mostrador cuando la
   clínica publica menos horas de las que tiene, y el aviso de «esa hora ya no
   está libre» que sobrevive a releer el calendario. La regla de arriba solo
   alcanzaba al respaldo, así que aquí salía sin estilo. */
.agenda .agenda-nota{font-size:14px;line-height:1.6;color:var(--tinta-suave,var(--tinta));margin:14px 0 0;max-width:54ch}
.agenda .agenda-mas a{color:inherit;text-decoration:underline}
.agenda-acciones{display:flex;gap:10px;flex-wrap:wrap}
.agenda-acciones .boton{text-align:center}
.agenda-priv{font-size:12.5px;line-height:1.55;color:var(--suave);margin:0}
.agenda-priv a{color:var(--uva);border-bottom:1px solid var(--linea)}