/* ============================================================
   EVOLUX — Estilos compartidos de las páginas legales y de cuenta
   ------------------------------------------------------------
   Lo usan: terminos.html, privacidad.html, arrepentimiento.html,
            reset.html y cuenta.html

   IMPORTANTE: este archivo NO define colores propios. Todo sale
   de tokens.css, que se carga ANTES. Si hace falta un color
   nuevo, se agrega allá, no acá.

   Estas páginas no cargan styles.css (82 KB pensados para la
   landing) ni main.js: son autónomas y livianas. Por eso acá
   viven también la barra de navegación y el pie.
   ============================================================ */

/* ------------------------------------------------------------
   1. Base
   ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font-texto);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* Los mismos halos violeta/azul de la landing, pero suaves:
     estas páginas se leen, no se miran. */
  background-image:
    radial-gradient(62% 46% at 12% -6%, rgba(155, 92, 255, .13), transparent 62%),
    radial-gradient(48% 42% at 100% 4%, rgba(74, 144, 255, .10), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

h1, h2, h3, h4 {
  font-family: var(--font-titulo);
  line-height: 1.25;
  margin: 0;
  color: var(--txt);
  text-wrap: balance;
}

p { margin: 0 0 var(--sp-4); }

a { color: #b493ff; text-decoration: none; }
a:hover { color: var(--txt); text-decoration: underline; }

img { max-width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--sp-6) 0;
}

/* Contenedor general */
.evx-contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* ------------------------------------------------------------
   2. Barra de navegación
   ------------------------------------------------------------ */

.evx-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(10, 7, 19, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.evx-nav-inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--sp-5);
  height: 68px;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.evx-nav-logo { display: flex; align-items: center; }
.evx-nav-logo img { height: 34px; width: auto; display: block; }

.evx-nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin: 0 0 0 auto;
  padding: 0;
}
.evx-nav-links a {
  color: var(--txt-2);
  font-size: .92rem;
  font-weight: 500;
  transition: color var(--t-rapida);
}
.evx-nav-links a:hover,
.evx-nav-links a[aria-current="page"] { color: var(--txt); text-decoration: none; }
.evx-nav-links a[aria-current="page"] { color: #b493ff; }

/* «Cerrar sesión» es una acción, no un destino: va como <button>.
   Estas reglas lo hacen ver igual que el resto de los ítems. */
.evx-nav-links button.enlace,
.evx-menu-movil button.enlace {
  color: var(--txt-2);
  font-size: .92rem;
  font-weight: 500;
}
.evx-nav-links button.enlace:hover,
.evx-menu-movil button.enlace:hover { color: var(--txt); text-decoration: none; }
.evx-menu-movil button.enlace {
  display: block;
  width: 100%;
  padding: 12px 4px;
}

.evx-nav-cta {
  margin-left: var(--sp-4);
  background: var(--grad);
  color: #fff;
  font-family: var(--font-titulo);
  font-weight: 600;
  font-size: .86rem;
  padding: 10px 18px;
  border-radius: var(--r-full);
  white-space: nowrap;
  transition: filter var(--t-rapida);
}
.evx-nav-cta:hover { filter: brightness(1.1); color: #fff; text-decoration: none; }

/* Botón hamburguesa: solo aparece en pantallas chicas. */
.evx-hamburguesa {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--txt);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.evx-hamburguesa span {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-rapida), opacity var(--t-rapida);
}
.evx-hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.evx-hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.evx-hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.evx-menu-movil {
  display: none;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
.evx-menu-movil a {
  color: var(--txt-2);
  padding: 12px 4px;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.evx-menu-movil a:last-child { border-bottom: 0; }

@media (max-width: 900px) {
  .evx-nav-links { display: none; }
  .evx-nav-cta { display: none; }
  .evx-hamburguesa { display: flex; min-width: 44px; min-height: 44px; }
  /* La regla vive DENTRO de la media query: si estaba afuera, al girar el
     teléfono o agrandar la ventana el menú quedaba abierto y sin botón para
     cerrarlo, sin más salida que recargar. */
  .evx-menu-movil.abierto { display: flex; }
}

/* ------------------------------------------------------------
   3. Encabezado de página
   ------------------------------------------------------------ */

.legal-hero {
  padding: var(--sp-8) 0 var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.legal-hero .evx-contenedor { max-width: var(--ancho-max); }

.legal-migas {
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: var(--sp-3);
}
.legal-migas a { color: var(--muted); }
.legal-migas span { margin: 0 6px; opacity: .6; }

.legal-hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -.02em;
}
.legal-hero .bajada {
  color: var(--muted);
  max-width: 62ch;
  margin-top: var(--sp-3);
  font-size: 1.03rem;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-fuerte);
  background: rgba(255, 255, 255, .04);
  color: var(--txt-2);
  line-height: 1.5;
}
.chip.ok     { background: var(--ok-bg);     color: var(--ok-txt);     border-color: transparent; }
.chip.warn   { background: var(--warn-bg);   color: var(--warn-txt);   border-color: transparent; }
.chip.danger { background: var(--danger-bg); color: var(--danger-txt); border-color: transparent; }
.chip.info   { background: var(--info-bg);   color: var(--info-txt);   border-color: transparent; }

/* ------------------------------------------------------------
   4. Layout de documento legal: índice pegajoso + texto
   ------------------------------------------------------------ */

.legal-layout {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
  padding: var(--sp-7) 0 var(--sp-8);
}

.legal-indice {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: var(--sp-2);
  /* Scrollbar discreta para que el índice no grite. */
  scrollbar-width: thin;
  scrollbar-color: var(--line-fuerte) transparent;
}
.legal-indice::-webkit-scrollbar { width: 8px; }
.legal-indice::-webkit-scrollbar-thumb { background: var(--line-fuerte); border-radius: var(--r-full); }

.legal-indice h2 {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted-2);
  margin-bottom: var(--sp-3);
  font-weight: 600;
}
.legal-indice ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: idx;
  border-left: 1px solid var(--line);
}
.legal-indice li { counter-increment: idx; }
.legal-indice a {
  display: block;
  padding: 7px 12px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: .845rem;
  line-height: 1.45;
  transition: color var(--t-rapida), border-color var(--t-rapida);
}
.legal-indice a::before {
  content: counter(idx) ". ";
  color: var(--muted-2);
}
.legal-indice a:hover { color: var(--txt-2); text-decoration: none; }
.legal-indice a.activo {
  color: var(--txt);
  border-left-color: var(--pur);
  font-weight: 500;
}
.legal-indice a.activo::before { color: var(--pur); }

