/* ============================================================
   SubGrid Pro — estilos base
   ============================================================ */

/* Scrollbar sutil */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 20px; }

/* Ocultar spinners en inputs numéricos */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* Iconify inline */
.iconify { display: inline-block; vertical-align: middle; }

/* Tab panels */
.tab-panel { animation: sgFadeIn .25s ease-out; }

@keyframes sgFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Clases reutilizables de formularios
   (Tailwind no admite clases en @apply desde CDN en todos los entornos,
    así que las definimos como utilidades CSS normales) */
.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.form-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}

.form-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
  background: #fff;
}

.form-input::placeholder { color: #cbd5e1; font-weight: 500; }

/* Select arrow */
select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='m7 10l5 5l5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

/* Modal backdrop transition */
.modal-backdrop { transition: opacity .28s ease; }

/* Safe area para notch en iOS */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }

/* Animación entrada modal */
.modal-inner {
  transition: transform .3s cubic-bezier(.32,.72,0,1), opacity .28s ease, scale .28s ease;
}

/* Link sin subrayado para botones WhatsApp */
a.no-underline { text-decoration: none; }