/*
 * KummaraDS — kds-telefono (#1408)
 * ============================================================
 * El campo de teléfono, propio: reemplaza a la librería intl-tel-input. Es un
 * kds-input con el país al principio de la caja, el número en el medio y, si el
 * número sirve, el botón de WhatsApp al final. La regla (qué es un teléfono,
 * cómo se guarda, cómo se muestra, el WhatsApp) está una sola vez en el servidor:
 * DDD\Shared\Domain\ValueObject\Telefono, que el campo consulta en
 * GET /api/v1/telefono.
 *
 * Lo arma js/components/kds-telefono.js sobre cualquier <input type="tel"> (o
 * con KdsTelefono.montar(input)); el input original queda escondido adentro con
 * su name y su id, y lleva lo que se guarda: «+541123456789», o tal como estaba
 * si nadie lo tocó. Con data-kds-telefono="no" un input se queda como está.
 *
 *   <div class="kds-input kds-telefono">
 *     <select class="form-select kds-input__control kds-telefono__pais">AR +54 …</select>
 *     <input type="tel" class="form-control kds-input__control kds-telefono__numero">
 *     <a class="kds-input__accion kds-telefono__wsp" href="https://wa.me/549…"><i class="fab fa-whatsapp"></i></a>
 *     <input type="tel" name="telefono" id="telefono" hidden>
 *   </div>
 *   <div class="kds-field__help kds-telefono__aviso">Revisá el teléfono: …</div>
 *
 *   data-estado="ok|aviso|vacio" en la caja: cómo quedó la última lectura.
 *   El aviso de un teléfono viejo mal cargado es una ayuda; el de uno que se
 *   escribió mal, un error de campo (kds-field__error) y la caja en rose.
 * ============================================================
 */

.kds-telefono > .kds-telefono__pais {
    flex: 0 0 auto;
    width: auto;
    max-width: 7.5rem;
    padding-left: .6rem;
    border-right: 1px solid var(--ds-border, #eee) !important;
    border-radius: .375rem 0 0 .375rem;
    color: var(--ds-text-muted, #606060);
    font-size: .82rem;
    font-weight: 600;
}

.kds-telefono > .kds-telefono__numero {
    font-variant-numeric: tabular-nums;
}

.kds-telefono > .kds-telefono__wsp {
    padding: 0 .55rem;
    font-size: 1rem;
    text-decoration: none;
}

.kds-telefono__aviso[hidden] {
    display: none;
}