/* HogarNovo — estilos base: tokens, tipografía, formularios y componentes comunes. */

/* ══ TOKENS ══ */
:root {
  /* Marca — valores medidos del logo, no inventados */
  --navy:        #18243C;
  --navy-800:    #223351;
  --navy-600:    #3A4E70;
  --teal:        #009C90;
  --teal-600:    #00857B;
  --teal-100:    #E0F5F2;
  --coral:       #FC3C54;
  --coral-600:   #E02742;

  /* Neutros cálidos: el blanco puro sobre fotos cansa la vista */
  --paper:       #FDFCFA;
  --sand-50:     #F7F4EF;
  --sand-100:    #EFEAE1;
  --sand-200:    #DFD8CC;
  --ink:         #1A2333;
  --ink-soft:    #55637A;
  /* Medido: el #8A94A6 anterior daba 2.79 de contraste sobre --sand-50,
     cuando el mínimo legible es 4.5. Las etiquetas, los pies y los
     rangos de los deslizadores eran ilegibles. Este da 4.89. */
  --ink-faint:   #606B80;

  --ok:          #0E9F6E;
  --warn:        #C97A08;
  --bad:         #D4183D;

  --radius:      14px;
  --radius-sm:   9px;
  --radius-lg:   22px;

  --shadow-sm:   0 1px 2px rgba(24,36,60,.06), 0 2px 8px rgba(24,36,60,.05);
  --shadow:      0 4px 12px rgba(24,36,60,.08), 0 12px 32px rgba(24,36,60,.07);
  --shadow-lg:   0 12px 28px rgba(24,36,60,.13), 0 28px 64px rgba(24,36,60,.11);

  --ease:        cubic-bezier(.22,.61,.36,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);

  --maxw:        1240px;
  --gut:         clamp(1.15rem, 4vw, 2.6rem);

  --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-head:   'Fraunces', Georgia, 'Times New Roman', serif;

  /* ── Escala tipográfica ──────────────────────────────────────
     7 escalones, y solo estos. Antes había 59 valores sueltos
     (.84 / .85 / .86 / .87 / .88rem conviviendo): diferencias que
     nadie distingue pero que impiden que dos pantallas se parezcan.
     Cada escalón salta lo bastante como para leerse como jerarquía.

     fs-00  etiquetas en versalita, metadatos
     fs-0   texto auxiliar, pies, sublíneas
     fs-1   cuerpo pequeño: tablas, formularios, botones
     fs-2   cuerpo de lectura
     fs-3   título de tarjeta o bloque
     fs-4   título de sección
     fs-5   cifra grande y título de página            */
  --fs-00:       .75rem;
  --fs-0:        .84rem;
  --fs-1:        .92rem;
  --fs-2:        1rem;
  --fs-3:        1.15rem;
  --fs-4:        1.4rem;
  --fs-5:        1.75rem;
}

/* ══ RESET ══ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  /* 16px base: escala contenida, de aplicación, no de póster. */
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Red de seguridad: un solo bloque más ancho que la pantalla arrastra
     la página entera hacia los lados en móvil. */
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.018em;
  color: var(--navy);
  margin: 0 0 .5em;
  /* Sin numeración ni guiones decorativos antes del texto: los encabezados
     dicen lo que dicen. */
}
h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.25rem); }
p  { margin: 0 0 1.1em; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.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;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 10px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ══ NAV ══ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; gap: 1.2rem;
  padding: .85rem var(--gut);
  transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
}
.nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(9,15,26,.62), rgba(9,15,26,0));
  transition: opacity .35s var(--ease);
}
.nav.is-stuck {
  background: rgba(253,252,250,.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--shadow-sm);
  padding-block: .55rem;
}
.nav.is-stuck::before { opacity: 0; }

.nav-logo { display: flex; align-items: center; margin-right: auto; }
.nav-logo img { height: 42px; width: auto; transition: height .35s var(--ease), filter .35s var(--ease); }
/* Sobre las fotos oscuras del hero el logo navy no se ve: se invierte */
.nav:not(.is-stuck) .nav-logo img { filter: brightness(0) invert(1); }
.nav.is-stuck .nav-logo img { height: 36px; }

.nav-links { display: flex; align-items: center; gap: .35rem; }
.nav-links a {
  color: rgba(255,255,255,.94); font-size: var(--fs-1); font-weight: 500;
  padding: .5rem .82rem; border-radius: 999px; text-decoration: none;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.nav-links a:hover { background: rgba(255,255,255,.16); text-decoration: none; }
.nav.is-stuck .nav-links a { color: var(--ink-soft); }
.nav.is-stuck .nav-links a:hover { background: var(--sand-100); color: var(--navy); }

.nav-cta {
  background: var(--teal) !important; color: #fff !important;
  padding: .62rem 1.25rem !important; font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(0,156,144,.36);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease) !important;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,156,144,.46); }

