/*
 * Paleta CEPROME: variables y reglas manuales del tema hijo.
 *
 * - Los colores fijos de MasterStudy (grises azulados, azules, estados) se sustituyen en
 *   masterstudy-paleta-generado.css, que se carga antes que este archivo y usa estas variables.
 * - Aquí va solo lo que no se resuelve con ajustes (tema, LMS, Elementor) ni con el mapeo automático.
 * - Contexto y contrastes: COLORES-AUDITORIA.md y COLORES-PROPUESTA.md en la raíz del repositorio.
 */

/* 1. Paleta como variables CSS. */
:root {
	--cp-guinda: #A22944;          /* Guinda de marca, el mismo de ceprome.com (--ceprome-guinda) */
	--cp-guinda-oscuro: #7C1F35;   /* Hover y estado activo, el mismo de ceprome.com (--ceprome-guinda-hover) */
	--cp-guinda-10: rgba(162, 41, 68, .1);
	--cp-crema: #F7F6F2;           /* Fondo de la cabecera, el de ceprome.com (--c-bg) */
	--cp-gris-900: #2B2B2A;        /* Títulos y texto fuerte (antes #001931, #263145) */
	--cp-gris-700: #585857;        /* Gris oscuro de marca: texto principal (antes #4D5E6F, #273044) */
	--cp-gris-600: #666665;        /* Texto secundario (antes #808C98, #AAAAAA) */
	--cp-gris-500: #8C8C8B;        /* Controles inactivos y bordes de campos (antes #B3BAC2) */
	--cp-gris-300: #D9D9D9;        /* Gris claro de marca: bordes y separadores (antes #DBE0E9) */
	--cp-gris-200: #E8E8E8;        /* Fondo de botones deshabilitados */
	--cp-gris-100: #F2F2F2;        /* Fondos suaves (antes #EEF1F7, #F0F2F5) */
	--cp-gris-50: #F8F8F8;         /* Fondos muy suaves (antes #F6F8FA) */
	--cp-exito: #27702D;           /* Éxito (antes #61CC2F). 6.10:1 sobre blanco */
	--cp-error: #B3261E;           /* Error (antes #FF3945). 6.54:1 sobre blanco */
	--cp-aviso: #8A5800;           /* Aviso y estrellas (antes #FFA800). 6.04:1 sobre blanco */
}

/* 2. Enlaces en hover y foco. Bootstrap del LMS (vendors/bootstrap.min.css) los ponía en #23527C. */
a:hover,
a:focus {
	color: var(--cp-guinda-oscuro);
}

/* 3. Foco visible de marca al navegar con el teclado.
 *    uploads/stm_lms_styles/stm_lms.css (MasterStudy LMS) anula el contorno de todos los enlaces con
 *    "a { outline: 0 !important }" y varios componentes ponen "outline: none" en :focus, así que con el
 *    teclado no se veía dónde estaba el foco (WCAG 2.4.7). Donde no se anulaba, el navegador usaba su
 *    anillo azul (#005FCC) o naranja.
 *    !important indispensable: es la única forma de ganarle al !important del LMS.
 *    Se excluyen los campos de texto: el LMS ya marca su foco con un borde guinda (var(--accent-100)). */
:focus-visible:not(input):not(textarea) {
	outline: 2px solid var(--cp-guinda) !important;
	outline-offset: 2px !important;
}

/* Sobre fondos guinda u oscuros (barra superior, franja de copyright) el contorno guinda no se ve: va en blanco. */
#header .header_2_top_bar :focus-visible:not(input):not(textarea),
#footer_copyright :focus-visible:not(input):not(textarea) {
	outline-color: #FFFFFF !important;
}

/* Salvo en los submenús de la barra superior, que se despliegan sobre blanco. */
#header .header_2_top_bar li ul :focus-visible:not(input):not(textarea) {
	outline-color: var(--cp-guinda) !important;
}

/* Casos donde el tema o el LMS anulan el contorno con más especificidad que la regla anterior:
 * - Botón de cuenta "Hola, …" (parts/user.css: ".stm_lms_account_dropdown .dropdown button { outline: 0 !important }").
 * - Selectores Select2 (país, ajustes; themes/masterstudy/assets/css/styles.css: "outline: 0 !important").
 * - Buscador de cursos de la cabecera: no cambiaba nada al recibir el foco.
 * !important indispensable: las reglas originales lo usan. */
body .stm_lms_account_dropdown .dropdown button:focus-visible {
	outline: 2px solid var(--cp-guinda) !important;
	outline-offset: 2px !important;
}

html body span.select2-container--default .select2-selection--single:focus-visible {
	outline: 2px solid var(--cp-guinda) !important;
	outline-offset: 2px !important;
}

