/* css/docs_legal.css
   Estilos para Términos / Privacidad / Referidos dentro del overlay
   Usa variables ya definidas en styles_app.css (:root)
*/
#editar-contenido .eb-doc{
  text-align:left;
  color: #222 !important;
  font-family: var(--font-body);
  font-size: var(--font-size-text, 14px);
  line-height: 1.55;
  max-width: 920px;
  margin: 0 auto;
  padding: 10px 14px 18px;
}

#editar-contenido .eb-doc__header{
  margin: 4px 0 12px;
}

#editar-contenido .eb-doc__kicker{
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #5b5b5b;
  margin-bottom: 6px;
}

#editar-contenido .eb-doc__title{
  font-family: var(--font-title);
  font-size: 18px;
  margin: 0 0 6px;
  color: #121212;
}

#editar-contenido .eb-doc__meta{
  font-size: 13px;
  color: #555;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

#editar-contenido .eb-doc__badge{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--color-acento);
}

#editar-contenido .eb-doc__toc{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  margin: 10px 0 14px;
}

#editar-contenido .eb-doc__toc summary{
  cursor:pointer;
  font-weight:700;
  font-size: 14px;
  font-family: var(--font-title);
  color:#222;
  outline:none;
}

#editar-contenido .eb-doc__toc ol{
  margin: 10px 0 0 18px;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

#editar-contenido .eb-doc__toc a{
  color: var(--color-acento);
  text-decoration: none;
  font-weight: 600;
}

#editar-contenido .eb-doc__toc a:hover{
  text-decoration: underline;
}

#editar-contenido .eb-doc__content h2{
  font-family: var(--font-title);
  font-size: 16px;
  margin: 18px 0 8px;
  color:#121212;
}

#editar-contenido .eb-doc__content h3{
  font-family: var(--font-title);
  font-size: 14px;
  margin: 14px 0 6px;
  color:#121212;
}

#editar-contenido .eb-doc__content p{
  margin: 8px 0;
}

#editar-contenido .eb-doc__content ul,
#editar-contenido .eb-doc__content ol{
  margin: 8px 0 8px 18px;
}

#editar-contenido .eb-doc__content li{
  margin: 4px 0;
}

#editar-contenido .eb-doc__content hr{
  border: none;
  border-top: 1px solid rgba(0,0,0,.10);
  margin: 16px 0;
}

#editar-contenido .eb-doc__content a{
  color: var(--color-acento);
  font-weight: 600;
}

#editar-contenido .eb-doc__content .notice{
  background: rgba(245,124,0,.10);
  border: 1px solid rgba(245,124,0,.25);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 12px 0;
}

/* móvil */
@media (max-width: 480px){
  #editar-contenido .eb-doc{ padding: 8px 10px 16px; }
  #editar-contenido .eb-doc__title{ font-size: 17px; }
  #editar-contenido .eb-doc__content h2{ font-size: 15px; }
}

/* ===== TOC (details/summary) ===== */
#editar-contenido details.eb-toc {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
}

#editar-contenido details.eb-toc > summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  user-select: none;
}

#editar-contenido details.eb-toc > summary::-webkit-details-marker {
  display: none;
}

#editar-contenido details.eb-toc > summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 8px;
  transform: translateY(-1px);
}

#editar-contenido details.eb-toc[open] > summary::before {
  content: "▼";
}

#editar-contenido details.eb-toc .eb-toc-list {
  margin: 10px 0 0 0;
  padding-left: 18px;
}

#editar-contenido details.eb-toc .eb-toc-list a {
  text-decoration: none;
}

#editar-contenido details.eb-toc .eb-toc-list a:hover {
  text-decoration: underline;
}

/* ===== Botón Aceptar (overlay legal) ===== */
.eb-doc__actions{
  margin-top: 16px;
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
}