/* --- Cuerpo del documento --- */

.legal-doc {
  max-width: 72ch;   /* ~68-72 caracteres: la medida cómoda de lectura */
  min-width: 0;      /* sin esto, una tabla ancha estira la columna del grid */
  counter-reset: sec;
}

.legal-doc > section {
  counter-increment: sec;
  padding-top: var(--sp-6);
  margin-bottom: var(--sp-6);
  scroll-margin-top: 92px;
}
.legal-doc > section + section { border-top: 1px solid var(--line); }

.legal-doc > section > h2 {
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: var(--sp-4);
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
}
.legal-doc > section > h2::before {
  content: counter(sec);
  font-size: .82rem;
  font-weight: 700;
  color: var(--pur);
  background: rgba(155, 92, 255, .12);
  border: 1px solid rgba(155, 92, 255, .28);
  border-radius: var(--r-sm);
  min-width: 28px;
  text-align: center;
  padding: 2px 0;
  flex-shrink: 0;
  font-family: var(--font-mono);
}

.legal-doc h3 {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--txt);
  margin: var(--sp-5) 0 var(--sp-2);
}

.legal-doc p,
.legal-doc li { color: var(--txt-2); }

.legal-doc ul,
.legal-doc ol { margin: 0 0 var(--sp-4); padding-left: 1.35rem; }
.legal-doc li { margin-bottom: var(--sp-2); }
.legal-doc li::marker { color: var(--pur); }

.legal-doc strong { color: var(--txt); font-weight: 600; }

/* Definiciones (datos fiscales, contactos) */
.datos-lista {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-5);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.datos-lista dt { color: var(--muted); font-size: .86rem; }
.datos-lista dd { margin: 0; color: var(--txt); font-size: .92rem; }

@media (max-width: 560px) {
  .datos-lista { grid-template-columns: 1fr; gap: 2px var(--sp-3); }
  .datos-lista dd { margin-bottom: var(--sp-2); }
}

/* Bloque destacado (derecho de revocación, leyenda obligatoria…) */
.destacado {
  border: 1px solid var(--line);
  border-left: 3px solid var(--pur);
  background: var(--panel);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-4);
}
.destacado > *:last-child { margin-bottom: 0; }
.destacado.legal-textual {
  border-left-color: var(--warn);
  font-size: .87rem;
  letter-spacing: .01em;
  color: var(--txt);
}
.destacado h3 { margin-top: 0; }

