/* ==========================================================================
   SIPRI · HOJA DE COMPONENTES REUTILIZABLES  ·  sipri-componentes.css
   --------------------------------------------------------------------------
   Qué es: kit de estilos con clases genéricas (avisos, tablas responsive,
   líneas de tiempo, badges, tarjetas...) para usar en CUALQUIER artículo.
   Regla de oro: el CSS vive AQUÍ una sola vez. Cada artículo es SOLO HTML
   que reutiliza estas clases. Nunca metas <style> dentro de los posts.

   Dónde va: /wp-content/themes/Tema-Hijo/sipri-componentes.css
   Se carga: encolado desde functions.php del tema hijo (ver snippet aparte).

   Namespace: todas las clases y variables empiezan por "sipri-" para no
   chocar con Divi ni con nada del tema.
   Color corporativo: #00843D
   Creado: 01/07/2026
   Modificado: 12/07/2026 · tipografía (título/H2 más grande y menos gruesa),
               más espaciado general y listas de contenido con más aire.
   --------------------------------------------------------------------------
   ÍNDICE
     1. Tokens de diseño (variables)
     2. Contenedor base .............. .sipri-bloque
     3. Eyebrow / píldora ............ .sipri-eyebrow
     4. Títulos ...................... .sipri-titulo / .sipri-seccion (H2) /
                                        .sipri-subseccion (H3) / .sipri-grupo
     5. Aviso ........................ .sipri-aviso
     6. Tabla responsive ............. .sipri-tabla(-wrap) / .sipri-scroll-hint
     7. Rejilla ...................... .sipri-grid / .sipri-grid--2
     8. Tarjeta ...................... .sipri-card / .sipri-card-titulo
     9. Línea de tiempo .............. .sipri-timeline
    10. Badge (estado) ............... .sipri-badge--verde/--ambar/--solido
    11. Leyenda + puntos ............. .sipri-leyenda / .sipri-dot
    12. Pie / fuente ................. .sipri-fuente
    13. Botón / descarga ............. .sipri-boton / .sipri-boton--pendiente
    14. Listas de contenido ......... ul / ol dentro de .sipri-bloque
    15. Anclas de sección (global) ... :target — arregla el scroll de TODO
                                        el sitio, no solo de componentes sipri-
   ========================================================================== */


/* ---- 1. TOKENS DE DISEÑO ---------------------------------------------------
   Definir estas variables aquí NO afecta a nada del tema: solo las usan las
   clases .sipri-* de abajo. Para cambiar la identidad visual, toca aquí. */
:root{
  --sipri-verde:#00843D;        /* verde corporativo */
  --sipri-verde-osc:#006A31;    /* verde oscuro: acentos / estado "sólido" */
  --sipri-verde-claro:#EAF6EF;  /* fondo suave verde */
  --sipri-ambar:#B26B00;        /* texto/acento ámbar (avisos, estado medio) */
  --sipri-ambar-bg:#FCF3E1;     /* fondo ámbar */
  --sipri-tinta:#1F2A24;        /* texto principal */
  --sipri-tinta-suave:#5B6B62;  /* texto secundario */
  --sipri-borde:#DCE7E0;        /* líneas y bordes */
  --sipri-blanco:#FFFFFF;
  --sipri-zebra:#F6FBF8;        /* filas alternas de tabla */
  --sipri-offset-menu:80px;     /* alto del menú fijo + margen. SUBE/BAJA este
                                   número si el índice deja el título tapado o
                                   demasiado bajo (prueba entre 70px y 100px). */
}


/* ---- 2. CONTENEDOR BASE ----------------------------------------------------
   Envuelve cualquier bloque de componentes en <div class="sipri-bloque">. */
.sipri-bloque{
  color:var(--sipri-tinta);
  line-height:1.65;             /* MÁS AIRE entre líneas (antes 1.55) */
  font-family:inherit;          /* hereda la tipografía del tema Divi */
}
.sipri-bloque *{box-sizing:border-box;}

/* Párrafos "sueltos" (sin clase): un poco más de separación entre ellos.
   Los párrafos con clase (.sipri-intro, .sipri-grupo...) NO se tocan. */
.sipri-bloque p:not([class]){margin:0 0 1.15rem;}


/* ---- 3. EYEBROW / PÍLDORA DE ETIQUETA -------------------------------------- */
.sipri-eyebrow{
  display:inline-block;
  background:var(--sipri-verde);
  color:var(--sipri-blanco);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.32em .8em;
  border-radius:999px;
  margin:0 0 .7rem;
}


