/* ==========================================================
   GROUP CEA — legal.css
   Estilos compartidos de las páginas de cumplimiento legal:
   Política de Privacidad, Términos y Condiciones, Política de
   Cookies y Libro de Reclamaciones Virtual.

   Los estilos de .politica-* provienen de la hoja en línea que
   tenía privacidad.html; se Mudaron aquí para que las cuatro
   páginas legales compartan una sola fuente y no se dupliquen.

   REGLA VISUAL: cero emojis. Toda la iconografía es SVG (Lucide).
   ========================================================== */

/* ---------- Encabezado sobre fondo claro ----------
   El color de la marca es blanco porque esta disenada para montarse sobre el
   hero oscuro (indice, tesis, legal...). Las cuatro paginas legales abren con
   el encabezado FUERA de una seccion oscura, asi que sin fondo el texto
   "GROUP" quedaria blanco sobre blanco y la marca se leeria solo como "CEA".
   Aqui se le da fondo marino a la banda que envuelve al encabezado.

   La banda (y no el encabezado) lleva el fondo porque el encabezado mide
   1440px centrado: en pantallas mas anchas quedaban barras blancas a los
   lados. La banda ocupa todo el ancho y el encabezado sigue transparente.

   OJO CON EL SELECTOR "body > ": es deliberado y no se debe simplificar a
   ".banda-cabecera". Las paginas con hero (indice, tesis, empresarial,
   legal, cursos, nosotros, contacto) meten el encabezado DENTRO de la
   seccion .hero, y la imagen del hero ocupa tambien esa franja: alli el
   encabezado debe verse TRANSPARENTE. Como legal.css lo cargan casi todas las
   paginas (trae el aviso de cookies y los enlaces del pie), una regla global
   pondria el fondo marino encima del hero en todas ellas.
   El combinador de hijo directo "> " discrimina solo por estructura: matchea
   las cuatro paginas legales, donde la banda cuelga directa del body, y
   no matchea las de hero, donde cuelga de la seccion. Asi el fondo se decide
   solo, sin marcar cada pagina con una clase extra.
   El :not(:has(.xt-pildora)) excluye la banda del blog (noticias.html tambien
   carga esta hoja y su banda ya tiene su propio fondo): alli van el
   encabezado y el cotizador, aqui solo el encabezado. */

