/* ============================================================================
   dtp-fecha-nac.css — Fecha de nacimiento Día · Mes · Año (dtp-fecha-nac.js)
   ----------------------------------------------------------------------------
   Compartido por Tienda y Turnos. Mobile-first, controles nativos, táctil.
   Mismos tokens que dtp-phone.css. RTL-safe: el orden Día/Mes/Año del DOM se
   invierte solo con dir="rtl" (en hebreo el día queda a la derecha, correcto).
   ============================================================================ */
.dtp-fnac-wrap { width: 100%; }

.dtp-fnac {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.dtp-fnac__campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dtp-fnac__campo--dia  { flex: 0 0 64px; }
.dtp-fnac__campo--mes  { flex: 1 1 auto; }
.dtp-fnac__campo--anio { flex: 0 0 84px; }

.dtp-fnac__lbl {
    font-size: 12px;
    font-weight: 700;
    color: var(--ui-text-soft, #6b7280);
    line-height: 1;
    margin: 0;
}

.dtp-fnac__in {
    width: 100%;
    height: 48px;               /* área táctil cómoda */
    padding: 0 12px;
    border: 1px solid var(--ui-border-strong, #d1d5db);
    border-radius: var(--ui-radius-sm, 10px);
    background: #fff;
    color: var(--ui-text, #111827);
    font-size: 16px;            /* 16px evita el zoom automático de iOS */
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dtp-fnac__sel { text-align: start; appearance: auto; }
.dtp-fnac__in:focus {
    outline: none;
    border-color: var(--ui-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.dtp-fnac__in::placeholder { color: #b6bcc6; }

/* Estado vivo: acompaña la carga sin gritar */
.dtp-fnac__estado {
    min-height: 18px;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--ui-text-soft, #6b7280);
}
.dtp-fnac__estado.ok  { color: var(--ui-success, #047857); font-weight: 600; }
.dtp-fnac__estado.ok::before { content: "✓ "; }
.dtp-fnac__estado.err { color: var(--ui-danger, #dc2626); font-weight: 600; }

/* Combinación inválida (31/abril, 29/feb no bisiesto, futura) */
.dtp-fnac--err .dtp-fnac__in,
.dtp-fnac--invalida .dtp-fnac__in {
    border-color: var(--ui-danger, #dc2626);
}

/* Pantallas muy angostas: se mantiene en una línea (los 3 campos son chicos),
   solo se ajustan los anchos fijos */
@media (max-width: 360px) {
    .dtp-fnac__campo--dia  { flex-basis: 56px; }
    .dtp-fnac__campo--anio { flex-basis: 76px; }
    .dtp-fnac { gap: 6px; }
}