/* =====================================================================
   TEMA LULÚ — sistema de diseño global
   Quiet luxury · warm minimalism · boutique beauty · editorial
   Se carga DESPUÉS de style.css y de los estilos de cada página.
   Los colores viven acá, como variables: cambiar un valor cambia todo.
   ===================================================================== */

:root {
  /* Paleta base */
  --choc:   #39251D;   /* marrón chocolate profundo */
  --choc-2: #4A3329;
  --vison:  #887365;   /* visón */
  --beige:  #D8C2B1;   /* beige cálido */
  --nude:   #EAD9CD;   /* nude rosado */
  --marfil: #FAF4EE;   /* marfil */
  --champ:  #C9AA8E;   /* champagne */
  --txt-2:  #8A786D;   /* texto secundario */

  /* Superficies y bordes */
  --crema:        #FCF7F1;
  --crema-2:      #F5EBE1;
  --linea:        rgba(57, 37, 29, .10);
  --linea-fuerte: rgba(57, 37, 29, .22);
  --vidrio:       rgba(252, 247, 241, .78);

  /* Sombras cálidas y difusas */
  --sombra-suave: 0 8px 30px rgba(57, 37, 29, .08);
  --sombra-media: 0 14px 44px rgba(57, 37, 29, .12);

  /* Estados funcionales, sobrios */
  --ok:        #6B7F5E;  --ok-fondo:   #E8EDDF;
  --error:     #9C4A40;  --error-fondo:#F3DFDA;
  --aviso:     #A9833F;  --aviso-fondo:#F4EAD3;
  --info:      #7A6354;  --info-fondo: #EFE3D8;

  /* Radios, movimiento */
  --r-sm: 14px; --r-md: 20px; --r-lg: 26px; --r-pill: 999px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Tipografía */
  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sans:  'Inter', 'DM Sans', 'Segoe UI', system-ui, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--choc);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--champ); color: var(--choc); }

/* ---------- Tipografía editorial ---------- */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--choc);
  text-transform: none;
  letter-spacing: .005em;
  line-height: 1.15;
}
h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 600; }
h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
h3 { font-size: 1.3rem; }
p  { color: var(--txt-2); }

/* Etiquetas y subtítulos: mayúsculas pequeñas con aire entre letras */
.form-label, label.form-label {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--txt-2);
}

/* ---------- Botones (píldora) ---------- */
.btn {
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 12px 24px;
  border: 1px solid transparent;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease),
              box-shadow .25s var(--ease), transform .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-sm { padding: 8px 16px; font-size: 10.5px; }
.btn-lg { padding: 15px 32px; font-size: 12px; }

.btn-primary { background: var(--choc); color: var(--marfil); box-shadow: 0 6px 18px rgba(57,37,29,.18); }
.btn-primary:hover { background: var(--choc-2); box-shadow: 0 10px 26px rgba(57,37,29,.24); color: var(--marfil); }

.btn-rosa { background: var(--beige); color: var(--choc); border-color: var(--linea); }
.btn-rosa:hover { background: var(--champ); color: var(--choc); }

.btn-pistacho { background: var(--nude); color: var(--choc); border-color: var(--linea); }
.btn-pistacho:hover { background: var(--beige); color: var(--choc); }

.btn-outline { background: transparent; border: 1px solid var(--linea-fuerte); color: var(--choc); }
.btn-outline:hover { background: var(--nude); border-color: var(--vison); color: var(--choc); }