.nav-burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px; border-radius: 10px;
}
.nav-burger span {
  display: block; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-burger span + span { margin-top: 6px; }
.nav.is-stuck .nav-burger span { background: var(--navy); }

@media (max-width: 860px) {
  .nav-burger { display: block; }
  .nav-links {
    position: fixed; inset: 0 0 auto 0; top: 0; padding: 5.2rem 1.4rem 1.6rem;
    flex-direction: column; align-items: stretch; gap: .2rem;
    background: var(--paper); box-shadow: var(--shadow-lg);
    transform: translateY(-102%); transition: transform .38s var(--ease-out);
  }
  .nav-links.is-open { transform: translateY(0); }
  .nav-links a { color: var(--navy) !important; padding: .9rem 1rem; border-radius: 10px; font-size: var(--fs-2); }
  .nav-cta { text-align: center; margin-top: .5rem; }
}

/* ══ HERO + SLIDESHOW ══ */
.hero {
  position: relative;
  min-height: min(94svh, 860px);
  display: grid; place-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* Fondo navy detrás: si una foto tarda en cargar se ve la marca,
   no un hueco blanco. */
.slides { position: absolute; inset: 0; z-index: -2; background: var(--navy); }
.slide {
  position: absolute; inset: 0;
  opacity: 0;
  background-size: cover;
  background-position: center;
  /* Cross-fade largo: el corte seco se nota barato */
  transition: opacity 1.5s var(--ease);
  will-change: opacity;
}
/* Sin zoom Ken Burns: escalar la imagen la degradaba visiblemente.
   El cross-fade solo ya da el movimiento, y la foto se mantiene nítida. */
.slide.is-on { opacity: 1; }

/* Velo doble: uno vertical para la nav, otro diagonal para el texto.
   Sin esto el texto blanco es ilegible sobre cielos claros. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,17,30,.58) 0%, rgba(10,17,30,.15) 34%, rgba(10,17,30,.22) 62%, rgba(10,17,30,.72) 100%),
    linear-gradient(105deg, rgba(24,36,60,.62) 0%, rgba(24,36,60,.24) 46%, rgba(24,36,60,0) 74%);
}

.hero-inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: 7rem var(--gut) 9.5rem;
  text-align: left;
}
/* Sin píldora "eyebrow" sobre el titular: ese patrón (badge con puntito
   parpadeante encima del h1) sale en todas las landing genéricas. El hero
   arranca en el titular. */
/* El hero SÍ va grande: es la portada, ahí el texto de tamaño manda.
   Tamaño propio, independiente de la escala contenida del resto del sitio. */
.hero h1 {
  color: #fff; max-width: 15ch; margin-bottom: .6rem;
  font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1.05;
  text-shadow: 0 2px 26px rgba(9,15,26,.42);
}
.hero h1 em { font-style: normal; color: #6FE3D4; }
.hero-sub {
  color: rgba(255,255,255,.93); font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  max-width: 46ch; margin-bottom: 2rem; text-shadow: 0 1px 16px rgba(9,15,26,.5);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Reveal escalonado del contenido del hero */
.hero-inner > * { animation: rise .85s var(--ease-out) backwards; }
.hero-inner > *:nth-child(1) { animation-delay: .08s; }
.hero-inner > *:nth-child(2) { animation-delay: .2s; }
.hero-inner > *:nth-child(3) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Controles del slideshow */
.slide-dots {
  position: absolute; left: var(--gut); bottom: 6.4rem; z-index: 3;
  display: flex; gap: .5rem;
}
/* La barra visible mide 4px, pero el botón ocupa 44px de alto con
   padding transparente: el dedo necesita área, el ojo no. */
.slide-dots button {
  width: 34px; height: 44px; border: 0; padding: 20px 0; cursor: pointer;
  background: transparent; -webkit-tap-highlight-color: transparent;
}
.slide-dots button::before {
  content: ''; display: block; height: 4px; width: 100%;
  border-radius: 99px; background: rgba(255,255,255,.36);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.slide-dots button:hover::before { background: rgba(255,255,255,.6); }
.slide-dots button[aria-current="true"]::before {
  background: var(--teal); transform: scaleX(1.5); transform-origin: left;
}

.slide-pause {
  position: absolute; right: var(--gut); bottom: 6.4rem; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.34);
  background: rgba(10,17,30,.34); color: #fff;
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  display: grid; place-items: center; font-size: var(--fs-1);
  transition: background .22s var(--ease);
}
.slide-pause:hover { background: rgba(10,17,30,.56); }

@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
  .hero-inner > * { animation: none; }
}

/* En móvil los controles suben: abajo queda el buscador flotante */
@media (max-width: 820px) {
  .hero { min-height: min(88svh, 680px); }
  .hero-inner { padding: 6rem var(--gut) 7rem; }
  .slide-dots, .slide-pause { bottom: 3.6rem; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
}
/* Pantallas muy cortas (móvil apaisado): el hero no debe comerse la página */
@media (max-height: 560px) {
  .hero { min-height: 520px; }
  .slide-dots, .slide-pause { display: none; }
}

/* En táctil el hover no existe: los efectos de elevación solo se aplican
   donde el puntero es fino. Sin esto, el móvil se queda con estados
   "pegados" tras cada toque. */
@media (hover: none) {
  .pcard:hover { transform: none; box-shadow: var(--shadow-sm); }
  .pcard:hover .pcard-media img { transform: none; }
  .step:hover { transform: none; }
  .btn:hover { transform: none; }
  .nav-cta:hover { transform: none; }
}

/* ══ BUSCADOR FLOTANTE (monta sobre el hero) ══ */
.searchbar {
  position: relative; z-index: 5;
  margin: -5.4rem auto 0;
  max-width: 1080px;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.15rem;
}
.searchbar form { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: .7rem; align-items: end; }
.sf label { display: block; font-size: var(--fs-00); font-weight: 700; letter-spacing: .07em;
            text-transform: uppercase; color: var(--ink-faint); margin-bottom: .3rem; }
.sf input, .sf select {
  width: 100%; font: inherit; font-size: var(--fs-1); color: var(--ink);
  padding: .72rem .85rem; border: 1.5px solid var(--sand-200);
  border-radius: var(--radius-sm); background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.sf input:focus, .sf select:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-100);
}
@media (max-width: 820px) {
  .searchbar { margin-top: -2.6rem; }
  .searchbar form { grid-template-columns: 1fr 1fr; }
  .sf-wide { grid-column: 1 / -1; }
  .searchbar .btn { grid-column: 1 / -1; justify-content: center; }
}

/* ══ BOTONES ══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: var(--fs-1); font-weight: 600; line-height: 1;
  padding: .92rem 1.6rem; border-radius: var(--radius-sm);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .2s var(--ease-out), box-shadow .22s var(--ease),
              background .22s var(--ease), color .22s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--teal); color: #fff; box-shadow: 0 4px 16px rgba(0,156,144,.34); }
.btn-primary:hover { background: var(--teal-600); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,156,144,.44); }

.btn-coral { background: var(--coral); color: #fff; box-shadow: 0 4px 16px rgba(252,60,84,.32); }
.btn-coral:hover { background: var(--coral-600); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(252,60,84,.42); }

.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.45);
             backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.btn-ghost:hover { background: rgba(255,255,255,.24); transform: translateY(-2px); }

.btn-outline { background: transparent; color: var(--navy); border-color: var(--sand-200); }
.btn-outline:hover { border-color: var(--teal); color: var(--teal-600); background: var(--teal-100); }

/* ══ SECCIONES ══ */
.section { padding: clamp(3.6rem, 8vw, 6.4rem) 0; }
.section-sand { background: var(--sand-50); }
.section-head { max-width: 62ch; margin-bottom: 2.6rem; }
.section-head p { color: var(--ink-soft); font-size: var(--fs-2); margin: 0; }
.section-head.center { margin-inline: auto; text-align: center; }

/* ══ TARJETAS DE PROPIEDAD ══ */
.grid-props {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.pcard {
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid var(--sand-100);
  display: flex; flex-direction: column;
  transition: transform .32s var(--ease-out), box-shadow .32s var(--ease), border-color .32s var(--ease);
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }

.pcard-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand-100); }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.pcard:hover .pcard-media img { transform: scale(1.07); }

.pcard-tag {
  position: absolute; top: .8rem; left: .8rem;
  font-size: var(--fs-00); font-weight: 700; letter-spacing: .045em; text-transform: uppercase;
  color: #fff; padding: .34rem .72rem; border-radius: 999px;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.tag-venta    { background: rgba(0,156,144,.94); }
.tag-alquiler { background: rgba(252,60,84,.94); }

.pcard-fav {
  position: absolute; top: .55rem; right: .55rem;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--ink-soft); font-size: var(--fs-2);
  display: grid; place-items: center;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease-out);
}
.pcard-fav:hover { background: #fff; color: var(--coral); transform: scale(1.12); }

.pcard-body { padding: 1.15rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.pcard-price { font-family: var(--font-head); font-size: var(--fs-4); font-weight: 600; color: var(--navy); line-height: 1; }
.pcard-price small { font-family: var(--font); font-size: var(--fs-00); font-weight: 500; color: var(--ink-faint); }
.pcard-title { font-size: var(--fs-2); font-weight: 600; color: var(--ink); margin: .5rem 0 .2rem; line-height: 1.35; }
.pcard-loc { font-size: var(--fs-0); color: var(--ink-faint); margin: 0 0 .9rem; }
.pcard-specs {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-top: auto;
  padding-top: .85rem; border-top: 1px solid var(--sand-100);
  font-size: var(--fs-0); color: var(--ink-soft);
}
.pcard-specs span { display: inline-flex; align-items: center; gap: .32rem; }
.pcard-specs b { font-weight: 700; color: var(--ink); }

/* ══ PASOS / CÓMO FUNCIONA ══ */
.steps { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.step {
  background: #fff; border-radius: var(--radius); padding: 1.7rem 1.5rem;
  border: 1px solid var(--sand-100); box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step-ico {
  width: 50px; height: 50px; border-radius: 14px; margin-bottom: 1rem;
  display: grid; place-items: center; font-size: var(--fs-4);
  background: var(--teal-100); color: var(--teal-600);
}
.step h3 { margin-bottom: .35rem; font-size: var(--fs-3); }
.step p { color: var(--ink-soft); font-size: var(--fs-1); margin: 0; }

/* ══ FRANJA CTA ══ */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(125deg, var(--navy) 0%, var(--navy-800) 52%, var(--teal-600) 168%);
  color: #fff; border-radius: var(--radius-lg);
  padding: clamp(2.4rem, 5vw, 3.8rem);
  display: grid; gap: 1.8rem; align-items: center;
  grid-template-columns: 1fr auto;
}
.cta-band::after {
  content: ''; position: absolute; right: -80px; top: -80px;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,156,144,.42), transparent 68%);
}
.cta-band h2 { color: #fff; margin-bottom: .4rem; }
.cta-band p { color: rgba(255,255,255,.85); margin: 0; max-width: 52ch; }
.cta-band .btn { position: relative; z-index: 1; }
@media (max-width: 760px) { .cta-band { grid-template-columns: 1fr; } }

/* ══ FOOTER ══ */
.site-foot { background: var(--navy); color: rgba(255,255,255,.72); padding: 3.4rem 0 1.8rem; margin-top: 0; }
.foot-grid { display: grid; gap: 2.2rem; grid-template-columns: 1.6fr 1fr 1fr 1fr; margin-bottom: 2.4rem; }
@media (max-width: 780px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-logo { height: 40px; width: auto; filter: brightness(0) invert(1); margin-bottom: .9rem; }
.site-foot h4 { color: #fff; font-family: var(--font); font-size: var(--fs-0); font-weight: 700;
                letter-spacing: .09em; text-transform: uppercase; margin-bottom: .9rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .5rem; }
.site-foot a { color: rgba(255,255,255,.72); font-size: var(--fs-1); }
.site-foot a:hover { color: #fff; }
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,.13); padding-top: 1.5rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: var(--fs-0);
}

/* ══ REVEAL ON SCROLL ══ */
/* Solo se oculta si JS está vivo: sin JS todo se ve igual. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ══ FORMULARIOS Y AVISOS (compartido con las páginas de la app) ══ */
.auth-page { min-height: 100svh; display: grid; place-items: center; padding: 2rem var(--gut); background: var(--sand-50); }
.auth-panel { width: 100%; max-width: 460px; background: #fff; border-radius: var(--radius-lg);
              box-shadow: var(--shadow); padding: clamp(1.8rem, 4vw, 2.6rem); }
.auth-brand { font-family: var(--font-head); font-size: var(--fs-4); font-weight: 600; color: var(--navy);
              display: block; margin-bottom: 1.3rem; text-decoration: none; }
.auth-title { font-size: var(--fs-5); margin-bottom: .3rem; }
.auth-sub { color: var(--ink-soft); font-size: var(--fs-1); }
.auth-alt { font-size: var(--fs-1); color: var(--ink-soft); text-align: center; margin: 1rem 0 0; }

.field { margin-bottom: 1.05rem; }
.field label { display: block; font-size: var(--fs-0); font-weight: 600; color: var(--navy); margin-bottom: .34rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: var(--fs-1); color: var(--ink);
  padding: .74rem .88rem; border: 1.5px solid var(--sand-200);
  border-radius: var(--radius-sm); background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-100);
}
.field small { display: block; font-size: var(--fs-0); color: var(--ink-faint); margin-top: .3rem; }
.field textarea { resize: vertical; min-height: 120px; }
.row { display: grid; gap: .9rem; grid-template-columns: 1fr 1fr; }
.row-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 620px) { .row, .row-4 { grid-template-columns: 1fr 1fr; } }

.check { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-0);
         color: var(--ink-soft); margin-bottom: 1.1rem; }
