/* =========================================================================
   CUSTOM.CSS — todo lo del rediseño CERCP, separado de estilos-master.css
   para no tener que tocar la plantilla original en cada ajuste.
   Se carga SIEMPRE después de estilos-master.css (o del CSS propio de las
   páginas que no usan MasterPage.master), así que puede sobreescribirlo.
   ========================================================================= */

/* Fondo de página y del navbar (ver escala --cercp-bg-* más abajo) */
body {
	background-color: var(--cercp-bg-page, #E9ECF6);
}
.navbar-default {
	background-color: var(--cercp-bg-navbar, #F7F8FC);
}

/* -------------------------------------------------------------------------
   Paleta de marca + tabla de cursos + badges
   Paleta anclada al logo (navy + rojo); el resto son tonos de apoyo
   desaturados para no competir con la marca. Ver mockup de referencia.
   ------------------------------------------------------------------------- */

:root {
	--cercp-navy-900: #1B1E4B;
	--cercp-navy-700: #2E3277;
	--cercp-navy-100: #E4E7F9;
	--cercp-red-600: #E2231A;
	--cercp-red-700: #B71C14;
	--cercp-red-100: #FCE4E2;
	--cercp-amber-700: #B4650A;
	--cercp-amber-100: #FDECD1;
	--cercp-green-700: #157F3C;
	--cercp-green-100: #DEF3E4;
	--cercp-violet-700: #6D28D9;
	--cercp-violet-100: #EDE6FB;
	--cercp-teal-700: #0E7C86;
	--cercp-teal-100: #DFF5F4;
	--cercp-grey-600: #6B6F86;
	--cercp-grey-100: #ECEDF3;
	--cercp-border: #E0E3F1;
	/* Escala de "blancos" — de más a menos claro: tarjetas > navbar > rayado de tabla > fondo de página */
	--cercp-bg-card: #FFFFFF;
	--cercp-bg-navbar: #F7F8FC;
	--cercp-bg-stripe: #F2F4FA;
	--cercp-bg-page: #E9ECF6;
}

/* =========================================================================
   NAVBAR + BREADCRUMB — mismo lenguaje de color que el resto del rediseño:
   navbar en el mismo blanco que las tarjetas (--cercp-bg-navbar), texto en
   navy, acento rojo reservado para estados activos/hover y para los botones
   de perfil/desconectar. Sustituye el gris plano de Bootstrap por defecto.
   ========================================================================= */
.navbar-default {
	border: none;
	border-bottom: 1px solid var(--cercp-border);
	box-shadow: 0 1px 2px rgba(20,22,46,0.04), 0 6px 18px -12px rgba(20,22,46,0.15);
}
.navbar-default .navbar-brand {
	padding-top: 10px;
	padding-bottom: 10px;
}
/* La caja gris plana (#ccc/#ddd en hover) es legacy de estilos-master.css,
   sobrante de la plantilla original: la quitamos y usamos el mismo hover
   navy-100 que el resto de items del menú, para que quede coherente. */
.navbar-default a.navbar-brand:link,
.navbar-default a.navbar-brand:visited,
.navbar-default a.navbar-brand:active {
	background-color: transparent !important;
	border-bottom: none;
}
.navbar-default a.navbar-brand:hover,
.navbar-default a.navbar-brand:focus {
	background-color: var(--cercp-navy-100) !important;
}
.navbar-default .navbar-nav > li > a {
	color: var(--cercp-navy-700);
	font-weight: 600;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
	color: var(--cercp-navy-900);
	background-color: var(--cercp-navy-100);
}
/* Sección actual del menú ("estás aquí"): mismo tratamiento que el hover,
   más un subrayado rojo para distinguirlo de "estás pasando el ratón". */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
	color: var(--cercp-navy-900);
	background-color: var(--cercp-navy-100);
	box-shadow: inset 0 -3px 0 var(--cercp-red-600);
}
/* Estilo de .dropdown-menu GLOBAL (no solo navbar): así el desplegable del
   botón "Acciones" en las tablas de listado (cursos, alumnos, usuarios...) y
   cualquier otro dropdown de Bootstrap del proyecto quedan con el mismo
   look, en vez de tener el navbar restyleado y el resto con el Bootstrap
   gris por defecto. */
.dropdown-menu {
	border: 1px solid var(--cercp-border);
	border-radius: 8px;
	box-shadow: 0 8px 24px -12px rgba(20,22,46,0.25);
	padding: 6px;
}
.dropdown-menu > li > a {
	border-radius: 6px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	/* !important: dentro de un navbar .open, Bootstrap tiene una regla más
	   específica (.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover)
	   que ganaría a esta versión genérica por especificidad. */
	background-color: var(--cercp-navy-100) !important;
	color: var(--cercp-navy-900) !important;
}
/* Opción actual dentro del desplegable (p.ej. "Directores" abierto desde
   Personas): mismo navy-100 que el resto, en vez del azul de Bootstrap.
   !important porque en el navbar Bootstrap tiene una regla más específica
   (.navbar-default .navbar-nav .open .dropdown-menu > .active > a) que
   ganaría a esta versión genérica por especificidad, no por orden. */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
	background-color: var(--cercp-navy-100) !important;
	color: var(--cercp-navy-900) !important;
}
.navbar-default .navbar-toggle {
	border-color: var(--cercp-border);
}
.navbar-default .navbar-toggle .icon-bar {
	background-color: var(--cercp-navy-700);
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
	background-color: var(--cercp-navy-100);
}
/* Botones-pill de perfil/desconectar: mismo rojo de marca que el resto (antes
   usaban rojos sueltos hardcodeados en estilos-master.css: #cf003d/#dd3667
   para perfil, #8f0000/#9f1d1d para desconectar). */