.btn-danger { background: var(--error); color: var(--marfil); }
.btn-danger:hover { background: #823b33; color: var(--marfil); }

.btn:focus-visible, a:focus-visible, button:focus-visible, .form-control:focus-visible {
  outline: 2px solid var(--champ); outline-offset: 2px;
}
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- Tarjetas ---------- */
.card {
  background: var(--crema);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-suave);
  padding: 24px 28px;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.card:hover { box-shadow: var(--sombra-media); }
.card-header {
  border-bottom: 1px solid var(--linea);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.card-header h2, .card-header h3 { margin: 0; }

/* ---------- Formularios ---------- */
.form-control, select.form-control, textarea.form-control,
.page input[type="text"], .page input[type="number"], .page input[type="email"],
.page input[type="tel"], .page input[type="password"], .page input[type="date"],
.page input[type="time"], .page input[type="search"], .page select, .page textarea,
.modal input[type="text"], .modal input[type="number"], .modal input[type="email"],
.modal input[type="tel"], .modal input[type="password"], .modal input[type="date"],
.modal input[type="time"], .modal select, .modal textarea {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--choc);
  background-color: #F6ECE2;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
/* Relleno con especificidad cero: cualquier regla propia (ej. el ícono de una búsqueda) lo pisa */
:where(.form-control, .page input[type="text"], .page input[type="number"], .page input[type="email"],
  .page input[type="tel"], .page input[type="password"], .page input[type="date"], .page input[type="time"],
  .page input[type="search"], .page select, .page textarea, .modal input[type="text"], .modal input[type="number"],
  .modal input[type="email"], .modal input[type="tel"], .modal input[type="password"], .modal input[type="date"],
  .modal input[type="time"], .modal select, .modal textarea) { padding: 11px 16px; }
.form-control:focus, .page input:focus, .page select:focus, .page textarea:focus,
.modal input:focus, .modal select:focus, .modal textarea:focus {
  outline: none;
  background-color: #FBF5EE;
  border-color: var(--champ);
  box-shadow: 0 0 0 4px rgba(201, 170, 142, .28);
}
::placeholder { color: #A8968A; opacity: 1; }

/* Desplegables personalizados */
select.form-control, .page select, .modal select {
  -webkit-appearance: none; appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2339251D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--choc); }

/* ---------- Tablas: legibles y prácticas ---------- */
.table-container { border-radius: var(--r-md); border: 1px solid var(--linea); background: var(--crema); }
thead tr { background: var(--nude); }
thead th {
  color: var(--choc);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 13px 16px;
  border-bottom: 1px solid var(--linea-fuerte);
}
tbody tr { border-bottom: 1px solid var(--linea); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: rgba(234, 217, 205, .45); }
tbody td { color: var(--choc); }

/* ---------- Insignias ---------- */
.badge { border-radius: var(--r-pill); font-weight: 600; letter-spacing: .06em; padding: 4px 12px; }
.badge-rosa     { background: var(--beige);  color: var(--choc); }
.badge-pistacho { background: var(--nude);   color: var(--choc); }
.badge-rojo     { background: var(--error-fondo); color: var(--error); }
.badge-verde    { background: var(--ok-fondo);    color: var(--ok); }
.badge-amarillo { background: var(--aviso-fondo); color: var(--aviso); }
.badge-gris     { background: var(--crema-2);     color: var(--txt-2); }

/* ---------- Modales ---------- */
.modal-overlay {
  background: rgba(57, 37, 29, .46);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal {
  background: var(--crema);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(57, 37, 29, .28);
  animation: modalIn .35s var(--ease);
}
.modal-header {
  background: transparent;
  border-bottom: 1px solid var(--linea);
  padding: 22px 28px 16px;
}
.modal-header h2 { font-size: 1.55rem; }
.modal-body { padding: 24px 28px; }
.modal-footer { border-top: 1px solid var(--linea); padding: 16px 28px; }
.btn-close { color: var(--vison); border-radius: var(--r-pill); width: 34px; height: 34px; transition: background .2s, color .2s; }
.btn-close:hover { background: var(--nude); color: var(--choc); }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- Avisos (toasts) ---------- */
.toast {
  border-radius: var(--r-md);
  font-weight: 500;
  letter-spacing: .01em;
  box-shadow: 0 14px 40px rgba(57, 37, 29, .22);
  animation: toastIn .4s var(--ease);
  color: var(--marfil);
}
.toast-success { background: var(--ok); }
.toast-error   { background: var(--error); }
.toast-info    { background: var(--choc); }
.toast-warning { background: var(--champ); color: var(--choc); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px) translateX(18px); } to { opacity: 1; transform: none; } }

/* ---------- Estados vacíos y carga ---------- */
.empty-state p { color: var(--txt-2); }
.spinner, .loader { border-color: var(--nude); border-top-color: var(--choc); }

/* ---------- Barras de desplazamiento discretas ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--beige) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--beige); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* Respetar a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Logotipo (versión horizontal, sin recorte circular) ---------- */
img[src*="logo"][src$=".svg"] { object-fit: contain; }