/*
 * input-lib.css — Estilos para input-lib.js (Tema Light)
 *
 * Incluye este archivo para que los estilos estén disponibles
 * sin depender de la inyección dinámica del JS.
 *
 * ─── PERSONALIZACIÓN ───
 * Modifica las variables (--di-*, --hi-*, --pi-*, etc.)
 * para cambiar el aspecto. El cambio se propaga automáticamente.
 */

/* ═══════════════════════════════════════════
   DateInput — clase por defecto: date-input
   ═══════════════════════════════════════════ */
.date-input-wrap{
  --di-width:100%;
  --di-padding:5px 10px;
  --di-font-size:0.9rem;
  --di-text-align:left;
  --di-letter-spacing:.5px;
  --di-border-radius:0.3rem;
  --di-border-color:#007e5e;
  --di-border-width:1px;
  --di-color:#495057;
  --di-bg:transparent;
  --di-preview-bg:inherit;
  --di-preview-color:rgba(26,26,46,.25);
  --di-placeholder-color:#a0a8b4;
  --di-focus-border-color:#4DA28F;
  --di-focus-shadow:0 4px 5px rgba(9, 218, 23, 0.15);
  --di-accent:#2b7fff;
  --di-accent-glow:rgba(43,127,255,.4);
  --di-accent-glow2:rgba(43,127,255,.2);
  --di-reject-color:#e53935;
  --di-transition:box-shadow .18s,border-color .18s;

  position:relative;
  display:inline-block;
  overflow:hidden;
  border-radius:var(--di-border-radius);
  background:var(--di-bg);
}

.date-input{
  width:var(--di-width);
  padding:var(--di-padding);
  font-size:var(--di-font-size);
  text-align:var(--di-text-align);
  letter-spacing:var(--di-letter-spacing);
  background:transparent;
  color:var(--di-color);
  border:var(--di-border-width) solid var(--di-border-color);
  border-radius:var(--di-border-radius);
  box-sizing:border-box;
  outline:none;
  transition:var(--di-transition);
  position:relative;
  z-index:2;
}
.date-input:focus{
  box-shadow:var(--di-focus-shadow);
  border-color:var(--di-focus-border-color);
}
.date-input::placeholder{color:var(--di-placeholder-color)}
.date-input:focus::placeholder{color:transparent}

.date-input-preview{
  position:absolute;top:0;left:0;width:100%;height:100%;
  padding:var(--di-padding);
  font-size:var(--di-font-size);
  text-align:var(--di-text-align);
  letter-spacing:var(--di-letter-spacing);
  color:var(--di-preview-color);
  background:var(--di-preview-bg);
  border:var(--di-border-width) solid transparent;
  border-radius:var(--di-border-radius);
  z-index:1;pointer-events:none;display:none;
}

.date-input-slash{
  position:absolute;top:0;left:0;width:100%;height:100%;
  padding:var(--di-padding);
  font-size:var(--di-font-size);
  text-align:var(--di-text-align);
  letter-spacing:var(--di-letter-spacing);
  border:var(--di-border-width) solid transparent;
  border-radius:var(--di-border-radius);
  z-index:3;pointer-events:none;display:none;color:transparent;
}
.date-input-slash-char{
  color:var(--di-accent);
  text-shadow:0 0 8px var(--di-accent-glow),0 0 16px var(--di-accent-glow2);
}

.date-input.date-input-reject{animation:rejectFlash_date_input 1s ease-out}
@keyframes rejectFlash_date_input{
  0%,20%,40%{border-color:var(--di-reject-color);box-shadow:0 0 12px rgba(229,57,53,.4)}
  10%,30%{border-color:rgba(229,57,53,.3);box-shadow:0 0 6px rgba(229,57,53,.15)}
  60%{border-color:rgba(229,57,53,.1);box-shadow:none}
  100%{border-color:var(--di-focus-border-color);box-shadow:var(--di-focus-shadow)}
}


/* ═══════════════════════════════════════════
   HourInput — clase por defecto: hour-input
   ═══════════════════════════════════════════ */