a.boton-perfil:link, a.boton-perfil:visited, a.boton-perfil:active {
	background-color: var(--cercp-navy-900) !important;
	color: #fff !important;
}
a.boton-perfil:hover {
	background-color: var(--cercp-navy-700) !important;
	color: #fff !important;
}
.boton-desconectar a:link, .boton-desconectar a:visited, .boton-desconectar a:active {
	background-color: var(--cercp-red-600) !important;
	color: #fff !important;
}
.boton-desconectar a:hover {
	background-color: var(--cercp-red-700) !important;
	color: #fff !important;
}

/* Migas de pan: fondo alineado con el fondo de página (un escalón por debajo
   del navbar en la escala de "blancos"), en vez del gris plano de Bootstrap. */
.breadcrumb {
	background: var(--cercp-bg-page);
	border-radius: 0;
	padding: 10px 24px;
}
.breadcrumb > li a {
	color: var(--cercp-navy-700);
	text-decoration: none;
	font-weight: 600;
}
.breadcrumb > li a:hover {
	color: var(--cercp-red-600);
	text-decoration: underline;
}
.breadcrumb > li + li:before {
	color: var(--cercp-grey-600);
}
.breadcrumb > .active {
	color: var(--cercp-grey-600);
	font-weight: 600;
}

/* =========================================================================
   DATEPICKER (jQuery UI) — retema visual sobre el tema por defecto del
   plugin (css/jquery-ui.min-datepicker.css, de terceros, no se toca).
   Usa !important porque el <link> del plugin se declara dentro del
   ContentPlaceHolderHeader de cada página (curso.aspx, usuario.aspx,
   alumno.aspx), que en el HTML final se inyecta DESPUÉS de este custom.css
   — sin !important el tema del plugin volvería a ganar la cascada.
   ========================================================================= */