body #header .autocomplete-input:focus {
	outline: 2px solid var(--cp-guinda) !important;
	outline-offset: 2px !important;
}

body .stm_lms_search_popup .autocomplete-input:focus {
	outline: 2px solid var(--cp-guinda) !important;
	outline-offset: 2px !important;
}

/* 4. Menú de la cabecera de escritorio: el ajuste "Header Links Color on Hover" pasa a blanco;
 *    el subrayado marca el hover sin depender solo del color. */
#header .header_default .stm_header_links a:hover,
#header .header_default .header_main_menu_wrapper a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* 5. Botones primarios deshabilitados del LMS: antes guinda al 30 % con texto blanco (1.7:1).
 *    Ahora gris claro con texto gris (4.69:1), sin opacidad. Origen: components/button.css y nav-button.css. */
a.masterstudy-button.masterstudy-button_style-primary.masterstudy-button_disabled,
button.masterstudy-button.masterstudy-button_style-primary.masterstudy-button_disabled,
a.masterstudy-button.masterstudy-button_style-primary.masterstudy-button_disabled:hover,
button.masterstudy-button.masterstudy-button_style-primary.masterstudy-button_disabled:hover,
a.masterstudy-nav-button.masterstudy-nav-button_style-primary.masterstudy-button_disabled,
a.masterstudy-nav-button.masterstudy-nav-button_style-primary.masterstudy-button_disabled:hover {
	opacity: 1;
	background: var(--cp-gris-200);
}

a.masterstudy-button.masterstudy-button_style-primary.masterstudy-button_disabled .masterstudy-button__title,
button.masterstudy-button.masterstudy-button_style-primary.masterstudy-button_disabled .masterstudy-button__title,
a.masterstudy-button.masterstudy-button_style-primary.masterstudy-button_disabled:hover .masterstudy-button__title,
button.masterstudy-button.masterstudy-button_style-primary.masterstudy-button_disabled:hover .masterstudy-button__title,
a.masterstudy-nav-button.masterstudy-nav-button_style-primary.masterstudy-button_disabled .masterstudy-nav-button__title,
a.masterstudy-nav-button.masterstudy-nav-button_style-primary.masterstudy-button_disabled:hover .masterstudy-nav-button__title,
a.masterstudy-nav-button.masterstudy-nav-button_style-primary.masterstudy-button_disabled::before,
a.masterstudy-nav-button.masterstudy-nav-button_style-primary.masterstudy-button_disabled::after {
	color: var(--cp-gris-600);
}

/* 6. Cinta "DESTACADO" de la tarjeta de curso: verde #61CC2F fijo en elementor-widgets/courses/courses.css.
 *    Es un realce, no un estado de éxito: va en guinda. */
body .ms_lms_courses_card_item_featured {
	background-color: var(--cp-guinda);
}

/* 7. Botón "Ver pantalla completa" de PDF Poster: azul #1E73BE por defecto del plugin, en un <style>
 *    que se imprime en el cuerpo de la página (después de esta hoja). "body" sube la especificidad. */
body .block-2 .cta_wrapper a,
body .block-2 .cta_wrapper button,
body .block-2 .popup-btn {
	background-color: var(--cp-guinda);
	color: #FFFFFF;
}

body .block-2 .cta_wrapper a:hover,
body .block-2 .cta_wrapper button:hover,
body .block-2 .popup-btn:hover {
	background-color: var(--cp-guinda-oscuro);
	color: #FFFFFF;
}

/* 8. Borde de los campos de formulario del LMS: #DBE0E9 (1.41:1 contra blanco) no cumple el 3:1 que
 *    WCAG 1.4.11 pide para el contorno de un control. Pasa a gris medio (3.37:1). El foco sigue siendo
 *    el borde guinda que ya define el LMS (var(--accent-100)), que tiene más especificidad que estas reglas.
 *    Origen: components/authorization.css, account/settings.css, components/personal-info.css,
 *    components/select.css (cupón y selector). Llevan prefijo "body" para ganarle a la copia del archivo generado (que lleva "html" y va antes). */
body .masterstudy-authorization__form input.masterstudy-authorization__form-input,
body .masterstudy-authorization__form input.masterstudy-authorization__form-input:active,
body .masterstudy-authorization__form textarea.masterstudy-authorization__form-textarea,
body .masterstudy-account-settings input.masterstudy-account-settings__input,
body .masterstudy-account-settings textarea.masterstudy-account-settings__textarea,
body .masterstudy-account-settings textarea.masterstudy-account-settings__textarea:active,
body .masterstudy-account-settings select.masterstudy-account-settings__select,
body .masterstudy-personal-info input.masterstudy-personal-info__input,
body .masterstudy-personal-info select.masterstudy-personal-info__select,
body .masterstudy-select,
body .masterstudy-checkout-coupon__form input.masterstudy-checkout-coupon__input,
body .masterstudy-checkout-coupon__form input.masterstudy-checkout-coupon__input:active,
body .masterstudy-personal-info .select2-container .select2-selection.select2-selection--single .select2-selection__rendered {
	border-color: var(--cp-gris-500);
}