.check input { margin-top: .22rem; flex-shrink: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: .85rem 1.05rem; border-radius: var(--radius-sm); font-size: var(--fs-1);
         margin-bottom: 1.05rem; border-left: 4px solid; }
.alert-error { background: #FEF2F4; color: #8E1128; border-color: var(--bad); }
.alert-ok    { background: #ECFDF5; color: #05614A; border-color: var(--ok); }
.alert-info  { background: var(--teal-100); color: #04635C; border-color: var(--teal); }

.page-narrow { max-width: 800px; margin-inline: auto; padding: 6rem var(--gut) 4rem; }
.page-wide   { max-width: var(--maxw); margin-inline: auto; padding: 6rem var(--gut) 4rem; }
.empty { color: var(--ink-faint); padding: 2.4rem 0; text-align: center; }
.quota { color: var(--ink-soft); font-size: var(--fs-1); }

.tag { display: inline-block; font-size: var(--fs-00); font-weight: 700; padding: .22rem .6rem;
       border-radius: 999px; background: var(--sand-100); color: var(--ink-soft); }
.tag-ok   { background: #D9F7EC; color: #05614A; }
.tag-wait { background: #FEF3D7; color: #8A5A04; }
.tag-bad  { background: #FEE4E9; color: #8E1128; }

/* ============================================================
   PANEL DE CONTROL
   Herramienta de trabajo, no escaparate: densidad alta, jerarquía
   por peso y color, cero decoración. Reutiliza los tokens de marca.
   ============================================================ */

.dash-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy); color: #fff;
  box-shadow: var(--shadow-sm);
}
.dash-bar-in {
  max-width: var(--maxw); margin-inline: auto;
  padding: .75rem var(--gut);
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
}
.dash-logo {
  font-family: var(--font-head); font-size: var(--fs-3); font-weight: 600;
  color: #fff; text-decoration: none; flex-shrink: 0;
}
.dash-nav { display: flex; gap: .3rem; flex: 1; flex-wrap: wrap; }
.dash-nav a {
  color: rgba(255,255,255,.72); text-decoration: none;
  font-size: var(--fs-1); font-weight: 500;
  padding: .5rem .85rem; border-radius: var(--radius-sm);
  transition: background .18s var(--ease), color .18s var(--ease);
  min-height: 44px; display: inline-flex; align-items: center;
}
.dash-nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.dash-nav a.on { background: var(--teal); color: #fff; }
.dash-user { display: flex; align-items: center; gap: .8rem; font-size: var(--fs-0); color: rgba(255,255,255,.72); }
.dash-out {
  color: #fff; text-decoration: none; font-weight: 600; font-size: var(--fs-0);
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-sm);
  padding: .45rem .8rem; min-height: 44px; display: inline-flex; align-items: center;
}
.dash-out:hover { background: rgba(255,255,255,.12); }

/* El panel arranca bajo la barra: no necesita el aire de una página pública */
.dash-main { padding-top: 2.4rem; }
.dash-hello { color: var(--ink-soft); font-size: var(--fs-1); margin: -.4rem 0 1.6rem; }

.dash-grid {
  display: grid; gap: .85rem; margin-bottom: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.dash-card {
  position: relative;
  display: flex; flex-direction: column; gap: .2rem;
  background: #fff; border: 1px solid var(--sand-200);
  border-radius: var(--radius); padding: 1.05rem 1.15rem 1rem;
  text-decoration: none; color: inherit; overflow: hidden;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease);
}
/* Filo superior de color: la firma del logo (techo navy, pared teal,
   cuña coral) llevada a la tarjeta. Cada grupo tiene su tinte, así el
   panel deja de ser blanco-sobre-blanco genérico. */
.dash-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--teal); opacity: .9;
  transition: height .2s var(--ease);
}
.dash-block:nth-of-type(1) .dash-card::before { background: var(--teal); }
.dash-block:nth-of-type(2) .dash-card::before { background: var(--navy-600); }
.dash-block:nth-of-type(3) .dash-card::before { background: var(--coral); }
a.dash-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--sand-200); }
a.dash-card:hover::before { height: 5px; }
.dash-card-flat { cursor: default; }
.dash-num {
  font-family: var(--font); font-size: var(--fs-5); font-weight: 700;
  color: var(--navy); line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.dash-lbl { font-size: var(--fs-0); font-weight: 600; color: var(--ink); }
.dash-sub { font-size: var(--fs-00); color: var(--ink-faint); }
/* Lo que exige acción del operador: número en coral y filo grueso */
.dash-card.is-live::before { height: 5px; background: var(--coral); }
.dash-card.is-live .dash-num { color: var(--coral); }
.dash-card.is-warn::before { background: var(--warn); }
.dash-card.is-warn .dash-num { color: var(--warn); }

.dash-sec { margin-bottom: 2.6rem; }
.dash-sec h2 { font-size: var(--fs-3); margin-bottom: .9rem; }

.dash-search { display: flex; gap: .5rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.dash-search input[type="search"] {
  flex: 1; min-width: 220px; min-height: 44px;
  padding: .6rem .9rem; font: inherit; font-size: var(--fs-1);
  border: 1px solid var(--sand-200); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink);
}
.dash-search input[type="search"]:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-100);
}

/* ── Pestañas de filtro ── */
.tabs {
  display: flex; gap: .35rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--sand-200);
  margin-bottom: 1.6rem;
}
.tabs a {
  padding: .65rem 1rem; text-decoration: none;
  font-size: var(--fs-1); font-weight: 600; color: var(--ink-soft);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  min-height: 44px; display: inline-flex; align-items: center;
}
.tabs a:hover { color: var(--navy); }
.tabs a.on { color: var(--teal-600); border-bottom-color: var(--teal); }