/* ---- 4. TÍTULOS ------------------------------------------------------------ */
/* Título de entrada del artículo (grande y ligero).
   Puede ir en un <p class="sipri-titulo"> para NO salir en el índice, o en un
   encabezado si quieres que aparezca. */
.sipri-titulo{
  font-size:1.95rem;            /* MÁS GRANDE (antes 1.5rem) */
  line-height:1.3;
  font-weight:600;             /* MENOS GRUESA (antes 800) */
  color:var(--sipri-verde-osc);
  margin:.2rem 0 .9rem;
}
/* Encabezado de sección PRINCIPAL (H2). Verde con subrayado suave. */
.sipri-seccion{
  font-size:1.9rem;            /* MÁS GRANDE (antes 1.4rem) */
  line-height:1.3;
  font-weight:750;             /* MÁS PESO (antes 700). Nota: en fuentes NO
                                   variables el navegador redondea al peso
                                   disponible más cercano (normalmente 700
                                   u 800); con fuentes variables se ve exacto. */
  color:var(--sipri-verde-osc);
  margin:3.2rem 0 1rem;        /* MÁS SEPARACIÓN arriba (antes 2.6rem): más
                                   aire entre el último párrafo de una sección
                                   y el H2 de la siguiente */
  padding-bottom:.45rem;
  border-bottom:2px solid var(--sipri-verde-claro);
  scroll-margin-top:var(--sipri-offset-menu); /* el índice no tapa el título con el menú fijo */
}
/* Encabezado de SUBSECCIÓN (H3). Mismo estilo que tenía antes .sipri-seccion,
   para usar cuando dentro de un H2 necesitas un nivel más (H3). */
.sipri-subseccion{
  font-size:1.4rem;
  line-height:1.3;
  font-weight:700;
  color:var(--sipri-verde-osc);
  margin:2rem 0 1rem;
  padding-bottom:.45rem;
  border-bottom:2px solid var(--sipri-verde-claro);
  scroll-margin-top:var(--sipri-offset-menu);
}
/* Etiqueta de grupo en negrita (subtítulo dentro de una sección) */
.sipri-grupo{
  font-weight:800;
  color:var(--sipri-tinta);
  margin:1.6rem 0 .7rem;
}
/* Texto introductorio en gris */
.sipri-intro{
  font-size:1.05rem;           /* un pelín más grande para la entradilla */
  color:var(--sipri-tinta-suave);
  margin:0 0 1.5rem;
}


/* ---- 5. AVISO -------------------------------------------------------------- */
.sipri-aviso{
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  background:var(--sipri-ambar-bg);
  border-left:4px solid var(--sipri-ambar);
  border-radius:8px;
  padding:1.05rem 1.15rem;      /* un poco más de aire dentro (antes .9/1) */
  margin:0 0 1.9rem;            /* y más separación debajo (antes 1.6) */
  font-size:.95rem;
}
.sipri-aviso b,
.sipri-aviso strong{color:var(--sipri-ambar);}
.sipri-aviso a{color:var(--sipri-verde-osc);font-weight:700;}


/* ---- 6. TABLA RESPONSIVE --------------------------------------------------- */
.sipri-tabla-wrap{
  overflow-x:auto;                    /* desplazamiento lateral en móvil */
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--sipri-borde);
  border-radius:12px;
  margin:0 0 1rem;
}
.sipri-tabla{
  width:100%;
  border-collapse:collapse;
  min-width:520px;                    /* fuerza scroll si no cabe */
  font-size:.92rem;
}
.sipri-tabla thead th{
  background:var(--sipri-verde);
  color:var(--sipri-blanco);
  text-align:left;
  padding:.8rem .9rem;
  font-weight:700;
  vertical-align:middle;
}
.sipri-tabla tbody td{
  padding:.75rem .9rem;
  border-top:1px solid var(--sipri-borde);
  vertical-align:middle;
}
.sipri-tabla tbody tr:nth-child(even){background:var(--sipri-zebra);}
.sipri-tabla .destacado{font-weight:600;color:var(--sipri-tinta);} /* 1ª columna */

.sipri-scroll-hint{
  font-size:.78rem;
  color:var(--sipri-tinta-suave);
  margin:0 0 1.8rem;
  text-align:center;
}


