/*
 * HCPI · Sistema de componentes (rediseño 2026-10).
 *
 * Tokens y componentes canónicos `hcpi-c-*`. La hoja de muestra local es /?hcpi_componentes=1
 * (mu-plugins/hcpi-componentes.php). Las capas que aplican este sistema a los widgets de
 * Elementor y a las partes HTML del Módulo 16 usan estos mismos tokens.
 *
 * Todos los selectores llevan «html body» delante para ganar a las reglas del kit de Elementor
 * (.elementor-kit-19 h1–h5, a y button), que tienen especificidad 0,1,1.
 *
 * Reglas de color:
 * - Texto: títulos #266093, cuerpo #313131, secundario #54595F. El azul #1A86BF nunca va como
 *   texto (4,0:1); los enlaces y la acción van en #166F9E.
 * - Acción: azul #166F9E. El naranja #C2410C solo para el CTA principal de la página; #EC6728 solo
 *   como adorno (barras, iconos grandes), nunca para texto.
 * - Semáforo clínico: alarma, alerta y sin novedad. El amarillo lleva texto oscuro.
 */

:root {
	--hc-titulo: #266093;
	--hc-texto: #313131;
	--hc-secundario: #54595F;
	--hc-accion: #166F9E;
	--hc-accion-hover: #11597F;
	--hc-azul: #1A86BF;
	--hc-cta: #C2410C;
	--hc-cta-hover: #9A3412;
	--hc-naranja: #EC6728;
	--hc-fondo: #E3ECF9;
	--hc-fondo-suave: #F5F8FD;
	--hc-blanco: #FFFFFF;
	--hc-borde: #DCE5F2;
	--hc-borde-fuerte: #C5D4EA;
	--hc-alarma: #DC0101;
	--hc-alarma-fondo: #FDEEEE;
	--hc-alarma-texto: #A10000;
	--hc-alerta: #E1D501;
	--hc-alerta-fondo: #FCF9DD;
	--hc-alerta-texto: #5C5600;
	--hc-ok: #138A2B;
	--hc-ok-fondo: #EAF6EE;
	--hc-ok-texto: #0D6B20;
	--hc-info-fondo: #EAF3FB;
	--hc-nota: #C2410C;
	--hc-nota-fondo: #FFF4ED;
	--hc-r-s: 12px;
	--hc-r-m: 16px;
	--hc-r-l: 20px;
	--hc-sombra: 0 1px 2px rgba(38, 96, 147, 0.06), 0 8px 24px rgba(38, 96, 147, 0.08);
	--hc-sombra-alta: 0 2px 4px rgba(38, 96, 147, 0.08), 0 16px 40px rgba(38, 96, 147, 0.14);
	--hc-titular: "Poppins", sans-serif;
	--hc-cuerpo: "Raleway", sans-serif;
}

/* ---------- Tipografía de contenido ---------- */
html body .hcpi-c-h2 { margin: 0 0 16px; font: 600 30px/38px var(--hc-titular); color: var(--hc-titulo); letter-spacing: -0.01em; }
html body .hcpi-c-h3 { margin: 0 0 12px; font: 600 22px/30px var(--hc-titular); color: var(--hc-titulo); }
html body .hcpi-c-h4 { margin: 0 0 8px; font: 600 18px/26px var(--hc-titular); color: var(--hc-titulo); }
html body .hcpi-c-antetitulo { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 13px/18px var(--hc-cuerpo); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hc-titulo); }
html body .hcpi-c-antetitulo::before { content: ""; width: 24px; height: 3px; border-radius: 999px; background: var(--hc-naranja); }
html body .hcpi-c-parrafo { margin: 0 0 12px; font: 400 16px/26px var(--hc-cuerpo); color: var(--hc-texto); }
@media (max-width: 767px) {
	html body .hcpi-c-h2 { font-size: 24px; line-height: 32px; }
	html body .hcpi-c-h3 { font-size: 20px; line-height: 28px; }
}

/* ---------- Cabecera de sección ---------- */
html body .hcpi-c-seccion { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--hc-borde); }
html body .hcpi-c-seccion__icono { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--hc-fondo); color: var(--hc-titulo); }
html body .hcpi-c-seccion__icono svg { width: 28px; height: 28px; }
html body .hcpi-c-seccion .hcpi-c-h2 { margin: 0; }
html body .hcpi-c-seccion__bajada { margin: 4px 0 0; font: 400 16px/24px var(--hc-cuerpo); color: var(--hc-secundario); }