/* ── Botones de acción del panel ── */
.btn-ok, .btn-warn, .btn-danger, .btn-soft {
  font: inherit; font-size: var(--fs-0); font-weight: 600;
  padding: .55rem 1rem; min-height: 44px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: filter .18s var(--ease), background .18s var(--ease);
}
.btn-ok     { background: var(--ok);    color: #fff; }
.btn-warn   { background: var(--warn);  color: #fff; }
.btn-soft   { background: var(--sand-100); color: var(--navy); border-color: var(--sand-200); }

/* Lo destructivo pesa MENOS que lo habitual, no igual: un "Borrar" tan
   sólido como "Buscar" invita al clic en vez de hacer pensar. Va en
   contorno; el rojo pleno se reserva para el hover, ya con intención. */
.btn-danger {
  background: transparent; color: var(--bad); border-color: var(--bad);
}
.btn-danger:hover { background: var(--bad); color: #fff; }

.btn-ok:hover, .btn-warn:hover { filter: brightness(1.08); }
.btn-soft:hover { background: var(--sand-200); }

/* ── Ficha de moderación / reportes ── */
.mod-item {
  display: grid; grid-template-columns: 200px 1fr; gap: 1.3rem;
  background: #fff; border: 1px solid var(--sand-200);
  border-radius: var(--radius); padding: 1.2rem;
  margin-bottom: 1.15rem;
}
@media (max-width: 720px) { .mod-item { grid-template-columns: 1fr; } }

.mod-thumb {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-sm); background: var(--sand-100);
}
.mod-thumb-empty {
  display: grid; place-items: center;
  color: var(--ink-faint); font-size: var(--fs-0);
}
.mod-body { min-width: 0; }
.mod-body h2 {
  font-size: var(--fs-3); margin: 0 0 .35rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.mod-meta  { font-size: var(--fs-1); color: var(--ink-soft); margin: 0 0 .6rem; }
.mod-desc  { font-size: var(--fs-1); color: var(--ink-soft); margin: 0 0 .8rem; }
.mod-owner {
  font-size: var(--fs-0); color: var(--ink-faint); margin: 0 0 .95rem;
  padding: .6rem .75rem; background: var(--sand-50);
  border-radius: var(--radius-sm); line-height: 1.6;
}
.flag { color: var(--bad); font-weight: 700; }

.mod-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.mod-actions form { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.mod-actions input[type="text"], .mod-actions input[type="number"], .mod-actions select {
  font: inherit; font-size: var(--fs-0); min-height: 44px;
  padding: .5rem .7rem; border: 1px solid var(--sand-200);
  border-radius: var(--radius-sm); background: #fff; color: var(--ink);
  max-width: 100%;
}
.mod-actions input[type="text"] { min-width: 180px; }
.mod-actions input:focus, .mod-actions select:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-100);
}

/* ── Lista de reportes dentro de una ficha ── */
.rep-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.rep-list li {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  font-size: var(--fs-0); padding: .55rem 0;
  border-bottom: 1px solid var(--sand-100);
}
.rep-when   { color: var(--ink-faint); font-size: var(--fs-0); }
.rep-detail { color: var(--ink-soft); flex: 1; min-width: 200px; }
.rep-who    { color: var(--ink-faint); font-size: var(--fs-00); }
.rep-inline { margin-left: auto; }

/* ── Ficha de usuario ── */
.ucard {
  background: #fff; border: 1px solid var(--sand-200);
  border-radius: var(--radius); padding: 1.2rem;
  margin-bottom: 1.15rem;
}
.ucard.is-banned { border-left: 4px solid var(--bad); }
.ucard-head {
  display: flex; gap: 1.2rem; justify-content: space-between;
  align-items: flex-start; flex-wrap: wrap; margin-bottom: .8rem;
}
.ucard-head h2 {
  font-size: var(--fs-3); margin: 0 0 .3rem;
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
}
.ucard-stats {
  display: flex; gap: 1.1rem; flex-wrap: wrap;
  font-size: var(--fs-0); color: var(--ink-faint);
}
.ucard-stats b { color: var(--navy); font-size: var(--fs-2); font-weight: 700; }
.ucard-lock { font-size: var(--fs-0); color: var(--ink-faint); font-style: italic; margin: 0; }

/* ── Tabla de datos ── */
.dtable { width: 100%; border-collapse: collapse; font-size: var(--fs-0); }
.dtable th {
  text-align: left; font-size: var(--fs-00); text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint); font-weight: 700;
  padding: .6rem .7rem; border-bottom: 1px solid var(--sand-200);
}
.dtable td { padding: .6rem .7rem; border-bottom: 1px solid var(--sand-100); color: var(--ink-soft); }
.dtable tr:hover td { background: var(--sand-50); }
.nowrap { white-space: nowrap; }
/* Una tabla nunca empuja el ancho de la página en móvil */
.dash-sec { overflow-x: auto; }

/* ── Paginación ── */
.pager { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: 1.6rem; }
.pager a {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem .7rem; text-decoration: none;
  font-size: var(--fs-0); font-weight: 600; color: var(--ink-soft);
  border: 1px solid var(--sand-200); border-radius: var(--radius-sm);
  background: #fff;
}
.pager a:hover { border-color: var(--teal); color: var(--teal-600); }
.pager a.on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── Panel de seguridad ── */
.sec-stats {
  display: grid; gap: 1rem; margin-bottom: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
/* Cifra y etiqueta iban sin estilo: el número quedaba pegado al texto
   ("3sin revisar"). Misma anatomía que .dash-card, en versión compacta. */
.sec-stats > div {
  background: #fff; border: 1px solid var(--sand-100);
  border-radius: var(--radius-sm); padding: .85rem 1rem;
}
.sec-stats strong {
  display: block; font-size: var(--fs-4); font-weight: 700;
  color: var(--navy); line-height: 1.1;
}
.sec-stats span {
  display: block; margin-top: .15rem;
  font-size: var(--fs-0); color: var(--ink-soft);
}

/* ── Cabecera del panel: título + pastilla de estado del sitio ── */
.dash-title {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.8rem;
}
.dash-title h1 { margin: 0 0 .25rem; }
.dash-title .dash-hello { margin: 0; }

.dash-status {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .9rem; border-radius: 999px;
  font-size: var(--fs-0); font-weight: 600; text-decoration: none;
  border: 1px solid var(--sand-200); background: #fff; color: var(--ink-soft);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.dash-status:hover { text-decoration: none; box-shadow: var(--shadow-sm); }
.dash-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; }
.dash-status-active   .dash-status-dot { background: var(--ok);   box-shadow: 0 0 0 3px rgba(14,159,110,.18); }
.dash-status-active   { color: #05614A; border-color: #BFEBD9; }
.dash-status-mantenimiento .dash-status-dot { background: var(--warn); }
.dash-status-mantenimiento { color: #8A5A04; border-color: #F5DFA8; }
.dash-status-suspendido .dash-status-dot { background: var(--bad); }
.dash-status-suspendido { color: #8E1128; border-color: #F3C2CD; }

/* ── Bloques temáticos: cada grupo de métricas con su título ── */
.dash-block { margin-bottom: 2.6rem; }
.dash-block-t {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font); font-size: var(--fs-00); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-faint);
  margin: 0 0 1rem; padding: 0;
}
/* Marca de sección: una barrita de color de marca antes del título,
   eco del triángulo del logo. Da identidad sin decorar de más. */
.dash-block-t::before {
  content: ''; width: 4px; height: 1.15em; border-radius: 2px;
  background: var(--teal); flex-shrink: 0;
}
.dash-block:nth-of-type(2) .dash-block-t::before { background: var(--navy-600); }
.dash-block:nth-of-type(3) .dash-block-t::before { background: var(--coral); }

/* Alertas con CTA a la derecha */
.alert { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.alert > span { flex: 1; min-width: 200px; }
.alert a { font-weight: 700; white-space: nowrap; }

/* Estados de acento en las tarjetas */
.dash-card.is-warn { border-color: var(--warn); }
.dash-card.is-warn .dash-num { color: var(--warn); }

/* Tarjeta que es un acceso, no una cifra */
.dash-card-cta {
  align-items: flex-start; justify-content: center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-800) 100%);
  border-color: var(--navy);
}
.dash-card-cta .dash-lbl { color: #fff; }
.dash-card-cta .dash-sub { color: rgba(255,255,255,.6); }
a.dash-card-cta:hover { border-color: var(--teal); }
.dash-cta-ico {
  font-size: var(--fs-5); line-height: 1; color: var(--teal);
  margin-bottom: .35rem;
}

/* Tabla dentro de su propio contenedor con scroll horizontal aislado */
.dash-tablewrap { overflow-x: auto; border: 1px solid var(--sand-100); border-radius: var(--radius); }
.dash-tablewrap .dtable td:first-child,
.dash-tablewrap .dtable th:first-child { padding-left: 1rem; }
.dash-tablewrap .dtable td:last-child,
.dash-tablewrap .dtable th:last-child { padding-right: 1rem; }

/* Estado vacío con diseño, no una tabla en blanco */
.dash-empty {
  text-align: center; padding: 2.6rem 1.5rem;
  border: 1px dashed var(--sand-200); border-radius: var(--radius);
  color: var(--ink-faint); background: var(--sand-50);
}
.dash-empty p { margin: 0; }

/* ============================================================
   CONFIGURACIÓN — formularios agrupados por función.
   Cada sección es una tarjeta con cabecera, campos en rejilla y su
   propio botón de guardar. Densidad de herramienta, no de landing.
   ============================================================ */
.cfg-head { margin-bottom: 1.6rem; }
.cfg-head h1 { margin-bottom: .25rem; }

.cfg-layout {
  display: grid; gap: 1.3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: start;
}

.cfg-card {
  background: #fff; border: 1px solid var(--sand-200);
  border-radius: var(--radius); padding: 1.4rem 1.4rem 1.25rem;
  display: flex; flex-direction: column;
}
.cfg-card-danger { border-color: #F3C2CD; }
.cfg-card-danger .cfg-card-head h2 { color: #8E1128; }

.cfg-card-head { margin-bottom: 1.1rem; }
.cfg-card-head h2 { font-size: var(--fs-3); margin: 0 0 .3rem; }
.cfg-card-head p { margin: 0; font-size: var(--fs-0); color: var(--ink-soft); line-height: 1.5; }

.cfg-form { display: flex; flex-direction: column; flex: 1; }
.cfg-fields { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.2rem; }

.cfg-field { display: flex; flex-direction: column; gap: .35rem; }
.cfg-label { font-size: var(--fs-0); font-weight: 600; color: var(--ink); }
.cfg-input { display: flex; align-items: center; gap: .6rem; }
.cfg-input input[type="number"] {
  width: 100px; font: inherit; font-size: var(--fs-1); min-height: 44px;
  padding: .5rem .7rem; text-align: right;
  border: 1px solid var(--sand-200); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink);
}
.cfg-input input[type="email"],
.cfg-input input[type="text"],
.cfg-input select {
  flex: 1; min-width: 0; font: inherit; font-size: var(--fs-1); min-height: 44px;
  padding: .5rem .8rem; border: 1px solid var(--sand-200);
  border-radius: var(--radius-sm); background: #fff; color: var(--ink);
}
.cfg-input input:focus, .cfg-input select:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-100);
}
.cfg-suf { font-size: var(--fs-0); color: var(--ink-soft); white-space: nowrap; }
.cfg-hint { font-size: var(--fs-00); color: var(--ink-faint); }
.cfg-field-wide .cfg-input { width: 100%; }

.cfg-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: .9rem; margin-top: auto; padding-top: 1rem;
  border-top: 1px solid var(--sand-100); flex-wrap: wrap;
}
.cfg-state {
  margin-right: auto; font-size: var(--fs-0); font-weight: 600;
  display: inline-flex; align-items: center; gap: .4rem;
}
.cfg-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.cfg-state-active::before { background: var(--ok); }
.cfg-state-mantenimiento::before { background: var(--warn); }
.cfg-state-suspendido::before { background: var(--bad); }

/* ── Estado del SMTP ── */
.cfg-smtp-state {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .9rem 1rem; border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}
.cfg-smtp-state.is-ok  { background: #ECFDF5; border: 1px solid #BFEBD9; }
.cfg-smtp-state.is-off { background: #FEF2F4; border: 1px solid #F3C2CD; }
.cfg-smtp-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: .35rem; flex-shrink: 0; }
.cfg-smtp-state.is-ok  .cfg-smtp-dot { background: var(--ok); }
.cfg-smtp-state.is-off .cfg-smtp-dot { background: var(--bad); }
.cfg-smtp-state strong { display: block; font-size: var(--fs-1); color: var(--ink); }
.cfg-smtp-state span { font-size: var(--fs-0); color: var(--ink-soft); }

.cfg-smtp-help { margin-bottom: 1rem; }
.cfg-smtp-help p { font-size: var(--fs-0); color: var(--ink-soft); margin: 0 0 .5rem; }
.cfg-smtp-help pre {
  background: var(--navy); color: #E8EEF6;
  padding: .9rem 1rem; border-radius: var(--radius-sm);
  font-size: var(--fs-0); line-height: 1.6; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em; background: var(--sand-100);
  padding: .1rem .35rem; border-radius: 4px; color: var(--navy);
}
button[disabled] { opacity: .5; cursor: not-allowed; }

/* ============================================================
   ACCESO — login, registro, recuperar
   Dos columnas: el formulario manda, la foto acompaña. En móvil
   la foto se retira por completo en vez de encogerse a una banda
   inútil que solo roba altura al teclado.

   Técnicas:
   1. Duotono de marca sobre la fotografía — se desatura y se tiñe
      con navy y teal en modo multiply. La foto deja de ser stock y
      pasa a pertenecer a la identidad.
   2. Grano sobre AMBAS columnas — mata el brillo del blanco plano,
      que cansa la vista con luz encendida, y unifica foto y fondo
      bajo la misma textura.
   3. Una sola tinta en el titular. El énfasis va por itálica de
      serifas exageradas (eje WONK de Fraunces), no por cambio de
      color: colorear una palabra suelta es el recurso de plantilla.
   ============================================================ */

.auth-split {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  /* Arena, no blanco puro: el blanco a pantalla completa deslumbra */
  background: var(--sand-50);
}

/* Textura sobre toda la página. Sin ella el lado izquierdo es una
   plancha lisa que refleja la luz de la habitación. */
.auth-split::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.auth-form-col {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 6vw, 5rem);
  /* Degradado muy leve: rompe la plancha uniforme sin que se note */
  background: linear-gradient(150deg, var(--paper) 0%, var(--sand-50) 62%, var(--sand-100) 100%);
}
/* El 100% se mide contra la columna, que en un móvil estrecho ya es más
   angosta que los 420px del tope: sin min() el bloque desbordaba a la
   derecha y el formulario se salía de la pantalla. */
.auth-box { width: min(100%, 420px); margin-inline: auto; }

/* El logo real de la marca, no el nombre escrito con una fuente */
.auth-logo {
  display: inline-block;
  margin-bottom: clamp(1.8rem, 5vh, 3rem);
}
.auth-logo img {
  height: 34px;
  width: auto;
  display: block;
}

/* Titular de aplicación, no de landing: sans, tamaño contenido, directo.
   Nada de la palabra en itálica serif — ese es el patrón de plantilla. */
.auth-box h1 {
  font-family: var(--font);
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--navy);
  margin-bottom: .35rem;
}
.auth-box h1 em {
  font-style: normal;
  color: var(--teal-600);
}
.auth-box .lead { color: var(--ink-soft); font-size: var(--fs-2); margin-bottom: 2rem; }

