/* =====================================================================
   WP Seguro - Estilos sobre Bootstrap 5
   Dos acentos con significado: azul = proteger (antes), ambar/rojo =
   urgente (despues). Nada de verde WhatsApp, a proposito.
   ===================================================================== */

:root{
  --wp-tinta:#111827;
  --wp-tinta-suave:#4b5563;
  --wp-borde:#e5e7eb;
  --wp-fondo:#ffffff;
  --wp-fondo-suave:#f7f8fa;

  --wp-proteger:#1d4ed8;
  --wp-proteger-oscuro:#1e40af;
  --wp-proteger-suave:#eff4ff;

  --wp-urgente:#b42318;
  --wp-urgente-oscuro:#912018;
  --wp-urgente-suave:#fef3f2;

  --wp-aviso:#92400e;
  --wp-aviso-fondo:#fffbeb;
  --wp-aviso-borde:#fde68a;

  --wp-radio:12px;
  --wp-sombra:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --wp-sombra-alta:0 4px 12px rgba(16,24,40,.08);
}

html{ -webkit-text-size-adjust:100%; }
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--wp-tinta);
  background:var(--wp-fondo);
  line-height:1.6;
}

a{ color:var(--wp-proteger); text-underline-offset:.18em; }
a:hover{ color:var(--wp-proteger-oscuro); }

:focus-visible{
  outline:3px solid var(--wp-proteger);
  outline-offset:2px;
  border-radius:4px;
}

.salto-contenido{
  position:absolute; top:.5rem; left:.5rem; z-index:1080;
  background:var(--wp-proteger); color:#fff; padding:.5rem .9rem; border-radius:8px;
}

/* --- Barra de aviso permanente -------------------------------------- */
.barra-aviso{
  background:var(--wp-aviso-fondo);
  border-bottom:1px solid var(--wp-aviso-borde);
  color:var(--wp-aviso);
  padding:.55rem 0;
}
.barra-aviso i{ font-size:1.05rem; line-height:1.5; }

/* --- Cabecera -------------------------------------------------------- */
.cabecera{
  background:var(--wp-fondo);
  border-bottom:1px solid var(--wp-borde);
  position:sticky; top:0; z-index:1030;
}
.navbar-brand{ display:flex; align-items:center; gap:.6rem; padding:.4rem 0; }
.marca-sigla{
  display:inline-grid; place-items:center;
  width:40px; height:40px; flex:0 0 40px;
  background:var(--wp-proteger); color:#fff;
  border-radius:10px; font-weight:800; letter-spacing:.02em; font-size:1rem;
}
.marca-texto{ display:flex; flex-direction:column; line-height:1.15; }
.marca-texto strong{ font-size:1.05rem; color:var(--wp-tinta); }
.marca-texto small{ font-size:.72rem; color:var(--wp-tinta-suave); }
.navbar .nav-link{ color:var(--wp-tinta-suave); font-weight:500; }
.navbar .nav-link:hover,
.navbar .nav-link.active{ color:var(--wp-proteger); }
.buscador-nav{ gap:.35rem; min-width:190px; }