/* ---- 7. REJILLA ------------------------------------------------------------ */
.sipri-grid{
  display:grid;
  grid-template-columns:1fr;          /* 1 columna en móvil */
  gap:1.3rem;                         /* MÁS separación entre tarjetas (antes 1rem) */
}
@media(min-width:720px){
  .sipri-grid--2{grid-template-columns:1fr 1fr;} /* 2 columnas en pantalla ancha */
}


/* ---- 8. TARJETA ------------------------------------------------------------ */
.sipri-card{
  border:1px solid var(--sipri-borde);
  border-radius:14px;
  padding:1.3rem 1.3rem 1.4rem;       /* más aire dentro (antes 1.1) */
  background:var(--sipri-blanco);
}
.sipri-card-titulo{
  margin:0 0 1rem;
  font-size:1.02rem;
  font-weight:800;
  color:var(--sipri-verde-osc);
}
/* El último elemento de la tarjeta no arrastra margen inferior (evita huecos raros) */
.sipri-bloque .sipri-card > :last-child{margin-bottom:0;}


/* ---- 9. LÍNEA DE TIEMPO ----------------------------------------------------
   <ul class="sipri-timeline"> con <li class="sipri-timeline__item ...">.
   El color del punto se controla con el modificador de estado en el <li>:
     (por defecto)            -> verde
     --ambar                  -> ámbar
     --solido                 -> verde oscuro                                */
.sipri-timeline{list-style:none;margin:0 0 1rem;padding:0;position:relative;}
.sipri-timeline__item{
  position:relative;
  padding:0 0 1.35rem 1.5rem;         /* más aire entre hitos (antes 1rem/1.4) */
  border-left:2px solid var(--sipri-verde-claro);
}
.sipri-timeline__item:last-child{padding-bottom:0;border-left-color:transparent;}
.sipri-timeline__item::before{      /* el punto de cada hito */
  content:"";
  position:absolute;left:-7px;top:.15rem;
  width:12px;height:12px;border-radius:50%;
  background:var(--sipri-verde);
  box-shadow:0 0 0 3px var(--sipri-blanco);
}
.sipri-timeline__item--ambar::before{background:var(--sipri-ambar);}
.sipri-timeline__item--solido::before{background:var(--sipri-verde-osc);}

.sipri-fecha{display:block;font-weight:800;color:var(--sipri-tinta);font-size:1.05rem;}
.sipri-desc{display:block;font-size:.9rem;color:var(--sipri-tinta-suave);margin-top:.3rem;}


/* ---- 10. BADGE (píldora de estado) -----------------------------------------
   <span class="sipri-badge sipri-badge--verde|--ambar|--solido">           */
.sipri-badge{
  display:inline-block;
  font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border-radius:999px;padding:.18em .6em;margin:.15rem 0 .3rem;
}
.sipri-badge--verde{background:var(--sipri-verde-claro);color:var(--sipri-verde-osc);}
.sipri-badge--ambar{background:var(--sipri-ambar-bg);color:var(--sipri-ambar);}
.sipri-badge--solido{background:var(--sipri-verde-osc);color:var(--sipri-blanco);}


/* ---- 11. LEYENDA + PUNTOS --------------------------------------------------- */
.sipri-leyenda{
  display:flex;flex-wrap:wrap;gap:.5rem .9rem;
  margin:0 0 1.1rem;font-size:.82rem;color:var(--sipri-tinta-suave);
}
.sipri-leyenda span{display:inline-flex;align-items:center;gap:.4rem;}
.sipri-dot{width:.7rem;height:.7rem;border-radius:50%;display:inline-block;background:var(--sipri-verde);}
.sipri-dot--ambar{background:var(--sipri-ambar);}
.sipri-dot--solido{background:var(--sipri-verde-osc);}


/* ---- 12. PIE / FUENTE ------------------------------------------------------- */
.sipri-fuente{
  margin:2rem 0 0;font-size:.85rem;color:var(--sipri-tinta-suave);
  border-top:1px solid var(--sipri-borde);padding-top:1rem;
}


/* ---- 13. BOTÓN / DESCARGA --------------------------------------------------
   <a class="sipri-boton" href="...">Texto</a>
   Variante "pendiente" (aún sin publicar, no clicable):
   <span class="sipri-boton sipri-boton--pendiente">Pendiente</span>          */
