/* =========================================================
   cc_aviso_privacidad.css
   Estilos para el modal de Aviso de Privacidad (PMDUOET)
   ========================================================= */

/* Contenedor principal dentro del modal-body */
.aviso-privacidad{
  /* visual */
  background: #ffffff;
  border-radius: 14px;
  padding: 18px 18px 14px;
  color: #111827;
  line-height: 1.55;

  /* scroll interno del contenido largo */
  max-height: 72vh;
  overflow: auto;

  /* tipografía */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14.5px;

  /* suaviza el scroll */
  scroll-behavior: smooth;

  /* deja espacio para barra de scroll */
  scrollbar-gutter: stable;
}

/* Título principal */
.aviso-privacidad h2{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #0b1220;
}

/* Subtítulo (el texto en negrita después del h2) */
.aviso-privacidad p strong{
  color: #0b1220;
}

/* Línea divisoria */
.aviso-privacidad hr{
  border: 0;
  height: 1px;
  background: #e5e7eb;
  margin: 14px 0;
}

/* Secciones */
.aviso-privacidad h3{
  margin: 18px 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: #0b1220;
  position: relative;
  padding-left: 12px;
}

/* Barrita lateral para dar look moderno */
.aviso-privacidad h3::before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 4px;
  height: calc(100% - 4px);
  background: #2563eb; /* azul moderno (ajustable a azul IMPLAN) */
  border-radius: 99px;
}

/* Párrafos */
.aviso-privacidad p{
  margin: 0 0 10px;
  color: #111827;
}

/* Texto secundario (nota final) */
.aviso-privacidad em{
  color: #6b7280;
}

/* Links */
.aviso-privacidad a{
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
  word-break: break-word;
}

.aviso-privacidad a:hover{
  text-decoration: underline;
}

/* Bloques destacados (si quieres envolver algo con <div class="ap-box"> ... ) */
.aviso-privacidad .ap-box{
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 12px;
  margin: 10px 0 14px;
}

/* Listas */
.aviso-privacidad ul,
.aviso-privacidad ol{
  margin: 8px 0 14px 18px;
  padding: 0;
}

.aviso-privacidad li{
  margin: 6px 0;
  color: #111827;
}

/* Viñetas más limpias */
.aviso-privacidad ul li::marker{
  color: #2563eb;
}

/* Numeración más marcada */
.aviso-privacidad ol li::marker{
  color: #0b1220;
  font-weight: 800;
}

/* “Chips” para encabezados internos como "Datos de identificación" */
.aviso-privacidad p > strong{
  display: inline-block;
  background: #eef2ff;
  color: #1e40af;
  border: 1px solid #c7d2fe;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12.5px;
  margin: 8px 0 6px;
}

/* Ajustes de scrollbar (Chrome/Edge) */
.aviso-privacidad::-webkit-scrollbar{
  width: 10px;
}

.aviso-privacidad::-webkit-scrollbar-track{
  background: #f3f4f6;
  border-radius: 999px;
}

.aviso-privacidad::-webkit-scrollbar-thumb{
  background: #cbd5e1;
  border-radius: 999px;
  border: 2px solid #f3f4f6;
}

.aviso-privacidad::-webkit-scrollbar-thumb:hover{
  background: #94a3b8;
}

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 640px){
  .aviso-privacidad{
    padding: 14px 14px 12px;
    font-size: 14px;
    max-height: 75vh;
    border-radius: 12px;
  }

  .aviso-privacidad h2{
    font-size: 16.5px;
  }

  .aviso-privacidad h3{
    font-size: 14.5px;
  }
}

/* =========================================================
   JUSTIFICAR TEXTO
   ========================================================= */

.aviso-privacidad p,
.aviso-privacidad li{
  text-align: justify;
  text-justify: inter-word;
}

/* =========================================================
   BOTÓN IR ARRIBA
   ========================================================= */

.aviso-privacidad{
  position: relative; /* necesario para botón interno */
}

/* Botón flotante */
.aviso-privacidad .btn-ir-arriba{
  position: sticky;
  bottom: 12px;

  /* alineación a la derecha SIN float */
  margin-left: auto;

  display: none; /* lo prende JS */
  align-items: center;
  gap: 6px;

  background: #1e40af;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;

  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  transition: all .25s ease;
  z-index: 10;
}

.aviso-privacidad .btn-ir-arriba:hover{
  background: #1d4ed8;
  transform: translateY(-2px);
}

/* Icono flecha */
.aviso-privacidad .btn-ir-arriba::before{
  content: "↑";
  font-weight: 900;
  font-size: 14px;
}

/* En móvil un poco más compacto */
@media (max-width: 640px){
  .aviso-privacidad .btn-ir-arriba{
    padding: 7px 12px;
    font-size: 12px;
  }
}