/* Tablas dentro del documento.
   min-width:0 es imprescindible: si no, la tabla ancha empuja la columna
   del grid y termina scrolleando toda la página en horizontal. */
.tabla-envoltorio { overflow-x: auto; min-width: 0; margin: 0 0 var(--sp-4); }
.tabla-legal {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: .88rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.tabla-legal caption {
  caption-side: top;
  text-align: left;
  color: var(--muted);
  font-size: .82rem;
  padding-bottom: var(--sp-2);
}
.tabla-legal th,
.tabla-legal td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tabla-legal th {
  color: var(--txt);
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: rgba(255, 255, 255, .03);
}
.tabla-legal tbody tr:last-child td { border-bottom: 0; }
.tabla-legal td { color: var(--txt-2); }

@media (max-width: 1000px) {
  /* minmax(0,1fr) y no 1fr: «1fr» tiene mínimo auto y una tabla ancha
     lo estira más allá del ancho de la pantalla. */
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .legal-indice {
    position: static;
    max-height: none;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--panel);
    padding: var(--sp-4);
  }
  .legal-doc { max-width: none; }
}

/* ------------------------------------------------------------
   5. Paneles, formularios y botones (arrepentimiento / reset / cuenta)
   ------------------------------------------------------------ */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-5) var(--sp-5);
  box-shadow: var(--sombra-md);
}
.panel + .panel { margin-top: var(--sp-5); }
.panel > h2 {
  font-size: 1.16rem;
  font-weight: 700;
  margin-bottom: var(--sp-2);
}
.panel .panel-ayuda {
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: var(--sp-5);
}
.panel > *:last-child { margin-bottom: 0; }

.panel-peligro { border-color: rgba(255, 107, 107, .35); }
.panel-peligro > h2 { color: var(--danger-txt); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
@media (max-width: 640px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* --- Campos --- */

.campo { margin-bottom: var(--sp-4); }
.campo:last-of-type { margin-bottom: var(--sp-5); }

.campo label,
.etiqueta {
  display: block;
  font-size: .84rem;
  font-weight: 500;
  color: var(--txt-2);
  margin: 0 0 6px 2px;
}
.campo .obligatorio { color: var(--danger-txt); margin-left: 3px; }
.campo .ayuda {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  margin: 6px 0 0 2px;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="password"],
.campo textarea,
.campo select {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--txt);
  font-family: inherit;
  font-size: .95rem;
  line-height: 1.5;
  transition: border-color var(--t-rapida), background var(--t-rapida);
}
.campo textarea { resize: vertical; min-height: 108px; }
.campo select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.campo input::placeholder,
.campo textarea::placeholder { color: var(--muted-2); }

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  border-color: var(--pur);
  background: rgba(155, 92, 255, .07);
}

.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-color: var(--danger); }

.campo .error-campo {
  display: block;
  color: var(--danger-txt);
  font-size: .79rem;
  margin: 6px 0 0 2px;
  min-height: 1px;
}

/* Honeypot: invisible para las personas, visible para los bots. */
.trampa {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Checkbox */
.check {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: .88rem;
  color: var(--txt-2);
  margin-bottom: var(--sp-4);
}
.check input[type="checkbox"] {
  width: 18px; height: 18px;
  margin: 3px 0 0;
  accent-color: var(--pur);
  flex-shrink: 0;
}

/* --- Botones --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 12px 22px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-titulo);
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: filter var(--t-rapida), background var(--t-rapida), border-color var(--t-rapida);
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.btn-primario { background: var(--grad); color: #fff; }
.btn-primario:hover:not(:disabled) { filter: brightness(1.1); color: #fff; }

.btn-ghost {
  background: transparent;
  border-color: var(--line-fuerte);
  color: var(--txt-2);
}
.btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .06); color: var(--txt); }

.btn-peligro {
  background: transparent;
  border-color: rgba(255, 107, 107, .5);
  color: var(--danger-txt);
}
.btn-peligro:hover:not(:disabled) { background: var(--danger-bg); }
.btn-peligro-solido { background: var(--danger); color: #2a0808; border-color: transparent; }
.btn-peligro-solido:hover:not(:disabled) { filter: brightness(1.08); }

.btn-bloque { width: 100%; }
.btn-chico { padding: 8px 14px; font-size: .84rem; }

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* --- Avisos (aria-live / role=alert) --- */

.aviso {
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: .9rem;
  line-height: 1.6;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--txt-2);
  margin: 0 0 var(--sp-4);
}
.aviso:empty { display: none; padding: 0; margin: 0; border: 0; }
.aviso > *:last-child { margin-bottom: 0; }
.aviso.err  { background: var(--danger-bg); border-color: rgba(255, 107, 107, .38); color: var(--danger-txt); }
.aviso.ok   { background: var(--ok-bg);     border-color: rgba(69, 214, 154, .35);  color: var(--ok-txt); }
.aviso.info { background: var(--info-bg);   border-color: rgba(74, 144, 255, .35);  color: var(--info-txt); }
.aviso.warn { background: var(--warn-bg);   border-color: rgba(255, 196, 0, .35);   color: var(--warn-txt); }
.aviso a { color: inherit; text-decoration: underline; }

