/* ==========================================================================
   LENTE — sistema compartido para admin, portales de mantenimiento y blog.
   Mismos tokens que la web y las propuestas.
   ========================================================================== */

@font-face {
  font-family: 'Neue Haas Display';
  src: url('/assets/fonts/neue-haas-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Display';
  src: url('/assets/fonts/neue-haas-350.woff2') format('woff2');
  font-weight: 350; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Display';
  src: url('/assets/fonts/neue-haas-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --navy: #071E3D;
  --navy-deep: #051630;
  --blue-mid: #1B3A63;
  --blue-soft: #96B7E1;
  --white: #FFFFFF;
  --ink-85: rgba(255,255,255,0.85);
  --ink-72: rgba(255,255,255,0.72);
  --ink-60: rgba(255,255,255,0.6);
  --ink-40: rgba(255,255,255,0.4);
  --ink-20: rgba(255,255,255,0.2);
  --ink-10: rgba(255,255,255,0.1);
  --surface: rgba(255,255,255,0.055);
  --surface-2: rgba(255,255,255,0.085);
  --surface-blue: rgba(150,183,225,0.1);
  --ok: #96B7E1;
  --warn: #E7D29B;
  --bad: #F1A9A9;
  --font-display: 'Neue Haas Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --tracking-tight: -0.03em;
  --tracking-text: -0.012em;
  --tracking-label: 0.02em;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --radius: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: 96px; }

body {
  font-family: var(--font-display);
  font-weight: 350;
  background: var(--navy);
  color: var(--white);
  overflow-x: hidden;
  letter-spacing: var(--tracking-text);
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3, .tight { letter-spacing: var(--tracking-tight); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; letter-spacing: inherit; color: inherit; }
button { border: none; background: none; cursor: pointer; }
::selection { background: var(--blue-soft); color: var(--navy); }
:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 3px; border-radius: 6px; }

/* Fondo líquido + grano */
.bg-gradient { position: fixed; inset: 0; z-index: -3; background: var(--navy); overflow: hidden; }
.bg-gradient::before, .bg-gradient::after {
  content: ''; position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 60% 50% at 22% 18%, rgba(150,183,225,0.42) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 78% 8%, rgba(96,130,180,0.34) 0%, transparent 58%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(27,58,99,0.6) 0%, transparent 62%);
}
.bg-gradient::before { animation: liquidDriftA 34s ease-in-out infinite alternate; }
.bg-gradient::after { opacity: 0.7; animation: liquidDriftB 26s ease-in-out infinite alternate; }
.bg-gradient--calm::before, .bg-gradient--calm::after { opacity: 0.55; }
@keyframes liquidDriftA { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(3%,2%) scale(1.04); } 100% { transform: translate(-2%,3%) scale(1.02); } }
@keyframes liquidDriftB { 0% { transform: translate(0,0) scale(1.02); } 50% { transform: translate(-3%,-2%) scale(1); } 100% { transform: translate(2%,-3%) scale(1.05); } }
.bg-grain {
  position: fixed; inset: 0; z-index: -2; opacity: 0.045; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
@media (prefers-reduced-motion: reduce) {
  .bg-gradient::before, .bg-gradient::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* Layout */
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 760px; }

/* Barra superior */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 0.98rem; font-weight: 400; color: var(--white); }
.brand svg { width: 19px; height: auto; display: block; }
.brand-sub { color: var(--ink-40); font-weight: 300; }
.topbar-links { display: flex; align-items: center; gap: 6px; }
.topbar-link {
  padding: 9px 14px; border-radius: 999px; font-size: 0.86rem; font-weight: 300; color: var(--ink-60);
  transition: color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.topbar-link:hover { color: var(--white); background: var(--surface); }
.topbar-link--active { color: var(--white); background: var(--surface); }

/* Eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px;
  background: rgba(255,255,255,0.06); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--ink-20); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
  font-weight: 300; font-size: 0.8rem; letter-spacing: -0.01em; color: var(--blue-soft);
  width: fit-content;
}

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: 999px; white-space: nowrap;
  font-size: 0.92rem; font-weight: 400; letter-spacing: -0.015em;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.btn--solid { background: var(--white); color: var(--navy); }
.btn--solid:hover { background: var(--blue-soft); }
.btn--soft { background: var(--surface-2); color: var(--white); }
.btn--soft:hover { background: rgba(255,255,255,0.13); }
.btn--blue { background: var(--blue-soft); color: var(--navy); }
.btn--blue:hover { background: var(--white); }
.btn--sm { height: 36px; padding: 0 15px; font-size: 0.84rem; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* Superficies (rellenas, sin contorno) */
.surface {
  background: var(--surface); border-radius: var(--radius);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}
.surface--blue { background: var(--surface-blue); }

/* Etiquetas de estado */
.tag {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 400; letter-spacing: -0.005em; white-space: nowrap;
  background: rgba(255,255,255,0.08); color: var(--ink-85);
}
.tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.tag--plain::before { display: none; }
.tag--al-dia, .tag--aceptada { background: rgba(150,183,225,0.16); color: var(--ok); }
.tag--proximo, .tag--enviada { background: rgba(255,255,255,0.1); color: var(--white); }
.tag--pendiente { background: rgba(231,210,155,0.14); color: var(--warn); }
.tag--vencido, .tag--rechazada { background: rgba(241,169,169,0.14); color: var(--bad); }
.tag--borrador { background: rgba(255,255,255,0.06); color: var(--ink-40); }

/* Reveal con desenfoque */
.reveal {
  opacity: 0; filter: blur(12px); transform: translateY(14px);
  transition: opacity 0.8s var(--ease-out), filter 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.is-visible { opacity: 1; filter: blur(0); transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; filter: none; transform: none; transition: none; }
}

/* Pie compartido */
.site-foot { padding: 56px 0 44px; }
.site-foot-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 0.8rem; font-weight: 300; color: var(--ink-40);
}
.site-foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.site-foot a { transition: color 0.25s var(--ease-out); }
.site-foot a:hover { color: var(--white); }

/* Utilidades */
.muted { color: var(--ink-60); }
.faint { color: var(--ink-40); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .topbar { padding: 18px 0; }
  .topbar-link { padding: 8px 11px; font-size: 0.82rem; }
}