/* =========================
   Paleta / variables
   ========================= */
:root {
  --vip-yellow: #fbbf24;
  --vip-ring: rgba(251, 191, 36, 0.4);
  --gray-300: #d1d5db;
  --gray-500: #6b7280;
}

/* =========================
   Utilidades suaves
   ========================= */
.transition-vip { transition: all 0.2s ease-in-out; }
.btn-vip-hover:hover { background-color: var(--vip-yellow) !important; transform: scale(1.05); transition: all .2s ease; }
.modal-enter { animation: modalEnter 0.25s ease-out; }
@keyframes modalEnter { from { opacity: 0; transform: scale(.97) } to { opacity: 1; transform: scale(1) } }
.slide-in { animation: slideIn 0.25s ease-out; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: translateY(0) } }
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--vip-yellow); border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #f59e0b; }
.card-vip { border: 1px solid rgba(251,191,36,.15); box-shadow: 0 12px 30px rgba(0,0,0,.06); border-radius: 1rem; }

/* =========================
   Controles base VIP
   ========================= */
.input-vip,
select.input-vip,
textarea.input-vip {
  background-color: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 0.5rem;         /* rounded-lg */
  padding: 0.75rem 1rem;         /* px-4 py-3 */
  transition: box-shadow .2s, border-color .2s;
  outline: none;
  box-shadow: none;
}

/* Focus amarillo unificado */
.input-vip:focus,
.input-vip:focus-visible,
select.input-vip:focus,
select.input-vip:focus-visible,
textarea.input-vip:focus,
textarea.input-vip:focus-visible {
  border-color: var(--vip-yellow);
  box-shadow: 0 0 0 1px var(--vip-ring);
  outline: none;
}

/* Textarea */
textarea.input-vip { resize: vertical; min-height: 2.75rem; }

/* =========================
   Select (sin relieve + flecha)
   ========================= */
select.input-vip {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-clip: padding-box;
  padding-right: 2.5rem; /* espacio para flecha */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'>\
<path d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.24a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08z'/>\
</svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}
select.input-vip::-ms-expand { display: none; }
select.input-vip:-moz-focusring { outline: none; }
@supports (-webkit-touch-callout: none) {
  select.input-vip { background-position: right 0.75rem center; }
}

/* =========================
   Radios / Checkboxes
   ========================= */
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--vip-yellow);
}
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  box-shadow: 0 0 0 1.5px rgba(251, 191, 36, 0.15);
  outline: none;
}
/* Fallback para navegadores sin accent-color */
@supports not (accent-color: red) {
  input[type="radio"]:checked,
  input[type="checkbox"]:checked {
    background-color: var(--vip-yellow);
    border-color: var(--vip-yellow);
  }
}

/* Reset de focus suave */
:where(input, select, textarea):focus { outline: none; }

/* Cámara (no espejo) */
#camera-video { transform: none !important; }

/* ==== INPUT DATE: igualar tamaño con .input-vip ==== */
input[type="date"].input-vip{
  position: relative;
  box-sizing: border-box;
  /* mismo padding que los otros + espacio para el icono nativo */
  padding: 0.75rem 2.5rem 0.75rem 1rem; /* top right bottom left */
  min-height: 48px;                      /* ~py-3 + borde */
  font-size: 0.95rem;
  border-radius: 0.5rem;
}

/* Chrome/Edge/Safari – controla el área editable interna */
input[type="date"].input-vip::-webkit-datetime-edit{
  padding: 0;                 /* quita padding interno que encoge el alto */
  line-height: 1.25rem;
}
input[type="date"].input-vip::-webkit-datetime-edit-fields-wrapper{ padding: 0; }
input[type="date"].input-vip::-webkit-datetime-edit-month-field,
input[type="date"].input-vip::-webkit-datetime-edit-day-field,
input[type="date"].input-vip::-webkit-datetime-edit-year-field{
  padding: 0 2px;             /* microespaciado entre dd/mm/aaaa */
}

/* Icono del calendario nativo: colócalo como si fuera un trailing-icon */
input[type="date"].input-vip::-webkit-calendar-picker-indicator{
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: .7;
  cursor: pointer;
}
input[type="date"].input-vip::-webkit-calendar-picker-indicator:hover{ opacity: 1; }

/* Firefox – usa el tamaño del input si forzamos min-height y padding (ya hecho arriba) */
/* Extra: en Firefox, estos selectores evitan zoom raro del texto */
@-moz-document url-prefix() {
  input[type="date"].input-vip { line-height: 1.25rem; }
}