/* ============================================================
   Colores de las submarcas en los portales de escolares.app
   (/admin, /edu, /docentes, /prefectos).

   /js/marca.js pone data-marca="escolares|kardex|cescolar" en <html> antes de
   pintar. Con «escolares» esta hoja no hace nada: cada portal ya trae el verde
   de Escolares MX en sus variables (--adm-*, --app-*, --dm-*). Con una
   submarca:
     1. cada marca define su paleta en variables --m-* (claro y oscuro);
     2. un solo bloque traduce --m-* a las variables de los cuatro portales;
     3. al final, las piezas que traen el verde escrito a mano en vez de usar
        las variables.

   Va al FINAL de los estilos de cada portal. Las reglas ganan por
   especificidad, no solo por orden: html[data-marca]:not(…) es (0,2,1) y
   vence a :root (0,1,0), a :root[data-bs-theme="dark"] (0,2,0) y a
   html[data-bs-theme="dark"] (0,1,1).

   Si un portal agrega un color de marca nuevo, que use sus variables; si no se
   puede, agregarlo en el bloque 3. Si se agrega una marca: su paleta aquí, sus
   logos en /marcas/<marca>/ y el catálogo de /js/marca.js y api/_marcas.php.
   ============================================================ */

/* ── 1 · Paletas ──────────────────────────────────────────────
   c        el color de la marca (logo, acentos grandes)
   osc      fondo de botones (con texto blanco encima: contraste ≥ 4.5)
   acento   texto de color (enlaces, activo) sobre fondo claro
   hero     barra y cabecera de color
   *-rgb    los mismos, para rgba() de Bootstrap                          */