.hour-input-wrap{
  --hi-width:100%;
  --hi-padding:5px 10px;
  --hi-font-size:0.9rem;
  --hi-text-align:left;
  --hi-letter-spacing:.5px;
  --hi-border-radius:0.3rem;
  --hi-border-color:#007e5e;
  --hi-border-width:1px;
  --hi-color:#495057;
  --hi-bg:transparent;
  --hi-preview-bg:inherit;
  --hi-preview-color:rgba(26,26,46,.25);
  --hi-placeholder-color:#a0a8b4;
  --hi-focus-border-color:#4DA28F;
  --hi-focus-shadow:0 4px 5px rgba(9, 218, 23, 0.15);
  --hi-accent:#2b7fff;
  --hi-accent-glow:rgba(43,127,255,.4);
  --hi-accent-glow2:rgba(43,127,255,.2);
  --hi-reject-color:#e53935;
  --hi-transition:box-shadow .18s,border-color .18s;

  position:relative;
  display:inline-block;
  overflow:hidden;
  background:var(--hi-bg);
  border:var(--hi-border-width) solid var(--hi-border-color);
  border-radius:var(--hi-border-radius);
  transition:var(--hi-transition);
}
.hour-input-wrap:focus-within{
  box-shadow:var(--hi-focus-shadow);
  border-color:var(--hi-focus-border-color);
}

.hour-input{
  width:var(--hi-width);
  padding:var(--hi-padding);
  font-size:var(--hi-font-size);
  text-align:var(--hi-text-align);
  letter-spacing:var(--hi-letter-spacing);
  background:transparent;
  color:var(--hi-color);
  border:none;
  border-radius:inherit;
  outline:none;
  position:relative;
  z-index:2;
}
.hour-input::placeholder{color:var(--hi-placeholder-color)}
.hour-input:focus::placeholder{color:transparent}

.hour-input-preview{
  position:absolute;top:0;left:0;width:100%;height:100%;
  padding:var(--hi-padding);
  font-size:var(--hi-font-size);
  text-align:var(--hi-text-align);
  letter-spacing:var(--hi-letter-spacing);
  color:var(--hi-preview-color);
  background:var(--hi-preview-bg);
  border:none;
  border-radius:inherit;
  z-index:1;pointer-events:none;display:none;
}

.hour-input-colon{
  position:absolute;top:0;left:0;width:100%;height:100%;
  padding:var(--hi-padding);
  font-size:var(--hi-font-size);
  text-align:var(--hi-text-align);
  letter-spacing:var(--hi-letter-spacing);
  border:none;
  border-radius:inherit;
  z-index:3;pointer-events:none;display:none;color:transparent;
}
.hour-input-colon-char{
  color:var(--hi-accent);
  text-shadow:0 0 8px var(--hi-accent-glow),0 0 16px var(--hi-accent-glow2);
}

.hour-input-wrap.hour-input-reject{animation:rejectFlash_hour_input 1s ease-out}
@keyframes rejectFlash_hour_input{
  0%,20%,40%{border-color:var(--hi-reject-color);box-shadow:0 0 12px rgba(229,57,53,.4)}
  10%,30%{border-color:rgba(229,57,53,.3);box-shadow:0 0 6px rgba(229,57,53,.15)}
  60%{border-color:rgba(229,57,53,.1);box-shadow:none}
  100%{border-color:var(--hi-focus-border-color);box-shadow:var(--hi-focus-shadow)}
}


/* ═══════════════════════════════════════════
   PhoneInput — clase por defecto: phone-input
   ═══════════════════════════════════════════ */