.ui-datepicker.ui-widget-content {
	border: 1px solid var(--cercp-border) !important;
	border-radius: 10px !important;
	box-shadow: 0 8px 24px -12px rgba(20,22,46,0.25) !important;
	padding: 0 0 8px !important;
	font-family: inherit !important;
	overflow: hidden;
}
.ui-datepicker .ui-datepicker-header.ui-widget-header {
	background: var(--cercp-navy-900) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 10px 0 !important;
}
.ui-datepicker .ui-datepicker-title {
	color: #fff !important;
	font-weight: 600 !important;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	top: 6px !important;
	cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
	display: none !important;
}
.ui-datepicker .ui-datepicker-prev:before,
.ui-datepicker .ui-datepicker-next:before {
	display: block;
	text-align: center;
	color: #fff;
	font-size: 18px;
	line-height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev:before { content: "\2039"; }
.ui-datepicker .ui-datepicker-next:before { content: "\203A"; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover,
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	background: rgba(255,255,255,0.15) !important;
	border: none !important;
}
.ui-datepicker table.ui-datepicker-calendar {
	margin: 8px 8px 4px !important;
	width: auto !important;
}
.ui-datepicker th {
	color: var(--cercp-grey-600) !important;
	font-size: 11px !important;
	text-transform: uppercase;
	border: none !important;
}
.ui-datepicker td {
	padding: 2px !important;
}
.ui-datepicker td .ui-state-default {
	border: none !important;
	background: transparent !important;
	color: #14162E !important;
	text-align: center !important;
	border-radius: 6px !important;
	font-weight: 500 !important;
}
.ui-datepicker td .ui-state-hover {
	background: var(--cercp-navy-100) !important;
	color: var(--cercp-navy-900) !important;
}
.ui-datepicker td .ui-state-active {
	background: var(--cercp-red-600) !important;
	color: #fff !important;
}
.ui-datepicker td.ui-datepicker-today .ui-state-default {
	box-shadow: inset 0 0 0 1px var(--cercp-red-600) !important;
	background: var(--cercp-red-100) !important;
	color: var(--cercp-red-700) !important;
}

/* Franja de urgencia (sustituye al fondo de fila a color sólido) */
.tabla-cursos tbody tr.urg-row {
	border-left: 4px solid transparent;
}
.tabla-cursos tbody tr.urg-hoy { border-left-color: var(--cercp-red-600); }
.tabla-cursos tbody tr.urg-pronto { border-left-color: var(--cercp-amber-700); }
.tabla-cursos tbody tr.urg-lejos { border-left-color: var(--cercp-green-700); }
.tabla-cursos tbody tr.urg-na { border-left-color: var(--cercp-border); }
.tabla-cursos tbody tr.fila-anulada { opacity: 0.6; }

.dias-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
/* Base del punto de color: independiente de .dias-tag para poder reutilizarlo
   también en la leyenda, que no envuelve sus puntos en ese contenedor. */
.dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: none;
	display: inline-block;
}
.dot.hoy { background: var(--cercp-red-600); }
.dot.pronto { background: var(--cercp-amber-700); }
.dot.lejos { background: var(--cercp-green-700); }
.dot.na { background: var(--cercp-grey-600); }

/* Insignias de estado del curso */
.badge-estado {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}
.badge-estado.previo,
.badge-estado.autorizado { background: var(--cercp-navy-100); color: var(--cercp-navy-700); }
.badge-estado.memoria,
.badge-estado.validando-memoria { background: var(--cercp-amber-100); color: var(--cercp-amber-700); }
.badge-estado.facturacion { background: var(--cercp-violet-100); color: var(--cercp-violet-700); }
.badge-estado.cerrado,
.badge-estado.anulado { background: var(--cercp-grey-100); color: var(--cercp-grey-600); }
.badge-estado.reabierto { background: var(--cercp-teal-100); color: var(--cercp-teal-700); }

/* Leyenda del semáforo de proximidad, bajo la tabla */
.leyenda-urgencia {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	font-size: 12px;
	color: var(--cercp-grey-600);
	padding: 10px 2px;
}
.leyenda-urgencia span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Tarjeta contenedora del listado de cursos (buscador + tabla + pie) */
.panel-listado {
	background: var(--cercp-bg-card);
	border: 1px solid var(--cercp-border);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(20,22,46,0.05), 0 6px 18px -10px rgba(20,22,46,0.15);
	padding: 18px 20px 6px 20px;
	margin-bottom: 20px;
}

.toolbar-listado {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}
.toolbar-listado #BotonNuevoCurso {
	flex: none;
}

/* Botones con la paleta del CERCP (por ahora solo en el listado de cursos) */
.btn-cercp-primary,
.btn-cercp-secondary {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.4;
}
.btn-cercp-primary {
	background: var(--cercp-red-600);
	color: #fff;
}
.btn-cercp-primary:hover,
.btn-cercp-primary:focus {
	background: var(--cercp-red-700);
	color: #fff;
	text-decoration: none;
}
.btn-cercp-secondary {
	background: var(--cercp-navy-900);
	color: #fff;
}
.btn-cercp-secondary:hover,
.btn-cercp-secondary:focus {
	background: var(--cercp-navy-700);
	color: #fff;
	text-decoration: none;
}