.sipri-boton{
  display:inline-flex;                 /* icono + texto alineados */
  align-items:center;
  gap:.5rem;
  background:var(--sipri-verde);
  color:var(--sipri-blanco);
  font-weight:700;
  font-size:.95rem;
  line-height:1;
  text-decoration:none;
  padding:.75rem 1.15rem;
  border-radius:10px;
  border:2px solid var(--sipri-verde);
  transition:background .15s ease, border-color .15s ease;
}
.sipri-boton:hover,
.sipri-boton:focus{                     /* verde oscuro al pasar / enfocar */
  background:var(--sipri-verde-osc);
  border-color:var(--sipri-verde-osc);
  color:var(--sipri-blanco);
}
/* Estado "pendiente de publicación": gris y sin clic (para hoy) */
.sipri-boton--pendiente{
  background:var(--sipri-zebra);
  color:var(--sipri-tinta-suave);
  border-color:var(--sipri-borde);
  pointer-events:none;
  cursor:default;
}


/* ---- 14. LISTAS DE CONTENIDO -----------------------------------------------
   A) Automático: cualquier ul/ol (menos .sipri-timeline) DENTRO de un bloque
      envuelto en <div class="sipri-bloque">, sea HTML personalizado.
   B) Manual: si el bloque Lista es NATIVO de Gutenberg y por tanto NO está
      anidado dentro de un .sipri-bloque (es un bloque hermano, no un hijo),
      ponle la clase suelta "sipri-lista" en Ajustes del bloque → Avanzado →
      Clases CSS adicionales. Mismo resultado, sin depender de dónde viva.
   Objetivo en ambos casos: separación real entre ítems, no solo interlineado. */
.sipri-bloque ul:not(.sipri-timeline),
.sipri-bloque ol,
ul.sipri-lista,
ol.sipri-lista{
  margin:0 0 1.35rem;
  padding-left:1.5rem;
}
.sipri-bloque ul:not(.sipri-timeline) li,
.sipri-bloque ol li,
ul.sipri-lista li,
ol.sipri-lista li{
  margin-bottom:1.25rem;                  /* MÁS AIRE (antes .6rem): con el resto
                                           de espaciados ya ampliados, .6rem se
                                           quedaba corto y la lista se veía
                                           apretada en comparación */
  padding-left:.25rem;
}
.sipri-bloque ul:not(.sipri-timeline) li:last-child,
.sipri-bloque ol li:last-child,
ul.sipri-lista li:last-child,
ol.sipri-lista li:last-child{margin-bottom:0;}

/* Divi fija line-height:26px directamente sobre <ol> (selector con ID, tipo
   "#left-area ol"), que gana a cualquier cosa nuestra basada en clases por
   mucha especificidad que metamos: un ID siempre gana a las clases. Por eso,
   aunque el espaciado ENTRE filas ya funciona bien (arriba), el interlineado
   DENTRO de una fila que salta de línea se queda con el 26px fijo de Divi en
   vez de nuestro 1.65 relativo. Es uno de los pocos sitios donde usamos
   !important a propósito: no hay forma limpia de ganarle a un ID con clases. */
.sipri-bloque ol,
.sipri-bloque ul,
ol.sipri-lista,
ul.sipri-lista{
  line-height:1.60 !important;
}



/* ---- 15. ANCLAS DE SECCIÓN (GLOBAL) ----------------------------------------
   ÚNICA excepción deliberada a la regla "todo namespaced sipri-": esto no es
   un componente, es un problema de TODA la web (menú fijo tapando el título
   al saltar a un ancla), así que la solución también tiene que ser global.

   Qué hace: cuando la URL trae un ancla (ej. midominio.es/articulo#apartado)
   o al pulsar un enlace de índice (Easy Table of Contents, o el "Anclaje
   HTML" del menú avanzado de cualquier bloque), el navegador para el scroll
   dejando el hueco de --sipri-offset-menu (ver apartado 1) antes de ese
   elemento. Da igual si el ancla está en un H2, un H3, un párrafo o un
   bloque cualquiera: con esto YA NO hace falta el truco del bloque
   espaciador antes del encabezado. Puedes:
     1) Poner el "Anclaje HTML" directamente en el bloque del ENCABEZADO
        (ya no en el espaciador de antes).
     2) Borrar los espaciadores que usabas solo para compensar el scroll.
   En artículos antiguos donde el ancla siga en el espaciador, no es
   obligatorio tocarlo: funcionará igual, pero para nuevos artículos ya
   puedes ahorrarte el paso.                                                */
:target{
  scroll-margin-top:var(--sipri-offset-menu);
}
/* Refuerzo por si algún tema/plugin fija el scroll-margin a 0 en encabezados
   con id (mayor especificidad que una regla genérica de tema): */
h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]{
  scroll-margin-top:var(--sipri-offset-menu);
}