/* 9. Botón "Pagar" deshabilitado (carrito): guinda al 30 % con texto blanco en uploads/stm_lms_styles/parts/cart.css.
 *    Mismo criterio que los demás botones deshabilitados. */
body .masterstudy-checkout-container .masterstudy-checkout-payment .masterstudy-checkout-table__footer .masterstudy-checkout-course-info .stm_lms_pay_button.stm_lms_disabled_button {
	opacity: 1;
	background-color: var(--cp-gris-200);
	border-color: var(--cp-gris-200);
	color: var(--cp-gris-600);
}

/* 9b. Íconos de redes sociales del pie: #AAAAAA en themes/masterstudy/assets/css/styles.css
 *     (2.32:1 sobre el fondo blanco del pie; un ícono necesita 3:1). Pasan al gris secundario. */
body .socials_widget_wrapper__text a {
	color: var(--cp-gris-600);
}

body .socials_widget_wrapper__text a:hover,
body .socials_widget_wrapper__text a:focus {
	color: var(--cp-guinda);
}

/* 10. Cabecera, alineada con ceprome.com.
 *     Fondo crema #F7F6F2, texto oscuro y logo a color salen de los ajustes del tema (Header Background Color,
 *     Header Color, Header Links Color on Hover y Logo transparente = logo a color). Aquí va solo lo que el
 *     tema no permite configurar. Contrastes sobre el crema: texto 13.11, guinda 6.61, bordes 3.11. */

/* Barra superior (Home, Acerca de…): en el estilo header_2 vive dentro de la cabecera y comparte su
 * fondo y el color de texto "Header Color". En ceprome.com es una barra guinda con enlaces blancos (7.15:1). */
/* Las opciones del tema imprimen el color de cabecera después de esta hoja con la misma especificidad;
 * ".header_2" la sube lo justo. El margen negativo cubre el padding-top: 5px !important de .header_2
 * (headers/header_2.css), que dejaba una franja blanca sobre la barra. */
#header .header_default.header_2 .header_2_top_bar {
	margin-top: -5px;
	background-color: var(--cp-guinda);
}

#header .header_default.header_2 .header_2_top_bar a,
#header .header_default.header_2 .header_2_top_bar a i,
#header .header_default.header_2 .header_2_top_bar .header_top_bar_socs ul li a {
	color: #FFFFFF;
}

#header .header_default.header_2 .header_2_top_bar a:hover,
#header .header_default.header_2 .header_2_top_bar a:focus {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Submenús de la barra superior (Nosotros, Gestión institucional): se despliegan sobre fondo blanco, y la
 * regla anterior los dejaba blanco sobre blanco. Texto oscuro (14.4:1) y guinda al pasar (7.15:1). */
#header .header_default.header_2 .header_2_top_bar li ul a {
	color: var(--cp-gris-900);
}

#header .header_default.header_2 .header_2_top_bar li ul a:hover,
#header .header_default.header_2 .header_2_top_bar li ul a:focus {
	color: var(--cp-guinda);
}

/* "Iniciar sesión": blanco fijo en stm_layout_styles/course_hub.css (".header_default.header_2 .stm_lms_log_in"),
 * invisible sobre la cabecera blanca. */
#header .header_default.header_2 .stm_lms_log_in {
	color: var(--cp-gris-900);
}

#header .header_default.header_2 .stm_lms_log_in:hover,
#header .header_default.header_2 .stm_lms_log_in:focus {
	color: var(--cp-guinda);
}

/* Buscador de cursos sobre el crema: el campo es #F2F2F2 sin borde y se confundía con el fondo (1.04:1).
 * Fondo blanco, como los formularios de ceprome.com, y borde de control con contraste 3:1. */
body #header .header_2 .stm_courses_search .autocomplete-input,
body #header .header_2 .stm_lms_categories {
	border: 1px solid var(--cp-gris-500);
}

body #header .header_2 .stm_courses_search .autocomplete-input {
	background-color: #FFFFFF;
}

/* Buscador desactivado (Theme Options → Header → Show Search, 11 oct 2026): el menú desplegable del móvil
 * imprime siempre el título "Buscar", que quedaba sin nada debajo. Las dos reglas anteriores solo vuelven
 * a actuar si se reactiva el buscador. */
body .stm_lms_search_popup .mobile_search_courses {
	display: none;
}