/* Bootstrap aplica .btn-lg con la misma especificidad (una sola clase) pero
   desde bootstrap.min.css, que se carga ANTES que este archivo: el padding/
   font-size de .btn-cercp-primary siempre gana en la cascada aunque el botón
   lleve también btn-lg. Para que btn-lg tenga efecto real hace falta este
   selector combinado, con más especificidad que cualquiera de los dos solos. */
.btn-cercp-primary.btn-lg,
.btn-cercp-secondary.btn-lg {
	padding: 10px 20px;
	font-size: 18px;
	line-height: 1.33;
}

/* Buscador del listado */
.buscador-listado {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #F5F6FB;
	border: 1px solid var(--cercp-border);
	border-radius: 8px;
	padding: 6px 12px;
	flex: 1 1 260px;
	min-width: 200px;
}
@media (max-width: 480px) {
	.buscador-listado {
		flex-basis: 100%;
		min-width: 0;
	}
}
.buscador-listado .fa-search {
	color: var(--cercp-grey-600);
	flex: none;
}
.buscador-listado input[type="text"] {
	border: none;
	background: transparent;
	outline: none;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
}
.buscador-listado a {
	display: none; /* el botón de buscar queda oculto: Enter ya envía el formulario */
}

/* Pills de filtro rápido */
.filtros-listado {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	flex: none;
}
.filtro-pill {
	font-size: 13px;
	font-weight: 600;
	padding: 6px 13px;
	border-radius: 999px;
	border: 1px solid var(--cercp-border);
	background: #fff;
	color: var(--cercp-grey-600);
	text-decoration: none;
	white-space: nowrap;
}
.filtro-pill:hover {
	background: var(--cercp-navy-100);
	color: var(--cercp-navy-700);
	text-decoration: none;
}
.filtro-pill.activo {
	background: var(--cercp-navy-900);
	border-color: var(--cercp-navy-900);
	color: #fff;
}

/* Tabla: cabecera y filas más limpias dentro de la tarjeta.
   .tabla-cursos es la de cursos.aspx (con el añadido de la franja de
   urgencia); .tabla-listado es la misma base "de serie" para el resto
   de listados (usuarios, alumnos, instructores, directores...). */
.tabla-cursos,
.tabla-listado {
	margin-bottom: 0;
}
.tabla-cursos thead th,
.tabla-listado thead th {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cercp-navy-900);
	background: var(--cercp-navy-100);
	border-bottom: 2px solid var(--cercp-navy-900) !important;
	border-top: none !important;
	padding-top: 16px !important;
	padding-bottom: 16px !important;
}
.td-centrado {
	text-align: center;
}
.tabla-cursos tbody td,
.tabla-listado tbody td {
	border-top: 1px solid var(--cercp-border) !important;
	vertical-align: middle !important;
}
.tabla-cursos.table-striped > tbody > tr:nth-of-type(odd),
.tabla-listado.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: var(--cercp-bg-stripe);
}
.tabla-cursos tbody tr:hover,
.tabla-listado tbody tr:hover {
	background-color: var(--cercp-navy-100) !important;
}
.tabla-cursos tfoot,
.tabla-listado tfoot {
	display: none; /* el pie duplicaba la cabecera; con la tarjeta ya no hace falta */
}
.tabla-cursos .btn-odin-2,
.tabla-listado .btn-odin-2 {
	background-color: var(--cercp-navy-900);
	border-color: var(--cercp-navy-900);
}
.tabla-cursos .btn-odin-2:hover,
.tabla-cursos .btn-odin-2:focus,
.tabla-listado .btn-odin-2:hover,
.tabla-listado .btn-odin-2:focus {
	background-color: var(--cercp-navy-700);
	border-color: var(--cercp-navy-700);
}

/* Pie de la tarjeta: leyenda + paginador + selector de página */
/* Grid de 3 columnas: dos huecos elásticos a los lados dejan el paginador
   centrado de verdad en columna 2 (no solo "lo que sobra" de un flex), y el
   combo de nº de página va en columna 3, siempre a la derecha y alineado en
   altura con el paginador gracias a align-items:center en la fila. */