.auth-box .field input,
.auth-box .field select { padding: .85rem 1rem; font-size: var(--fs-2); }

/* Los botones de auth usan .btn-primary sin la clase base .btn, así que
   aquí se les da el cuerpo completo: sin esto salían finos e ilegibles. */
.auth-box .btn-primary,
.auth-box .btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; margin-top: .6rem;
  font: inherit; font-size: var(--fs-2); font-weight: 600; line-height: 1;
  padding: 1rem 1.6rem; border-radius: var(--radius-sm);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  min-height: 52px;
  transition: transform .2s var(--ease-out), box-shadow .22s var(--ease),
              background .22s var(--ease), color .22s var(--ease);
}
.auth-box .btn-primary { background: var(--teal); color: #fff; box-shadow: 0 4px 16px rgba(0,156,144,.34); }
.auth-box .btn-primary:hover { background: var(--teal-600); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,156,144,.44); }
.auth-box .btn-outline { background: transparent; color: var(--navy); border-color: var(--sand-200); }
.auth-box .btn-outline:hover { border-color: var(--teal); color: var(--teal-600); background: var(--teal-100); }

/* Las pantallas de auth ocupan el alto completo; el pie global "© …"
   sobra ahí y rompe la composición a dos columnas. */
.auth-split ~ .site-foot { display: none; }

.auth-links { margin-top: 1.6rem; font-size: var(--fs-1); color: var(--ink-soft); }
.auth-links a { color: var(--teal-600); font-weight: 600; }
.auth-links p { margin: 0 0 .5rem; }
.auth-legal {
  margin-top: 1.1rem !important; padding-top: 1rem;
  border-top: 1px solid var(--sand-100);
  font-size: var(--fs-0); color: var(--ink-faint);
}

/* ── Columna de imagen: duotono de marca ── */
.auth-art {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
/* Se desatura antes de teñir: si no, los colores originales de la
   foto ensucian el duotono */
.auth-art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15);
}
/* Tinta: teal en las luces, navy en las sombras */
.auth-art::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(150deg, var(--teal) 0%, var(--navy) 68%);
  mix-blend-mode: multiply;
}
/* Base oscura para que el texto blanco se lea siempre */
.auth-art::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(24,36,60,.9) 0%, rgba(24,36,60,.1) 55%, transparent 100%);
}
.auth-art-text {
  position: relative;
  z-index: 3;
  padding: clamp(2rem, 5vw, 3.6rem);
  max-width: 34ch;
}
.auth-art-text p {
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 500;
  color: #fff;
  line-height: 1.35;
  margin: 0 0 .5rem;
}
.auth-art-text span { font-size: var(--fs-1); color: rgba(255,255,255,.72); }

@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-art { display: none; }
}

/* ============================================================
   PÁGINAS LEGALES
   Texto largo que la gente lee de verdad solo cuando hay un
   problema: medida de línea corta, jerarquía clara, sin adornos.
   ============================================================ */

/* ── Barra superior con logo y retorno ── */
.legal-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .9rem clamp(1.1rem, 4vw, 2.6rem);
  background: rgba(253,252,250,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sand-200);
}
.legal-logo img { height: 38px; width: auto; display: block; }
.legal-back-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-1); font-weight: 600; color: var(--navy);
  padding: .55rem 1.05rem; border-radius: 999px;
  border: 1.5px solid var(--sand-200); background: #fff;
  min-height: 44px; text-decoration: none;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.legal-back-btn:hover { border-color: var(--teal); color: var(--teal-600); text-decoration: none; }