.phone-input-wrap{
  --pi-width:100%;
  --pi-padding:5px 10px;
  --pi-font-size:0.9rem;
  --pi-text-align:left;
  --pi-letter-spacing:.5px;
  --pi-border-radius:0.3rem;
  --pi-border-color:#007e5e;
  --pi-border-width:1px;
  --pi-color:#495057;
  --pi-bg:transparent;
  --pi-preview-bg:inherit;
  --pi-preview-color:rgba(26,26,46,.25);
  --pi-placeholder-color:#a0a8b4;
  --pi-focus-border-color:#4DA28F;
  --pi-focus-shadow:0 4px 5px rgba(9, 218, 23, 0.15);
  --pi-reject-color:#e53935;
  --pi-transition:box-shadow .18s,border-color .18s;

  position:relative;
  display:inline-block;
  overflow:hidden;
  border-radius:var(--pi-border-radius);
  background:var(--pi-bg);
}

.phone-input{
  width:var(--pi-width);
  padding:var(--pi-padding);
  font-size:var(--pi-font-size);
  text-align:var(--pi-text-align);
  letter-spacing:var(--pi-letter-spacing);
  background:transparent;
  color:var(--pi-color);
  border:var(--pi-border-width) solid var(--pi-border-color);
  border-radius:var(--pi-border-radius);
  box-sizing:border-box;
  outline:none;
  transition:var(--pi-transition);
  position:relative;
  z-index:2;
}
.phone-input:focus{
  box-shadow:var(--pi-focus-shadow);
  border-color:var(--pi-focus-border-color);
}
.phone-input::placeholder{color:var(--pi-placeholder-color)}
.phone-input:focus::placeholder{color:transparent}

.phone-input-preview{
  position:absolute;top:0;left:0;width:100%;height:100%;
  padding:var(--pi-padding);
  font-size:var(--pi-font-size);
  text-align:var(--pi-text-align);
  letter-spacing:var(--pi-letter-spacing);
  color:var(--pi-preview-color);
  background:var(--pi-preview-bg);
  border:var(--pi-border-width) solid transparent;
  border-radius:var(--pi-border-radius);
  z-index:1;pointer-events:none;display:none;
}

.phone-input.phone-input-reject{animation:rejectFlash_phone_input 1s ease-out}
@keyframes rejectFlash_phone_input{
  0%,20%,40%{border-color:var(--pi-reject-color);box-shadow:0 0 12px rgba(229,57,53,.4)}
  10%,30%{border-color:rgba(229,57,53,.3);box-shadow:0 0 6px rgba(229,57,53,.15)}
  60%{border-color:rgba(229,57,53,.1);box-shadow:none}
  100%{border-color:var(--pi-focus-border-color);box-shadow:var(--pi-focus-shadow)}
}


/* ═══════════════════════════════════════════
   EmailInput — clase por defecto: email-input
   ═══════════════════════════════════════════ */
.email-input-wrap{
  --ei-width:100%;
  --ei-padding:5px 10px;
  --ei-font-size:0.9rem;
  --ei-text-align:left;
  --ei-letter-spacing:.5px;
  --ei-border-radius:0.3rem;
  --ei-border-color:#007e5e;
  --ei-border-width:1px;
  --ei-color:#495057;
  --ei-bg:#ffffff;
  --ei-placeholder-color:#a0a8b4;
  --ei-focus-border-color:#4DA28F;
  --ei-focus-shadow:0 4px 5px rgba(9, 218, 23, 0.15);
  --ei-valid-border:#2e7d32;
  --ei-valid-shadow:0 0 8px rgba(46,125,50,.2);
  --ei-invalid-border:#e53935;
  --ei-invalid-shadow:0 0 8px rgba(229,57,53,.2);
  --ei-reject-color:#e53935;
  --ei-transition:box-shadow .18s,border-color .18s;

  position:relative;
  display:inline-block;
}

.email-input{
  width:var(--ei-width);
  padding:var(--ei-padding);
  font-size:var(--ei-font-size);
  text-align:var(--ei-text-align);
  letter-spacing:var(--ei-letter-spacing);
  background:var(--ei-bg);
  color:var(--ei-color);
  border:var(--ei-border-width) solid var(--ei-border-color);
  border-radius:var(--ei-border-radius);
  outline:none;
  transition:var(--ei-transition);
  position:relative;
  z-index:2;
}
.email-input:focus{
  box-shadow:var(--ei-focus-shadow);
  border-color:var(--ei-focus-border-color);
}
.email-input::placeholder{color:var(--ei-placeholder-color)}
.email-input:focus::placeholder{color:transparent}