html[data-marca="kardex"],
[data-marca-zona="kardex"] {
	--m-c: #DC213C;          --m-c-rgb: 220, 33, 60;
	--m-osc: #C21B34;        --m-osc-rgb: 194, 27, 52;
	--m-acento: #B01A30;     --m-acento-rgb: 176, 26, 48;
	--m-hover: #A8172D;
	--m-activo: #8E1426;
	--m-deshab: #EBA1AC;
	--m-claro: #FDECEE;
	--m-claro-2: #FAD6DB;
	--m-borde: #F2B4BE;
	--m-enfasis: #7A1020;
	--m-hero: #DC213C;
	--m-perfil: linear-gradient(145deg, #A8172D 0%, #DC213C 55%, #F0506A 100%);
	--m-insignia: linear-gradient(145deg, #DC213C, #F0506A);
	--m-login-1: #FBE3E6;    --m-login-2: #F8E9EB;
	--m-lado: linear-gradient(150deg, #DC213C 0%, #8E1426 100%);   /* panel de color de la entrada */
	--m-link-hover: #8E1426; --m-link-hover-rgb: 142, 20, 38;
	--m-primario-rgb: var(--m-osc-rgb);
}
html[data-marca="kardex"][data-bs-theme="dark"],
[data-bs-theme="dark"] [data-marca-zona="kardex"] {
	--m-c: #F05A6E;          --m-c-rgb: 240, 90, 110;
	--m-acento: #FF8C9C;     --m-acento-rgb: 255, 140, 156;
	--m-claro: rgba(240, 90, 110, .15);
	--m-claro-2: rgba(240, 90, 110, .25);
	--m-borde: rgba(240, 90, 110, .45);
	--m-enfasis: #FF8C9C;
	--m-hero: #000;
	--m-perfil: #1a1a1a;
	--m-login-1: rgba(255, 255, 255, .04); --m-login-2: rgba(255, 255, 255, .02);
	--m-link-hover: #FFB8C2; --m-link-hover-rgb: 255, 184, 194;
	--m-primario-rgb: var(--m-c-rgb);
}

html[data-marca="cescolar"],
[data-marca-zona="cescolar"] {
	--m-c: #F0563A;          --m-c-rgb: 240, 86, 58;
	--m-osc: #C9402A;        --m-osc-rgb: 201, 64, 42;
	--m-acento: #B83A24;     --m-acento-rgb: 184, 58, 36;
	--m-hover: #AE3622;
	--m-activo: #962E1D;
	--m-deshab: #F2B0A3;
	--m-claro: #FEEEEA;
	--m-claro-2: #FCDCD4;
	--m-borde: #F7BFB2;
	--m-enfasis: #7D2414;
	/* Barra y cabecera color tinta (el --ink de cescolar.com) con el logo a color; el coral
	   queda para botones, íconos y acentos (opción elegida por el usuario, 21-oct-2026). */
	--m-hero: #23262F;
	--m-perfil: linear-gradient(145deg, #1A1C23 0%, #23262F 55%, #3A3E4A 100%);
	--m-insignia: linear-gradient(145deg, #F0563A, #FFB627);
	--m-login-1: #FDE6DF;    --m-login-2: #FEF3E4;
	--m-lado: linear-gradient(150deg, #2E323D 0%, #16181E 100%);   /* panel de color de la entrada */
	--m-link-hover: #962E1D; --m-link-hover-rgb: 150, 46, 29;
	--m-primario-rgb: var(--m-osc-rgb);
}
html[data-marca="cescolar"][data-bs-theme="dark"],
[data-bs-theme="dark"] [data-marca-zona="cescolar"] {
	--m-c: #FF7A5C;          --m-c-rgb: 255, 122, 92;
	--m-acento: #FFA48E;     --m-acento-rgb: 255, 164, 142;
	--m-claro: rgba(255, 122, 92, .15);
	--m-claro-2: rgba(255, 122, 92, .25);
	--m-borde: rgba(255, 122, 92, .45);
	--m-enfasis: #FFA48E;
	--m-hero: #000;
	--m-perfil: #1a1a1a;
	--m-login-1: rgba(255, 255, 255, .04); --m-login-2: rgba(255, 255, 255, .02);
	--m-link-hover: #FFC6B8; --m-link-hover-rgb: 255, 198, 184;
	--m-primario-rgb: var(--m-c-rgb);
}

/* ── 2 · Paleta → variables de los portales ─────────────────── */

html[data-marca]:not([data-marca="escolares"]) {
	/* /admin (admin/theme/admin.css) */
	--adm-verde: var(--m-c);
	--adm-verde-osc: var(--m-osc);
	--adm-acento: var(--m-acento);
	--adm-verde-claro: var(--m-claro);
	--adm-verde-claro-2: var(--m-claro-2);
	--adm-verde-borde: var(--m-borde);
	--adm-hero: var(--m-hero);
	--adm-perfil: var(--m-perfil);
	--adm-login-1: var(--m-login-1);
	--adm-login-2: var(--m-login-2);

	/* Armazón de /edu, /docentes y /prefectos (--app-*) */
	--app-verde: var(--m-c);
	--app-verde-osc: var(--m-osc);
	--app-acento: var(--m-acento);
	--app-verde-claro: var(--m-claro);
	--app-verde-claro-2: var(--m-claro-2);
	--app-verde-borde: var(--m-borde);
	--app-hero: var(--m-hero);
	--app-perfil: var(--m-perfil);

	/* Módulos de /docentes y /prefectos (--dm-*) */
	--dm-brand: var(--m-c);
	--dm-brand-600: var(--m-osc);
	--dm-brand-700: var(--m-acento);
	--dm-brand-50: var(--m-claro);
	--dm-brand-100: var(--m-claro-2);
	--dm-brand-rgb: var(--m-c-rgb);

	/* Bootstrap */
	--bs-primary: var(--m-osc);
	--bs-primary-rgb: var(--m-primario-rgb);
	--bs-primary-text-emphasis: var(--m-enfasis);
	--bs-primary-bg-subtle: var(--m-claro);
	--bs-primary-border-subtle: var(--m-borde);
	--bs-link-color: var(--m-acento);
	--bs-link-color-rgb: var(--m-acento-rgb);
	--bs-link-hover-color: var(--m-link-hover);
	--bs-link-hover-color-rgb: var(--m-link-hover-rgb);
	--bs-focus-ring-color: rgba(var(--m-c-rgb), .25);
}

/* Sitio público (theme/default/css/mizzle.css): solo dentro de [data-marca-zona],
   que es el alta de una submarca en /demo?marca=… (views/demo.html). El resto del
   sitio es de Escolares MX y no se toca. */
[data-marca-zona]:not([data-marca-zona="escolares"]) {
	--emx-green: var(--m-c);
	--emx-green-d: var(--m-osc);
	--emx-green-dd: var(--m-hover);
	--emx-green-rgb: var(--m-c-rgb);
	--bs-primary: var(--m-c);
	--bs-primary-rgb: var(--m-c-rgb);
	--bs-link-color: var(--m-acento);
	--bs-link-color-rgb: var(--m-acento-rgb);
	--bs-link-hover-color: var(--m-link-hover);
}
/* Sin el menú fijo de Escolares MX no hace falta su hueco arriba (index.html). */
body.emx-marca-alta { padding-top: 0 !important; }
[data-marca-zona]:not([data-marca-zona="escolares"]) .text-bg-success {
	background-color: var(--m-osc) !important;
}
[data-marca-zona]:not([data-marca-zona="escolares"]) .form-control:focus,
[data-marca-zona]:not([data-marca-zona="escolares"]) .form-select:focus,
[data-marca-zona]:not([data-marca-zona="escolares"]) .form-check-input:focus {
	border-color: var(--m-c);
	box-shadow: 0 0 0 .2rem rgba(var(--m-c-rgb), .2);
}
[data-marca-zona]:not([data-marca-zona="escolares"]) .form-check-input:checked {
	background-color: var(--m-osc);
	border-color: var(--m-osc);
}
[data-marca-zona]:not([data-marca-zona="escolares"]) .dho-btn {
	--dho-c: var(--m-osc) !important;
	--dho-c-rgb: var(--m-osc-rgb) !important;
}

/* ── 3 · Piezas con el verde escrito a mano ──────────────────── */

/* Botones (los cuatro portales re-tiñen los de Bootstrap con valores fijos) */
html[data-marca]:not([data-marca="escolares"]) .btn-primary,
html[data-marca]:not([data-marca="escolares"]) .app-id-acciones .btn-primary {
	--bs-btn-bg: var(--m-osc);
	--bs-btn-border-color: var(--m-osc);
	--bs-btn-hover-bg: var(--m-hover);
	--bs-btn-hover-border-color: var(--m-hover);
	--bs-btn-active-bg: var(--m-activo);
	--bs-btn-active-border-color: var(--m-activo);
	--bs-btn-disabled-bg: var(--m-deshab);
	--bs-btn-disabled-border-color: var(--m-deshab);
	--bs-btn-focus-shadow-rgb: var(--m-c-rgb);
}
/* (en /admin, /docentes y /prefectos .btn-outline-primary ya usa sus variables) */
html[data-portal="edu"][data-marca]:not([data-marca="escolares"]) .btn-outline-primary,
html[data-marca]:not([data-marca="escolares"]) .app-id-acciones .btn-outline-primary {
	--bs-btn-color: var(--m-acento);
	--bs-btn-border-color: var(--m-borde);
	--bs-btn-hover-color: var(--m-acento);
	--bs-btn-hover-bg: var(--m-claro);
	--bs-btn-hover-border-color: var(--m-c);
	--bs-btn-active-color: var(--m-acento);
	--bs-btn-active-bg: var(--m-claro-2);
	--bs-btn-active-border-color: var(--m-c);
	--bs-btn-disabled-color: var(--m-deshab);
	--bs-btn-disabled-border-color: var(--m-borde);
	--bs-btn-focus-shadow-rgb: var(--m-c-rgb);
}
/* Botón blanco sobre la cabecera de color de /admin */
html[data-marca]:not([data-marca="escolares"]) .adm-encabezado .btn-primary {
	--bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-color: var(--m-enfasis);
	--bs-btn-hover-bg: var(--m-claro); --bs-btn-hover-border-color: var(--m-claro); --bs-btn-hover-color: var(--m-enfasis);
	--bs-btn-active-bg: var(--m-claro-2); --bs-btn-active-border-color: var(--m-claro-2); --bs-btn-active-color: var(--m-enfasis);
}
/* /edu pinta .btn-success con el verde de la marca (con !important); en los otros
   portales «success» es el verde de «correcto» de Bootstrap y se queda. */
html[data-portal="edu"][data-marca]:not([data-marca="escolares"]) .btn-success {
	background-color: var(--m-osc) !important;
	border-color: var(--m-osc) !important;
}
html[data-portal="edu"][data-marca]:not([data-marca="escolares"]) .btn-outline-success {
	color: var(--m-acento) !important;
	border-color: var(--m-c) !important;
}
html[data-portal="edu"][data-marca]:not([data-marca="escolares"]) .btn-outline-success:active,
html[data-portal="edu"][data-marca]:not([data-marca="escolares"]) .btn-outline-success:hover {
	background-color: var(--m-osc) !important;
	color: #fff !important;
}
html[data-marca]:not([data-marca="escolares"]) .app-panel .btn-success {
	--bs-btn-bg: var(--m-osc); --bs-btn-border-color: var(--m-osc);
	--bs-btn-hover-bg: var(--m-hover); --bs-btn-hover-border-color: var(--m-hover);
	--bs-btn-active-bg: var(--m-activo); --bs-btn-active-border-color: var(--m-activo);
}

/* Formularios, pestañas, listas, paginación, barras de progreso, menús (en /edu,
   /admin, /docentes y /prefectos con valores fijos: mismas reglas en todos) */
html[data-marca]:not([data-marca="escolares"]) .form-control:focus,
html[data-marca]:not([data-marca="escolares"]) .form-select:focus,
html[data-marca]:not([data-marca="escolares"]) .form-check-input:focus {
	border-color: var(--m-c);
	box-shadow: 0 0 0 .2rem rgba(var(--m-c-rgb), .2);
}
html[data-marca]:not([data-marca="escolares"]) .form-check-input:checked {
	background-color: var(--m-osc);
	border-color: var(--m-osc);
}
html[data-marca]:not([data-marca="escolares"]) .nav-pills {
	--bs-nav-pills-link-active-bg: var(--m-osc);
}
html[data-marca]:not([data-marca="escolares"]) .list-group {
	--bs-list-group-active-bg: var(--m-osc);
	--bs-list-group-active-border-color: var(--m-osc);
}
html[data-marca]:not([data-marca="escolares"]) .pagination {
	--bs-pagination-color: var(--m-acento);
	--bs-pagination-hover-color: var(--m-link-hover);
	--bs-pagination-focus-color: var(--m-link-hover);
	--bs-pagination-active-bg: var(--m-osc);
	--bs-pagination-active-border-color: var(--m-osc);
}
html[data-marca]:not([data-marca="escolares"]) .progress,
html[data-marca]:not([data-marca="escolares"]) .progress-stacked {
	--bs-progress-bar-bg: var(--m-c);
}
html[data-marca]:not([data-marca="escolares"]) .dropdown-menu {
	--bs-dropdown-link-active-bg: var(--m-osc);
}
html[data-marca]:not([data-marca="escolares"]) .accordion {
	--bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--m-c-rgb), .2);
}
/* /docentes y /prefectos: títulos y ligas de «primary» con !important */
html[data-portal="docentes"][data-marca]:not([data-marca="escolares"]) .text-primary,
html[data-portal="docentes"][data-marca]:not([data-marca="escolares"]) ol li a,
html[data-portal="prefectos"][data-marca]:not([data-marca="escolares"]) .text-primary,
html[data-portal="prefectos"][data-marca]:not([data-marca="escolares"]) ol li a {
	color: var(--m-acento) !important;
}
html[data-marca]:not([data-marca="escolares"]) .bg-dark.bg-verde {
	background-color: var(--m-c) !important;
}
html[data-portal="edu"][data-marca]:not([data-marca="escolares"]) .nav-masthead .active {
	border-bottom-color: var(--m-c) !important;
	color: var(--m-c);
}

/* Insignia con las iniciales de la escuela (tarjeta de Inicio) */
html[data-marca]:not([data-marca="escolares"]) .adm-id-badge,
html[data-marca]:not([data-marca="escolares"]) .app-id-badge,
html[data-marca]:not([data-marca="escolares"]) .id-badge {
	background: var(--m-insignia);
	box-shadow: 0 4px 10px rgba(var(--m-c-rgb), .35);
}

/* Panel de color de la entrada de /admin y /edu (en oscuro se queda el negro del portal) */
html[data-marca]:not([data-marca="escolares"]):not([data-bs-theme="dark"]) .adm-login-lado,
html[data-marca]:not([data-marca="escolares"]):not([data-bs-theme="dark"]) .app-login-lado {
	background: var(--m-lado);
}

/* Barra de /admin */
html[data-marca]:not([data-marca="escolares"]) .adm-topbar-pro:hover {
	color: var(--m-enfasis);
	background: var(--m-claro);
}
html[data-marca]:not([data-marca="escolares"]) .adm-foto-btn:hover {
	background: var(--m-hover);
}

/* Botón «Iniciar sesión con Panel360» (widget de panel360.mx/js/oauth/widget.js,
   sin Shadow DOM): toma su color de un estilo en línea --dho-c; el !important de
   aquí le gana. Así no depende del atributo color="…" de cada portal. */
html[data-marca]:not([data-marca="escolares"]) .dho-btn {
	--dho-c: var(--m-osc) !important;
	--dho-c-rgb: var(--m-osc-rgb) !important;
}

/* Burbuja de ayuda de Panel360 (#p360-help-widget en /edu, sin Shadow DOM): su color
   viene en línea (--p360hw-p); el !important de aquí le gana. */
html[data-marca]:not([data-marca="escolares"]) #p360-help-widget {
	--p360hw-p: var(--m-osc) !important;
	--p360hw-p-rgb: var(--m-osc-rgb) !important;
}

/* ── Logos ──
   Par claro/oscuro de la entrada de /edu (los otros portales usan .logo-color /
   .logo-blanco). Para todas las marcas, Escolares MX incluida. */
.marca-logo-oscuro { display: none !important; }
html[data-bs-theme="dark"] .marca-logo-claro { display: none !important; }
html[data-bs-theme="dark"] .marca-logo-oscuro { display: inline-block !important; }

/* Los de las submarcas son más cuadrados que el de Escolares MX (391×50): a la
   misma altura quedarían diminutos. */
html[data-marca]:not([data-marca="escolares"]) .adm-topbar-marca img,
html[data-marca]:not([data-marca="escolares"]) .app-topbar-marca img {
	height: 28px;
}
html[data-marca]:not([data-marca="escolares"]) .adm-login-logo,
html[data-marca]:not([data-marca="escolares"]) .app-login-logo {
	height: 34px;
}
@media (max-width: 575.98px) {
	html[data-marca]:not([data-marca="escolares"]) .adm-topbar-marca img,
	html[data-marca]:not([data-marca="escolares"]) .app-topbar-marca img {
		height: 24px;
	}
}