/* ── Hero de marca: la página no arranca en frío con un h1 pelado ── */
.legal-hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-800) 100%);
  color: #fff; position: relative; overflow: hidden;
  padding: clamp(2.8rem, 7vw, 4.6rem) clamp(1.1rem, 4vw, 2.6rem);
}
/* Cuña de marca: eco del triángulo coral del logo, sin ser literal */
.legal-hero::after {
  content: ''; position: absolute; right: -8%; bottom: -40%;
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,156,144,.34), transparent 62%);
  pointer-events: none;
}
.legal-hero-in { max-width: var(--maxw); margin-inline: auto; position: relative; z-index: 1; }
.legal-kicker {
  display: inline-block; font-size: var(--fs-00); font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--teal); margin-bottom: .8rem;
}
.legal-hero h1 {
  color: #fff; font-size: clamp(2.1rem, 5vw, 3.2rem);
  margin: 0 0 .7rem; letter-spacing: -.02em;
}
.legal-hero p { color: rgba(255,255,255,.82); font-size: var(--fs-2); max-width: 60ch; margin: 0 0 1rem; line-height: 1.6; }
.legal-hero .legal-date { color: rgba(255,255,255,.5); font-size: var(--fs-0); margin: 0; }

/* ── Cuerpo: índice pegajoso + contenido en tarjetas ── */
.legal {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.4rem) clamp(1.1rem, 4vw, 2.6rem);
  display: grid; grid-template-columns: 230px 1fr; gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: start;
}
.legal-toc {
  position: sticky; top: 84px;
  display: flex; flex-direction: column; gap: .1rem;
}
.legal-toc-t {
  font-size: var(--fs-00); text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint); font-weight: 700; margin-bottom: .6rem;
}
.legal-toc a {
  font-size: var(--fs-1); color: var(--ink-soft); text-decoration: none;
  padding: .5rem .7rem; border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.legal-toc a:hover { background: var(--sand-50); color: var(--navy); text-decoration: none; border-left-color: var(--teal); }

.legal-body { min-width: 0; }
.legal-body section {
  background: #fff; border: 1px solid var(--sand-200);
  border-radius: var(--radius); padding: 1.6rem 1.8rem;
  margin-bottom: 1.2rem; scroll-margin-top: 90px;
}
.legal-body h2 {
  font-size: var(--fs-4); margin: 0 0 .9rem; padding: 0 0 .6rem;
  display: flex; align-items: center; gap: .55rem;
  border-bottom: 1px solid var(--sand-100);
}
.legal-body h2::before {
  content: ''; width: 4px; height: 1.1em; border-radius: 2px;
  background: var(--teal); flex-shrink: 0;
}
.legal-body p { color: var(--ink-soft); margin: 0 0 1rem; line-height: 1.75; }
.legal-body p:last-child { margin-bottom: 0; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body ul { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.legal-body li { color: var(--ink-soft); margin-bottom: .55rem; line-height: 1.65; }
.legal-body li::marker { color: var(--teal); }
.legal-body a { color: var(--teal-600); font-weight: 600; }

@media (max-width: 800px) {
  .legal { grid-template-columns: 1fr; }
  .legal-toc {
    position: static; flex-flow: row wrap; gap: .4rem;
    padding-bottom: 1rem; border-bottom: 1px solid var(--sand-200); margin-bottom: 1rem;
  }
  .legal-toc-t { width: 100%; }
  .legal-toc a { border: 1px solid var(--sand-200); border-left: 1px solid var(--sand-200); }
}

/* ============================================================
   CLASES QUE EL HTML YA USABA Y NUNCA SE DEFINIERON
   Detectadas con diff de clases usadas vs definidas (2026-08-23).
   Afectaban a publicar.php y dashboard/seguridad.php, que se
   renderizaban sin estilo.
   ============================================================ */

/* publicar.php — galería de fotos del anuncio */
.photos { margin-bottom: 1.4rem; }
.photo-grid {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  margin-bottom: 1rem;
}
.photo-grid figure {
  margin: 0; position: relative;
  border: 1px solid var(--sand-200); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--sand-100);
}
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.btn-mini, .btn-mini-danger {
  font: inherit; font-size: var(--fs-0); font-weight: 600;
  padding: .4rem .7rem; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid var(--sand-200);
  background: #fff; color: var(--navy); cursor: pointer; text-decoration: none;
}
.btn-mini:hover { border-color: var(--teal); color: var(--teal-600); }
.btn-mini-danger { color: var(--bad); border-color: var(--sand-200); }
.btn-mini-danger:hover { border-color: var(--bad); background: #FEF2F4; }

.btn-link-danger {
  font: inherit; font-size: var(--fs-0); font-weight: 600;
  background: none; border: none; color: var(--bad);
  cursor: pointer; padding: .5rem .2rem; min-height: 44px;
  text-decoration: underline;
}
.btn-link-danger:hover { color: #A00E2E; }

.inline { display: inline-flex; align-items: center; gap: .4rem; }
.ok-mark { color: var(--ok); font-weight: 700; }

/* dashboard/seguridad.php — tabla de eventos y evidencia */
.sec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-0); }
.sec-table th {
  text-align: left; font-size: var(--fs-00); text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint); font-weight: 700;
  padding: .6rem .7rem; border-bottom: 1px solid var(--sand-200);
  white-space: nowrap;
}
.sec-table td {
  padding: .65rem .7rem; border-bottom: 1px solid var(--sand-100);
  color: var(--ink-soft); vertical-align: top;
}
.sec-table tr:hover td { background: var(--sand-50); }

.sec-detail { color: var(--ink); }
/* La evidencia la escribió un atacante: ancho acotado y sin desbordar.
   Es un <dl>: sin esto cada dt/dd salta de línea con la sangría del
   navegador, y "referer: ninguno" ocupaba cuatro líneas de alto. */
.sec-evidence {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-00); color: var(--ink-faint);
  background: var(--sand-50); padding: .4rem .6rem;
  border-radius: var(--radius-sm); margin-top: .35rem;
  max-width: 46ch; overflow-x: auto; word-break: break-all;
  display: flex; flex-wrap: wrap; gap: .15rem .5rem;
}
.sec-evidence dt { font-weight: 600; }
.sec-evidence dt::after { content: ':'; }
.sec-evidence dd {
  margin: 0 .6rem 0 0; color: var(--ink-soft);
}

.sev-tag {
  display: inline-block; font-size: var(--fs-00); font-weight: 700;
  padding: .2rem .55rem; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
  background: var(--sand-100); color: var(--ink-soft);
}
.sev-critico { background: #FEE4E9; color: #8E1128; }
.sev-grave   { background: #FEF3D7; color: #8A5A04; }
.sev-aviso   { background: var(--teal-100); color: #04635C; }
.sev-info    { background: var(--sand-100); color: var(--ink-soft); }

/* ============================================================
   PÁGINA 503 — SITIO EN MANTENIMIENTO / PAUSADO
   Fondo navy de marca con cuña teal (mismo lenguaje que el hero de
   políticas). Tarjeta central con logo claro, icono con pulso, mensaje.
   No parece un error del servidor: parece la marca avisando.
   ============================================================ */
.maint {
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 2rem 1.2rem;
  background: radial-gradient(120% 90% at 50% 0%, var(--navy-800) 0%, var(--navy) 60%);
  position: relative; overflow: hidden;
}
/* Cuña de marca: eco del triángulo teal del logo, difuminado */
.maint::before {
  content: ''; position: absolute; left: -10%; bottom: -30%;
  width: 55%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,156,144,.28), transparent 62%);
  pointer-events: none;
}
.maint::after {
  content: ''; position: absolute; right: -12%; top: -25%;
  width: 45%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(252,60,84,.12), transparent 60%);
  pointer-events: none;
}

.maint-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px;
  text-align: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 2.6rem 2rem 2.2rem;
  backdrop-filter: blur(6px);
}
.maint-logo img { width: 180px; max-width: 70%; height: auto; margin: 0 auto 1.8rem; }

.maint-icon {
  position: relative;
  width: 64px; height: 64px; margin: 0 auto 1.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(0,156,144,.16); color: var(--teal);
}
.maint-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--teal); opacity: .6;
  animation: maintPulse 2.2s var(--ease-out) infinite;
}
@keyframes maintPulse {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .maint-pulse { animation: none; } }

.maint-title {
  color: #fff; font-family: var(--font);
  font-size: var(--fs-5); font-weight: 700; letter-spacing: -.01em;
  margin: 0 0 .7rem;
}
.maint-sub {
  color: rgba(255,255,255,.72); font-size: var(--fs-2); line-height: 1.6;
  margin: 0 auto 1.8rem; max-width: 42ch;
}