body > .banda-cabecera:not(:has(.xt-pildora)) {
  background: linear-gradient(145deg, #071933 0%, #0A2244 100%);
  border-bottom: 1px solid rgba(212, 175, 55, .3);
}

/* ---------- Contenedor del documento legal ---------- */

.politica-contenido {
  max-width: 860px;
  margin: 0 auto;
  background: #ffffff;
  padding: 50px 48px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 59, 122, 0.08);
  border: 1px solid var(--linea, #e6ebf2);
}

@media (max-width: 768px) {
  .politica-contenido {
    padding: 32px 22px;
  }
}

.politica-seccion {
  margin-bottom: 38px;
}

.politica-seccion h2 {
  font-size: 1.35rem;
  color: var(--navy, #003B7A);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid var(--cream, #F5F1E8);
  padding-bottom: 8px;
}

.politica-seccion h2 span.num {
  background: linear-gradient(135deg, var(--gold, #D4AF37), var(--gold-2, #B89228));
  color: #ffffff;
  font-size: 0.85rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.politica-seccion p,
.politica-seccion li {
  font-size: 1rem;
  line-height: 1.7;
  color: #334155;
  margin-bottom: 12px;
}

.politica-seccion ul {
  padding-left: 24px;
  margin-bottom: 16px;
}

.politica-seccion li {
  margin-bottom: 8px;
}

.politica-seccion a {
  color: var(--navy-700, #1A5799);
  text-decoration: underline;
}

.politica-seccion strong {
  color: #1e293b;
}

/* ---------- Cajas destacadas ---------- */

.caja-destacada {
  background: #f8fafc;
  border-left: 4px solid var(--gold, #D4AF37);
  padding: 18px 22px;
  border-radius: 0 12px 12px 0;
  margin: 20px 0;
}

.caja-destacada p {
  margin: 0;
  font-weight: 500;
}

.caja-destacada p + p {
  margin-top: 8px;
}

.caja-contacto-legal {
  background: linear-gradient(145deg, #071933 0%, #0A2244 100%);
  color: #ffffff;
  padding: 28px;
  border-radius: 16px;
  margin-top: 30px;
  border: 1px solid rgba(212, 175, 55, 0.35);
}

.caja-contacto-legal h3 {
  color: var(--gold-bright, #F8DE90);
  margin-bottom: 12px;
  font-size: 1.2rem;
}

.caja-contacto-legal p {
  color: #cbd5e1;
  margin-bottom: 8px;
}

.caja-contacto-legal a {
  color: var(--gold-bright, #F8DE90);
  text-decoration: underline;
}

/* ---------- Índice navegable (Términos) ---------- */

.legal-indice {
  background: var(--mist, #EEF2F8);
  border: 1px solid var(--linea, #e6ebf2);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 34px;
  columns: 2;
  column-gap: 32px;
}

.legal-indice h2 {
  font-size: 1.05rem;
  color: var(--navy, #003B7A);
  margin-bottom: 12px;
  columns: 1;
}

.legal-indice ol {
  padding-left: 20px;
  margin: 0;
}

.legal-indice li {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #475569;
  margin-bottom: 6px;
  break-inside: avoid;
}

.legal-indice a {
  color: var(--navy-700, #1A5799);
  text-decoration: none;
}

.legal-indice a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .legal-indice {
    columns: 1;
    padding: 20px;
  }
}

/* ---------- Aviso legal destacado (edad, advertencias) ---------- */

.aviso-legal {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fffbeb;
  border: 1px solid var(--gold-light, #E8D3A5);
  border-left: 4px solid var(--gold-2, #D4AF37);
  border-radius: 0 14px 14px 0;
  padding: 20px 22px;
  margin: 22px 0;
}

.aviso-legal__icono {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--gold-2, #B89228);
  margin-top: 2px;
}

.aviso-legal__icono svg {
  width: 100%;
  height: 100%;
}

.aviso-legal p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.65;
  color: #475569;
}

/* ---------- Datos de contacto en las cajas legales (icono SVG) ---------- */

.caja-contacto-legal .dato-legal {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: #cbd5e1;
  margin-bottom: 8px;
}

.caja-contacto-legal .dato-legal svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--gold-bright, #E5C354);
}

.caja-contacto-legal .dato-legal strong {
  color: #ffffff;
}

/* ---------- Boton de preferencias de cookies en el pie ---------- */

.pie-legal-enlaces a,
.enlace-boton-legal {
  color: var(--gold, #C8A25A);
  text-decoration: underline;
}

.enlace-boton-legal {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.enlace-boton-legal:hover {
  color: var(--gold-bright, #E5C354);
}

/* ---------- Tabla de almacenamiento local (Cookies) ---------- */

.tabla-legal {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 8px;
  font-size: 0.92rem;
  border: 1px solid var(--linea, #e6ebf2);
  border-radius: 12px;
  overflow: hidden;
}

.tabla-legal th,
.tabla-legal td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--linea, #e6ebf2);
  color: #475569;
  vertical-align: top;
}

.tabla-legal th {
  background: var(--navy, #003B7A);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.tabla-legal tr:last-child td {
  border-bottom: none;
}

.tabla-legal tbody tr:nth-child(even) {
  background: #f8fafc;
}

.tabla-legal th:first-child,
.tabla-legal td:first-child {
  width: 26%;
  min-width: 168px;
}

.tabla-legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  background: var(--mist, #EEF2F8);
  padding: 2px 7px;
  border-radius: 5px;
  color: var(--deep, #001E3D);
  /* Rompe solo cuando no cabe, y con preferencia por los limites de palabra. */
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
}

@media (max-width: 768px) {
  .tabla-legal,
  .tabla-legal thead,
  .tabla-legal tbody,
  .tabla-legal tr,
  .tabla-legal th,
  .tabla-legal td {
    display: block;
    width: 100%;
  }

  .tabla-legal thead {
    display: none;
  }

  .tabla-legal tr {
    border-bottom: 2px solid var(--linea, #e6ebf2);
    padding: 6px 0;
  }

  .tabla-legal td {
    border-bottom: none;
    padding: 7px 16px;
  }

  .tabla-legal td::before {
    content: attr(data-rotulo) ': ';
    font-weight: 600;
    color: var(--navy, #003B7A);
  }
}

/* ---------- Casilla de consentimiento ---------- */

.casilla-consentimiento {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 18px 0 6px;
  cursor: pointer;
}

.casilla-consentimiento input[type="checkbox"] {
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  accent-color: var(--navy, #003B7A);
  flex-shrink: 0;
  cursor: pointer;
}

.casilla-consentimiento__texto {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #475569;
}

.casilla-consentimiento__texto a {
  color: var(--navy-700, #1A5799);
  text-decoration: underline;
}

/* ---------- Banner de consentimiento de cookies ---------- */

.aviso-cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #ffffff;
  border-top: 3px solid var(--gold-2, #D4AF37);
  box-shadow: 0 -8px 32px rgba(0, 30, 61, 0.16);
  padding: 13px 0 14px;
  transform: translateY(120%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.aviso-cookies.aviso-cookies--visible {
  transform: translateY(0);
}

.aviso-cookies__contenido {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.aviso-cookies__texto {
  flex: 1 1 460px;
  min-width: 0;
}

/* El titulo va EN LINEA con el parrafo, no en una linea propia: asi el aviso
   ocupa una o dos lineas en vez de cinco (titulo + cuatro de texto). Por eso
   es un span con display inline-flex y no un bloque. */
.aviso-cookies__titulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fuente-display, 'Montserrat', sans-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy, #003B7A);
  vertical-align: middle;
  margin-right: 4px;
}

.aviso-cookies__titulo svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--gold-2, #B89228);
}

.aviso-cookies__texto p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #475569;
  margin: 0;
}

.aviso-cookies__texto a {
  color: var(--navy-700, #1A5799);
  text-decoration: underline;
  font-weight: 600;
}

.aviso-cookies__acciones {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Botones "Aceptar" y "Solo los necesarios". El padding vertical se redujo a
   la mitad (13px -> 6px) porque el grosor se veia exagerado: el alto total
   era 26px de padding + 22.5px de texto + 2px de borde. El texto por si solo
   mide 22.5px, asi que la mitad exacta del alto original no cabe; el padding
   es la unica parte comprimible y es la que marca el grosor a la vista.
   El padding horizontal baja tambien (26px -> 20px) para que los botones no
   queden anchos y planos, y el radio se ajusta al nuevo alto. */
.aviso-cookies__boton {
  font-family: var(--fuente-display, 'Montserrat', sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 6px 20px;
  border-radius: 8px;
  border: 1.5px solid var(--navy, #003B7A);
  cursor: pointer;
  transition: all .25s ease;
  white-space: nowrap;
}

.aviso-cookies__boton--aceptar {
  background: linear-gradient(135deg, var(--gold-bright, #E5C354), var(--gold-2, #D4AF37) 60%, #B89228);
  color: var(--deep, #001E3D);
  border-color: transparent;
}

.aviso-cookies__boton--aceptar:hover {
  filter: brightness(1.06);
}

.aviso-cookies__boton--rechazar {
  background: transparent;
  color: var(--navy, #003B7A);
}

.aviso-cookies__boton--rechazar:hover {
  background: var(--mist, #EEF2F8);
}

@media (max-width: 640px) {
  .aviso-cookies__acciones {
    width: 100%;
  }

  .aviso-cookies__boton {
    flex: 1 1 auto;
  }
}

/* ---------- Formulario del Libro de Reclamaciones ---------- */

.libro-reclamaciones-form {
  max-width: 860px;
  margin: 0 auto;
  background: #ffffff;
  padding: 46px 48px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 59, 122, 0.08);
  border: 1px solid var(--linea, #e6ebf2);
}

@media (max-width: 768px) {
  .libro-reclamaciones-form {
    padding: 30px 20px;
  }
}

.grupo-campos {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.grupo-campos > .campo-legal {
  flex: 1 1 200px;
}

.campo-legal {
  display: block;
  margin-bottom: 18px;
}

.campo-legal > label {
  display: block;
  font-family: var(--fuente-display, 'Montserrat', sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 8px;
}

.campo-legal input[type="text"],
.campo-legal input[type="email"],
.campo-legal input[type="tel"],
.campo-legal select,
.campo-legal textarea {
  width: 100%;
  font-family: var(--fuente, 'Lato', sans-serif);
  font-size: 0.96rem;
  color: #1e293b;
  padding: 13px 15px;
  border: 1.5px solid var(--linea, #e6ebf2);
  border-radius: 10px;
  background: #fbfcfe;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.campo-legal textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

.campo-legal input:focus,
.campo-legal select:focus,
.campo-legal textarea:focus {
  outline: none;
  border-color: var(--navy-700, #1A5799);
  box-shadow: 0 0 0 3px rgba(26, 87, 153, 0.12);
}

.campo-legal--error input,
.campo-legal--error select,
.campo-legal--error textarea {
  border-color: #dc2626;
}

.mensaje-error-campo {
  display: none;
  font-size: 0.82rem;
  color: #dc2626;
  margin-top: 6px;
}

.campo-legal--error .mensaje-error-campo {
  display: block;
}

.acciones-libro {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.boton-legal {
  font-family: var(--fuente-display, 'Montserrat', sans-serif);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 15px 30px;
  border-radius: 11px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all .25s ease;
}

.boton-legal svg {
  width: 18px;
  height: 18px;
}

.boton-legal--primario {
  background: linear-gradient(135deg, var(--gold-bright, #E5C354), var(--gold-2, #D4AF37) 60%, #B89228);
  color: var(--deep, #001E3D);
}

.boton-legal--primario:hover {
  filter: brightness(1.06);
}

.boton-legal--secundario {
  background: transparent;
  color: var(--navy, #003B7A);
  border: 1.5px solid var(--navy, #003B7A);
}

.boton-legal--secundario:hover {
  background: var(--mist, #EEF2F8);
}

/* ---------- Comprobante del registro ---------- */

.comprobante-registro {
  display: none;
  margin-top: 30px;
  padding: 30px;
  border-radius: 16px;
  background: #f0fdf4;
  border: 1px solid #86efac;
}

.comprobante-registro.comprobante-registro--visible {
  display: block;
}

.comprobante-registro h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--fuente-display, 'Montserrat', sans-serif);
  font-size: 1.15rem;
  color: #15803d;
  margin-bottom: 16px;
}

.comprobante-registro h3 svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.codigo-registro {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--deep, #001E3D);
  background: #ffffff;
  border: 2px dashed #86efac;
  padding: 12px 20px;
  border-radius: 10px;
  margin-bottom: 16px;
}

.resumen-registro {
  background: #ffffff;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 20px 22px;
  font-size: 0.92rem;
  line-height: 1.7;
  color: #475569;
}

.resumen-registro p {
  margin: 0 0 8px;
}

.resumen-registro strong {
  color: #1e293b;
}

.estado-libro {
  margin-top: 16px;
  font-size: 0.9rem;
  font-weight: 600;
}

.estado-libro--error {
  color: #dc2626;
}

.estado-libro--exito {
  color: #15803d;
}

/* ---------- Aviso oficial del Libro de Reclamaciones ---------- */

.aviso-oficial-lr {
  border: 2px solid var(--navy, #003B7A);
  border-radius: 14px;
  padding: 28px 30px;
  margin-bottom: 30px;
  background: #ffffff;
}

.aviso-oficial-lr__titulo {
  font-family: var(--fuente-display, 'Montserrat', sans-serif);
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy, #003B7A);
  text-align: center;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--linea, #e6ebf2);
}

.aviso-oficial-lr p {
  font-size: 0.94rem;
  line-height: 1.7;
  color: #334155;
  margin-bottom: 12px;
}

.aviso-oficial-lr ul {
  padding-left: 22px;
  margin-bottom: 16px;
}

.aviso-oficial-lr li {
  font-size: 0.94rem;
  line-height: 1.7;
  color: #334155;
  margin-bottom: 7px;
}

/* ---------- Impresión del comprobante ---------- */

@media print {
  .encabezado-sitio,
  .whatsapp-flotante,
  .pie-sitio,
  .aviso-cookies,
  .pie-legal-enlaces,
  .no-imprimir {
    display: none !important;
  }

  body {
    background: #ffffff !important;
  }

  .comprobante-registro {
    border: 2px solid #000000;
    page-break-inside: avoid;
  }

  .politica-contenido,
  .libro-reclamaciones-form {
    box-shadow: none !important;
    border: none !important;
  }
}