.pie-listado {
	display: grid;
	/* minmax(0, 1fr) en vez de 1fr a secas: un 1fr "puro" no baja de su
	   contenido mínimo, y como la columna 3 (combo) siempre tiene contenido
	   y la columna 1 está vacía, el paginador quedaba descentrado hacia la
	   izquierda. Con minmax(0, ...) ambas columnas elásticas parten de 0. */
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	padding: 14px 2px;
	border-top: 1px solid var(--cercp-border);
	margin-top: 8px;
}
.pie-listado .alto-paginador {
	display: none;
}
.pie-listado .paginador {
	grid-column: 2;
	justify-self: center;
	margin: 0;
}
.pie-listado .combo-paginador {
	grid-column: 3;
	justify-self: end;
	float: none;
	margin: 0;
}
@media (max-width: 560px) {
	/* En móvil no hay hueco para 2 columnas elásticas + centrado real:
	   apilamos combo encima y paginador centrado debajo. */
	.pie-listado {
		grid-template-columns: 1fr;
	}
	.pie-listado .combo-paginador {
		grid-column: 1;
		justify-self: end;
	}
	.pie-listado .paginador {
		grid-column: 1;
	}
}

/* Combo "items por página": sustituye visualmente el <select> nativo (ver
   script en MasterPage.master) por un dropdown de Bootstrap con el mismo
   look que "Acciones" o los menús del navbar. El toggle imita a .form-control
   pero como <button>, para que no cambie de tamaño/posición respecto al select
   original. */
.combo-paginador-dropdown {
	display: inline-block;
}
.combo-paginador-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-width: 64px;
	height: 34px;
	padding: 6px 10px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	color: #555;
	font-size: 14px;
	line-height: 1.42857143;
}
.combo-paginador-toggle:hover,
.combo-paginador-toggle:focus {
	background: #fff;
	border-color: var(--cercp-navy-700);
	outline: none;
}
.combo-paginador-toggle .caret {
	margin-left: 0;
}
.combo-paginador-dropdown .dropdown-menu {
	min-width: 64px;
}

/* Paginador: números redondeados en vez del bootstrap por defecto */
.paginador .pagination {
	margin: 0;
	display: flex;
	gap: 4px;
}
.paginador .pagination > li > a {
	border-radius: 6px !important;
	border: 1px solid var(--cercp-border);
	color: var(--cercp-navy-900);
	padding: 5px 11px;
	font-size: 13px;
}
.paginador .pagination > li.active > a {
	background: var(--cercp-navy-900);
	border-color: var(--cercp-navy-900);
	color: #fff;
}
.paginador .pagination > li > a:hover {
	background: var(--cercp-navy-100);
	border-color: var(--cercp-navy-100);
}

/* =========================================================================
   PANEL DE INICIO (index.aspx) — KPIs y listas resumen por rol
   ========================================================================= */

.inicio-top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.inicio-rol-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--cercp-navy-100);
	color: var(--cercp-navy-700);
}
.inicio-fecha {
	color: var(--cercp-grey-600);
	font-size: 13px;
	margin-left: 10px;
}

.inicio-kpis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 20px;
}
.inicio-kpis.inicio-kpis-2 {
	grid-template-columns: repeat(2, 1fr);
	max-width: 520px;
}
@media (max-width: 900px) {
	.inicio-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.inicio-kpis { grid-template-columns: 1fr; }
}
.inicio-kpi {
	background: var(--cercp-bg-card);
	border: 1px solid var(--cercp-border);
	border-radius: 14px;
	padding: 18px 20px;
	box-shadow: 0 1px 2px rgba(20,22,46,0.06), 0 8px 24px -12px rgba(20,22,46,0.18);
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-top: 3px solid var(--kpi-accent, var(--cercp-navy-900));
}
.inicio-kpi .label {
	font-size: 13px;
	color: var(--cercp-grey-600);
	font-weight: 600;
}
.inicio-kpi .valor {
	font-family: "Courier New", monospace;
	font-size: 34px;
	font-weight: 700;
	color: #14162E;
	line-height: 1;
}
.inicio-kpi .sub {
	font-size: 12px;
	color: #8489AC;
}
.inicio-kpi.rojo { --kpi-accent: var(--cercp-red-600); }
.inicio-kpi.ambar { --kpi-accent: var(--cercp-amber-700); }
.inicio-kpi.verde { --kpi-accent: var(--cercp-green-700); }
.inicio-kpi.navy { --kpi-accent: var(--cercp-navy-900); }

