/*
 * legal.css — Visor de textos legales y aviso de cookies.
 *
 * Lo cargan las tres páginas (index.html, qumeriq.html y mocca.html) y
 * acompaña a assets/legal.js, que inserta el marcado. Sólo usa tokens de
 * theme.css, así que se adapta al tema de cada página sin más.
 */

/* ════════════════════════════════════════════════════════════════════════
   Modal legal + banner de cookies
   (Contenido heredado de la web anterior: los textos jurídicos siguen
   siendo válidos y no se tocan.)

   La FORMA, en cambio, es la de la suite: visor y aviso reproducen los de
   DEZIMI, OCTABI y QUMERIQ. Los valores duros —700 px de
   visor, 600 px de tarjeta, 80vh, el fondo rgba(26,31,46,0.55)— vienen de
   los `style` en línea de LegalModal.tsx y CookieBanner.tsx; están puestos
   a pelo allí, así que aquí tampoco se abstraen: si cambian en el
   componente, hay que cambiarlos aquí, y un token propio sólo escondería
   que las dos copias tienen que moverse a la vez.
   ════════════════════════════════════════════════════════════════════════ */
.overlay {
  position: fixed;
  inset: 0;
  /* Por encima del aviso de cookies (500): la política se abre desde el
     propio aviso, y si éste quedara delante taparía el final del texto. */
  z-index: 600;
  background: rgba(26, 31, 46, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.overlay.open { display: flex; }

.modal {
  background: var(--surface);
  border: var(--frame-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  width: min(700px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  color: var(--text);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
/* Sin versalitas ni interletraje: el visor de las apps titula en redonda
   a --fs-md, y la mayúscula forzada haría que el mismo documento se
   leyera distinto según por dónde se abriera. */
.modal-head h2 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}
[data-theme="datarams"] .modal-head h2::after,
[data-theme="dataramslight"] .modal-head h2::after { display: none; }
.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-3);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.modal-close:hover { background: var(--brand-light); color: var(--brand-dark); }

/* flex-shrink: 0 porque .modal es una columna flex con altura máxima, y
   overflow-x: auto deja que la fila de pestañas se encoja por debajo de
   su alto: sin esto, las pestañas salen cortadas por abajo. */
.tabs { display: flex; flex-shrink: 0; border-bottom: 1px solid var(--border-dim); background: var(--surface-2); overflow-x: auto; }
.tab {
  flex: 1;
  min-width: max-content;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.tab:hover { background: var(--brand-bg); color: var(--brand); }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 800; }

.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.75;
}
.modal-body h3 {
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 20px 0 8px;
}
.modal-body h3:first-child { margin-top: 0; }
.modal-body h4 { font-size: var(--fs-base); font-weight: 700; color: var(--text); margin: 14px 0 6px; }
.modal-body p { margin-bottom: 10px; color: var(--text-2); }
.modal-body ul { margin: 6px 0 12px; padding-inline-start: 22px; color: var(--text-2); }
.modal-body li { margin-bottom: 4px; }
.datos-box {
  background: var(--brand-bg);
  border-inline-start: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin: 10px 0 16px;
  font-size: var(--fs-sm);
  color: var(--text);
}
.legal-section { display: none; }
.legal-section.active { display: block; }

/* ── Aviso de cookies ──
   Tarjeta flotante centrada abajo, no una barra a todo lo ancho: es lo
   que enseñan las tres apps, y ahí la razón era que un aviso que ocupa
   todo el borde inferior se lee como un muro y no como una pregunta.
   Ahora que la decisión se comparte entre la web y las apps (una cookie
   de dominio, ver assets/legal.js), tienen que ser además el MISMO
   objeto: quien acepta aquí reconoce lo que ya contestó si vuelve a
   aparecer, y quien lo ve dos veces sabe que es lo mismo. */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(600px, 92vw);
  z-index: 500;
  display: none;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.cookie-banner.show { display: flex; }

/* Cuadrado tintado con el glifo. El radio de 8 px va a pelo, como en el
   componente: es el único sitio de la web donde una esquina no obedece a
   --radius, y obedecerlo lo haría cuadrado en el tema datafox, donde
   --radius es 0, mientras en las apps sigue redondeado. */
.cookie-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-light);
  color: var(--brand-dark);
  border-radius: 8px;
}

.cookie-body { flex: 1; min-width: 0; }
.cookie-title {
  font-weight: 700;
  font-size: var(--fs-sm);
  margin-bottom: 4px;
  color: var(--text);
}
.cookie-text { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.55; }

.cookie-more {
  display: inline-block;
  margin-top: 8px;
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand-dark);
  text-decoration: underline;
  cursor: pointer;
}
.cookie-more:hover { color: var(--brand); }

.cookie-actions { display: flex; gap: 8px; margin-top: 12px; }
.cookie-btn {
  padding: 8px 18px;
  font-family: inherit;
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
/* Aceptar y rechazar tienen el mismo tamaño y la misma caja a propósito:
   la AEPD considera práctica engañosa que rechazar cueste más que
   aceptar. Lo que cambia es el relleno, no el peso del botón. */
.cookie-btn.primary {
  background: var(--brand);
  color: #fff;
  border: none;
  font-weight: 700;
}
.cookie-btn.primary:hover { background: var(--brand-dark); }
.cookie-btn.secondary {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
  font-weight: 400;
}
.cookie-btn.secondary:hover { background: var(--brand-light); color: var(--brand-dark); }

@media (max-width: 767px) {
  .modal-body { padding: 20px; }
  .cookie-banner { bottom: 12px; width: calc(100vw - 24px); padding: 16px; gap: 12px; }
  .cookie-actions { flex-wrap: wrap; }
}