.email-input.email-input-valid{
  border-color:var(--ei-valid-border);
  box-shadow:var(--ei-valid-shadow);
}
.email-input.email-input-invalid{
  border-color:var(--ei-invalid-border);
  box-shadow:var(--ei-invalid-shadow);
}

.email-input.email-input-reject{animation:rejectFlash_email_input 1s ease-out}
@keyframes rejectFlash_email_input{
  0%,20%,40%{border-color:var(--ei-reject-color);box-shadow:0 0 12px rgba(229,57,53,.4)}
  10%,30%{border-color:rgba(229,57,53,.3);box-shadow:0 0 6px rgba(229,57,53,.15)}
  60%{border-color:rgba(229,57,53,.1);box-shadow:none}
  100%{border-color:var(--ei-focus-border-color);box-shadow:var(--ei-focus-shadow)}
}


/* ═══════════════════════════════════════════
   NumericInput — clase por defecto: numeric-input
   ═══════════════════════════════════════════ */
.numeric-input-wrap{
  --ni-width:100%;
  --ni-padding:5px 10px;
  --ni-font-size:0.9rem;
  --ni-font-family:Consolas,monospace;
  --ni-text-align:left;
  --ni-letter-spacing:.5px;
  --ni-border-radius:0.3rem;
  --ni-border-color:#007e5e;
  --ni-border-width:1px;
  --ni-color:#495057;
  --ni-bg:#ffffff;
  --ni-placeholder-color:#a0a8b4;
  --ni-focus-border-color:#4DA28F;
  --ni-focus-shadow:0 4px 5px rgba(9, 218, 23, 0.15);
  --ni-reject-color:#e53935;
  --ni-transition:box-shadow .18s,border-color .18s;

  position:relative;
  display:inline-block;
}

.numeric-input{
  width:var(--ni-width);
  padding:var(--ni-padding);
  font-size:var(--ni-font-size);
  font-family:var(--ni-font-family);
  text-align:var(--ni-text-align);
  letter-spacing:var(--ni-letter-spacing);
  background:var(--ni-bg);
  color:var(--ni-color);
  border:var(--ni-border-width) solid var(--ni-border-color);
  border-radius:var(--ni-border-radius);
  outline:none;
  transition:var(--ni-transition);
  position:relative;
  z-index:2;
}
.numeric-input:focus{
  box-shadow:var(--ni-focus-shadow);
  border-color:var(--ni-focus-border-color);
}
.numeric-input::placeholder{color:var(--ni-placeholder-color)}
.numeric-input:focus::placeholder{color:transparent}

.numeric-input.numeric-input-reject{animation:rejectFlash_numeric_input 1s ease-out}
@keyframes rejectFlash_numeric_input{
  0%,20%,40%{border-color:var(--ni-reject-color);box-shadow:0 0 12px rgba(229,57,53,.4)}
  10%,30%{border-color:rgba(229,57,53,.3);box-shadow:0 0 6px rgba(229,57,53,.15)}
  60%{border-color:rgba(229,57,53,.1);box-shadow:none}
  100%{border-color:var(--ni-focus-border-color);box-shadow:var(--ni-focus-shadow)}
}


/* ═══════════════════════════════════════════
   AlphaInput — clase por defecto: alpha-input
   ═══════════════════════════════════════════ */
.alpha-input-wrap{
  --ai-width:100%;
  --ai-padding:5px 10px;
  --ai-font-size:0.9rem;
  --ai-font-family:Consolas,monospace;
  --ai-text-align:left;
  --ai-letter-spacing:.5px;
  --ai-border-radius:0.3rem;
  --ai-border-color:#007e5e;
  --ai-border-width:1px;
  --ai-color:#495057;
  --ai-bg:#ffffff;
  --ai-placeholder-color:#a0a8b4;
  --ai-focus-border-color:#4DA28F;
  --ai-focus-shadow:0 4px 5px rgba(9, 218, 23, 0.15);
  --ai-reject-color:#e53935;
  --ai-transition:box-shadow .18s,border-color .18s;

  position:relative;
  display:inline-block;
}