.maint-foot {
  display: flex; flex-direction: column; gap: .5rem; align-items: center;
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1);
}
.maint-mail {
  color: #fff; font-weight: 600; font-size: var(--fs-1); text-decoration: none;
  padding: .7rem 1.3rem; border-radius: 999px;
  background: var(--teal); min-height: 44px;
  display: inline-flex; align-items: center;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.maint-mail:hover { background: var(--teal-600); transform: translateY(-2px); text-decoration: none; }
.maint-staff { color: rgba(255,255,255,.5); font-size: var(--fs-0); text-decoration: none; }
.maint-staff:hover { color: rgba(255,255,255,.8); }

/* El pie global © no aplica en esta pantalla a plena altura */
.maint ~ .site-foot { display: none; }

/* ── Pulso del sitio ────────────────────────────────────────
   Cifras de consulta. Una banda continua dividida por separadores
   en vez de cinco tarjetas: así no compiten con la cola de trabajo,
   que es lo único accionable de la pantalla. */
.dash-pulse {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
  background: #fff; border: 1px solid var(--sand-100);
  border-radius: var(--radius); overflow: hidden;
}
.dpz {
  padding: 1rem 1.15rem;
  border-right: 1px solid var(--sand-100);
  text-decoration: none; color: inherit;
  display: block; transition: background .18s var(--ease);
}
.dpz:last-child { border-right: 0; }
a.dpz:hover { background: var(--sand-50); text-decoration: none; }
.dpz b {
  display: block; font-family: var(--font);
  font-size: var(--fs-4); font-weight: 700; color: var(--navy); line-height: 1.1;
}
.dpz span {
  display: block; margin-top: .1rem;
  font-size: var(--fs-1); color: var(--ink); font-weight: 500;
}
.dpz em {
  display: block; margin-top: .1rem; font-style: normal;
  font-size: var(--fs-00); color: var(--ink-faint);
}
/* El color entra solo cuando el dato pide algo. */
.dpz.is-warn b  { color: var(--warn); }
.dpz.is-alert b { color: var(--coral); }

/* La cola de trabajo es lo único accionable: se le da cuerpo para que
   gane a todo lo demás sin necesidad de gritar con tamaño. */
.dash-block:first-of-type .dash-card { padding: 1.3rem 1.35rem 1.2rem; }
.dash-block:first-of-type .dash-num { font-size: var(--fs-5); }

/* ── Ficha de usuario: correcciones de jerarquía ─────────────
   La ficha reutilizaba .mod-owner, pensado para moderación: una caja
   gris a todo el ancho que hacía pesar la fecha de alta más que el
   correo del usuario. Aquí el metadato vuelve a ser metadato. */
.ucard .mod-owner {
  background: none; padding: 0;
  margin: 0 0 .9rem;
  border-top: 1px solid var(--sand-100); padding-top: .7rem;
}

/* Las estadísticas se leen como cifras, no como frase corrida. */
.ucard-stats { gap: 1.4rem; align-items: baseline; }
.ucard-stats span { display: inline-flex; align-items: baseline; gap: .3rem; }

/* Lo destructivo se separa del resto de acciones: en la misma fila,
   "Borrar" queda a un clic de "Cambiar rol". El margen automático lo
   empuja al extremo y el separador marca que ahí empieza otra cosa. */
.ucard .mod-actions { align-items: flex-end; gap: .55rem; }
.ucard .mod-actions form:last-child {
  margin-left: auto; padding-left: .9rem;
  border-left: 1px solid var(--sand-200);
}
@media (max-width: 900px) {
  .ucard .mod-actions form:last-child {
    margin-left: 0; padding-left: 0; border-left: 0;
    width: 100%; padding-top: .7rem;
    border-top: 1px solid var(--sand-200);
  }
}

/* Medidor de fuerza de contraseña */
.pw-meter {
  height: 5px;
  margin: .5rem 0 .35rem;
  border-radius: 99px;
  background: var(--sand-200);
  overflow: hidden;
}
.pw-meter-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--bad);
  transition: width .25s ease, background-color .25s ease;
}
.pw-lvl-0 .pw-meter-fill { width: 25%;  background: var(--bad); }
.pw-lvl-1 .pw-meter-fill { width: 50%;  background: var(--warn); }
.pw-lvl-2 .pw-meter-fill { width: 75%;  background: var(--teal); }
.pw-lvl-3 .pw-meter-fill { width: 100%; background: var(--ok); }

.pw-meter-text {
  margin: 0 0 .5rem;
  font-size: .82rem;
  color: var(--ink-soft);
  min-height: 1.1em;
}
.pw-txt-0 { color: var(--bad); }
.pw-txt-1 { color: var(--warn); }
.pw-txt-2 { color: var(--teal); }
.pw-txt-3 { color: var(--ok); }

@media (prefers-reduced-motion: reduce) {
  .pw-meter-fill { transition: none; }
}

/* Tabla y subtítulos de las páginas legales */
.legal-body h3 {
  margin: 1.8rem 0 .7rem;
  font-family: var(--serif, inherit);
  font-size: 1.08rem;
  color: var(--navy);
}
.legal-body h3:first-of-type { margin-top: 1.2rem; }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4rem;
  font-size: .93rem;
}
.legal-table th,
.legal-table td {
  padding: .7rem .8rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--sand-200);
  line-height: 1.6;
}
.legal-table th {
  background: var(--sand-50);
  color: var(--navy);
  font-weight: 600;
  white-space: nowrap;
}
.legal-table td { color: var(--ink-soft); }
.legal-table td:first-child { color: var(--ink); font-weight: 500; }

/* En móvil la tabla se lee como fichas apiladas: 3 columnas no caben
   y el scroll horizontal dentro del texto legal se pierde. */
