/* Selector de prefijo telefónico — PIEL DE DENTO ESTETIC (10 oct 2026).
 *
 * Las mismas clases y la misma estructura que en Dental Shine y Zenithe, y el mismo
 * `js/prefijo-telefono.js` sin tocar. Solo cambian los valores, para que use el sistema
 * de diseño de ESTE sitio: el botón imita a `.form-group input` de la landing (borde de
 * 2px `--gray-200`, radio 10px, fondo `--gray-50`, foco en `--teal`).
 */
.telefono-fila{display:grid;grid-template-columns:22% 1fr;gap:10px;align-items:start}
.pref{position:relative}
.pref__boton{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:14px 8px;font-family:inherit;font-size:16px;line-height:1.2;color:var(--gray-700);background:var(--gray-50);border:2px solid var(--gray-200);border-radius:10px;cursor:pointer;transition:border-color .2s}
.pref__boton:hover{border-color:var(--gray-300)}
.pref__boton:focus-visible,.pref--abierto .pref__boton{outline:none;border-color:var(--teal);background:var(--white)}
.pref__img{width:22px;height:auto;border-radius:3px;display:block;flex-shrink:0}
.pref__bandera{font-size:1.15rem;line-height:1}
.pref__codigo{font-weight:600}
.pref__flecha{width:9px;height:9px;flex-shrink:0;border-right:2px solid var(--gray-500);border-bottom:2px solid var(--gray-500);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.pref--abierto .pref__flecha{transform:rotate(-135deg) translate(-2px,-2px)}
.pref__panel{position:absolute;z-index:50;top:calc(100% + 8px);left:0;width:max(320px,100%);background:var(--white);border:1px solid var(--gray-200);border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden;display:none}
.pref--abierto .pref__panel{display:block;animation:pref-entra .16s ease-out}
@keyframes pref-entra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.pref__buscador{padding:10px;border-bottom:1px solid var(--gray-200);background:var(--gray-50)}
/* `.form-group input` pone width:100% y su padding a TODO input: este lleva lo suyo. */
.pref__buscador input.pref__campo{width:100%;padding:10px 12px;font-size:15px;font-family:inherit;border:2px solid var(--gray-200);border-radius:8px;background:var(--white)}
.pref__buscador input.pref__campo:focus{outline:none;border-color:var(--teal)}
.pref__lista{max-height:260px;overflow-y:auto;margin:0;padding:6px;list-style:none}
.pref__opcion{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:transparent;font-family:inherit;font-size:15px;color:var(--gray-700);text-align:left;cursor:pointer}
.pref__opcion:hover,.pref__opcion[aria-selected='true']{background:var(--teal-glow)}
.pref__opcion--activa{background:rgba(30,154,187,.18)}
.pref__nombre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pref__num{color:var(--gray-500);font-variant-numeric:tabular-nums}
.pref__separador{padding:8px 12px 4px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-500)}
.pref__vacio{padding:18px 12px;text-align:center;color:var(--gray-500);font-size:14px}
.pref__ayuda{display:block;margin-top:6px;font-size:12px;line-height:1.4;color:var(--gray-500)}
.telefono-fila>.field-error{grid-column:1 / -1}
@media (max-width:560px){.telefono-fila{grid-template-columns:30% 1fr;gap:8px}.pref__panel{width:max(280px,100%)}}

/* La casilla de autorización, que nace marcada. `.form-group input` le pondría el ancho
   y el relleno de un campo de texto: por eso lleva su propia regla, más específica. */
.form-group.form-consent{margin-bottom:16px}
.form-group.form-consent label{display:flex;align-items:flex-start;gap:10px;font-weight:500;font-size:13px;line-height:1.45;color:var(--gray-600);cursor:pointer;margin-bottom:0}
.form-group.form-consent input[type=checkbox]{width:18px;height:18px;padding:0;margin:1px 0 0;flex-shrink:0;accent-color:var(--teal);border-radius:4px}

/* Lo que va DEBAJO de la caja blanca, fuera de ella: la caja termina en el botón (Luis,
   10 oct 2026: «la intención clara del formulario no es desviar la atención»). */
.form-extra{max-width:520px;margin:20px auto 0;text-align:center}
.form-extra .form-urgency{margin-top:0;color:rgba(255,255,255,.82)}
.form-extra .form-urgency strong{color:var(--gold-light,#fbbf24)}
.form-extra .form-counter{background:rgba(255,255,255,.08);color:var(--white)}
.form-extra .form-nota,.form-extra .form-bottom-text{margin:16px 0 0;font-size:12px;line-height:1.5;color:rgba(255,255,255,.62)}
@media (max-width:560px){.form-extra{margin-left:8px;margin-right:8px}}