/* El campo de teléfono, un solo estilo para todo el sitio.
 *
 * Vive aparte porque `.campo` está definido de nuevo, con reglas distintas, en
 * una docena de lugares (agenda.css, programas.html, empresas.html,
 * circulo/base.css, canal.html, tablero.html, y en línea en consulta, ficha y
 * resena). Este archivo NO intenta unificarlos —eso es otro cambio, más
 * grande— sino darle al teléfono un estilo propio que se vea igual esté donde
 * esté, y que no dependa de qué `.campo` le tocó a esa página.
 *
 * ════════ POR QUÉ SE VE COMO SE VE ════════
 *
 * El selector de lada enseña «+52» y nada más. El nombre del país se lee al
 * abrirlo, que es cuando importa. Un selector de 200px con «+52 México»
 * compite con el número por la atención y por el ancho, y en un teléfono deja
 * al número sin espacio — es lo que hacía que se viera barato.
 *
 * Todo sale de tokens.css. `design.md` es explícito: «Nuevos colores no
 * existen: se elige de los tokens». Y el foco no se quita nunca (WCAG AA).
 */

/* La lada es angosta y de ancho FIJO: «+52» y «+1» miden distinto, y un
   selector que cambia de tamaño al elegir país hace saltar la fila entera. */
.sh-tel {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 8px;
  align-items: stretch;
}

.sh-tel-lada,
.sh-tel-num {
  min-height: 46px;               /* el mínimo cómodo para un pulgar */
  font: inherit;
  font-size: var(--t-chico, 14px);
  color: var(--tinta, #3A2740);
  background: var(--blanco, #fff);
  border: 1px solid var(--linea, #E5DDEC);
  border-radius: var(--radio-chico, 8px);
  padding: 12px 13px;
  width: 100%;
  box-sizing: border-box;
}

/* La lada, sin la flecha nativa de cada sistema: se dibuja una sola, igual en
   todos, y se le deja el espacio a la derecha para que no pise el «+52». */
.sh-tel-lada {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 22px;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-suave, #6E6278) 50%),
                    linear-gradient(135deg, var(--fg-suave, #6E6278) 50%, transparent 50%);
  background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* El número en cifras tabulares y con un poco de aire entre caracteres: es lo
   que hace que «871 123 4567» se lea de un vistazo en vez de contarse. */
.sh-tel-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.sh-tel-lada:focus-visible,
.sh-tel-num:focus {
  outline: var(--foco-anillo, 2px) solid var(--foco, #8A6E96);
  outline-offset: var(--foco-sep, 2px);
  border-color: var(--linea-fuerte, #CBB9DE);
}

/* Mal llenado: se marca el borde, NUNCA solo con color. El motivo va escrito
   debajo (`.sh-tel-nota`), que es lo que sirve a quien no distingue el rojo y
   a cualquiera que no adivine qué está mal. */
.sh-tel.mal .sh-tel-num,
.sh-tel.mal .sh-tel-lada {
  border-color: var(--riesgo-linea, #D8B4B4);
}

.sh-tel-nota {
  display: block;
  font-size: var(--t-nota, 12.5px);
  color: var(--riesgo, #8D3B4A);
  line-height: 1.5;
  margin-top: 5px;
  min-height: 0;
}
.sh-tel-nota:empty { display: none; }

/* En pantallas angostas la lada se aprieta un poco más, no se rompe la fila:
   dos renglones para un solo dato se leen como dos datos. */
@media (max-width: 380px) {
  .sh-tel { grid-template-columns: 76px 1fr; }
}