/* ---------- Tarjeta ---------- */
html body .hcpi-c-tarjeta { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--hc-borde); border-radius: var(--hc-r-l); background: var(--hc-blanco); box-shadow: var(--hc-sombra); overflow: hidden; }
html body .hcpi-c-tarjeta__cuerpo { display: flex; flex-direction: column; gap: 12px; padding: 24px; font: 400 16px/26px var(--hc-cuerpo); color: var(--hc-texto); }
html body .hcpi-c-tarjeta__cuerpo > :last-child { margin-bottom: 0; }
html body .hcpi-c-tarjeta__titulo { margin: 0; font: 600 20px/28px var(--hc-titular); color: var(--hc-titulo); }
html body .hcpi-c-tarjeta__icono { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--hc-fondo); color: var(--hc-titulo); }
html body .hcpi-c-tarjeta__icono svg { width: 26px; height: 26px; }
/* Con acento: franja superior */
html body .hcpi-c-tarjeta--acento { box-shadow: var(--hc-sombra), inset 0 4px 0 var(--hc-acento, var(--hc-azul)); }
html body .hcpi-c-tarjeta--acento-naranja { --hc-acento: var(--hc-naranja); }
/* Con cabecera de color: título siempre blanco y legible */
html body .hcpi-c-tarjeta__cabecera { display: flex; align-items: center; gap: 12px; padding: 16px 24px; background: var(--hc-cab, var(--hc-titulo)); }
html body .hcpi-c-tarjeta__cabecera .hcpi-c-tarjeta__titulo { color: #FFFFFF; font-size: 19px; }
html body .hcpi-c-tarjeta__cabecera .hcpi-c-tarjeta__num { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); color: #FFFFFF; font: 600 15px var(--hc-titular); }
html body .hcpi-c-tarjeta--alarma { --hc-cab: var(--hc-alarma); border-color: #F3C2C2; }
html body .hcpi-c-tarjeta--ok { --hc-cab: var(--hc-ok); border-color: #BFE0C8; }
html body .hcpi-c-tarjeta--alerta { --hc-cab: var(--hc-alerta); border-color: #EEE59A; }
html body .hcpi-c-tarjeta--alerta .hcpi-c-tarjeta__cabecera .hcpi-c-tarjeta__titulo, html body .hcpi-c-tarjeta--alerta .hcpi-c-tarjeta__num { color: var(--hc-texto); }
/* Con imagen arriba */
html body .hcpi-c-tarjeta__imagen { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--hc-fondo-suave); }
html body .hcpi-c-tarjeta__imagen--contener { object-fit: contain; padding: 16px; }
/* Rejillas */
html body .hcpi-c-rejilla { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
html body .hcpi-c-rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

/* ---------- Aviso ---------- */
html body .hcpi-c-aviso { --av: var(--hc-azul); --av-fondo: var(--hc-info-fondo); --av-titulo: var(--hc-titulo); display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; padding: 20px 24px; border-radius: var(--hc-r-m); border: 1px solid color-mix(in srgb, var(--av) 25%, transparent); border-left: 5px solid var(--av); background: var(--av-fondo); font: 400 16px/26px var(--hc-cuerpo); color: var(--hc-texto); }
html body .hcpi-c-aviso__icono { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--av); color: #FFFFFF; }
html body .hcpi-c-aviso__icono svg { width: 22px; height: 22px; }
html body .hcpi-c-aviso__titulo { margin: 0 0 4px; font: 600 17px/24px var(--hc-titular); color: var(--av-titulo); }
html body .hcpi-c-aviso p { margin: 0 0 8px; } html body .hcpi-c-aviso p:last-child { margin-bottom: 0; }
html body .hcpi-c-aviso--alarma { --av: var(--hc-alarma); --av-fondo: var(--hc-alarma-fondo); --av-titulo: var(--hc-alarma-texto); }
html body .hcpi-c-aviso--alerta { --av: var(--hc-alerta); --av-fondo: var(--hc-alerta-fondo); --av-titulo: var(--hc-alerta-texto); }
html body .hcpi-c-aviso--alerta .hcpi-c-aviso__icono { color: var(--hc-texto); }
html body .hcpi-c-aviso--ok { --av: var(--hc-ok); --av-fondo: var(--hc-ok-fondo); --av-titulo: var(--hc-ok-texto); }
html body .hcpi-c-aviso--nota { --av: var(--hc-nota); --av-fondo: var(--hc-nota-fondo); --av-titulo: #9A3412; }
@media (max-width: 767px) { html body .hcpi-c-aviso { grid-template-columns: 1fr; gap: 10px; padding: 18px; } }

/* ---------- Acordeón ---------- */
html body .hcpi-c-acordeon { display: flex; flex-direction: column; gap: 10px; }
html body .hcpi-c-acordeon__item { border: 1px solid var(--hc-borde); border-radius: var(--hc-r-m); background: var(--hc-blanco); overflow: hidden; transition: box-shadow 0.15s ease, border-color 0.15s ease; }
html body .hcpi-c-acordeon__item[open], html body .hcpi-c-acordeon__item.es-abierto { border-color: var(--hc-borde-fuerte); box-shadow: var(--hc-sombra); }
html body .hcpi-c-acordeon__titulo { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 14px 20px; cursor: pointer; list-style: none; font: 600 17px/24px var(--hc-titular); color: var(--hc-texto); }
html body .hcpi-c-acordeon__titulo::-webkit-details-marker { display: none; }
html body .hcpi-c-acordeon__num { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: var(--hc-fondo); color: var(--hc-titulo); font-size: 14px; }
html body .hcpi-c-acordeon__titulo::after { content: ""; flex-shrink: 0; width: 10px; height: 10px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.15s ease; }
html body .hcpi-c-acordeon__item[open] > .hcpi-c-acordeon__titulo, html body .hcpi-c-acordeon__item.es-abierto > .hcpi-c-acordeon__titulo { color: var(--hc-titulo); background: var(--hc-fondo-suave); }
html body .hcpi-c-acordeon__item[open] > .hcpi-c-acordeon__titulo .hcpi-c-acordeon__num { background: var(--hc-titulo); color: #FFFFFF; }
html body .hcpi-c-acordeon__item[open] > .hcpi-c-acordeon__titulo::after { transform: rotate(-135deg) translate(-2px, -2px); }
html body .hcpi-c-acordeon__titulo:focus-visible { outline: 3px solid var(--hc-titulo); outline-offset: -3px; }
html body .hcpi-c-acordeon__contenido { padding: 4px 20px 20px 64px; font: 400 16px/26px var(--hc-cuerpo); color: var(--hc-texto); }
@media (max-width: 767px) { html body .hcpi-c-acordeon__contenido { padding-left: 20px; } }

/* ---------- Pestañas ---------- */
html body .hcpi-c-pestanas__lista { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--hc-fondo); overflow-x: auto; scrollbar-width: none; }
html body .hcpi-c-pestanas__boton { flex: 1 0 auto; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--hc-titulo); font: 700 15px var(--hc-cuerpo); white-space: nowrap; cursor: pointer; }
html body .hcpi-c-pestanas__boton:hover { background: rgba(255, 255, 255, 0.7); }
html body .hcpi-c-pestanas__boton[aria-selected="true"] { background: var(--hc-blanco); color: var(--hc-titulo); box-shadow: 0 1px 2px rgba(38, 96, 147, 0.12), 0 4px 12px rgba(38, 96, 147, 0.12); }
html body .hcpi-c-pestanas__boton:focus-visible { outline: 3px solid var(--hc-titulo); outline-offset: 2px; }
html body .hcpi-c-pestanas__panel { padding: 24px 4px 0; font: 400 16px/26px var(--hc-cuerpo); color: var(--hc-texto); }

/* ---------- Listas ---------- */
html body .hcpi-c-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font: 400 16px/25px var(--hc-cuerpo); color: var(--hc-texto); }
html body .hcpi-c-lista > li { position: relative; padding-left: 34px; }
html body .hcpi-c-lista > li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 999px; background: var(--hc-fondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23266093' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
html body .hcpi-c-lista--numerada { counter-reset: hc-lista; }
html body .hcpi-c-lista--numerada > li { counter-increment: hc-lista; padding-left: 42px; }
html body .hcpi-c-lista--numerada > li::before { content: counter(hc-lista); top: 0; width: 28px; height: 28px; background: var(--hc-titulo); color: #FFFFFF; font: 600 14px/28px var(--hc-titular); text-align: center; }
html body .hcpi-c-lista--columnas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px 24px; }
html body .hcpi-c-lista--fichas > li { padding: 12px 16px 12px 46px; border: 1px solid var(--hc-borde); border-radius: var(--hc-r-s); background: var(--hc-blanco); }
html body .hcpi-c-lista--fichas > li::before { left: 14px; top: 13px; }

/* ---------- Botones ---------- */
html body .hcpi-c-boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 2px solid transparent; border-radius: 999px; font: 700 16px/1 var(--hc-cuerpo); text-decoration: none; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
html body .hcpi-c-boton svg { width: 20px; height: 20px; flex-shrink: 0; }
html body .hcpi-c-boton--primario { background: var(--hc-accion); color: #FFFFFF; }
html body .hcpi-c-boton--primario:hover { background: var(--hc-accion-hover); color: #FFFFFF; }
html body .hcpi-c-boton--secundario { border-color: var(--hc-accion); background: var(--hc-blanco); color: var(--hc-accion); }
html body .hcpi-c-boton--secundario:hover { background: var(--hc-info-fondo); color: var(--hc-accion-hover); }
html body .hcpi-c-boton--cta { background: var(--hc-cta); color: #FFFFFF; box-shadow: 0 6px 16px rgba(194, 65, 12, 0.25); }
html body .hcpi-c-boton--cta:hover { background: var(--hc-cta-hover); color: #FFFFFF; }
html body .hcpi-c-boton--suave { background: var(--hc-fondo); color: var(--hc-titulo); }
html body .hcpi-c-boton--suave:hover { background: #D3E1F4; color: var(--hc-titulo); }
html body .hcpi-c-boton:focus-visible { outline: 3px solid var(--hc-titulo); outline-offset: 3px; }
html body .hcpi-c-botonera { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Tabla ---------- */
html body .hcpi-c-tabla-marco { overflow-x: auto; border: 1px solid var(--hc-borde); border-radius: var(--hc-r-m); background: var(--hc-blanco); box-shadow: var(--hc-sombra); }
html body .hcpi-c-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 15px/22px var(--hc-cuerpo); color: var(--hc-texto); }
html body .hcpi-c-tabla thead th { padding: 14px 16px; background: var(--hc-titulo); color: #FFFFFF; font-weight: 700; text-align: left; vertical-align: bottom; }
html body .hcpi-c-tabla thead tr + tr th { background: #EAF1FA; color: var(--hc-titulo); font-size: 14px; }
html body .hcpi-c-tabla :is(th, td) { border: 0; }
html body .hcpi-c-tabla tbody :is(th, td) + :is(th, td) { border-left: 1px solid #E6EDF6; }
html body .hcpi-c-tabla tbody :is(th, td) { padding: 12px 16px; border-top: 1px solid #E6EDF6; background: #FFFFFF; text-align: left; vertical-align: top; }
html body .hcpi-c-tabla tbody tr:nth-child(even) > * { background: #F7F9FC; }
html body .hcpi-c-tabla tbody th { font-weight: 700; color: var(--hc-titulo); }
html body .hcpi-c-tabla tr.hcpi-c-fila--alarma > :first-child { box-shadow: inset 5px 0 0 var(--hc-alarma); }
html body .hcpi-c-tabla tr.hcpi-c-fila--alerta > :first-child { box-shadow: inset 5px 0 0 var(--hc-alerta); }
html body .hcpi-c-tabla tr.hcpi-c-fila--ok > :first-child { box-shadow: inset 5px 0 0 var(--hc-ok); }
html body .hcpi-c-tabla tbody tr.hcpi-c-fila--alarma > * { background: var(--hc-alarma-fondo); }
html body .hcpi-c-tabla tbody tr.hcpi-c-fila--alerta > * { background: var(--hc-alerta-fondo); }
html body .hcpi-c-tabla tbody tr.hcpi-c-fila--ok > * { background: var(--hc-ok-fondo); }

/* ---------- Semáforo (etiqueta) ---------- */
html body .hcpi-c-semaforo { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font: 700 13px/18px var(--hc-cuerpo); }
html body .hcpi-c-semaforo::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: currentColor; }
html body .hcpi-c-semaforo--alarma { background: var(--hc-alarma-fondo); color: var(--hc-alarma-texto); }
html body .hcpi-c-semaforo--alerta { background: var(--hc-alerta-fondo); color: var(--hc-alerta-texto); }
html body .hcpi-c-semaforo--ok { background: var(--hc-ok-fondo); color: var(--hc-ok-texto); }

/* ---------- Figura ---------- */
html body .hcpi-c-figura { margin: 0; border: 1px solid var(--hc-borde); border-radius: var(--hc-r-l); background: var(--hc-blanco); box-shadow: var(--hc-sombra); overflow: hidden; }
html body .hcpi-c-figura__media { display: block; width: 100%; height: auto; background: #0B1A2B; }
html body .hcpi-c-figura__pie { padding: 14px 20px; border-top: 1px solid var(--hc-borde); font: 400 14px/21px var(--hc-cuerpo); color: var(--hc-secundario); }
html body .hcpi-c-figura--panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
html body .hcpi-c-figura--panel .hcpi-c-figura__media { height: 100%; object-fit: contain; }
html body .hcpi-c-figura__panel { display: flex; flex-direction: column; gap: 10px; padding: 24px; font: 400 15px/23px var(--hc-cuerpo); color: var(--hc-texto); }
html body .hcpi-c-figura__panel .hcpi-c-tarjeta__titulo { font-size: 18px; }
@media (max-width: 767px) { html body .hcpi-c-figura--panel { grid-template-columns: 1fr; } }

/* ---------- Dato destacado ---------- */
html body .hcpi-c-datos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
html body .hcpi-c-dato { padding: 20px; border: 1px solid var(--hc-borde); border-radius: var(--hc-r-m); background: var(--hc-blanco); box-shadow: var(--hc-sombra); }
html body .hcpi-c-dato__cifra { display: block; font: 600 36px/1.1 var(--hc-titular); color: var(--hc-titulo); }
html body .hcpi-c-dato__texto { display: block; margin-top: 6px; font: 500 15px/22px var(--hc-cuerpo); color: var(--hc-secundario); }