/* ════════════════════════════════════════════════════════════
   selector-prefijo.css — Transotel
   Fichero real: wwwroot/css/selector-prefijo.css

   LOTE PREFIJO-TEL-1 — 01/10/2026. PAIS DEL TELEFONO CON BANDERA Y BUSCADOR.
   Lo pinta selector-prefijo.js delante de cada <input data-prefijo="1">.

   Colores de la web (regla 28): #008572 rellenos, #dfbb3e acentos.
   Usa las variables de traslado-web.css cuando estan y, si no, sus mismos
   valores: asi sirve tambien en paginas que no cargan esa hoja.
   Las banderas son de flag-icons (clases fi fi-xx), que carga la vista.

   Movil primero. Por debajo de 576 px el buscador ocupa la pantalla
   entera: con el teclado abierto, un desplegable pequeno no se puede usar.
   ════════════════════════════════════════════════════════════ */

/* El campo de siempre se esconde, pero sigue ahi: es el que se valida y se
   manda. El !important gana a cualquier display de su clase. */
.spf-original {
    display: none !important;
}

.spf [hidden],
.spf-panel [hidden] {
    display: none !important;
}

/* ── El control: boton del pais + campo del numero ───────────── */
.spf {
    display: flex;
    align-items: stretch;
    gap: .5rem;
    width: 100%;
}

.spf-pais {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: 0 .7rem;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    color: var(--tw-texto, #1f2937);
    background: #fff;
    border: 1px solid var(--tw-gris-claro, #e5e7eb);
    border-radius: var(--tw-radio, 10px);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.spf-pais:hover {
    border-color: var(--tw-teal, #008572);
}

.spf-pais:focus-visible,
.spf-pais[aria-expanded="true"] {
    outline: none;
    border-color: var(--tw-teal, #008572);
    box-shadow: 0 0 0 3px rgba(0, 133, 114, .12);
}

.spf-bandera {
    font-size: 1.15rem;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.spf-iso {
    letter-spacing: .04em;
}

.spf-flecha {
    font-size: .7rem;
    color: var(--tw-gris, #6b7280);
    transition: transform .15s ease;
}

.spf-pais[aria-expanded="true"] .spf-flecha {
    transform: rotate(180deg);
}

.spf-campo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--tw-gris-claro, #e5e7eb);
    border-radius: var(--tw-radio, 10px);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.spf-campo:focus-within {
    border-color: var(--tw-teal, #008572);
    box-shadow: 0 0 0 3px rgba(0, 133, 114, .12);
}

.spf-prefijo {
    flex: 0 0 auto;
    padding-left: .85rem;
    font-size: 1rem;
    color: var(--tw-gris, #6b7280);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.spf-numero {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: .7rem .85rem .7rem .4rem;
    font: inherit;
    font-size: 1rem;
    color: var(--tw-texto, #1f2937);
    background: transparent;
    border: 0;
    outline: none;
    box-shadow: none;
}

.spf-numero::placeholder {
    color: #9ca3af;
}

/* ── En rojo: lo marca quien valida el campo original (aria-invalid) ── */
.spf--malo .spf-campo {
    border-color: var(--tw-rojo, #b91c1c);
    background: var(--tw-rojo-suave, #fef2f2);
}

/* ── Solo lectura: "Lo recojo yo mismo" en el destinatario ────────── */
.spf--solo-lectura .spf-pais,
.spf--solo-lectura .spf-campo {
    background: #f9fafb;
}

.spf--solo-lectura .spf-pais,
.spf--solo-lectura .spf-numero,
.spf--solo-lectura .spf-prefijo {
    color: var(--tw-gris, #6b7280);
}

.spf--solo-lectura .spf-pais {
    cursor: default;
    border-color: var(--tw-gris-claro, #e5e7eb);
    box-shadow: none;
}

.spf--solo-lectura .spf-flecha {
    visibility: hidden;
}

.spf-pais:disabled {
    opacity: 1;
}

/* ── El panel con el buscador (cuelga del <body>) ────────────── */
.spf-panel {
    position: absolute;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(11, 31, 58, .16);
    overflow: hidden;
    color: var(--tw-texto, #1f2937);
    font-size: 1rem;
}

.spf-panel__cab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--tw-gris-claro, #e5e7eb);
}

.spf-lupa {
    color: var(--tw-gris, #6b7280);
    font-size: .9rem;
}

.spf-buscar {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: .5rem .3rem;
    font: inherit;
    font-size: 1rem;
    color: var(--tw-texto, #1f2937);
    background: transparent;
    border: 0;
    outline: none;
}

.spf-cerrar {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    margin: 0;
    padding: 0;
    font-size: 1.1rem;
    color: var(--tw-gris, #6b7280);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.spf-cerrar:focus-visible {
    outline: 2px solid var(--tw-oro, #dfbb3e);
    outline-offset: 2px;
}

.spf-lista {
    flex: 1 1 auto;
    margin: 0;
    padding: .3rem 0;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.spf-op {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .85rem;
    cursor: pointer;
    /* Las filas que no se ven no se pintan, y su bandera no se descarga
       hasta que se baja hasta ellas. */
    content-visibility: auto;
    contain-intrinsic-size: auto 2.5rem;
}

.spf-op:hover,
.spf-op--activa {
    background: var(--tw-teal-suave, #e6f2f0);
}

.spf-op--activa {
    box-shadow: inset 3px 0 0 var(--tw-oro, #dfbb3e);
}

.spf-op__bandera {
    flex: 0 0 auto;
    font-size: 1.05rem;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.spf-op__nombre {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spf-op[aria-selected="true"] .spf-op__nombre {
    font-weight: 600;
    color: var(--tw-teal-oscuro, #00655a);
}

.spf-op__iso {
    flex: 0 0 auto;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--tw-gris, #6b7280);
}

.spf-op__cc {
    flex: 0 0 auto;
    min-width: 3.4rem;
    font-size: .9rem;
    text-align: right;
    color: var(--tw-gris, #6b7280);
    font-variant-numeric: tabular-nums;
}

.spf-sep {
    height: 1px;
    margin: .3rem .85rem;
    background: var(--tw-gris-claro, #e5e7eb);
}

.spf-vacio {
    margin: 0;
    padding: 1.1rem .85rem;
    font-size: .92rem;
    text-align: center;
    color: var(--tw-gris, #6b7280);
}

/* ── Movil: el buscador a pantalla completa ─────────────────── */
@media (max-width: 575.98px) {

    .spf-panel {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: auto !important;
        max-height: none !important;
        transform: none !important;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .spf-panel__cab {
        padding: .75rem;
        padding-top: max(.75rem, env(safe-area-inset-top));
    }

    .spf-cerrar {
        display: inline-flex;
    }

    .spf-op {
        padding: .8rem 1rem;
    }

    html.spf-abierto,
    html.spf-abierto body {
        overflow: hidden;
    }
}

/* Pantallas muy estrechas: un poco menos de aire en el boton. */
@media (max-width: 360px) {

    .spf { gap: .35rem; }

    .spf-pais { padding: 0 .5rem; gap: .35rem; }

    .spf-prefijo { padding-left: .6rem; }
}

@media (prefers-reduced-motion: reduce) {

    .spf-pais,
    .spf-campo,
    .spf-flecha {
        transition: none;
    }
}