.alpha-input{
  width:var(--ai-width);
  padding:var(--ai-padding);
  font-size:var(--ai-font-size);
  font-family:var(--ai-font-family);
  text-align:var(--ai-text-align);
  letter-spacing:var(--ai-letter-spacing);
  background:var(--ai-bg);
  color:var(--ai-color);
  border:var(--ai-border-width) solid var(--ai-border-color);
  border-radius:var(--ai-border-radius);
  outline:none;
  transition:var(--ai-transition);
  position:relative;
  z-index:2;
}
.alpha-input:focus{
  box-shadow:var(--ai-focus-shadow);
  border-color:var(--ai-focus-border-color);
}
.alpha-input::placeholder{color:var(--ai-placeholder-color)}
.alpha-input:focus::placeholder{color:transparent}

.alpha-input.alpha-input-reject{animation:rejectFlash_alpha_input 1s ease-out}
@keyframes rejectFlash_alpha_input{
  0%,20%,40%{border-color:var(--ai-reject-color);box-shadow:0 0 12px rgba(229,57,53,.4)}
  10%,30%{border-color:rgba(229,57,53,.3);box-shadow:0 0 6px rgba(229,57,53,.15)}
  60%{border-color:rgba(229,57,53,.1);box-shadow:none}
  100%{border-color:var(--ai-focus-border-color);box-shadow:var(--ai-focus-shadow)}
}


/* ═══════════════════════════════════════════
   AddressInput — clase por defecto: address-input
   ═══════════════════════════════════════════ */
.address-input-wrap{
  --adi-width:100%;
  --adi-padding:5px 10px;
  --adi-font-size:0.9rem;
  --adi-font-family:Consolas,monospace;
  --adi-text-align:left;
  --adi-letter-spacing:.5px;
  --adi-border-radius:0.3rem;
  --adi-border-color:#007e5e;
  --adi-border-width:1px;
  --adi-color:#495057;
  --adi-bg:#ffffff;
  --adi-placeholder-color:#a0a8b4;
  --adi-focus-border-color:#4DA28F;
  --adi-focus-shadow:0 4px 5px rgba(9, 218, 23, 0.15);
  --adi-reject-color:#e53935;
  --adi-transition:box-shadow .18s,border-color .18s;

  position:relative;
  display:inline-block;
}

.address-input{
  width:var(--adi-width);
  padding:var(--adi-padding);
  font-size:var(--adi-font-size);
  font-family:var(--adi-font-family);
  text-align:var(--adi-text-align);
  letter-spacing:var(--adi-letter-spacing);
  background:var(--adi-bg);
  color:var(--adi-color);
  border:var(--adi-border-width) solid var(--adi-border-color);
  border-radius:var(--adi-border-radius);
  outline:none;
  transition:var(--adi-transition);
  position:relative;
  z-index:2;
}
.address-input:focus{
  box-shadow:var(--adi-focus-shadow);
  border-color:var(--adi-focus-border-color);
}
.address-input::placeholder{color:var(--adi-placeholder-color)}
.address-input:focus::placeholder{color:transparent}

.address-input.address-input-reject{animation:rejectFlash_address_input 1s ease-out}
@keyframes rejectFlash_address_input{
  0%,20%,40%{border-color:var(--adi-reject-color);box-shadow:0 0 12px rgba(229,57,53,.4)}
  10%,30%{border-color:rgba(229,57,53,.3);box-shadow:0 0 6px rgba(229,57,53,.15)}
  60%{border-color:rgba(229,57,53,.1);box-shadow:none}
  100%{border-color:var(--adi-focus-border-color);box-shadow:var(--adi-focus-shadow)}
}