/* --- Estado de carga --- */
.cargando {
  display: inline-block;
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, .28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: evx-girar .7s linear infinite;
}
@keyframes evx-girar { to { transform: rotate(360deg); } }

.esqueleto {
  height: 14px;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.11), rgba(255,255,255,.05));
  background-size: 200% 100%;
  animation: evx-brillo 1.3s ease-in-out infinite;
}
@keyframes evx-brillo { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ------------------------------------------------------------
   6. Constancia de arrepentimiento
   ------------------------------------------------------------ */

.constancia {
  text-align: center;
  border: 1px solid rgba(69, 214, 154, .35);
  background: linear-gradient(180deg, rgba(69, 214, 154, .10), rgba(69, 214, 154, .02));
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
}
.constancia .etiqueta-codigo {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: var(--sp-3);
}
.codigo-constancia {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ok-txt);
  word-break: break-all;
  margin: 0 0 var(--sp-4);
  user-select: all;
}

/* ------------------------------------------------------------
   7. Medidor de fortaleza de contraseña
   ------------------------------------------------------------ */

.fortaleza { margin: -6px 0 var(--sp-3); }
.fortaleza-barras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-bottom: 6px;
}
.fortaleza-barras span {
  height: 5px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .10);
  transition: background var(--t-media);
}
.fortaleza[data-nivel="1"] .fortaleza-barras span:nth-child(-n+1),
.fortaleza[data-nivel="2"] .fortaleza-barras span:nth-child(-n+2),
.fortaleza[data-nivel="3"] .fortaleza-barras span:nth-child(-n+3),
.fortaleza[data-nivel="4"] .fortaleza-barras span:nth-child(-n+4) { background: currentColor; }
.fortaleza[data-nivel="1"] { color: var(--danger); }
.fortaleza[data-nivel="2"] { color: var(--warn); }
.fortaleza[data-nivel="3"] { color: var(--info); }
.fortaleza[data-nivel="4"] { color: var(--ok); }
.fortaleza-texto { font-size: .78rem; color: var(--muted); }
.fortaleza[data-nivel="1"] .fortaleza-texto { color: var(--danger-txt); }
.fortaleza[data-nivel="2"] .fortaleza-texto { color: var(--warn-txt); }
.fortaleza[data-nivel="3"] .fortaleza-texto { color: var(--info-txt); }
.fortaleza[data-nivel="4"] .fortaleza-texto { color: var(--ok-txt); }

.requisitos { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.requisitos li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 4px;
}
.requisitos li::before {
  content: "○";
  color: var(--muted-2);
  font-size: .9rem;
  width: 1em;
  text-align: center;
}
.requisitos li.cumplido { color: var(--ok-txt); }
.requisitos li.cumplido::before { content: "●"; color: var(--ok); }

/* ------------------------------------------------------------
   8. Página de cuenta
   ------------------------------------------------------------ */

.cuenta-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-6) 0 var(--sp-8);
}
@media (max-width: 980px) {
  .cuenta-layout { grid-template-columns: minmax(0, 1fr); }
}

.cuenta-col { display: flex; flex-direction: column; gap: var(--sp-5); }
.cuenta-col .panel + .panel { margin-top: 0; }

.tarjeta-usuario {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  margin-bottom: var(--sp-4);
}
.avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.tarjeta-usuario .nombre { font-family: var(--font-titulo); font-weight: 600; font-size: 1rem; }
.tarjeta-usuario .correo { color: var(--muted); font-size: .86rem; word-break: break-all; }

.fila-dato {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: .89rem;
}
.fila-dato:last-child { border-bottom: 0; }
.fila-dato dt { color: var(--muted); margin: 0; }
.fila-dato dd { margin: 0; color: var(--txt); text-align: right; }

/* ------------------------------------------------------------
   9. Modal (confirmación de baja de cuenta)
   ------------------------------------------------------------ */