@media (max-width: 640px) {
  .legal-table thead { display: none; }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table tr {
    margin-bottom: 1rem;
    border: 1px solid var(--sand-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .legal-table td { border-bottom: none; padding: .55rem .8rem; }
  .legal-table td:first-child {
    background: var(--sand-50);
    font-weight: 600;
    color: var(--navy);
  }
  .legal-table td:nth-child(2)::before { content: 'Para qué: '; font-weight: 600; color: var(--navy); }
  .legal-table td:last-child::before  { content: 'Tiempo: ';   font-weight: 600; color: var(--navy); }
}

/* Nota de privacidad bajo los formularios de acceso: va seguida de otra
   .auth-legal, así que no repite el separador superior. */
.auth-legal-note {
  margin-top: .55rem !important;
  padding-top: 0;
  border-top: none;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   NOVO
   Coral: el único color de marca sin usar en el resto del sitio.
   ═══════════════════════════════════════════ */
:root {
  --novo:      #FC3C54;
  --novo-600:  #E02742;
  --novo-700:  #B81C33;
  --novo-50:   #FFF1F3;
  --novo-tinta:#2B2420;   /* gris cálido: la tinta del bot, sin azul */
  --novo-gris: #6B6055;   /* --ink-soft es azulado (#55637A) y se notaba */
  --novo-tenue:#7D7165;
}

/* ── El personaje: Leo, el mismo del login ──
   Los tonos son fijos: una cara humana teñida con currentColor se
   convierte en una silueta plana. El halo es lo único que hereda el
   color del contenedor, y así recorta a Leo tanto sobre el botón coral
   como sobre la cabecera clara del panel. */
.novo-cara { width: 100%; height: 100%; display: block; overflow: hidden; border-radius: 50%; }
.novo-cara .nc-halo     { fill: currentColor; opacity: .16; }
.novo-cara .nc-hombros  { fill: #18243C; }
.novo-cara .nc-camisa   { fill: #F4F6F8; }
.novo-cara .nc-corbata  { fill: #FC3C54; }
.novo-cara .nc-cuello   { fill: #C48763; }
.novo-cara .nc-cara-piel{ fill: #D9A07A; }
.novo-cara .nc-pelo     { fill: #2B2330; }
.novo-cara .nc-rubor    { fill: #FC3C54; opacity: .22; }
.novo-cara .nc-ojo      { fill: #18243C; }
.novo-cara .nc-boca {
  fill: none; stroke: #18243C; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Los ojos miran de lado y vuelven: da la sensación de que piensa,
   no de que rebota. Es traslación horizontal, no salto vertical. */
/* Mirada y parpadeo en UN solo keyframe: dos animaciones sobre la misma
   propiedad transform se pisan, y en Firefox va una por elemento. */
@keyframes novo-ojos {
  0%, 20%   { transform: translateX(0)      scaleY(1); }
  24%       { transform: translateX(0)      scaleY(.08); }
  28%, 40%  { transform: translateX(0)      scaleY(1); }
  46%, 56%  { transform: translateX(2.4px)  scaleY(1); }
  62%       { transform: translateX(2.4px)  scaleY(.08); }
  66%, 74%  { transform: translateX(-2.4px) scaleY(1); }
  82%, 100% { transform: translateX(0)      scaleY(1); }
}
.js .novo-cara .nc-ojos {
  transform-box: fill-box; transform-origin: center;
  animation: novo-ojos 6s var(--ease) infinite;
}

/* ── Botón cerrado ── */
.novo-btn {
  position: fixed;
  right: clamp(.9rem, 2.5vw, 1.6rem);
  bottom: clamp(.9rem, 2.5vw, 1.6rem);
  z-index: 60;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem 1.15rem .5rem .5rem;
  border: 0; border-radius: 999px;
  background: var(--novo);
  color: #fff; font: inherit; cursor: pointer;
  box-shadow:
    0 2px 6px rgba(184, 28, 51, .3),
    0 14px 32px -8px rgba(252, 60, 84, .6);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
              background .3s var(--ease);
}
.novo-btn .novo-cara-btn {
  width: 40px; height: 40px; flex: 0 0 auto; padding: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
}
.novo-btn-txt {
  display: flex; flex-direction: column;
  line-height: 1.25; text-align: left;
  font-size: var(--fs-00); color: rgba(255, 255, 255, .78);
}
.novo-btn-txt b { font-size: var(--fs-1); font-weight: 600; color: #fff; }

/* Onda que sale del botón cada 6s: se anuncia sin moverse de sitio */
.novo-punto {
  position: absolute; inset: 0;
  border-radius: 999px;
  border: 2px solid var(--novo);
  pointer-events: none;
}
.js .novo-punto { animation: novo-onda 6s var(--ease-out) infinite; }
@keyframes novo-onda {
  0%, 72%   { opacity: 0;  transform: scale(1); }
  78%       { opacity: .55; }
  100%      { opacity: 0;  transform: scale(1.35); }
}
.novo-btn:hover {
  background: var(--novo-600);
  transform: scale(1.04);
  box-shadow:
    0 3px 9px rgba(184, 28, 51, .34),
    0 20px 44px -8px rgba(252, 60, 84, .7);
}
.novo-btn:focus-visible { outline: 2px solid var(--novo-tinta); outline-offset: 3px; }
.novo-btn[aria-expanded="true"] { opacity: 0; pointer-events: none; }

/* ── Panel: claro, sin bloque de color que compita ── */
.novo {
  position: fixed;
  right: clamp(.9rem, 2.5vw, 1.6rem);
  bottom: clamp(.9rem, 2.5vw, 1.6rem);
  z-index: 61;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: min(392px, calc(100vw - 1.8rem));
  height: min(580px, calc(100svh - 7rem));
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--sand-100);
  overflow: hidden;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(16px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
  box-shadow:
    0 2px 8px rgba(24, 36, 60, .07),
    0 18px 40px rgba(24, 36, 60, .12),
    0 48px 90px -24px rgba(24, 36, 60, .3);
}
.novo.is-on { opacity: 1; transform: translateY(0) scale(1); }
.novo[hidden] { display: none; }

.novo-head {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--sand-100);
  background: #fff;
}
.novo-avatar {
  flex: 0 0 auto; width: 40px; height: 40px; padding: 4px;
  border-radius: 50%;
  background: var(--novo);
  color: #fff;
}
.novo-id { flex: 1 1 auto; min-width: 0; }
.novo-tit {
  margin: 0; font-family: var(--font-head);
  font-size: var(--fs-3); font-weight: 600;
  letter-spacing: -.01em; color: var(--novo-tinta);
}
.novo-sub {
  margin: .05rem 0 0; display: flex; align-items: center; gap: .35rem;
  font-size: var(--fs-00); color: var(--novo-tenue);
}
.novo-sub i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #17B978; flex: 0 0 auto;
}
.novo-x {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: var(--sand-50); color: var(--novo-gris); cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.novo-x svg { width: 16px; height: 16px; }
.novo-x:hover { background: var(--sand-100); color: var(--novo-tinta); }
.novo-x:focus-visible { outline: 2px solid var(--novo); outline-offset: 2px; }

.novo-hilo {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem;
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--sand-50);
}
.novo-hilo::-webkit-scrollbar { width: 6px; }
.novo-hilo::-webkit-scrollbar-thumb { background: var(--sand-200); border-radius: 3px; }

.novo-msg {
  max-width: 86%; padding: .7rem .9rem; border-radius: 16px;
  font-size: var(--fs-1); line-height: 1.6;
  animation: novo-in .32s var(--ease-out) both;
}
@keyframes novo-in { from { opacity: 0; transform: translateY(7px); } }
.novo-novo {
  align-self: flex-start; background: #fff;
  border: 1px solid var(--sand-100); color: var(--ink);
  border-bottom-left-radius: 6px;
  box-shadow: 0 1px 2px rgba(24, 36, 60, .04);
}
.novo-novo b { color: var(--novo-700); font-weight: 600; }
/* La situación real de SU cuenta: va destacada sobre la explicación */
.novo-tuyo {
  display: block;
  margin: -.15rem -.2rem .7rem;
  padding: .6rem .75rem;
  border-left: 3px solid var(--novo);
  border-radius: 0 8px 8px 0;
  background: var(--novo-50);
  color: var(--novo-tinta);
  font-size: var(--fs-0);
  line-height: 1.55;
}
.novo-tuyo b { color: var(--novo-700); }
.novo-yo {
  align-self: flex-end; background: var(--novo-700); color: #fff;
  border-bottom-right-radius: 6px; overflow-wrap: anywhere;
}

.novo-esc { display: inline-flex; gap: 4px; padding: .15rem 0; }
.novo-esc i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--novo); animation: novo-pt 1.3s var(--ease) infinite;
}
.novo-esc i:nth-child(2) { animation-delay: .18s; }
.novo-esc i:nth-child(3) { animation-delay: .36s; }
@keyframes novo-pt {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-4px); }
}

.novo-acciones { display: flex; flex-wrap: wrap; gap: .4rem; align-self: flex-start; }
.novo-accion {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 .85rem; border: 1px solid var(--novo);
  border-radius: 999px; background: var(--novo-50);
  color: var(--novo-700); font: inherit; font-size: var(--fs-0);
  font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.novo-accion:hover { background: var(--novo); color: #fff; text-decoration: none; }
.novo-accion:focus-visible { outline: 2px solid var(--novo-tinta); outline-offset: 2px; }

.novo-menu-caja { border-top: 1px solid var(--sand-100); background: #fff; }
.novo-menu-tog {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; min-height: 44px; padding: 0 1rem;
  border: 0; background: none; color: var(--novo-gris);
  font: inherit; font-size: var(--fs-0); font-weight: 600; cursor: pointer;
}
.novo-menu-tog svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.novo-menu-tog[aria-expanded="true"] svg { transform: rotate(180deg); }
.novo-menu-tog:hover { color: var(--novo-tinta); }
.novo-menu-tog:focus-visible { outline: 2px solid var(--novo); outline-offset: -2px; }

.novo-menu {
  display: flex; flex-wrap: wrap; gap: .38rem;
  padding: 0 1rem .8rem;
  max-height: 108px; overflow-y: auto; overscroll-behavior: contain;
}
/* `display:flex` gana por especificidad al `display:none` que el
   navegador aplica a [hidden], así que plegar el menú desde JS no
   surtía efecto y los temas seguían a la vista. */
.novo-menu[hidden] { display: none; }
.novo-chip {
  min-height: 34px; padding: 0 .8rem;
  border: 1px solid var(--sand-200); border-radius: 999px;
  background: #fff; color: var(--novo-gris);
  font: inherit; font-size: var(--fs-0); cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease),
              background .2s var(--ease);
}
.novo-chip:hover { border-color: var(--novo); color: var(--novo-700); background: var(--novo-50); }
.novo-chip:focus-visible { outline: 2px solid var(--novo); outline-offset: 2px; }

.novo-form {
  display: flex; gap: .5rem;
  padding: .75rem 1rem .9rem;
  border-top: 1px solid var(--sand-200); background: var(--sand-50);
}
.novo-form input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--fs-1);
  padding: .65rem .95rem;
  /* Medido: con el borde claro daba 1.42 de contraste y la caja se perdía
     sobre el fondo. Este da 3.44, por encima del mínimo de 3.0. */
  border: 1.5px solid #8C7D66; border-radius: 999px;
  background: #F2EDE6; color: var(--novo-tinta);
  transition: border-color .2s var(--ease), background .2s var(--ease),
              box-shadow .2s var(--ease);
}
.novo-form input:focus-visible {
  outline: none; background: #fff; border-color: var(--novo);
  box-shadow: 0 0 0 3px var(--novo-50);
}
.novo-form button {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: var(--novo); color: #fff; cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.novo-form button svg { width: 18px; height: 18px; }
.novo-form button:hover { background: var(--novo-600); transform: scale(1.06); }
.novo-form button:focus-visible { outline: 2px solid var(--novo-tinta); outline-offset: 2px; }

@media (max-width: 560px) {
  .novo {
    right: 0; left: 0; bottom: 0;
    width: 100%; height: 88svh;
    border-radius: 22px 22px 0 0;
    transform-origin: bottom center;
  }
  .novo-btn-txt { display: none; }
  .novo-btn { padding: .4rem; gap: 0; }
  .novo-btn .novo-cara-btn { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .novo, .novo-msg, .novo-esc i, .novo-btn,
  .js .novo-cara .nc-ojos, .js .novo-punto {
    animation: none; transition: none;
  }
  .novo { opacity: 1; transform: none; }
}