/* Cabecera móvil (el tema la elige por agente de usuario con wp_is_mobile()): el mismo crema que la de
 * escritorio. El logo a color ya sale del ajuste "Logo transparente". El panel del menú desplegable
 * (.stm_lms_search_popup) conserva su fondo #F2F2F2. */
body #header-mobile .header_mobile {
	background-color: var(--cp-crema);
}

/* Rayas del botón de menú móvil: rgba(39,48,68,.5) !important en styles.css; sobre la barra clara quedaban
 * en 2:1. Gris oscuro de marca (6.59:1 sobre el crema). !important indispensable: el tema lo declara así. */
body #header-mobile .header_mobile .header_top button.stm_header_top_search .icon-bar {
	background-color: var(--cp-gris-700) !important;
}

/* 11. Grises de TinyMCE escritos en línea en el contenido de los materiales (#95A5A6: 2.56:1 y
 *     #7E8C8D: 3.49:1 sobre blanco, no cumplen AA). Por decisión de CEPROME no se modifica el contenido
 *     en la base; esta regla los oscurece al gris secundario de la escala (#666665, 5.75:1) solo dentro
 *     del contenido de lecciones, tareas y cuestionarios del reproductor del curso.
 *     Materiales afectados (oct. 2026): 5043, 5137, 5195, 5199, 5232, 5234, 5258, 5337, 5528, 5539, 5721,
 *     5736, 5740, 5751, 5756, 5766, 5769, 5777, 5781, 5784, 5789 (y 5132, que usa #7E8C8D en texto grande).
 *     !important indispensable: es la única forma de ganarle a un atributo style="" en línea.
 *     El flag "i" hace que coincida aunque el editor haya escrito el color en mayúsculas. */
.masterstudy-course-player-lesson [style*="#95a5a6" i],
.masterstudy-course-player-lesson [style*="#7e8c8d" i],
.masterstudy-course-player-assignments__content [style*="#95a5a6" i],
.masterstudy-course-player-assignments__content [style*="#7e8c8d" i],
.masterstudy-course-player-quiz [style*="#95a5a6" i],
.masterstudy-course-player-quiz [style*="#7e8c8d" i] {
	color: var(--cp-gris-600) !important;
}

/* 12. Textos que no cumplían AA (barrido de contraste de la Fase C, todas las páginas del participante). */

/* Breadcrumb de Courses (Breadcrumb NavXT): #AAAAAA en themes/masterstudy/assets/css/styles.css (2.29:1). */
body .stm_breadcrumbs_unit .navxtBreads,
body .stm_breadcrumbs_unit .navxtBreads span,
body .stm_breadcrumbs_unit .navxtBreads a {
	color: var(--cp-gris-600);
}

body .stm_breadcrumbs_unit .navxtBreads a:hover,
body .stm_breadcrumbs_unit .navxtBreads a:hover span {
	color: var(--cp-guinda);
}

/* Botón "Categoría" junto al buscador de la cabecera: #777 en assets/css/vc_modules/headers/header_2.css
 * (3.17:1 sobre el fondo #D9D9D9 del botón). Pasa al gris oscuro de marca (5.05:1). */
body .header_2 .header_top .stm_lms_categories span {
	color: var(--cp-gris-700);
}

/* Texto de ejemplo de los selectores Select2 ("Selecciona tu país"): #999 en select2.min.css (2.85:1). */
html body .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--cp-gris-600);
}

/* Contador "X/Y" de cada sección del temario: blanco al 70 % (components/curriculum-accordion.css) sobre la
 * cabecera de sección, que pasó de #4D5E6F a #585857; quedaba en 4.47:1. Gris muy claro: 6.36:1. */
body .masterstudy-curriculum-accordion__section-count {
	color: var(--cp-gris-100);
}

/* 13. Guinda escrito a mano en el contenido de los materiales (color: #852C44 en 87 materiales, oct. 2026).
 *     El guinda del sitio pasó a #A22944 (el de ceprome.com); por decisión de CEPROME el contenido no se
 *     modifica en la base, así que esta regla lo muestra con el guinda actual solo dentro del contenido de
 *     lecciones, tareas y cuestionarios del reproductor del curso.
 *     Se excluyen estilos con "background" por si algún día se usa como fondo (hoy no hay ninguno).
 *     !important indispensable: es la única forma de ganarle a un atributo style="" en línea. */
.masterstudy-course-player-lesson [style*="#852c44" i]:not([style*="background" i]),
.masterstudy-course-player-assignments__content [style*="#852c44" i]:not([style*="background" i]),
.masterstudy-course-player-quiz [style*="#852c44" i]:not([style*="background" i]) {
	color: var(--cp-guinda) !important;
}