/* ============================================================
   LONDRES Casa de Novias — estilos complementarios a Tailwind
   ============================================================ */

:root { --brand-red: #C8102E; --brand-gold: #C9A86A; }

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Tipografía base (Plus Jakarta Sans) */
body { font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; }

/* Títulos editoriales (Fraunces) con tamaño óptico automático */
.font-serif, .font-display { letter-spacing: -0.02em; font-optical-sizing: auto; }
.font-display { line-height: 1.0; }
h1, h2 { text-wrap: balance; }

/* Acento elegante: Fraunces en itálica (reemplaza la antigua script) */
.font-script {
  font-family: 'Fraunces', ui-serif, Georgia, serif !important;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
}

.hero-title { font-optical-sizing: auto; }

/* ---- Scrollbar elegante ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d9d4cc; border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #bcb5a8; background-clip: content-box; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Animaciones suaves ---- */
@keyframes lcn-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: lcn-fade-in .35s ease both; }
@keyframes lcn-scale-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.animate-scale-in { animation: lcn-scale-in .2s ease both; }
@keyframes lcn-spin { to { transform: rotate(360deg); } }
.lcn-spinner { width: 1.25rem; height: 1.25rem; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 9999px; animation: lcn-spin .7s linear infinite; }

/* ---- Cabecera pública con velo ---- */
.hero-overlay { background: linear-gradient(180deg, rgba(11,11,12,.55) 0%, rgba(11,11,12,.25) 40%, rgba(11,11,12,.75) 100%); }

/* ---- Línea de recorte de texto multi-línea (fallback) ---- */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Dropzone ---- */
.dropzone.dragover { border-color: var(--brand-red); background: #fef2f2; }

/* ---- Inputs base coherentes (complemento a clases utilitarias) ---- */
.lcn-input { width: 100%; border-radius: .75rem; border: 1px solid #e5e7eb; background: #fff; padding: .625rem .875rem; font-size: .875rem; color: #111827; transition: box-shadow .15s, border-color .15s; }
.lcn-input:focus { outline: none; border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(200,16,46,.12); }
.lcn-input::placeholder { color: #9ca3af; }
.lcn-label { display:block; margin-bottom:.375rem; font-size:.8125rem; font-weight:600; color:#374151; }

/* ============================================================
   IMPRESIÓN (facturas, recibos, contratos)
   ============================================================ */
@media print {
  @page { margin: 14mm; }
  body { background: #fff !important; }
  .no-print, .no-print * { display: none !important; }
  .print-area { box-shadow: none !important; border: none !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; }
  a[href]:after { content: ""; }
}

/* ---- Calendario admin ---- */
.cal-cell { min-height: 96px; }
.cal-event { font-size: .7rem; line-height: 1; }

/* ---- Modo oscuro (panel admin) ---- */
.dark body { background-color: #0f1115; }

/* ---- Sidebar acordeón (Shoplytic-style) ---- */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.acc-chevron { transition: transform .25s ease; }
details[open] > summary .acc-chevron { transform: rotate(180deg); }

/* ---- Botones pill globales del panel ---- */
.btn-pill { border-radius: 9999px; }

/* ---- Revelado al hacer scroll (web pública) ----
   Por defecto el contenido es visible; solo cuando JS activa .js-reveal
   (y hay movimiento permitido) se aplica el estado inicial animable. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}