/* ============================================================================
 * SELECTOR DE PAÍS — estilos de `intl-phone.js` (plantilla del Core)
 * ----------------------------------------------------------------------------
 * Pegar tal cual. Todo color/radio sale de una variable con FALLBACK, así que funciona
 * sin configurar nada y se adapta a la landing definiéndolas en `:root`:
 *
 *   :root { --intl-border:#d7dbe3; --intl-border-focus:#2563eb; --intl-bg:#f7f8fa;
 *           --intl-bg-panel:#fff; --intl-text:#0f172a; --intl-muted:#64748b;
 *           --intl-radius:12px; --intl-error:#dc2626; --intl-ring:rgba(37,99,235,.15);
 *           --intl-z:60; }
 *
 * ⚠️⚠️ EL BUG QUE MÁS CARO SALE: ESTE COMPONENTE SE INYECTA EN UNA PÁGINA AJENA.
 * ─────────────────────────────────────────────────────────────────────────────
 * El listado de países son `<li>`. La sección donde vive el formulario casi siempre ya
 * definió sus PROPIOS estilos de lista para sus bullets decorativos — algo como:
 *
 *     .seccion ul li          { color:#e6e3da; border-top:1px solid …; padding:14px 0; }
 *     .seccion ul li::before  { content:'·'; color:gold; }        ← especificidad (0,1,3)
 *
 * Una regla `.intl-cc-item` suelta vale **(0,1,0) y PIERDE**. Resultado medido en producción:
 * los nombres de país salieron en **gris ilegible sobre fondo blanco** y **cada país apareció
 * con una viñeta decorativa**, en un desplegable de 200 filas. No hay error en consola, el JS
 * funciona perfecto, y se ve como si el componente estuviera roto.
 * **Le va a pasar a cualquier landing con reglas de sección sobre `li`.**
 *
 * LAS 3 REGLAS DE ORO — si tocás este archivo, no las rompas:
 *   1) **Todo va prefijado con `[data-intl-phone]`** (y el listado, además, con `.intl-cc-list`).
 *      No es prolijidad: es la especificidad mínima para ganarle a una regla de sección.
 *   2) **Lo heredado se anula EXPLÍCITAMENTE** en `[data-intl-phone] .intl-cc-list > li`
 *      —`::before`/`::after`, `border-top`, `color`, `padding`, `margin`, `font-weight`,
 *      `list-style`—. Anular "lo que se ve mal hoy" no alcanza: la próxima landing hereda otra
 *      propiedad distinta. Se anula la familia entera, una vez.
 *   3) **No se toca ni un estilo global de la landing.** Bajarle la especificidad a `.seccion ul li`
 *      arregla el desplegable y rompe la sección — y lo rompe en otra pantalla, días después.
 * ⛔ Y no se resuelve con `!important`: eso deja al componente sin forma de tematizarse y le
 * traslada la pelea al siguiente que quiera cambiarle un color.
 *
 * ⚠️ El wrapper es `position:relative` y el panel `position:absolute` con `z-index`.
 * Dentro de un MODAL con `overflow:hidden`, el panel se recorta y parece que "no abre":
 * el bug se ve como si el JS fallara y no falla. Si el form vive en un modal, dale al
 * contenedor del modal `overflow:visible` (o subile el `z-index` a `--intl-z`).
 *
 * ℹ️ **Este archivo y `intl-phone.js` viajan juntos.** El JS emite `intl-ready`, `intl-cc-up`,
 * `is-active`, `is-empty` y `aria-selected`; sin estas reglas el panel no se reubica, el teclado
 * navega a ciegas y el estado vacío no aparece. Actualizar uno solo de los dos deja mitades.
 * ========================================================================== */

/* ── EL CAMPO ──────────────────────────────────────────────────────────────────
 * Disparador + input son UNA sola superficie, no dos controles pegados: el marco lo pone el
 * wrapper y el input pierde el suyo.
 * ⚠️ Todo esto cuelga de `.intl-ready`, que **la agrega el JS** al enriquecer el campo. Si el
 * script no carga, el input conserva el estilo propio de la landing y sigue siendo usable —en vez
 * de quedar un `input` sin borde flotando—. Y de paso sube la especificidad a (0,3,1), que es lo
 * que hace falta para ganarle a un `.field input[type="tel"]` de la landing. */
