/*
Theme Name:   CIPAD-SST Child
Theme URI:    https://cipad-sst.com
Description:  Tema hijo de Divi para CIPAD-SST S.A.S. Contiene unicamente los ajustes que no pueden resolverse con variables, presets o Theme Options de Divi 5.
Author:       Equipo del proyecto CIPAD-SST
Template:     Divi
Version:      1.0.0
Text Domain:  cipad-sst-child
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   CIPAD-SST — CSS del tema hijo
   Version 1.0.0 · 27 de julio de 2026

   REGLA DE ORO
   Antes de anadir una regla aqui, comprueba en este orden:
     1. Se resuelve con una variable global de Divi 5?
     2. Se resuelve con un preset global?
     3. Se resuelve con un ajuste de Theme Options?
   Solo si las tres respuestas son NO, la regla entra aqui.

   Cada bloque lleva: proposito, fecha, autor y alternativa nativa evaluada.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. VARIABLES DE COLOR Y TIPOGRAFIA
   Proposito : dejar definido el sistema de diseno como variables CSS.
   Motivo    : garantiza que los colores existan aunque el panel de Variables
               de Divi cambie de ubicacion entre versiones. Cualquier modulo
               puede usarlas escribiendo var(--cipad-primary) en un campo de
               color personalizado.
   Nativa    : Divi tiene su propio Variable Manager, y se usara tambien. Esto
               NO lo sustituye: lo respalda. Si algo se pierde en Divi, los
               valores siguen aqui.
   Fecha     : 28/07/2026
   -------------------------------------------------------------------------- */

:root {
	/* Marca — medidos sobre el logotipo v2 */
	--cipad-primary:        #27146F;  /* 14,83:1 sobre blanco — AAA */
	--cipad-primary-dark:   #1B0E4E;  /* 17,2:1  — AAA */
	--cipad-primary-light:  #4A3299;  /*  8,9:1  — AAA */
	--cipad-accent:         #FFF300;  /*  1,16:1 sobre blanco — SOLO FONDO */
	--cipad-outline:        #1F1B20;

	/* Neutros */
	--cipad-text:           #1F1B20;
	--cipad-text-muted:     #4A4550;  /* 8,6:1 — AAA */
	--cipad-bg:             #FFFFFF;
	--cipad-bg-alt:         #F4F3F9;
	--cipad-border:         #DCDAE6;
	--cipad-border-strong:  #B4AFC7;  /* 3,1:1 — AA para interfaz */

	/* Estados */
	--cipad-success:        #1B6B3A;  /* 6,4:1 */
	--cipad-warning:        #8A5A00;  /* 5,6:1 */
	--cipad-error:          #A8202E;  /* 6,8:1 */

	/* Espaciado */
	--cipad-space-xs:       12px;
	--cipad-space-s:        16px;
	--cipad-space-m:        24px;
	--cipad-space-l:        40px;
	--cipad-space-xl:       64px;
	--cipad-space-2xl:      96px;

	/* Medidas de lectura */
	--cipad-text-width:     720px;
	--cipad-content-width:  1200px;

	/* Bordes */
	--cipad-radius-s:       4px;
	--cipad-radius-m:       8px;
	--cipad-radius-l:       16px;
}

/* ADVERTENCIA QUE GOBIERNA TODO EL SISTEMA VISUAL
   --cipad-accent (#FFF300) sobre blanco da 1,16:1. El minimo legal para
   texto es 4,5:1. NUNCA se usa como color de texto sobre fondo claro.
   Usos correctos: fondo de franja con texto oscuro, filete decorativo,
   icono sobre disco azul, subrayado bajo la palabra. */


/* --------------------------------------------------------------------------
   1. TABLAS RESPONSIVE
   Proposito : evitar que las tablas de contenido normativo desborden en movil.
   Motivo    : el sitio publica tablas densas (umbrales PESV, campos de accion,
               que si y que no) que son el activo principal de varias paginas.
               Una tabla desbordada rompe justo el contenido mas valioso.
   Nativa    : Divi no ofrece contenedor de desplazamiento para tablas HTML
               insertadas en modulos de texto. No hay alternativa nativa.
   Fecha     : 27/07/2026
   -------------------------------------------------------------------------- */

