/* ════════════════════════════════════════════════════════════════
   Componente: Phone Input con selector de país (default Panamá)
   Uso: <div class="phone-input-pw" data-default-country="PA">...</div>
   ════════════════════════════════════════════════════════════════ */
.phone-input-pw {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.phone-input-pw.is-focused { border-color: #00674F; box-shadow: 0 0 0 3px rgba(0,103,79,0.08); }
.phone-input-pw.is-invalid { border-color: #dc2626; background: #fef2f2; }

.phone-input-country {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: #f3f4f6;
    padding: 10px 26px 10px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    border-right: 1px solid #e5e7eb;
    cursor: pointer;
    border-radius: 8px 0 0 8px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236b7280' d='M5 6L0 0h10z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    min-width: 120px;
    max-width: 160px;
}
.phone-input-country:focus { outline: 0; }

.phone-input-number {
    flex: 1;
    border: 0;
    outline: 0;
    padding: 10px 14px;
    font-size: 15px;
    color: #111827;
    background: transparent;
    border-radius: 0 8px 8px 0;
    min-width: 0;
    letter-spacing: 0.5px;
}
.phone-input-number::placeholder { color: #9ca3af; letter-spacing: 0; }

.phone-input-error {
    display: block;
    font-size: 12px;
    color: #dc2626;
    margin-top: 6px;
    line-height: 1.3;
}
.phone-input-hint {
    display: block;
    font-size: 11.5px;
    color: #6b7280;
    margin-top: 4px;
}
.phone-input-pw.is-valid + .phone-input-hint::before { content: '✓ '; color: #16a34a; }

/* Variante mobile (form de registro móvil) — usa el mismo markup pero estiliza más compacto */
.mobile-input-wrap .phone-input-pw { border-radius: 8px; }
.mobile-input-wrap .phone-input-country { padding: 9px 22px 9px 10px; font-size: 13px; min-width: 110px; }
.mobile-input-wrap .phone-input-number { padding: 9px 12px; font-size: 14px; }