/* PhoneField — selector de lada con bandera (panel admin, tokens --ic-*).
   La fuente cubre solo los regional indicators (banderas): en Windows, donde el sistema
   no dibuja banderas emoji, entra esta fuente; en macOS/iOS/Android gana el emoji nativo
   solo si el sistema lo resuelve primero — por eso va al frente con unicode-range acotado. */
@font-face {
    font-family: "Twemoji Country Flags";
    src: url("../fonts/TwemojiCountryFlags.woff2") format("woff2");
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
    font-display: swap;
}

.pf-host {
    position: relative;
}

/* Botón-lada a la izquierda, visualmente unido al campo (patrón intl-tel-input) */
.pf-row {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.pf-row .pf-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Fundir el borde izquierdo del input con el botón */
.pf-row .pf-input .mud-input.mud-input-outlined fieldset,
.pf-row .pf-input .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.pf-ccbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* Alto ELÁSTICO, no fijo: la caja del MudTextField crece con el tamaño de fuente del
       número (17px en escritorio, 20px en móvil). Con align-self:stretch el botón copia el
       alto de la línea; para que las cajas de borde coincidan, el botón lleva los MISMOS
       márgenes que el .mud-input-control hermano (8px arriba / 4px abajo, default de
       MudBlazor para outlined-with-label). Antes era height:56px y se desalineaba al
       cambiar la tipografía. */
    align-self: stretch;
    height: auto;
    min-height: 48px;
    margin-top: 8px;
    margin-bottom: 4px;
    padding: 0 10px;
    min-width: 44px; /* piso táctil aunque la lada sea corta (+1) */
    border: 1px solid var(--ic-border, rgba(85, 105, 116, 0.42));
    border-right: none;
    border-radius: var(--mud-default-borderradius, 4px) 0 0 var(--mud-default-borderradius, 4px);
    /* Secundario a propósito: el protagonista es el número. Fondo tenue para que se
       siga leyendo como algo tocable (las guías piden que el selector se note pulsable). */
    background: var(--ic-surface-2, rgba(255, 255, 255, 0.04));
    color: var(--ic-muted, inherit);
    font-size: var(--ic-text-md, 0.9375rem); /* 15px = piso legible del proyecto */
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.pf-ccbtn:hover:not(:disabled) {
    background: var(--ic-surface-2, rgba(255, 255, 255, 0.05));
}

.pf-ccbtn:focus-visible {
    outline: 2px solid var(--ic-primary, #6C7DFF);
    outline-offset: -2px;
}

.pf-ccbtn:disabled {
    opacity: 0.5;
    cursor: default;
}

.pf-ccbtn--error {
    border-color: var(--mud-palette-error, #f64e62);
}

.pf-ccbtn__cc {
    font-variant-numeric: tabular-nums;
}

.pf-ccbtn__caret {
    font-size: 14px; /* 10px quedaba bajo el piso absoluto de 12px (--ic-text-xs) */
    opacity: 0.8;
}

/* ── Número protagonista ──
   El dato importante es el número: va más grande que la lada y con cifras de ancho fijo
   (tabular-nums) para que los grupos queden alineados y sea fácil comparar contra un papel. */
.pf-row .pf-input .mud-input-outlined input {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    /* 17px = piso senior del proyecto. !important + 3 clases para ganarle al
       `font-size: 16px !important` que renta-form.css aplica a TODOS los inputs
       del diálogo de renta (sección "v3 — IGUALAR AL MOCKUP"). */
    font-size: var(--ic-text-lg, 1.0625rem) !important;
}

/* ── Guía viva bajo el campo ──
   No usa .mud-input-helper-text porque renta-form.css lo oculta dentro de .rq-dialog. */
.pf-hint {
    margin: 6px 0 0 2px;
    font-size: var(--ic-text-md, 0.9375rem);
    font-weight: 600;
    line-height: 1.35;
    color: var(--ic-muted, rgba(255, 255, 255, 0.6));
}

.pf-hint--ok {
    color: var(--mud-palette-success, #4CAF50);
}

/* ── Diálogo de renta (.rq-dialog): el label va ARRIBA como bloque externo y la
   caja del input es un rectángulo redondeado de 13px sin notch (ver renta-form.css
   "v3 — IGUALAR AL MOCKUP"). El offset por defecto del botón-lada (margin-top: 8px,
   pensado para el label flotante) lo dejaba ~15px por encima de la caja, con alto y
   radio distintos. Aquí lo re-alineamos a la BASE de la caja y copiamos su alto,
   borde y radio para que ambos se fundan en un solo control. Solo aplica bajo
   .rq-dialog; el resto de contextos (label flotante) conservan el layout de arriba. */
.rq-dialog .pf-row {
    align-items: flex-end; /* la caja es el último hijo en flujo: alinear por la base */
}

.rq-dialog .pf-ccbtn {
    /* Aquí el control no tiene márgenes (se anulan más abajo), así que el stretch de la
       regla base ya hace coincidir el borde del botón con el de la caja, sea cual sea el
       tamaño de fuente del número. */
    height: auto;
    margin-top: 0; /* el label ya no ocupa el borde: sin offset */
    margin-bottom: 0;
    padding: 0 12px;
    gap: 6px;
    border-radius: 13px 0 0 13px; /* mismo radio que la caja de renta */
    border-color: var(--mud-palette-lines-inputs, var(--ic-border, rgba(85, 105, 116, 0.42)));
    font-size: 1rem; /* "+52" tan legible como el input (16px) */
}

/* Fundir la caja con el botón: esquina izquierda recta (gana al radio 13 de renta). */
.rq-dialog .pf-row .pf-input .mud-input.mud-input-outlined,
.rq-dialog .pf-row .pf-input .mud-input-outlined .mud-input-outlined-border {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* La caja vive dentro de un .mud-input-control que arrastra margin:8px/4px (default de
   MudBlazor para outlined-with-label; renta-form solo neutraliza el margin-top de .mud-input).
   Como .pf-row usa align-items:flex-end y flexbox alinea por la CAJA DE MARGEN, el margen
   inferior empujaba el botón 4px por debajo de la caja; el superior abría un hueco extra
   bajo el label. Neutralizar ambos los deja a ras (verificado en vivo: deltaBottom 0). */
.rq-dialog .pf-row .pf-input.mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ── Etiqueta sobre la BANDERA, no sobre la caja del número ──
   El label de MudBlazor vive dentro de .mud-input-control-input-container, que en .pf-row
   es el hermano DERECHO del botón-lada: en flujo quedaba sangrado el ancho del botón
   (~95px y variable según la lada: +1, +52, +998…). Lo sacamos del flujo y lo anclamos a
   .pf-host (ya position:relative), así el sangrado es fijo y no depende del país.
   Para que .pf-host sea el bloque contenedor hay que neutralizar el position:relative que
   MudBlazor pone en los dos contenedores intermedios. */
.rq-dialog .pf-host .pf-input.mud-input-control,
.rq-dialog .pf-host .mud-input-control-input-container {
    position: static !important;
}

.rq-dialog .pf-host .mud-input-control-input-container > .mud-input-label {
    position: absolute !important;
    top: 0 !important;
    left: 2px !important; /* mismo sangrado que el resto de labels del formulario */
    margin: 0 !important;
}

/* Reserva el alto del label (19.5px con 15px/1.3 — ver renta-form.css) + los 6px de
   separación que traía como margen. En este diálogo el label es de una línea ("Teléfono").
   Si cambia el tamaño del label allá, hay que ajustar este número. */
.rq-dialog .pf-host .pf-row {
    padding-top: 26px;
}

/* Al enfocar el input, tintar también el borde del botón para que el control se lea
   como una sola pieza (el input pasa a 2px primary por la regla de renta-form). */
.rq-dialog .pf-row:focus-within .pf-ccbtn:not(.pf-ccbtn--error) {
    border-color: var(--rq-primary, var(--mud-palette-primary, #6C7DFF));
}

/* En error, MudBlazor tiñe la caja de rojo (.mud-input-error) pero el botón-lada seguía
   gris (PhoneField solo marca pf-ccbtn--error para número inválido no vacío, no para el
   requerido-vacío). Igualar el borde del botón para que el control se lea de una pieza.
   :has() está soportado en el WebView del panel; :not(:focus-within) cede el color al foco. */
.rq-dialog .pf-row:has(.mud-input-error) .pf-ccbtn:not(:focus-within) {
    border-color: var(--mud-palette-error, #f44336) !important;
}

/* Popover del selector */
.pf-pop {
    border-radius: var(--ic-radius-md, 12px);
    overflow: hidden;
}

.pf-pop-inner {
    width: min(320px, 86vw);
    background: var(--ic-surface, var(--mud-palette-surface));
    padding: var(--ic-space-2, 8px);
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-2, 8px);
}

.pf-search {
    margin: 0;
}

.pf-list {
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Título de la hoja: sin él, el selector aparece sin decir para qué es. */
.pf-pop-title {
    margin: 2px 2px 10px;
    font-size: var(--ic-text-lg, 1.0625rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--ic-text, inherit);
}

/* Encabezados de sección ("Más usados" / "Todos los países"): explican el orden mixto,
   que si no se lee como una lista alfabética rota. */
.pf-group {
    margin: 10px 2px 4px;
    font-size: var(--ic-text-md, 0.9375rem);
    font-weight: 700;
    color: var(--ic-muted, rgba(255, 255, 255, 0.6));
}

.pf-list > .pf-group:first-child {
    margin-top: 2px;
}

.pf-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    /* 56px: por encima del piso táctil de 44px, cómodo para dedo grande o pulso tembloroso.
       Debe coincidir con el ItemSize de los <Virtualize> en PhoneField.razor. */
    min-height: 56px;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--ic-radius-sm, 8px);
    background: transparent;
    color: var(--ic-text, inherit);
    /* 16px = convención de pickers del proyecto (.lc-menu-lista en lista-cards.css). */
    font-size: var(--ic-text-base, 1rem);
    text-align: left;
    cursor: pointer;
}

.pf-item:hover,
.pf-item:focus-visible {
    background: var(--ic-surface-2, rgba(255, 255, 255, 0.06));
    outline: none;
}

.pf-item--sel {
    background: color-mix(in srgb, var(--ic-primary, #6C7DFF) 16%, transparent);
}

/* Palomita del país activo: señal redundante al tinte de fondo (WCAG 1.4.1 — el color
   no debe ser la única forma de comunicar un estado). */
.pf-check {
    flex: 0 0 auto;
    width: 1.25em;
    text-align: center;
    font-weight: 700;
    color: var(--ic-primary, #6C7DFF);
}

.pf-flag {
    font-family: "Twemoji Country Flags", inherit;
    font-size: 20px;
    line-height: 1;
    flex: 0 0 auto;
}

.pf-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-cc {
    flex: 0 0 auto;
    color: var(--ic-muted, rgba(255, 255, 255, 0.6));
    font-variant-numeric: tabular-nums;
}

.pf-divider {
    height: 1px;
    margin: 6px 4px;
    background: var(--ic-border, rgba(85, 105, 116, 0.42));
}

.pf-empty {
    padding: 18px 10px;
    color: var(--ic-muted, rgba(255, 255, 255, 0.6));
    font-size: var(--ic-text-base, 1rem);
    text-align: center;
}

/* El buscador es opcional: la lista de "Más usados" resuelve el caso normal. */
.pf-search .mud-input-outlined input {
    font-size: var(--ic-text-base, 1rem);
}

/* Salida visible de la hoja: tocar fuera funciona, pero ese gesto no se ve.
   Sin una salida explícita, quien no lo conoce se siente atrapado. */
.pf-cerrar {
    flex: 0 0 auto;
    width: 100%;
    min-height: 48px;
    margin-top: var(--ic-space-2, 8px);
    border: 1px solid var(--ic-border, rgba(85, 105, 116, 0.42));
    border-radius: var(--ic-radius-md, 12px);
    background: transparent;
    color: var(--ic-text, inherit);
    font-family: inherit;
    font-size: var(--ic-text-base, 1rem);
    font-weight: 700;
    cursor: pointer;
}

.pf-cerrar:hover {
    background: var(--ic-surface-2, rgba(255, 255, 255, 0.06));
}

.pf-overlay {
    background: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════
   Móvil (≤599px): hoja inferior en vez de popover flotante.
   599px es la convención de bottom-sheet del proyecto (ver .lcd en
   lista-cards.css y los *Sheet.razor).

   Antes, en celular: el botón queda abajo en pantalla, MudPopover volteaba el
   popover ~395px hacia arriba y el AutoFocus del buscador hacía que el navegador
   desplazara el documento para revelarlo — la página saltaba al inicio y el
   usuario perdía de vista el campo. Con position:fixed el contenido ya está a la
   vista, así que ese desplazamiento YA NO ocurre.

   MudPopover posiciona con estilos INLINE (left/top/z-index): de ahí los
   !important. Verificado que ningún ancestro tiene transform/filter (romperían
   el position:fixed).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
    .pf-pop.mud-popover {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: var(--ic-radius-lg, 16px) var(--ic-radius-lg, 16px) 0 0 !important;
        /* Sobre la barra fija de acciones (.edit-renta-bottombar, z-index 1280), que
           es el caso que de verdad lo necesita: al reposicionar el popover a mano,
           el z-index base de MudBlazor (--mud-zindex-popover + 1 = 1251) queda por
           debajo de esa barra. Dentro de un diálogo NO haría falta: MudBlazor ancla
           un .mud-popover-cascading-value en el árbol del diálogo y su JS copia ese
           z-index (--mud-zindex-dialog + 3) al popover portado. */
        z-index: calc(var(--ic-z-dialog, 6100) + 60) !important;
    }

    /* Scrim: comunica modalidad y evita tocar la barra de acciones por debajo. */
    .pf-overlay.mud-overlay {
        background: rgba(0, 0, 0, 0.45) !important;
        z-index: calc(var(--ic-z-dialog, 6100) + 59) !important;
    }

    .pf-pop-inner {
        width: 100% !important;
        padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
    }

    /* Asa de arrastre (solo visual: la hoja se cierra tocando fuera). */
    .pf-pop-inner::before {
        content: "";
        display: block;
        width: 36px;
        height: 4px;
        margin: 2px auto 8px;
        border-radius: 2px;
        background: var(--ic-border, rgba(148, 163, 184, 0.45));
    }

    /* Aprovecha el alto real del teléfono en vez de los 300px fijos.
       Se descuenta el botón "Cerrar" para que no quede fuera de la pantalla. */
    .pf-list {
        max-height: min(46dvh, 400px);
    }

    /* En la mano, el número sube a 20px: es el dato que hay que leer y verificar. */
    .pf-row .pf-input .mud-input-outlined input {
        font-size: var(--ic-text-xl, 1.25rem) !important;
    }

    /* La lada se queda legible pero claramente secundaria frente al número. */
    .pf-ccbtn {
        font-size: var(--ic-text-base, 1rem);
    }

    .pf-pop-title {
        font-size: var(--ic-text-xl, 1.25rem);
    }
}