.cipad-tabla-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 24px;
	/* Sombra lateral que indica que hay mas contenido a la derecha */
	background:
		linear-gradient(to right, #ffffff 30%, rgba(255, 255, 255, 0)),
		linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 70%) 100% 0,
		radial-gradient(farthest-side at 0 50%, rgba(31, 27, 32, 0.15), rgba(31, 27, 32, 0)),
		radial-gradient(farthest-side at 100% 50%, rgba(31, 27, 32, 0.15), rgba(31, 27, 32, 0)) 100% 0;
	background-repeat: no-repeat;
	background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}

/* La tabla debe ser enfocable por teclado para que quien navega sin raton
   pueda desplazarla. Criterio WCAG 2.2. */
.cipad-tabla-wrap:focus {
	outline: 3px solid #27146F;
	outline-offset: 2px;
}

.entry-content table,
.cipad-tabla-wrap table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	line-height: 1.5;
}

.entry-content table th,
.cipad-tabla-wrap table th {
	background-color: #27146F;
	color: #ffffff;
	font-weight: 600;
	text-align: left;
	padding: 12px 16px;
	border: 1px solid #27146F;
}

.entry-content table td,
.cipad-tabla-wrap table td {
	padding: 12px 16px;
	border: 1px solid #DCDAE6;
	vertical-align: top;
}

.entry-content table tbody tr:nth-child(even),
.cipad-tabla-wrap table tbody tr:nth-child(even) {
	background-color: #F4F3F9;
}

/* En movil la tabla mantiene un ancho minimo legible y se desplaza. */
@media (max-width: 767px) {
	.entry-content table,
	.cipad-tabla-wrap table {
		min-width: 560px;
		font-size: 15px;
	}
}


/* --------------------------------------------------------------------------
   2. FOCO VISIBLE
   Proposito : garantizar foco visible en todo elemento interactivo.
   Motivo    : criterio 2.4.11 de WCAG 2.2. Algunos estilos de Divi reducen
               el indicador de foco por defecto.
   Nativa    : los presets de Divi permiten definir estado de foco por modulo,
               pero no cubren enlaces dentro de modulos de texto ni el menu.
   Fecha     : 27/07/2026
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #27146F;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Sobre fondo azul el anillo azul no se ve: se invierte a blanco.
   Se admiten dos formas de marcarlo: atributo data o clase CSS.
   La clase es mas facil de poner desde el panel de Divi. */
.et_pb_section[data-cipad-fondo="primary"] a:focus-visible,
.et_pb_section[data-cipad-fondo="primary"] button:focus-visible,
.cipad-fondo-primary a:focus-visible,
.cipad-fondo-primary button:focus-visible,
.cipad-fondo-primary [tabindex]:focus-visible {
	outline-color: #ffffff;
}

/* En seccion azul, las tablas heredan texto claro. */
.cipad-fondo-primary table,
.cipad-fondo-primary table td,
.cipad-fondo-primary table th {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.28);
}

.cipad-fondo-primary table th {
	background-color: rgba(255, 255, 255, 0.10);
}

.cipad-fondo-primary table tbody tr:nth-child(even) {
	background-color: rgba(255, 255, 255, 0.06);
}

/* El contenedor de tabla lleva sombra blanca sobre fondo claro.
   Sobre azul hay que anularla o se ve un halo. */
.cipad-fondo-primary .cipad-tabla-wrap {
	background: none;
}


/* --------------------------------------------------------------------------
   3. ENLACE "SALTAR AL CONTENIDO"
   Proposito : permitir omitir los bloques repetidos de la cabecera.
   Motivo    : criterio 2.4.1 de WCAG 2.2.
   Nativa    : Divi no lo incluye en el Theme Builder.
   Fecha     : 27/07/2026
   -------------------------------------------------------------------------- */

.cipad-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 24px;
	background-color: #27146F;
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 8px 0;
}

.cipad-skip-link:focus {
	left: 0;
	outline: 3px solid #FFF300;
	outline-offset: -3px;
}


