<!-- INICIO: Teléfono con formato -->
<section id="mask-telefono" class="panel demo-card" data-component="mask-telefono">
  <div class="panel-heading">
    <h2>Teléfono con formato</h2>
    <span class="tag">IMask</span>
  </div>
  <p class="demo-description">
    IMask aplica el prefijo de México y agrupa los dígitos. El valor sin formato queda disponible
    para tu aplicación.
  </p>
  <div class="demo-grid two">
    <label class="demo-label-block" for="masked-phone"
      >Teléfono de ejemplo<input
        id="masked-phone"
        class="demo-input"
        type="text"
        inputmode="tel"
        autocomplete="off"
        placeholder="+52 55 1234 5678"
    /></label>
    <div class="demo-summary">
      <span>Valor sin formato</span
      ><output id="phone-unmasked" aria-live="polite">Sin valor</output>
    </div>
  </div>
</section>
<!-- FIN: Teléfono con formato -->

<!-- INICIO: Importes legibles -->
<section id="mask-importe" class="panel demo-card" data-component="mask-importe">
  <div class="panel-heading">
    <h2>Importes legibles</h2>
    <span class="tag">IMask</span>
  </div>
  <p class="demo-description">
    Separadores de miles y hasta dos decimales. El valor numérico se conserva sin comas para
    cálculos o envío al backend.
  </p>
  <div class="demo-grid two">
    <label class="demo-label-block" for="masked-amount"
      >Importe de ejemplo ($)<input
        id="masked-amount"
        class="demo-input"
        type="text"
        inputmode="decimal"
        placeholder="123,456.78"
    /></label>
    <div class="demo-summary">
      <span>Valor numérico</span
      ><output id="amount-unmasked" aria-live="polite">Sin importe</output>
    </div>
  </div>
</section>
<!-- FIN: Importes legibles -->

<!-- INICIO: Grupos de cuatro dígitos -->
<section id="mask-tarjeta" class="panel demo-card" data-component="mask-tarjeta">
  <div class="panel-heading">
    <h2>Grupos de cuatro dígitos</h2>
    <span class="tag">IMask</span>
  </div>
  <p class="demo-description">
    Usa datos de ejemplo. Este componente solo da formato: no valida una tarjeta ni procesa pagos.
  </p>
  <div class="demo-grid two">
    <label class="demo-label-block" for="masked-card"
      >Número de ejemplo<input
        id="masked-card"
        class="demo-input"
        type="text"
        inputmode="numeric"
        autocomplete="off"
        placeholder="4111 1111 1111 1111"
        aria-describedby="card-mask-status"
    /></label>
    <div class="demo-summary">
      <span>Estado del formato</span
      ><output id="card-mask-status" aria-live="polite">Escribe 16 dígitos de ejemplo</output>
    </div>
  </div>
</section>
<!-- FIN: Grupos de cuatro dígitos -->