.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(5, 3, 10, .74);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  overflow-y: auto;
}
.modal-fondo[hidden] { display: none; }

.modal {
  width: 100%;
  max-width: 520px;
  background: var(--panel);
  border: 1px solid rgba(255, 107, 107, .35);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sombra-lg);
  margin: auto;
}
.modal h2 {
  font-size: 1.1rem;
  color: var(--danger-txt);
  margin-bottom: var(--sp-3);
  padding-right: 40px;
}
.modal-cerrar {
  position: absolute;
  top: var(--sp-4); right: var(--sp-4);
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.modal-cerrar:hover { color: var(--txt); background: rgba(255, 255, 255, .06); }
.modal-cuerpo { position: relative; }
.modal p, .modal li { font-size: .9rem; color: var(--txt-2); }
.modal ul { padding-left: 1.2rem; margin-bottom: var(--sp-4); }
.modal li { margin-bottom: 5px; }

body.modal-abierto { overflow: hidden; }

/* ------------------------------------------------------------
   10. Pie de página
   ------------------------------------------------------------ */

.evx-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding: var(--sp-7) 0 var(--sp-5);
  margin-top: var(--sp-7);
}

.evx-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}
.evx-footer-col { min-width: 0; }
/* Los emails largos no tienen dónde cortar: sin esto desbordan la columna. */
.evx-footer-col a { overflow-wrap: anywhere; }
@media (max-width: 900px) { .evx-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); } }
@media (max-width: 560px) { .evx-footer-grid { grid-template-columns: minmax(0, 1fr); } }

.evx-footer h3 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted-2);
  margin-bottom: var(--sp-3);
  font-weight: 600;
}
.evx-footer-col a,
.evx-footer-col button.enlace {
  display: block;
  color: var(--txt-2);
  font-size: .88rem;
  padding: 4px 0;
  text-align: left;
}
.evx-footer-col a:hover { color: var(--txt); }
.evx-footer-logo img { height: 36px; margin-bottom: var(--sp-3); }
.evx-footer-lema { color: var(--muted); font-size: .88rem; }

/* Botón que parece link (para "Configurar cookies") */
button.enlace {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: #b493ff;
  cursor: pointer;
  text-align: left;
}
button.enlace:hover { color: var(--txt); text-decoration: underline; }

/* Datos fiscales obligatorios (Ley 24.240 art. 4) */
.evx-fiscal {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
  font-size: .79rem;
  color: var(--muted);
  line-height: 1.75;
}
.evx-fiscal strong { color: var(--txt-2); font-weight: 500; }
.evx-fiscal p { margin: 0 0 var(--sp-2); max-width: 90ch; }
.evx-fiscal .evx-copy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

/* Sellos legales del pie (Data Fiscal / Botón de arrepentimiento) */
.evx-sellos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.evx-sello {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid var(--line-fuerte);
  border-radius: var(--r-md);
  padding: 8px 14px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--txt-2);
  background: rgba(255, 255, 255, .03);
}
.evx-sello:hover { color: var(--txt); background: rgba(255, 255, 255, .07); text-decoration: none; }

/* ------------------------------------------------------------
   11. Impresión — que el PDF salga legible en blanco y negro
   ------------------------------------------------------------ */

@media print {
  :root { --txt: #000; --txt-2: #1a1a1a; --muted: #444; --muted-2: #666; }

  body {
    background: #fff !important;
    background-image: none !important;
    color: #000;
    font-size: 11pt;
    line-height: 1.5;
  }

  .evx-nav,
  .evx-menu-movil,
  .legal-indice,
  .saltar-al-contenido,
  .no-imprimir,
  .btn,
  .evx-sellos,
  #evx-cookies { display: none !important; }

  .legal-layout { display: block; padding: 0; }
  .legal-doc { max-width: none; }

  a { color: #000; text-decoration: underline; }
  /* En papel un link sin URL no sirve de nada. */
  .legal-doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }

  .panel, .destacado, .datos-lista, .tabla-legal, .constancia {
    background: #fff !important;
    border: 1px solid #bbb !important;
    box-shadow: none !important;
  }
  .legal-doc > section {
    break-inside: avoid;
    page-break-inside: avoid;
    border-top: 1px solid #ddd;
  }
  .legal-doc > section > h2 { break-after: avoid; page-break-after: avoid; }
  .legal-doc > section > h2::before { color: #000; background: none; border: 1px solid #999; }

  .evx-footer { background: #fff; border-top: 1px solid #999; margin-top: 24pt; }
}