/* --------------------------------------------------------------------------
   4. ANCHO DE LECTURA
   Proposito : limitar la linea de texto a ~75-80 caracteres en articulos.
   Motivo    : el sitio publica textos largos de contenido normativo. A 18px,
               720px da el rango donde el ojo lee sin fatiga.
   Nativa    : Divi permite fijar ancho por fila, pero hay que repetirlo en
               cada fila de cada articulo. Esta regla lo resuelve una vez.
   Fecha     : 27/07/2026
   -------------------------------------------------------------------------- */

.single-post .entry-content > .et_pb_section > .et_pb_row {
	max-width: 720px;
}

/* Las tablas y el diagrama si pueden ocupar el ancho completo:
   son otro tipo de lectura. */
.single-post .entry-content .cipad-ancho-completo,
.single-post .entry-content .cipad-tabla-wrap {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}


/* --------------------------------------------------------------------------
   5. BLOQUE DE ALCANCE LEGAL
   Proposito : dar estilo consistente al componente que declara los limites.
   Motivo    : se reutiliza en las seis paginas pilar y en todas las entradas.
               Es el diferenciador 3 hecho componente.
   Nativa    : se define como preset, pero el borde izquierdo con el grosor
               exacto y el comportamiento en movil requieren esta regla.
   Fecha     : 27/07/2026
   -------------------------------------------------------------------------- */

.cipad-alcance {
	background-color: #F4F3F9;
	border-left: 4px solid #27146F;
	padding: 24px;
	margin: 40px 0;
	font-size: 17px;
	line-height: 1.6;
}

.cipad-alcance p:last-child {
	margin-bottom: 0;
}

.cipad-alcance .cipad-fecha-corte {
	display: block;
	margin-top: 16px;
	font-size: 15px;
	color: #4A4550;
}


/* --------------------------------------------------------------------------
   6. MOVIMIENTO REDUCIDO
   Proposito : respetar la preferencia del sistema operativo.
   Motivo    : criterio 2.3.3 de WCAG 2.2 y bienestar de personas con
               trastornos vestibulares.
   Nativa    : Divi no la respeta de forma global.
   Fecha     : 27/07/2026
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* --------------------------------------------------------------------------
   7. OBJETIVOS TACTILES
   Proposito : asegurar 48x48 px minimo en elementos interactivos.
   Motivo    : criterio 2.5.8 de WCAG 2.2 exige 24x24; 48 da holgura real
               en uso movil.
   Nativa    : los presets cubren botones y campos, no los enlaces del menu
               movil ni los iconos sociales del pie.
   Fecha     : 27/07/2026
   -------------------------------------------------------------------------- */

.et_mobile_menu li a,
.et-social-icon a,
.cipad-icono-accion {
	min-height: 48px;
	display: flex;
	align-items: center;
}


/* --------------------------------------------------------------------------
   8. DIAGRAMA SVG RESPONSIVE
   Proposito : que el diagrama del analisis de riesgo unico escale.
   Motivo    : es la seccion insignia del sitio.
   Nativa    : no aplica, es SVG en linea dentro de un modulo Code.
   Fecha     : 27/07/2026
   -------------------------------------------------------------------------- */

.cipad-diagrama svg {
	width: 100%;
	height: auto;
	max-width: 900px;
	display: block;
	margin: 0 auto;
}

.cipad-diagrama-descripcion {
	margin-top: 24px;
	font-size: 17px;
	line-height: 1.6;
}


/* --------------------------------------------------------------------------
   9. IMPRESION
   Proposito : que las paginas de contenido normativo se impriman bien.
   Motivo    : los responsables de SST imprimen y archivan. El autodiagnostico
               y las paginas pilar se van a imprimir.
   Nativa    : Divi no incluye hoja de impresion.
   Fecha     : 27/07/2026
   -------------------------------------------------------------------------- */

@media print {
	#main-header,
	#main-footer,
	.et_pb_button,
	.cipad-skip-link,
	.et_pb_section[data-cipad-fondo="cta"] {
		display: none !important;
	}

	body {
		font-size: 12pt;
		color: #000000;
		background: #ffffff;
	}

	.entry-content table th {
		background-color: #ffffff !important;
		color: #000000 !important;
		border: 1px solid #000000;
	}

	/* Mostrar la URL de los enlaces al imprimir */
	.entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 10pt;
		word-break: break-all;
	}

	.cipad-alcance {
		border: 1px solid #000000;
		border-left-width: 4px;
		page-break-inside: avoid;
	}
}