.inicio-cols {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 16px;
	align-items: start;
}
.inicio-cols.inicio-cols-1 {
	grid-template-columns: 1fr;
	max-width: 640px;
}
@media (max-width: 820px) {
	.inicio-cols { grid-template-columns: 1fr; }
}

.inicio-card {
	background: var(--cercp-bg-card);
	border: 1px solid var(--cercp-border);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(20,22,46,0.06), 0 8px 24px -12px rgba(20,22,46,0.18);
	overflow: hidden;
}
.inicio-card-head {
	padding: 16px 18px;
	border-bottom: 1px solid var(--cercp-border);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}
.inicio-card-head h2 {
	font-size: 16px;
	margin: 0;
}
.inicio-card-head a {
	font-size: 13px;
	font-weight: 600;
	color: var(--cercp-navy-700);
	text-decoration: none;
}
.inicio-card-head a:hover { text-decoration: underline; }

.inicio-lista { display: flex; flex-direction: column; }
.inicio-fila {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--cercp-border);
}
.inicio-fila:last-child { border-bottom: none; }
.inicio-fila .stripe {
	width: 4px;
	align-self: stretch;
	border-radius: 2px;
	flex: none;
	background: var(--cercp-border);
}
.inicio-fila.rojo .stripe { background: var(--cercp-red-600); }
.inicio-fila.ambar .stripe { background: var(--cercp-amber-700); }
.inicio-fila .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inicio-fila .titulo { font-weight: 600; font-size: 14px; }
.inicio-fila .meta { font-size: 12px; color: var(--cercp-grey-600); }
.inicio-fila .meta span + span::before { content: "·"; margin: 0 6px; color: #8489AC; }

.inicio-chip {
	font-size: 11px;
	font-weight: 700;
	padding: 4px 9px;
	border-radius: 999px;
	white-space: nowrap;
	flex: none;
}
.inicio-chip.rojo { background: var(--cercp-red-100); color: var(--cercp-red-700); }
.inicio-chip.ambar { background: var(--cercp-amber-100); color: var(--cercp-amber-700); }

.inicio-ranking-num {
	width: 22px; height: 22px; border-radius: 6px;
	background: var(--cercp-navy-100); color: var(--cercp-navy-700);
	font-size: 11px; font-weight: 700;
	display: flex; align-items: center; justify-content: center; flex: none;
	font-family: "Courier New", monospace;
}
.inicio-barra-mini { height: 5px; border-radius: 3px; background: var(--cercp-navy-100); overflow: hidden; margin-top: 4px; }
.inicio-barra-mini > span { display: block; height: 100%; background: var(--cercp-navy-900); border-radius: 3px; }

.inicio-certs { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.inicio-cert-link {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 12px 14px; border: 1px solid var(--cercp-border); border-radius: 10px;
	text-decoration: none; color: #14162E; background: var(--cercp-grey-100);
}
.inicio-cert-link:hover { background: var(--cercp-navy-100); }
.inicio-cert-link .t { font-size: 14px; font-weight: 600; }
.inicio-cert-link .d { font-size: 12px; color: var(--cercp-grey-600); }
.inicio-cert-link .arrow { color: var(--cercp-navy-700); font-weight: 700; }

.inicio-vacio { padding: 28px 18px; text-align: center; color: #8489AC; font-size: 13px; }

/* =========================================================================
   CHAT FLOTANTE (MasterPage.master) — hoy comentado/inactivo, pero su CSS
   en estilos-master.css usa un ancho fijo de 370px que desborda cualquier
   viewport de móvil (<390px) si algún día se reactiva. Se deja aquí la
   corrección para que no vuelva a colar el mismo bug cuando se reactive.
   ========================================================================= */
@media (max-width: 420px) {
	.chat-flotante-panel {
		width: calc(100vw - 20px);
		right: 10px;
	}
}

/* =========================================================================
   SWEETALERT2 (CercpAlertas, js/alertas-cercp.js) — SweetAlert2 pone por
   defecto un anillo de foco (box-shadow) alrededor del botón que queda
   enfocado al abrir el diálogo (normalmente "Confirmar"/"Continuar"), en un
   azul fijo que no combina con la paleta. Lo suavizamos a un anillo neutro.
   ========================================================================= */
.swal2-styled:focus {
	box-shadow: 0 0 0 3px rgba(20, 22, 46, 0.15) !important;
}