[data-intl-phone] {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
}
[data-intl-phone].intl-ready {
  border: 1.5px solid var(--intl-border, #d7dbe3);
  border-radius: var(--intl-radius, 12px);
  background: var(--intl-bg-panel, #fff);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
[data-intl-phone].intl-ready:focus-within {
  border-color: var(--intl-border-focus, #2563eb);
  box-shadow: 0 0 0 3px var(--intl-ring, rgba(37, 99, 235, .15));
}

/* ⚠️ `width:100%` es OBLIGATORIO, no redundante con `flex`. Con `width:auto` un `input` toma su
   **ancho intrínseco** (~20 caracteres) como `min-content`, y eso ENSANCHA la tarjeta del
   formulario: **53 px medidos** en un viewport de 390 px. La regresión es sutil —nadie la atribuye
   al selector de país— y se reporta como "la tarjeta se desbordó en móvil". */
[data-intl-phone].intl-ready > input[type="tel"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0 var(--intl-radius, 12px) var(--intl-radius, 12px) 0;
  background: transparent;
  box-shadow: none;
}
[data-intl-phone].intl-ready > input[type="tel"]:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}

/* ── DISPARADOR (bandera + prefijo + chevron) ─────────────────────────────── */
[data-intl-phone] .intl-cc-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 11px 0 14px;
  border: 0;
  border-right: 1.5px solid var(--intl-border, #d7dbe3);
  border-radius: var(--intl-radius, 12px) 0 0 var(--intl-radius, 12px);
  background: transparent;
  color: inherit;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s, border-color .2s;
}
[data-intl-phone] .intl-cc-trigger:hover { background: var(--intl-bg, #f7f8fa); }
/* `:focus` a secas dibujaría el anillo también al abrirlo con el mouse (ruido visual). El anillo
   solo tiene que aparecer para quien navega por teclado, que es quien lo necesita para ubicarse. */
[data-intl-phone] .intl-cc-trigger:focus { outline: none; }
[data-intl-phone] .intl-cc-trigger:focus-visible {
  outline: 2px solid var(--intl-border-focus, #2563eb);
  outline-offset: -3px;
}

/* Fondo + hairline en la bandera: sin ellos las banderas mayormente blancas (JP, PL) se ven como
   un hueco sobre el panel blanco, y mientras cargan (van `lazy`) la fila se ve rota. */
[data-intl-phone] .intl-cc-flag,
[data-intl-phone] .intl-cc-item-flag {
  width: 25px;
  height: 18px;
  flex: 0 0 auto;
  display: block;
  object-fit: cover;
  border-radius: 3px;
  background-color: var(--intl-bg, #f1f5f9);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .12);
}
[data-intl-phone] .intl-cc-dial {
  font-size: 14px;
  font-weight: 600;
  color: var(--intl-text, #0f172a);
  font-variant-numeric: tabular-nums;   /* el prefijo no "salta" al cambiar de país */
}
[data-intl-phone] .intl-cc-caret {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border: 0;
  border-right: 1.6px solid var(--intl-muted, #64748b);
  border-bottom: 1.6px solid var(--intl-muted, #64748b);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
[data-intl-phone] .intl-cc-trigger[aria-expanded="true"] .intl-cc-caret {
  transform: translateY(2px) rotate(-135deg);
}

/* ── PANEL ────────────────────────────────────────────────────────────────── */
[data-intl-phone] .intl-cc-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: var(--intl-z, 60);
  width: max(100%, 17rem);                   /* nunca más angosto que el campo */
  max-width: calc(100vw - 2.25rem);          /* ni se sale de la pantalla en móvil */
  max-height: min(23rem, 62vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1.5px solid var(--intl-border, #d7dbe3);
  border-radius: var(--intl-radius, 12px);
  background: var(--intl-bg-panel, #fff);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .16);
  animation: intlccDown .16s cubic-bezier(.2, .8, .2, 1);
}
/* Si abajo no hay aire —campo cerca del fondo, o móvil con el teclado abierto, que es justo
   cuando este campo se usa— el JS le pone `intl-cc-up` y el panel se abre hacia arriba. Sin esto,
   en móvil el desplegable nace fuera de la pantalla y se lee como que no abrió. */
[data-intl-phone] .intl-cc-panel.intl-cc-up {
  top: auto;
  bottom: calc(100% + 6px);
  animation-name: intlccUp;
}
[data-intl-phone] .intl-cc-panel.intl-hidden { display: none; }
@keyframes intlccDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes intlccUp   { from { opacity: 0; transform: translateY(6px);  } to { opacity: 1; transform: none; } }

/* ── BUSCADOR ─────────────────────────────────────────────────────────────── */
[data-intl-phone] .intl-cc-search {
  width: 100%;
  flex: 0 0 auto;
  margin: 0;
  border: 0;
  border-bottom: 1.5px solid var(--intl-border, #d7dbe3);
  border-radius: 0;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 14px;
  color: var(--intl-text, #0f172a);
  background: var(--intl-bg-panel, #fff);
  outline: none;
  box-shadow: none;
}
[data-intl-phone] .intl-cc-search:focus {
  border-bottom-color: var(--intl-border-focus, #2563eb);
  outline: none;
}

/* ── LISTADO ──────────────────────────────────────────────────────────────── */
[data-intl-phone] .intl-cc-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;    /* al llegar al final no arrastra el scroll de la página */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* ⬇⬇ EL BLINDAJE — la regla de oro nº2 de la cabecera. Neutraliza lo que la sección contenedora
   le inyecta a CUALQUIER `<li>`. Se anula la familia entera de propiedades de lista, no solo la
   que molestó una vez: la próxima landing hereda otra. **Es lo que más urge conservar de este
   archivo** — sin esto el componente se ve roto en una página cualquiera. */
[data-intl-phone] .intl-cc-list > li {
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 0;
  background: transparent;
  color: var(--intl-text, #0f172a);
  font-family: inherit;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  list-style: none;
}
[data-intl-phone] .intl-cc-list > li::before,
[data-intl-phone] .intl-cc-list > li::after {
  content: none;
  display: none;
}

/* `min-height:44px` no es holgura estética: es el objetivo táctil mínimo. Con filas de ~32 px,
   elegir país en móvil es una lotería — y es el campo del que depende poder contactar al lead. */
[data-intl-phone] .intl-cc-list .intl-cc-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .13s ease;
}
/* `.is-active` = la fila que sigue el TECLADO (la pone el JS). Tiene que verse igual que el hover:
   si solo se resalta con el mouse, navegar con ↑↓ es a ciegas. */
[data-intl-phone] .intl-cc-list .intl-cc-item:hover,
[data-intl-phone] .intl-cc-list .intl-cc-item.is-active { background: var(--intl-bg, #f1f5f9); }
[data-intl-phone] .intl-cc-list .intl-cc-item[aria-selected="true"] {
  box-shadow: inset 2px 0 0 var(--intl-border-focus, #2563eb);
}
[data-intl-phone] .intl-cc-list .intl-cc-item[aria-selected="true"] .intl-cc-item-name { font-weight: 600; }

[data-intl-phone] .intl-cc-item-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--intl-text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-intl-phone] .intl-cc-item-dial {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 10px;
  color: var(--intl-muted, #64748b);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Estado vacío: sin esto, buscar algo que no existe deja un panel en blanco que se lee como
   "se colgó". La fila la crea el JS; acá solo se muestra cuando el filtro no dejó nada. */
[data-intl-phone] .intl-cc-list .intl-cc-empty {
  display: none;
  padding: 22px 14px;
  color: var(--intl-muted, #64748b);
  font-size: 14px;
  text-align: center;
}
[data-intl-phone] .intl-cc-list.is-empty .intl-cc-empty { display: block; }

/* El estado de error del campo tiene que pintar TODO el control: si solo se pinta el input, el
   control se ve partido en dos y el usuario no entiende qué está mal. */
.field.err [data-intl-phone].intl-ready,
.is-error [data-intl-phone].intl-ready { border-color: var(--intl-error, #dc2626); }
.field.err [data-intl-phone] .intl-cc-trigger,
.is-error [data-intl-phone] .intl-cc-trigger { border-right-color: var(--intl-error, #dc2626); }

@media (prefers-reduced-motion: reduce) {
  [data-intl-phone] .intl-cc-panel { animation: none; }
  [data-intl-phone],
  [data-intl-phone] .intl-cc-caret,
  [data-intl-phone] .intl-cc-trigger,
  [data-intl-phone] .intl-cc-list .intl-cc-item { transition: none; }
}