/* --- Botones --------------------------------------------------------- */
.btn-urgente,
.btn-proteger{ font-weight:600; border-radius:10px; border:1px solid transparent; }
.btn-urgente{ background:var(--wp-urgente); color:#fff; }
.btn-urgente:hover,
.btn-urgente:focus{ background:var(--wp-urgente-oscuro); color:#fff; }
.btn-proteger{ background:var(--wp-proteger); color:#fff; }
.btn-proteger:hover,
.btn-proteger:focus{ background:var(--wp-proteger-oscuro); color:#fff; }
.text-urgente{ color:var(--wp-urgente); }

/* --- Portada --------------------------------------------------------- */
.portada-hero{
  background:linear-gradient(180deg,var(--wp-proteger-suave) 0%,var(--wp-fondo) 100%);
  border-bottom:1px solid var(--wp-borde);
  padding:2.5rem 0 2.75rem;
}
.hero-etiqueta{
  text-transform:uppercase; letter-spacing:.08em; font-size:.74rem;
  font-weight:700; color:var(--wp-proteger); margin-bottom:.5rem;
}
.hero-titulo{
  font-size:clamp(1.75rem,4.5vw,2.75rem);
  font-weight:800; line-height:1.2; max-width:22ch; margin-bottom:.75rem;
}
.hero-bajada{
  font-size:1.05rem; color:var(--wp-tinta-suave);
  max-width:60ch; margin-bottom:1.5rem;
}
.hero-acciones{ display:flex; flex-wrap:wrap; gap:.75rem; }
.hero-acciones .btn{ flex:1 1 260px; }
.hero-nota{
  margin-top:1.1rem; font-size:.85rem; color:var(--wp-tinta-suave);
}

/* --- Secciones ------------------------------------------------------- */
.seccion{ padding:2.25rem 0; }
.seccion-encabezado{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; margin-bottom:1.1rem; flex-wrap:wrap;
}
.seccion-titulo{ font-size:1.35rem; font-weight:700; margin:0; }
.seccion-mas{ font-size:.9rem; font-weight:600; text-decoration:none; }

/* --- Ayuda urgente --------------------------------------------------- */
.lista-urgencias{ display:grid; gap:.6rem; }
.urgencia-item{
  display:flex; align-items:center; gap:.9rem;
  padding:1rem 1.1rem;
  background:var(--wp-urgente-suave);
  border:1px solid #fecdca;
  border-left:4px solid var(--wp-urgente);
  border-radius:var(--wp-radio);
  text-decoration:none; color:var(--wp-tinta);
  transition:transform .12s ease, box-shadow .12s ease;
}
.urgencia-item:hover{
  color:var(--wp-tinta);
  transform:translateX(2px);
  box-shadow:var(--wp-sombra-alta);
}
.urgencia-numero{
  display:inline-grid; place-items:center; flex:0 0 32px;
  width:32px; height:32px; border-radius:50%;
  background:var(--wp-urgente); color:#fff; font-weight:700; font-size:.9rem;
}
.urgencia-texto{ flex:1 1 auto; display:flex; flex-direction:column; }
.urgencia-texto strong{ font-size:1.02rem; }
.urgencia-texto small{ color:var(--wp-tinta-suave); font-size:.86rem; }
.urgencia-item .bi-chevron-right{ color:var(--wp-urgente); flex:0 0 auto; }

/* --- Tarjetas de tema ------------------------------------------------ */
.tarjeta-tema{
  display:flex; flex-direction:column; height:100%;
  padding:1.15rem; border:1px solid var(--wp-borde);
  border-radius:var(--wp-radio); background:var(--wp-fondo);
  text-decoration:none; color:var(--wp-tinta); box-shadow:var(--wp-sombra);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.tarjeta-tema:hover{ color:var(--wp-tinta); border-color:var(--wp-proteger); box-shadow:var(--wp-sombra-alta); }
.tema-icono{ font-size:1.5rem; color:var(--wp-proteger); margin-bottom:.5rem; }
.tema-titulo{ font-size:1.05rem; font-weight:700; margin-bottom:.35rem; }
.tema-texto{ font-size:.9rem; color:var(--wp-tinta-suave); flex:1 1 auto; margin-bottom:.6rem; }
.tema-cuenta{ font-size:.78rem; color:var(--wp-tinta-suave); font-weight:600; }

/* --- Tarjeta de contenido -------------------------------------------- */
.tarjeta-contenido{
  display:flex; flex-direction:column;
  padding:1.1rem; border:1px solid var(--wp-borde);
  border-radius:var(--wp-radio); background:var(--wp-fondo);
  box-shadow:var(--wp-sombra);
}
.tarjeta-meta{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.55rem; }
.tarjeta-categoria{ font-size:.78rem; color:var(--wp-tinta-suave); }
.tarjeta-titulo{ font-size:1.05rem; font-weight:700; margin-bottom:.4rem; }
.tarjeta-titulo a{ text-decoration:none; color:var(--wp-tinta); }
.tarjeta-titulo a:hover{ color:var(--wp-proteger); }
.tarjeta-resumen{ font-size:.9rem; color:var(--wp-tinta-suave); flex:1 1 auto; margin-bottom:.7rem; }
.tarjeta-pie{
  display:flex; flex-wrap:wrap; gap:.4rem .75rem;
  font-size:.78rem; color:var(--wp-tinta-suave); margin:0;
}
.revisado{ color:#15803d; }

/* --- Pildoras -------------------------------------------------------- */
.pildora{
  display:inline-block; padding:.12rem .5rem; border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.01em;
  background:var(--wp-fondo-suave); color:var(--wp-tinta-suave);
  border:1px solid var(--wp-borde);
}
.pildora-urgencia{ background:var(--wp-urgente-suave); color:var(--wp-urgente); border-color:#fecdca; }
.pildora-guia{ background:var(--wp-proteger-suave); color:var(--wp-proteger); border-color:#c7d7fe; }
.pildora-articulo{ background:var(--wp-fondo-suave); }
.pildora-fuente{ margin-right:.35rem; }
.pildora-oficial{ background:#ecfdf3; color:#027a48; border-color:#abefc6; }
.pildora-academica{ background:#eef4ff; color:#3538cd; border-color:#c7d7fe; }
.pildora-medio{ background:#fffaeb; color:#b54708; border-color:#fedf89; }
.pildora-editorial{ background:var(--wp-fondo-suave); color:var(--wp-tinta-suave); }

/* --- Cabecera de pagina interna -------------------------------------- */
.cabecera-pagina{
  background:var(--wp-fondo-suave);
  border-bottom:1px solid var(--wp-borde);
  padding:1.5rem 0 1.75rem;
}
.cabecera-urgente{ background:var(--wp-urgente-suave); border-bottom-color:#fecdca; }
.cabecera-urgente .pagina-titulo i{ color:var(--wp-urgente); }
.migas{
  display:flex; flex-wrap:wrap; gap:.4rem; list-style:none;
  padding:0; margin:0 0 .75rem; font-size:.82rem; color:var(--wp-tinta-suave);
}
.migas li + li::before{ content:"/"; margin-right:.4rem; color:#9ca3af; }
.migas a{ text-decoration:none; }
.pagina-pildoras{ margin-bottom:.5rem; }
.pagina-titulo{
  font-size:clamp(1.5rem,3.5vw,2.1rem);
  font-weight:800; line-height:1.25; margin-bottom:.5rem; max-width:28ch;
}
.pagina-bajada{ color:var(--wp-tinta-suave); max-width:65ch; margin:0; }

/* --- Alertas y avisos ------------------------------------------------ */
.alerta-seguridad{
  display:flex; gap:.75rem; align-items:flex-start;
  background:var(--wp-aviso-fondo); border:1px solid var(--wp-aviso-borde);
  border-radius:var(--wp-radio); padding:1rem 1.1rem;
  color:#78350f; font-size:.92rem;
}
.alerta-seguridad i{ font-size:1.2rem; flex:0 0 auto; color:var(--wp-aviso); }

.bloque-confianza{
  background:var(--wp-fondo-suave); border:1px solid var(--wp-borde);
  border-radius:var(--wp-radio); padding:1.1rem 1.25rem;
}

/* --- Cuerpo del contenido -------------------------------------------- */
.cuerpo-contenido{ font-size:1.02rem; max-width:70ch; }
.cuerpo-contenido h2{ font-size:1.3rem; font-weight:700; margin:1.75rem 0 .6rem; }
.cuerpo-contenido h3{ font-size:1.1rem; font-weight:700; margin:1.35rem 0 .5rem; }
.cuerpo-contenido p{ margin-bottom:1rem; }
.cuerpo-contenido ul,
.cuerpo-contenido ol{ margin-bottom:1rem; padding-left:1.35rem; }
.cuerpo-contenido li{ margin-bottom:.5rem; }
.cuerpo-contenido ol > li::marker{ font-weight:700; color:var(--wp-proteger); }
.cuerpo-contenido blockquote{
  border-left:4px solid var(--wp-borde); padding-left:1rem;
  color:var(--wp-tinta-suave); margin:1.25rem 0;
}
.cuerpo-contenido dt{ margin-top:.75rem; }
.cuerpo-contenido dd{ margin-left:0; color:var(--wp-tinta-suave); font-size:.95rem; }
.cuerpo-contenido table{ width:100%; margin-bottom:1rem; border-collapse:collapse; }
.cuerpo-contenido th,
.cuerpo-contenido td{ border:1px solid var(--wp-borde); padding:.5rem .65rem; text-align:left; }

/* --- Ficha editorial -------------------------------------------------- */
.ficha-editorial{
  margin-top:2rem; padding:1.15rem 1.25rem;
  background:var(--wp-fondo-suave); border:1px solid var(--wp-borde);
  border-radius:var(--wp-radio);
}
.ficha-editorial dt{ color:var(--wp-tinta-suave); font-weight:600; }
.lista-fuentes{ list-style:none; padding:0; margin:0; }
.lista-fuentes li{ padding:.4rem 0; border-bottom:1px solid var(--wp-borde); }
.lista-fuentes li:last-child{ border-bottom:0; }

/* --- Cajas laterales -------------------------------------------------- */
.caja-lateral{
  padding:1.1rem 1.2rem; border:1px solid var(--wp-borde);
  border-radius:var(--wp-radio); background:var(--wp-fondo);
  box-shadow:var(--wp-sombra); margin-bottom:1rem;
}
.caja-lateral-urgente{ background:var(--wp-urgente-suave); border-color:#fecdca; }
.caja-lateral-urgente h2 i{ color:var(--wp-urgente); }
.caja-lateral-aviso{ background:var(--wp-aviso-fondo); border-color:var(--wp-aviso-borde); color:#78350f; }
.lista-lateral li{ padding:.4rem 0; border-bottom:1px solid var(--wp-borde); }
.lista-lateral li:last-child{ border-bottom:0; }
.lista-lateral a{ text-decoration:none; font-size:.94rem; }
.lista-lateral a:hover{ text-decoration:underline; }
.lista-lateral a.activo{ font-weight:700; }

/* --- Etiquetas -------------------------------------------------------- */
.etiquetas{ display:flex; flex-wrap:wrap; gap:.4rem; }
.etiqueta{
  display:inline-block; padding:.2rem .6rem; border-radius:999px;
  background:var(--wp-fondo-suave); border:1px solid var(--wp-borde);
  font-size:.8rem; text-decoration:none; color:var(--wp-tinta-suave);
}
.etiqueta:hover{ border-color:var(--wp-proteger); color:var(--wp-proteger); }

/* --- Busqueda --------------------------------------------------------- */
.buscador-grande{ max-width:640px; margin-top:1rem; }
.resultados-cuenta{ color:var(--wp-tinta-suave); font-size:.92rem; margin-bottom:1rem; }

/* --- Estados vacios --------------------------------------------------- */
.estado-vacio{
  text-align:center; padding:2.5rem 1.25rem;
  border:1px dashed var(--wp-borde); border-radius:var(--wp-radio);
  background:var(--wp-fondo-suave); max-width:560px; margin:0 auto;
}
.estado-icono{ font-size:2rem; color:#9ca3af; }

/* --- FAQ -------------------------------------------------------------- */
.acordeon-faq .accordion-button{ font-weight:600; }
.acordeon-faq .accordion-button:not(.collapsed){
  color:var(--wp-proteger); background:var(--wp-proteger-suave);
}
.acordeon-faq .accordion-button:focus{ box-shadow:none; }

/* --- Formularios ------------------------------------------------------ */
.campo-trampa{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}
.obligatorio{ color:var(--wp-urgente); }
.form-control:focus{
  border-color:var(--wp-proteger);
  box-shadow:0 0 0 .2rem rgba(29,78,216,.15);
}

/* --- Pie -------------------------------------------------------------- */
.pie{
  background:var(--wp-fondo-suave);
  border-top:1px solid var(--wp-borde);
  padding:2.25rem 0 1.75rem; margin-top:1.5rem;
}
.pie-marca{ display:flex; align-items:center; gap:.5rem; }
.pie-titulo{ font-size:.82rem; text-transform:uppercase; letter-spacing:.06em;
             color:var(--wp-tinta-suave); font-weight:700; margin-bottom:.6rem; }
.pie a{ color:var(--wp-tinta-suave); text-decoration:none; }
.pie a:hover{ color:var(--wp-proteger); text-decoration:underline; }
.pie ul li{ padding:.22rem 0; }
.pie-separador{ margin:1.75rem 0 1.25rem; border-color:var(--wp-borde); }
.aviso-independencia{
  color:var(--wp-tinta-suave);
  border-left:3px solid var(--wp-aviso-borde);
  padding-left:.75rem;
}

/* --- Impresion -------------------------------------------------------- */
@media print{
  .barra-aviso,.cabecera,.pie,.caja-lateral,.hero-acciones{ display:none !important; }
  body{ font-size:11pt; }
  a[href]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; }
}

/* --- Movil ------------------------------------------------------------ */
@media (max-width:991.98px){
  .buscador-nav{ margin-top:.6rem; }
  .hero-acciones .btn{ flex:1 1 100%; }
}

/* --- Vista previa del panel sobre la plantilla publica (Etapa 2) ------- */
.franja-previa{
  background:#111827; color:#fff; padding:.6rem 0; font-size:.9rem;
  position:sticky; top:0; z-index:1040;
}
.franja-previa a{ color:#fff; }
.pastilla{
  display:inline-block; padding:.12rem .5rem; border-radius:999px;
  font-size:.72rem; font-weight:700; border:1px solid transparent; white-space:nowrap;
}
.pastilla-borrador{    background:#f3f4f6; color:#4b5563; border-color:#e5e7eb; }
.pastilla-en_revision{ background:#fffaeb; color:#b54708; border-color:#fedf89; }
.pastilla-programado{  background:#eff8ff; color:#175cd3; border-color:#b2ddff; }
.pastilla-publicado{   background:#ecfdf3; color:#027a48; border-color:#abefc6; }
.pastilla-archivado{   background:#fef3f2; color:#b42318; border-color:#fecdca; }

/* Menu de la cuenta del lector */
.navbar .dropdown-toggle{ border:0; background:none; }

/* --- Herramienta de enlaces de WhatsApp (Entrega 004) ----------------- */
.cabecera-herramienta{
  background:linear-gradient(180deg,var(--wp-proteger-suave) 0%,var(--wp-fondo-suave) 100%);
}

.tarjeta-herramienta{
  background:var(--wp-fondo); border:1px solid var(--wp-borde);
  border-radius:var(--wp-radio); padding:1.25rem; box-shadow:var(--wp-sombra);
}

.bloque-herramienta{
  display:flex; align-items:center; gap:1.5rem;
  background:linear-gradient(135deg,var(--wp-proteger-suave) 0%,var(--wp-fondo) 100%);
  border:1px solid #c7d7fe; border-radius:var(--wp-radio); padding:1.5rem;
}
.bloque-herramienta-icono{
  font-size:5rem; color:var(--wp-proteger); opacity:.25; flex:0 0 auto;
}
@media (max-width:575.98px){ .bloque-herramienta-icono{ display:none; } }

/* Vista previa del chat */
.previa-chat{
  border:1px solid var(--wp-borde); border-radius:14px; overflow:hidden;
  background:#ece5dd;
}
.previa-barra{
  background:#f0f2f5; padding:.6rem .8rem; display:flex; align-items:center; gap:.5rem;
  border-bottom:1px solid var(--wp-borde); font-weight:600; font-size:.9rem;
}
.previa-barra i{ font-size:1.4rem; color:var(--wp-tinta-suave); }
.previa-cuerpo{ padding:1rem .8rem; min-height:110px; display:flex; }
.previa-globo{
  background:#fff; border-radius:10px 10px 10px 2px; padding:.55rem .75rem;
  font-size:.9rem; max-width:85%; box-shadow:0 1px 1px rgba(0,0,0,.08);
  white-space:pre-wrap; word-break:break-word;
}
.previa-barra-abajo{
  background:#f0f2f5; padding:.55rem .8rem; display:flex; align-items:center; gap:.5rem;
  border-top:1px solid var(--wp-borde); font-size:.85rem; color:var(--wp-tinta-suave);
}

.caja-qr{ text-align:center; padding:1rem; background:var(--wp-fondo-suave); border-radius:var(--wp-radio); }
.caja-qr svg{ max-width:220px; height:auto; }

.resultado-enlace{
  background:var(--wp-proteger-suave); border:1px solid #c7d7fe;
  border-radius:var(--wp-radio); padding:1rem;
}
.caja-upsell{
  background:var(--wp-fondo); border:1px dashed var(--wp-borde);
  border-radius:10px; padding:.9rem;
}

/* Enlaces cortos del lector */
.tarjeta-enlace{
  background:var(--wp-fondo); border:1px solid var(--wp-borde);
  border-radius:var(--wp-radio); padding:1rem; box-shadow:var(--wp-sombra);
}
.enlace-bloqueado{ border-color:#fecdca; background:var(--wp-urgente-suave); }
.enlace-corto{ font-size:.92rem; word-break:break-all; }

/* Pagina intermedia */
.caja-intersticial{
  max-width:560px; margin:0 auto; background:var(--wp-fondo);
  border:1px solid var(--wp-borde); border-radius:var(--wp-radio);
  padding:1.75rem; box-shadow:var(--wp-sombra-alta);
}
.intersticial-icono{ font-size:2.75rem; color:var(--wp-proteger); }
.intersticial-bloqueado{ text-align:center; }
.intersticial-bloqueado i{ font-size:2.75rem; color:var(--wp-urgente); }
.ficha-destino{
  background:var(--wp-fondo-suave); border-radius:var(--wp-radio);
  padding:1rem 1.15rem; margin:0;
}
.ficha-destino dt{ font-size:.78rem; text-transform:uppercase; letter-spacing:.05em;
                   color:var(--wp-tinta-suave); font-weight:700; margin-top:.75rem; }
.ficha-destino dt:first-child{ margin-top:0; }
.ficha-destino dd{ margin:.1rem 0 0; }
.destino-numero{ font-size:1.25rem; font-weight:700; letter-spacing:.02em; }
.destino-mensaje{ white-space:pre-wrap; word-break:break-word; font-style:italic; }
.caja-denuncia{
  background:var(--wp-fondo-suave); border:1px solid var(--wp-borde);
  border-radius:10px; padding:1rem;
}

/* --- Aviso de contenido generado por IA (Entrega 006) ----------------- */
.aviso-ia{
  display:flex; gap:.75rem; align-items:flex-start;
  background:var(--wp-fondo-suave); border:1px solid var(--wp-borde);
  border-left:4px solid #6b7280;
  border-radius:var(--wp-radio); padding:.9rem 1.1rem; margin-bottom:1.5rem;
  font-size:.9rem; color:var(--wp-tinta-suave);
}
.aviso-ia i{ font-size:1.15rem; flex:0 0 auto; }