.eb-btn{
  appearance: none;
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.eb-btn--primary{
  background: var(--color-acento, #F57C00);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}

.eb-btn--primary:hover{
  background: var(--color-acento-hover, #E65100);
}

/* Índice: no usar numeración automática (porque el texto ya trae 6.1, 12.5, etc.) */
#editar-contenido .eb-toc-list ol{
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

#editar-contenido .eb-toc-list li{
  margin: 6px 0;
}

/* Índice: forzar color sobrio aunque el HTML traiga estilos inline/clases */
#editar-contenido .eb-toc-list a,
#editar-contenido .eb-doc__toc a,
#editar-contenido a{
  color: #717070 !important;           /* gris fuerte */
  text-decoration: none;
}

#editar-contenido .eb-toc-list a:hover,
#editar-contenido .eb-doc__toc a:hover,
#editar-contenido a:hover{
  color: #717070 !important;
  text-decoration: underline;
}

/* Evita que los anchors queden tapados por el banner sticky */
#editar-contenido h2[id],
#editar-contenido h3[id],
#editar-contenido h4[id],
#editar-contenido [id] {
  scroll-margin-top: 72px; /* ajusta 64–90 según tu banner */
}

/* ===========================
   Ajustes móvil (overlay legal)
   =========================== */
@media (max-width: 520px) {
  /* tamaño base */
  #editar-contenido {
    font-size: 14px;
    line-height: 1.55;
  }

  /* encabezado del documento */
  #editar-contenido .eb-doc__kicker {
    font-size: 12px;
    letter-spacing: .02em;
  }

  #editar-contenido .eb-doc__title,
  #editar-contenido h1 {
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin: 6px 0 6px;
  }

  #editar-contenido h2 {
    font-size: 16px !important;
    line-height: 1.25 !important;
    margin: 16px 0 8px;
  }

  #editar-contenido h3 {
    font-size: 15px !important;
    line-height: 1.25 !important;
    margin: 14px 0 6px;
  }

  /* párrafos y listas */
  #editar-contenido p {
    font-size: 14px;
    line-height: 1.6;
    margin: 10px 0;
  }

  #editar-contenido ul,
  #editar-contenido ol {
    padding-left: 18px;
  }

  #editar-contenido li {
    margin: 6px 0;
  }

  /* el “hero” negritas en móvil se ve pesado: suavizar */
  #editar-contenido strong {
    font-weight: 700;
  }

  /* índice compacto */
  #editar-contenido details.eb-toc {
    padding: 10px 12px;
  }
  #editar-contenido details.eb-toc > summary {
    font-size: 14px;
  }
  #editar-contenido .eb-toc-list {
    font-size: 13.5px;
    line-height: 1.35;
  }
}

/* ===========================
   Normalizar listas del documento (no TOC)
   =========================== */

/* Listas normales (fuera del índice) */
#editar-contenido ul:not(.eb-toc-list ul),
#editar-contenido ol:not(.eb-toc-list ol) {
  margin: 10px 0 14px;
  padding-left: 18px;
}

#editar-contenido li {
  font-size: 14px;
  line-height: 1.55;
  margin: 6px 0;
}

/* Evitar que los bullets queden enormes por estilos heredados */
#editar-contenido li::marker {
  font-size: 0.95em;
}

/* Si hay listas tipo "responsable de:" que se ven muy separadas, compactar */
@media (max-width: 520px) {
  #editar-contenido ul:not(.eb-toc-list ul),
  #editar-contenido ol:not(.eb-toc-list ol) {
    padding-left: 16px;
  }

  #editar-contenido li {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 5px 0 !important;
  }

  /* En móvil: si algún estilo metido en HTML hace los <p> demasiado grandes */
  #editar-contenido p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 520px) {
  #editar-contenido li * {
    font-size: inherit !important;
    line-height: inherit !important;
  }
}

#editar-contenido .eb-doc__content,
#editar-contenido .eb-doc__content p,
#editar-contenido .eb-doc__content li,
#editar-contenido .eb-doc__content span,
#editar-contenido .eb-doc__content div:not(.notice){
  color: #222 !important;
}

#editar-contenido ::selection{
  background: rgba(37, 99, 235, 0.22);
  color: #111;
}