/**
 * Estilos reutilizables para patrón uniforme de entrada de fecha: dd/mm/aa.
 * 
 * Estructura HTML recomendada:
 *  <div class="uniform-date-wrapper">
 *    <input type="date" id="id_fecha" class="uniform-date-native">
 *    <div class="uniform-date-shell">
 *      <input type="text" id="id_fecha_ui" class="form-control uniform-date-ui" placeholder="dd/mm/aa">
 *      <button type="button" class="uniform-date-picker-btn" id="id_fecha_picker_btn">
 *        <i class="bi bi-calendar3"></i>
 *      </button>
 *    </div>
 *    <div class="form-text">Formato: dd/mm/aa</div>
 *    <div class="uniform-date-feedback d-none text-danger small"></div>
 *  </div>
 */

.uniform-date-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.uniform-date-shell {
  position: relative;
  width: 100%;
}

.uniform-date-ui {
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  padding-right: 1.9rem;
}

.uniform-date-picker-btn {
  position: absolute;
  right: 0.12rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.62rem;
  height: 1.62rem;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: #5c6b61;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  cursor: pointer;
}

.uniform-date-picker-btn:hover,
.uniform-date-picker-btn:focus {
  background: rgba(0, 0, 0, 0.06);
  color: #2f3b33;
  outline: none;
}

.uniform-date-picker-btn:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.15);
  outline-offset: -2px;
}

.uniform-date-feedback {
  margin-top: 0.25rem;
}

/* Ajuste para campos más pequeños */
.uniform-date-wrapper.compact .uniform-date-ui {
  font-size: 0.75rem;
}

.uniform-date-wrapper.compact .uniform-date-picker-btn {
  width: 1.4rem;
  height: 1.4rem;
}

/* Ajuste para contenedores con ancho máximo */
.uniform-date-wrapper.max-width-7-35 .uniform-date-shell {
  max-width: 7.35rem;
}

.uniform-date-wrapper.max-width-8 .uniform-date-shell {
  max-width: 8rem;
}