/* ==========================================================================
   PREFECTOS — capa visual del portal (escolares.app/prefectos)

   Copia de docentes/theme/default/css/style.css (12-oct-2026): mismo armazón
   que /edu, /admin y /docentes y las mismas piezas dm-*. Si cambias el
   armazón o los tokens aquí, cambia también los otros portales. Lo propio de
   prefectos va al final («Módulos de prefectos»): sus componentes son de
   Bootstrap directo y ahí se les da la cara de /admin.

   Pensada primero para el teléfono. Todo lo de abajo cuelga de unos pocos
   tokens (--dm-*) y de un puñado de piezas reutilizables con prefijo dm-:

     .dm-page        contenedor de cada pantalla (márgenes y aire para la barra)
     .dm-card        superficie blanca redondeada
     .dm-field       etiqueta corta arriba + control grande (sustituye a los
                     form-floating, que dentro de un input-group no caben)
     .dm-seg         pestañas como control segmentado (sigue siendo .nav de BS)
     .dm-list/.dm-item  filas táctiles: avatar + texto + extremo derecho
     .dm-chip        etiquetas de estado (ok / warn / bad / info)
     .dm-empty       estado vacío con icono
     .dm-actionbar   barra de acción pegada abajo (encima de la barra de pestañas)
     .dm-stats       cifras grandes en rejilla

   Además se re-tiñe Bootstrap con el verde de la marca: venía con el azul de
   fábrica en .btn-primary, pestañas y checks, mientras .text-primary ya era
   verde, y la app se veía de dos colores.
   ========================================================================== */

:root
{
	--dm-brand: #73AC43;
	--dm-brand-600: #639a36;
	--dm-brand-700: #4f7e29;
	--dm-brand-50: #f2f8ec;
	--dm-brand-100: #e3f0d6;
	--dm-brand-rgb: 115, 172, 67;

	--dm-bg: #f2f2f7;      /* el fondo de /edu y /admin */
	--dm-surface: #ffffff;
	--dm-surface-2: #fafbf9;     /* = --app-sutil de /edu y /admin */
	--dm-border: #e3e7e1;       /* = --app-borde */
	--dm-text: #1f2a1d;         /* = --app-texto */
	--dm-muted: #6b7569;        /* = --app-suave */

	--dm-ok: #15803d;      --dm-ok-bg: #dcfce7;
	--dm-warn: #b45309;    --dm-warn-bg: #fef3c7;
	--dm-bad: #b91c1c;     --dm-bad-bg: #fee2e2;
	--dm-info: #1d4ed8;    --dm-info-bg: #dbeafe;

	--dm-radius: 16px;          /* tarjetas: el radio de /edu y /admin */
	--dm-radius-sm: 10px;       /* botones y campos: el de /edu y /admin */
	--dm-shadow: 0 2px 8px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);       /* = --app-sombra */
	--dm-shadow-lg: 0 10px 30px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .05);  /* = --app-sombra-alta */

	/* Alturas de la barra de arriba y de la isla de abajo: las de /edu y /admin. */
	--dm-topbar-h: 60px;
	--dm-tabbar-h: 66px;
	--dm-safe-b: env(safe-area-inset-bottom, 0px);
	/* Lo que ocupa la isla flotante: alto + separación del borde (que ya cuenta
	   la zona segura del iPhone). */
	--dm-tabbar-space: calc(var(--dm-tabbar-h) + max(12px, var(--dm-safe-b)));

	/* Bootstrap con el verde de la marca */
	--bs-primary: #73AC43;
	--bs-primary-rgb: 115, 172, 67;
	--bs-link-color: #4f7e29;
	--bs-link-color-rgb: 79, 126, 41;
	--bs-link-hover-color: #3f6a1f;
	/* --bs-body-bg NO se toca: Bootstrap lo usa de fondo de tarjetas, modales,
	   campos y la hoja lateral, y quedarían grises. El gris va solo en body. */
	--bs-body-font-size: .9375rem;   /* 15 px, como /edu y /admin */
	--bs-body-color: #1f2a1d;
	--bs-border-color: #e3e7e1;
}

html
{
	-webkit-text-size-adjust: 100%;
}

body
{
	background-color: var(--dm-bg) !important;
	color: var(--dm-text);
	padding-top: var(--dm-topbar-h);
	padding-bottom: 24px;
	-webkit-tap-highlight-color: transparent;
}

/* Con sesión hay isla abajo: se le deja su espacio (el mismo aire de /edu). */
body.dm-con-tabbar
{
	padding-bottom: calc(var(--dm-tabbar-space) + 16px);
}

a
{
	text-decoration: none;
}

[ng-click]
{
	cursor: pointer;
}

input:focus::placeholder
{
	color: rgb(107, 105, 105) !important;
	opacity: 1 !important;
}

.required label::after,
label.required span::after
{
	position: absolute !important;
	color: red !important;
	content: "*" !important;
	inset: initial !important;
	font-size: 12px;
	padding-left: 3px;
}

/* ==========================================================================
   Bootstrap re-teñido
   ========================================================================== */

.text-primary,
h1.text-primary, h2.text-primary, h3.text-primary,
h4.text-primary, h5.text-primary, h6.text-primary,
i.text-primary
{
	color: #4f7f27 !important;   /* = --app-acento de /edu y /admin */
}

.bg-primary
{
	background-color: var(--dm-brand) !important;
}

.border-primary
{
	border-color: var(--dm-brand) !important;
}

ol li a
{
	color: #4f7f27 !important;   /* = --app-acento de /edu y /admin */
}

/* Los botones de /edu y /admin: radio 10 (8 los chicos), peso 500 y siempre en
   un renglón (si no caben se recortan con «…»; nunca dos líneas). */
.btn
{
	border-radius: var(--dm-radius-sm);
	font-weight: 500;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-tap-highlight-color: transparent;
}

.btn-sm
{
	border-radius: 8px;
}

.btn:active
{
	transform: scale(.96);
	transition: transform .1s ease;
}

.btn-lg
{
	min-height: 50px;
	border-radius: 14px;
	font-size: 1rem;
}

.btn-primary
{
	--bs-btn-bg: var(--dm-brand);
	--bs-btn-border-color: var(--dm-brand);
	--bs-btn-hover-bg: var(--dm-brand-600);
	--bs-btn-hover-border-color: var(--dm-brand-600);
	--bs-btn-active-bg: var(--dm-brand-700);
	--bs-btn-active-border-color: var(--dm-brand-700);
	--bs-btn-disabled-bg: var(--dm-brand);
	--bs-btn-disabled-border-color: var(--dm-brand);
	--bs-btn-focus-shadow-rgb: var(--dm-brand-rgb);
}

.btn-outline-primary
{
	--bs-btn-color: var(--dm-brand-700);
	--bs-btn-border-color: var(--dm-brand);
	--bs-btn-hover-bg: var(--dm-brand);
	--bs-btn-hover-border-color: var(--dm-brand);
	--bs-btn-active-bg: var(--dm-brand-600);
	--bs-btn-active-border-color: var(--dm-brand-600);
	--bs-btn-focus-shadow-rgb: var(--dm-brand-rgb);
}

/* Botón suave: fondo tenue de la marca. Para acciones secundarias. */
.btn-soft
{
	--bs-btn-color: var(--dm-brand-700);
	--bs-btn-bg: var(--dm-brand-50);
	--bs-btn-border-color: transparent;
	--bs-btn-hover-color: var(--dm-brand-700);
	--bs-btn-hover-bg: var(--dm-brand-100);
	--bs-btn-hover-border-color: transparent;
	--bs-btn-active-color: var(--dm-brand-700);
	--bs-btn-active-bg: var(--dm-brand-100);
	--bs-btn-active-border-color: transparent;
}

.btn-ghost
{
	--bs-btn-color: var(--dm-text);
	--bs-btn-bg: var(--dm-surface);
	--bs-btn-border-color: var(--dm-border);
	--bs-btn-hover-color: var(--dm-text);
	--bs-btn-hover-bg: var(--dm-surface-2);
	--bs-btn-hover-border-color: var(--dm-border);
	--bs-btn-active-color: var(--dm-text);
	--bs-btn-active-bg: #eef1f5;
	--bs-btn-active-border-color: var(--dm-border);
}

/* Botón cuadrado de solo icono (refrescar, ajustes…) del tamaño de un dedo. */
.btn-icon
{
	width: 44px;
	height: 44px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Los campos de /edu y /admin: radio 10, borde gris verdoso. */
.form-control,
.form-select
{
	border-radius: var(--dm-radius-sm);
	border-color: #d6dbd3;
}

.form-control-sm,
.form-select-sm
{
	border-radius: 8px;
}

.form-label
{
	font-size: .8125rem;
	font-weight: 600;
	color: #3d473b;
	margin-bottom: .3rem;
}

.form-control:focus,
.form-select:focus
{
	border-color: var(--dm-brand);
	box-shadow: 0 0 0 .2rem rgba(var(--dm-brand-rgb), .2);
}

.form-check-input:checked
{
	background-color: #4f7f27;
	border-color: #4f7f27;
}

.form-check-input:focus
{
	border-color: var(--dm-brand);
	box-shadow: 0 0 0 .2rem rgba(var(--dm-brand-rgb), .2);
}

/* iOS hace zoom al enfocar un campo con letra de menos de 16 px y ya no lo
   deshace. Igual que /edu y /admin. */
@media (max-width: 575.98px)
{
	.form-control,
	.form-select
	{
		font-size: 16px !important;
	}
}

.card
{
	border: 1px solid transparent;   /* como /edu y /admin: mismo alto */
	border-radius: var(--dm-radius);
	box-shadow: var(--dm-shadow);
}

.card > .card-header:first-child
{
	border-radius: var(--dm-radius) var(--dm-radius) 0 0;
}

.card-header,
.card-footer
{
	background: var(--dm-surface);
	border-color: var(--dm-border);
}

.alert
{
	border: 0;
	border-radius: 14px;
}

.nav-tabs .nav-link.active
{
	color: var(--dm-brand-700);
}

.list-group-item.active
{
	background-color: var(--dm-brand);
	border-color: var(--dm-brand);
}

.progress-bar
{
	background-color: var(--dm-brand);
}

/* Los modales heredados traen la «×» de Bootstrap 4 (.close), que en BS5 sale
   como texto suelto. */
.modal .close
{
	border: 0;
	background: transparent;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--dm-muted);
	padding: 0 .25rem;
	margin-left: auto;
}

/* Modales: los de /edu y /admin (.adm-modal-caja): radio 16, cabecera blanca con
   línea, cuerpo de 1.25rem, pie gris claro con los botones a la derecha y fondo
   oscuro al 45 %. Centrados también en el celular, como allá (antes salían como
   hoja desde abajo; el usuario pidió igualarlos el 12-oct-2026). */
.modal
{
	--bs-modal-width: 620px;
	--bs-modal-bg: var(--app-card);
	--bs-modal-color: var(--app-texto);
	--bs-modal-border-width: 0;
	--bs-modal-border-radius: 16px;
	--bs-modal-inner-border-radius: 16px;
	--bs-modal-box-shadow: 0 24px 64px rgba(0, 0, 0, .25);
	--bs-modal-header-padding: 1rem 1.25rem;
	--bs-modal-header-border-color: var(--app-borde);
	--bs-modal-padding: 1.25rem;
	--bs-modal-footer-gap: .5rem;
	--bs-modal-footer-bg: #fafbf9;
	--bs-modal-footer-border-color: var(--app-borde);
}

.modal-content
{
	border: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .25);
}

.modal .modal-header
{
	background: var(--app-card);
	color: var(--app-texto);
	gap: 1rem;
}

.modal-title
{
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
}

.modal-footer
{
	padding: .85rem 1.25rem;
}

.modal-footer > *
{
	margin: 0;
}

.modal-backdrop
{
	--bs-backdrop-bg: #141c12;
	--bs-backdrop-opacity: .45;
}

.modal.fade .modal-dialog
{
	transition: transform .18s ease, opacity .18s ease;
}

/* ==========================================================================
   Armazón — el de /edu y /admin
   Barra verde de 60 px, isla de abajo y paneles laterales («Módulos»,
   «Ayuda» y la cuenta). Son copias de edu/theme/default/css/style.css (sus
   clases .app-*), que a su vez copia admin/theme/admin.css (.adm-*): si
   cambias uno, cambia los otros. Los módulos (dm-*) no dependen de nada de
   aquí: el armazón solo los rodea.
   ========================================================================== */

:root
{
	--app-verde: #73ac43;          /* el del logo */
	--app-verde-osc: #4f7f27;      /* fondo de botones */
	--app-acento: #4f7f27;         /* texto verde (enlaces, activo) */
	--app-verde-claro: #eef6e7;
	--app-verde-claro-2: #e0eed4;
	--app-verde-borde: #c9dcb8;
	--app-hero: #72ab42;           /* barra y cabecera verdes */
	--app-perfil: linear-gradient(145deg, #5a9130 0%, #72ab42 55%, #8bc94c 100%);
	--app-fondo: #f2f2f7;
	--app-card: #fff;
	--app-card-trans: rgba(255, 255, 255, .985);
	--app-sutil: #fafbf9;
	--app-hover2: #f3f6f0;
	--app-linea: #eef1ec;
	--app-borde: #e3e7e1;
	--app-borde-form: #d6dbd3;
	--app-gris: #f1f3f0;
	--app-gris-2: #e6e9e4;
	--app-texto: #1f2a1d;
	--app-texto-2: #3d473b;
	--app-suave: #6b7569;
	--app-etiqueta: #7d877a;
	--app-tenue: #9aa397;
	--app-sombra: 0 2px 8px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
	--app-sombra-alta: 0 10px 30px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .05);
	--app-isla-texto: rgba(60, 60, 67, .55);
	--app-ancho: 1400px;           /* ancho máximo del contenido, centrado */
	--app-orilla: 1.5rem;          /* margen lateral del contenido */
	--app-radio: 16px;
	--app-isla-pie: max(12px, env(safe-area-inset-bottom, 0px));
}

@media (max-width: 991.98px)
{
	:root { --app-orilla: 1rem; }
}

@media (max-width: 575.98px)
{
	:root { --app-orilla: .85rem; }
}

/* El .container de /edu (fluido hasta --app-ancho con la orilla de /admin). Con
   nombre propio: el .container de Bootstrap lo usan componentes de aquí. */
.app-contenedor
{
	width: 100%;
	max-width: var(--app-ancho);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--app-orilla);
	padding-right: var(--app-orilla);
}

.min-w-0
{
	min-width: 0;
}

button
{
	color: inherit;   /* Safari de iPhone pinta de azul el texto de los <button> */
}

/* ── Barra de arriba (.app-topbar de /edu = .adm-topbar de /admin) ── */

.app-topbar
{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030;
	height: var(--dm-topbar-h);
	background-color: var(--app-hero);
	color: #fff;
}

.app-topbar > .app-contenedor
{
	height: 100%;
	display: flex;
	align-items: center;
	gap: .5rem;
}

.app-topbar-marca
{
	display: flex;
	align-items: center;
	margin-right: auto;
	min-width: 0;
}

.app-topbar-marca img
{
	display: block;
	height: 22px;
	width: auto;
}

/* Como en /docentes: dentro de un módulo va «← Título» en lugar del logo. Sus
   pantallas no traen cabecera, y así siempre se sabe dónde estás y se vuelve
   al inicio con el pulgar. */
.app-topbar-titulo
{
	flex: 1 1 auto;
	min-width: 0;
	margin-right: auto;
	line-height: 1.15;
}

.app-topbar-h
{
	font-weight: 700;
	font-size: 1.05rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.app-topbar-sub
{
	font-size: .72rem;
	opacity: .85;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Ciclo escolar activo: el chip de /admin (.adm-chip-ciclo), solo informativo.
   En el celular no cabe en la barra: va en la cabecera del inicio. */
.app-chip-ciclo
{
	align-items: center;
	gap: .45rem;
	max-width: 280px;
	min-width: 0;
	height: 36px;
	padding: 0 .85rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .18);
	color: #fff;
	font-size: .78rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: default;
}

/* Botón redondo de la barra («?» y volver): el de /admin (.adm-topbar-btn) */
.app-topbar-btn
{
	position: relative;
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	color: #fff;
}

.app-topbar-btn:hover,
.app-topbar-btn:focus-visible,
.app-topbar-btn[aria-expanded="true"]
{
	background: rgba(255, 255, 255, .28);
	color: #fff;
}

/* Botón de la cuenta: la píldora de /admin (.adm-cuenta-btn) con el logo de la
   escuela y tu foto. */
.app-cuenta-btn
{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: 3px .6rem 3px 3px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

.app-cuenta-btn:hover,
.app-cuenta-btn[aria-expanded="true"]
{
	background: rgba(255, 255, 255, .26);
}

.app-cuenta-btn > .fa-chevron-down
{
	font-size: .7rem;
	opacity: .8;
}

.app-cuenta-esc
{
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	border-radius: 50%;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}

.app-cuenta-esc img
{
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 3px;
}

.app-cuenta-foto
{
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	background: #e5e7eb;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .75);
}

@media (max-width: 575.98px)
{
	.app-topbar > .app-contenedor { gap: .4rem; }
	.app-topbar-marca img { height: 18px; }
}

@media (max-width: 379.98px)
{
	.app-cuenta-esc { display: none; }   /* en pantallas muy angostas, solo la foto */
}

/* ── Isla de abajo (.app-tabbar de /edu = .adm-bottomnav de /admin): flota a
   --app-isla-pie del borde, del ancho del contenido, sin desenfoque ── */

.app-tabbar
{
	position: fixed;
	left: 8px;
	right: 8px;
	bottom: var(--app-isla-pie);
	z-index: 1030;
	display: flex;
	align-items: stretch;
	max-width: calc(var(--app-ancho) - 2 * var(--app-orilla));
	height: var(--dm-tabbar-h);
	margin: 0 auto;
	padding: 0;
	border-radius: 999px;
	background-color: var(--app-card-trans);
	border: .5px solid rgba(60, 60, 67, .12);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .08);
}

.tab-btn
{
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	border: 0;
	border-radius: inherit;
	background: none;
	padding: 8px 2px;
	color: var(--app-isla-texto);
	text-decoration: none;
	cursor: pointer;
	transition: color .2s ease;
	-webkit-tap-highlight-color: transparent;
}

.tab-btn:hover
{
	color: var(--app-texto-2);
}

.tab-btn:active
{
	background-color: rgba(0, 0, 0, .05);
}

.tab-btn i
{
	font-size: 1.35rem;
	display: block;
	transition: transform .32s cubic-bezier(.34, 1.56, .64, 1);
}

.tab-label
{
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1;
}

.tab-btn:active i
{
	transform: scale(.82);
	transition: transform .1s ease;
}

.tab-btn.active,
.tab-btn.active:hover
{
	color: var(--app-verde) !important;
}

.tab-btn.active i
{
	transform: scale(1.1);
}

/* ── Paneles laterales (el panel «Módulos» de /admin, .adm-sidebar): fondo gris,
   esquinas de 20 px, cabecera verde de 60 px con el botón redondo de cerrar,
   buscador con la lupa adentro y grupos en listas redondeadas ── */

.app-panel.offcanvas
{
	--bs-offcanvas-width: min(340px, calc(100vw - 2.5rem));
	--bs-offcanvas-bg: var(--app-fondo);
	--bs-offcanvas-color: var(--app-texto);
	--bs-offcanvas-border-width: 0;
	--bs-offcanvas-transition: transform .25s cubic-bezier(.4, 0, .2, 1);
	overflow: hidden;
}

.app-panel.offcanvas-start
{
	border-radius: 0 20px 20px 0;
}

.app-panel.offcanvas-end
{
	border-radius: 20px 0 0 20px;
}

.app-panel.show,
.app-panel.showing
{
	box-shadow: 0 0 40px rgba(0, 0, 0, .2);
}

.offcanvas-backdrop
{
	--bs-backdrop-bg: #000;
	--bs-backdrop-opacity: .3;
}

.app-panel-cab
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	flex: 0 0 auto;
	height: var(--dm-topbar-h);
	padding: 0 .75rem 0 1.15rem;
	background: var(--app-hero);
	color: #fff;
}

.app-panel-titulo
{
	font-weight: 700;
	font-size: 1.05rem;
}

.app-panel-titulo i
{
	opacity: .8;
}

.app-panel-cerrar
{
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .18);
	color: #fff;
}

.app-panel-cerrar:hover
{
	background: rgba(255, 255, 255, .28);
}

.app-panel-buscar
{
	position: relative;
	flex: 0 0 auto;
	padding: .85rem 1rem;
	background: var(--app-card);
	border-bottom: 1px solid var(--app-borde);
}

.app-panel-buscar > i
{
	position: absolute;
	left: 1.8rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--app-tenue);
	pointer-events: none;
}

.app-panel-buscar > input
{
	padding-left: 2.25rem;
}

.app-nav
{
	padding: 0 0 1.25rem !important;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.app-nav-grupo
{
	margin: 1.15rem 1.4rem .4rem;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--app-etiqueta);
}

.app-nav-lista
{
	margin: 0 1rem;
	background: var(--app-card);
	border-radius: 12px;
	box-shadow: var(--app-sombra);
	overflow: hidden;
}

.app-nav-lista > a,
.app-nav-lista > div
{
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .65rem .85rem;
	border-bottom: 1px solid var(--app-linea);
	color: var(--app-texto);
	font-weight: 500;
	font-size: .9rem;
}

.app-nav-lista > :last-child
{
	border-bottom: 0;
}

.app-nav-lista > a:hover
{
	background: var(--app-hover2);
	color: var(--app-texto);
}

.app-nav-ico
{
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--app-verde-claro);
	color: var(--app-acento);
	font-size: .85rem;
}

.app-nav-flecha
{
	font-size: .7rem;
	color: var(--app-tenue);
}

.app-nav-lista > a.activo
{
	background: var(--app-verde-claro);
	color: var(--app-acento);
	font-weight: 600;
}

.app-nav-lista > a.activo .app-nav-ico
{
	background: var(--app-verde-osc);
	color: #fff;
}

.app-nav-vacio
{
	margin: 1.5rem 1.4rem 0;
	font-size: .85rem;
	color: var(--app-suave);
	text-align: center;
}

/* Panel de la cuenta: cabecera como el menú de la cuenta de /admin (.adm-menu-perfil) */
.app-panel-perfil
{
	display: flex;
	align-items: center;
	gap: .75rem;
	flex: 0 0 auto;
	padding: 1rem .75rem 1.1rem 1rem;
	background: var(--app-perfil);
	color: #fff;
}

.app-panel-perfil .sub
{
	font-size: .76rem;
	opacity: .85;
}

.app-panel-perfil-foto
{
	flex: 0 0 auto;
	line-height: 0;
}

.app-panel-perfil-foto img
{
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	background: #e5e7eb;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .6);
}

/* Pie del panel de la cuenta: cerrar sesión, como el menú de /admin */
.app-panel-pie
{
	flex: 0 0 auto;
	padding: .4rem .4rem calc(.4rem + env(safe-area-inset-bottom, 0px));
	background: var(--app-card);
	border-top: 1px solid var(--app-borde);
}

.app-menu-item
{
	display: flex;
	align-items: center;
	gap: .65rem;
	width: 100%;
	padding: .55rem .65rem;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--app-texto-2);
	font-size: .875rem;
	font-weight: 500;
	text-align: left;
}

.app-menu-item > i:first-child
{
	width: 1.1rem;
	text-align: center;
	color: var(--app-tenue);
}

.app-menu-item:hover,
.app-menu-item:focus-visible
{
	background: var(--app-hover2);
	color: var(--app-texto);
}

/* Cerrar sesión: botón rojo a todo lo ancho, el mismo .btn-danger del diálogo de
   confirmación (pedido del usuario, 17-oct-2026). Igual en /edu, /admin
   (.adm-menu-salir), /docentes y /prefectos. */
.app-menu-salir
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
}

/* Etiqueta, separador y selector Claro / Oscuro / Auto del panel de la cuenta:
   los de /edu (.app-menu-etq, .app-menu-sep, .app-tema = .adm-tema de /admin). El
   tema es UNO para todo escolares.app (/js/tema.js). */
.app-menu-etq
{
	padding: .3rem .65rem .35rem;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--app-tenue);
}

.app-menu-sep
{
	height: 1px;
	margin: .35rem -.4rem;
	background: var(--app-linea);
}

.app-tema
{
	display: flex;
	gap: 2px;
	margin: 0 .25rem .25rem;
	padding: 3px;
	background: var(--app-gris);
	border-radius: 10px;
}

.app-tema button
{
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	border: 0;
	background: none;
	border-radius: 8px;
	padding: .35rem .2rem;
	font-size: .75rem;
	font-weight: 600;
	color: var(--app-suave);
}

.app-tema button:hover
{
	color: var(--app-texto);
}

.app-tema button.on
{
	background: var(--app-card);
	color: var(--app-texto);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* «Escribir por WhatsApp» del panel de Ayuda: el verde de /edu, no el de Bootstrap. */
.app-panel .btn-success
{
	--bs-btn-bg: #72ab42;
	--bs-btn-border-color: #72ab42;
	--bs-btn-hover-bg: #639a36;
	--bs-btn-hover-border-color: #639a36;
	--bs-btn-active-bg: #4f7e29;
	--bs-btn-active-border-color: #4f7e29;
	border-radius: 10px;
}

/* Preguntas frecuentes del panel de Ayuda: dentro de los márgenes de las listas
   del panel (como «Recursos»). */
.app-panel-faqs:not(:empty)
{
	margin: 1rem 1rem 0;
}

/* ==========================================================================
   Paleta de iconos de módulo (fondo tenue + icono saturado)
   ========================================================================== */

.dm-tone-green  { background: #e3f3d6; color: #4f7e29; }
.dm-tone-blue   { background: #dbeafe; color: #1d4ed8; }
.dm-tone-violet { background: #ede9fe; color: #6d28d9; }
.dm-tone-amber  { background: #fef3c7; color: #b45309; }
.dm-tone-rose   { background: #ffe4e6; color: #be123c; }
.dm-tone-teal   { background: #ccfbf1; color: #0f766e; }
.dm-tone-sky    { background: #e0f2fe; color: #0369a1; }
.dm-tone-orange { background: #ffedd5; color: #c2410c; }
.dm-tone-slate  { background: #e2e8f0; color: #334155; }

/* ==========================================================================
   Página
   ========================================================================== */

/* Mismo ancho y orilla que la barra de arriba (.app-contenedor, el de /edu):
   con 1200 px el contenido quedaba corrido respecto al logo en pantallas anchas. */
.dm-page
{
	max-width: var(--app-ancho);
	margin: 0 auto;
	padding: 1rem var(--app-orilla) 8px;   /* 16 px arriba, como el .container mt-3 de /edu */
}

/* Antes las pantallas de lectura/captura iban angostas (760 px centradas) en la
   computadora. Desde el 12-oct-2026 van a todo lo ancho, alineadas con el logo,
   como en /edu y /admin (pedido del usuario). La clase se queda porque la usan
   las vistas. */
.dm-narrow
{
	max-width: none;
}

/* Cabecera de las pantallas internas: la de /admin (.adm-encabezado) — verde,
   .5rem arriba y 3rem abajo, curva de 26 px (22 en el celular), título de
   1.75rem y descripción debajo. Usa .app-hero (la del inicio). Lo que sigue
   (.app-sobre-cabecera) se monta 2rem sobre la curva, como en /admin. */
.app-hero-desc
{
	margin: .25rem 0 0;
	font-size: .9rem;
	color: rgba(255, 255, 255, .92);
}

.app-sobre-cabecera
{
	position: relative;
	margin-top: -2rem;
	padding-top: 0;
}

.dm-section-title
{
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--dm-muted);
	margin: 22px 4px 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.dm-section-title .dm-count
{
	margin-left: auto;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
}

/* Título de sección del inicio: el de /admin (.adm-seccion-cab, «Configuración»)
   y /edu («Favoritos»). */
.app-seccion-cab
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin: .25rem 0 .85rem;
}

.app-seccion-cab h2
{
	margin: 0;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--app-texto);
}

/* ==========================================================================
   Superficies
   ========================================================================== */

.dm-card
{
	background: var(--dm-surface);
	border: 1px solid transparent;
	border-radius: var(--dm-radius);
	box-shadow: var(--dm-shadow);
	padding: 14px;
}

.dm-card + .dm-card
{
	margin-top: 12px;
}

.dm-card-title
{
	font-weight: 700;
	font-size: .98rem;
	margin: 0 0 2px;
}

.dm-card-sub
{
	font-size: .8rem;
	color: var(--dm-muted);
}

.dm-card--flush
{
	padding: 0;
	overflow: hidden;
}

/* Cabecera de un bloque: título a la izquierda, acción a la derecha. */
.dm-head
{
	display: flex;
	align-items: center;
	gap: 10px;
}

.dm-head > :first-child
{
	flex: 1;
	min-width: 0;
}

/* ==========================================================================
   Filtros: etiqueta arriba + control
   ========================================================================== */

.dm-filtros
{
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

@media (min-width: 768px)
{
	.dm-filtros--2 { grid-template-columns: 1fr 1fr; }
	.dm-filtros--3 { grid-template-columns: 1fr 1fr 1fr; }
}

.dm-filtros--pair
{
	grid-template-columns: 1fr 1fr;
}

.dm-field
{
	min-width: 0;
}

.dm-field > label,
.dm-label
{
	display: block;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--dm-muted);
	margin: 0 0 5px 2px;
}

/* Control + botón de icono en la misma fila (grupo + refrescar). */
.dm-inline
{
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.dm-inline > .form-select,
.dm-inline > .form-control
{
	flex: 1;
	min-width: 0;
}

/* ==========================================================================
   Pestañas como control segmentado
   ========================================================================== */

.dm-seg
{
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	padding: 4px;
	background: #e4e7ec;
	border-radius: 14px;
	border: 0;
	margin: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.dm-seg::-webkit-scrollbar
{
	display: none;
}

.dm-seg .nav-item
{
	flex: 1 1 0;
	min-width: max-content;
}

.dm-seg .nav-link,
.dm-seg > button
{
	width: 100%;
	border: 0 !important;
	border-radius: 10px !important;
	background: transparent;
	color: var(--dm-muted);
	font-weight: 600;
	font-size: .86rem;
	padding: 8px 12px;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

.dm-seg .nav-link.active,
.dm-seg > button.active
{
	background: var(--dm-surface) !important;
	color: var(--dm-text) !important;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}

.dm-seg .nav-link .dm-badge
{
	margin-left: 4px;
}

/* ==========================================================================
   Listas táctiles
   ========================================================================== */

.dm-list
{
	background: var(--dm-surface);
	border-radius: var(--dm-radius);
	box-shadow: var(--dm-shadow);
	overflow: hidden;
}

.dm-item
{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	color: var(--dm-text);
	position: relative;
	min-height: 60px;
}

.dm-item + .dm-item
{
	border-top: 1px solid var(--dm-border);
}

a.dm-item:active,
.dm-item[ng-click]:active,
button.dm-item:active
{
	background: var(--dm-surface-2);
}

button.dm-item
{
	width: 100%;
	border: 0;
	background: transparent;
	text-align: left;
}

.dm-item-body
{
	flex: 1;
	min-width: 0;
}

.dm-item-title
{
	font-weight: 600;
	font-size: .92rem;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.dm-item-sub
{
	font-size: .76rem;
	color: var(--dm-muted);
	line-height: 1.35;
	margin-top: 2px;
	overflow-wrap: anywhere;
}

.dm-item-end
{
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

.dm-item-chevron
{
	color: #c0c6cf;
	font-size: .8rem;
}

.dm-num
{
	flex-shrink: 0;
	width: 22px;
	text-align: right;
	font-size: .75rem;
	font-weight: 700;
	color: #9aa3af;
	font-variant-numeric: tabular-nums;
}

.dm-avatar
{
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	background: #e9edf2;
}

.dm-avatar--lg
{
	width: 64px;
	height: 64px;
}

.dm-avatar--sm
{
	width: 32px;
	height: 32px;
}

/* Icono en cuadro redondeado (para filas sin foto). */
.dm-ico
{
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 1rem;
}

/* ==========================================================================
   Chips / badges de estado
   ========================================================================== */

.dm-chip
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: .7rem;
	font-weight: 700;
	line-height: 1;
	padding: 4px 8px;
	border-radius: 999px;
	background: #eef1f5;
	color: #475569;
	white-space: nowrap;
}

.dm-chip--ok   { background: var(--dm-ok-bg);   color: var(--dm-ok); }
.dm-chip--warn { background: var(--dm-warn-bg); color: var(--dm-warn); }
.dm-chip--bad  { background: var(--dm-bad-bg);  color: var(--dm-bad); }
.dm-chip--info { background: var(--dm-info-bg); color: var(--dm-info); }
.dm-chip--brand{ background: var(--dm-brand-50); color: var(--dm-brand-700); }

.dm-chips
{
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 6px;
}

.dm-badge
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 700;
	background: var(--dm-brand);
	color: #fff;
}

/* ==========================================================================
   Cifras
   ========================================================================== */

.dm-stats
{
	display: grid;
	grid-template-columns: repeat(var(--dm-cols, 3), 1fr);
	gap: 8px;
}

.dm-stat
{
	background: var(--dm-surface);
	border-radius: 14px;
	box-shadow: var(--dm-shadow);
	padding: 10px 6px;
	text-align: center;
	min-width: 0;
}

.dm-stat-num
{
	font-size: 1.45rem;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.dm-stat-lbl
{
	font-size: .64rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--dm-muted);
	margin-top: 3px;
}

.dm-stat--ok   .dm-stat-num { color: var(--dm-ok); }
.dm-stat--warn .dm-stat-num { color: var(--dm-warn); }
.dm-stat--bad  .dm-stat-num { color: var(--dm-bad); }
.dm-stat--info .dm-stat-num { color: var(--dm-info); }

/* ==========================================================================
   Avisos y estados vacíos
   ========================================================================== */

.dm-note
{
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: .84rem;
	line-height: 1.5;
	background: var(--dm-info-bg);
	color: #1e3a8a;
	border-radius: 14px;
	padding: 11px 13px;
}

.dm-note > i
{
	margin-top: 3px;
	flex-shrink: 0;
}

.dm-note--warn { background: var(--dm-warn-bg); color: #78350f; }
.dm-note--bad  { background: var(--dm-bad-bg);  color: #7f1d1d; }
.dm-note--ok   { background: var(--dm-ok-bg);   color: #14532d; }

.dm-empty
{
	text-align: center;
	padding: 36px 20px;
	color: var(--dm-muted);
}

.dm-empty-ico
{
	width: 64px;
	height: 64px;
	border-radius: 50%;
	margin: 0 auto 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	background: #e9edf2;
	color: #94a3b8;
}

.dm-empty-title
{
	font-weight: 700;
	color: var(--dm-text);
	font-size: 1rem;
	margin-bottom: 4px;
}

.dm-empty p
{
	font-size: .86rem;
	margin: 0 auto;
	max-width: 340px;
}

.dm-loading
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 36px 16px;
	color: var(--dm-muted);
	font-size: .9rem;
}

/* ==========================================================================
   Barra de acción pegada abajo
   Se pega al borde inferior de la pantalla mientras hay contenido debajo y se
   queda en su sitio al llegar al final. Va por encima de la barra de pestañas.
   ========================================================================== */

.dm-actionbar
{
	position: sticky;
	bottom: calc(var(--dm-tabbar-space) + 8px);
	z-index: 1020;
	margin-top: 14px;
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 8px;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 18px;
	box-shadow: var(--dm-shadow-lg);
}

.dm-actionbar .btn
{
	min-height: 48px;
}

.dm-actionbar-info
{
	flex: 1;
	min-width: 0;
	padding-left: 6px;
	font-size: .78rem;
	color: var(--dm-muted);
	line-height: 1.25;
}

.dm-actionbar-info strong
{
	display: block;
	color: var(--dm-text);
	font-size: .92rem;
}

/* ==========================================================================
   Tablas (las que se quedan como tabla: indicadores, captura en escritorio)
   ========================================================================== */

.dm-table-wrap
{
	background: var(--dm-surface);
	border-radius: var(--dm-radius);
	box-shadow: var(--dm-shadow);
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.dm-table
{
	width: 100%;
	margin: 0;
	font-size: .84rem;
	border-collapse: separate;
	border-spacing: 0;
}

.dm-table th,
.dm-table td
{
	padding: 9px 10px;
	border-bottom: 1px solid var(--dm-border);
	vertical-align: middle;
}

.dm-table thead th
{
	position: sticky;
	top: 0;
	z-index: 2;
	background: #f6f7f9;
	color: #475569;
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	white-space: nowrap;
}

.dm-table tbody tr:last-child td
{
	border-bottom: 0;
}

.dm-table tbody tr:hover td
{
	background: #fafbfc;
}

/* ==========================================================================
   Inicio
   ========================================================================== */

/* Cabecera verde: la de /edu y /admin (.adm-encabezado): .5rem arriba y 3rem
   abajo, curva de 26 px (22 en el celular), con la escuela y el saludo. */
.app-hero
{
	background-color: var(--app-hero);
	color: #fff;
	border-bottom-left-radius: 26px;
	border-bottom-right-radius: 26px;
}

.app-hero > .app-contenedor
{
	padding-top: .5rem;
	padding-bottom: 3rem;
}

.app-hero-pre
{
	margin: 0 0 .2rem;
	font-size: .875rem;
	font-weight: 500;
	opacity: .92;
}

.app-hero-titulo
{
	margin: 0;
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: #fff;
}

/* Ciclo escolar en el celular, bajo el saludo (en pantallas más anchas va en la barra). */
.app-hero-ciclo
{
	display: inline-flex;
	max-width: 100%;
	height: 30px;
	margin-top: .6rem;
}

@media (max-width: 575.98px)
{
	.app-hero
	{
		border-bottom-left-radius: 22px;
		border-bottom-right-radius: 22px;
	}

	.app-hero-titulo { font-size: 1.4rem; }
}

/* Lo que va debajo de la cabecera se monta sobre su curva. */
.cards-overlap
{
	margin-top: -2rem;
}

/* Tarjeta del prefecto: la tarjeta de matrícula de /edu (= la de la escuela de
   /admin, .adm-id): flota sobre la cabecera, radio 20 y sombra alta, con los
   dos atajos de todos los días. */
.app-id-card
{
	background: var(--app-card);
	border-radius: 20px;
	box-shadow: var(--app-sombra-alta);
	overflow: hidden;
	margin-bottom: 1.25rem;   /* lo que deja toda .adm-card de /admin (1rem en el celular, abajo) */
	border: 1px solid transparent;   /* como .card de /edu y .adm-card de /admin (mismo alto) */
}

@media (max-width: 575.98px)
{
	.app-id-card { margin-bottom: 1rem; }   /* /admin en el celular: .adm-card 1rem */
}

.app-id-fila
{
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	color: inherit;
}

.app-id-fila:hover
{
	color: inherit;
}

.app-id-badge
{
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, #72ab42, #8bc94c);
	color: #fff;
	font-size: 1.35rem;
	box-shadow: 0 4px 10px rgba(114, 171, 66, .35);
}

.app-id-etq
{
	display: block;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--app-etiqueta);
}

.app-id-valor
{
	display: block;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--app-texto);
}

.app-id-sub
{
	display: block;
	font-size: .85rem;
	color: var(--app-suave);
}

.app-id-flecha
{
	color: var(--app-tenue);
	font-size: .85rem;
}

.app-id-acciones
{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .5rem;
	padding: 0 1rem 1rem;
}

/* Los botones de /edu y /admin: radio 10, en un renglón, verde oscuro de fondo
   (el blanco se lee bien encima). Solo aquí: los de los módulos no cambian. */
.app-id-acciones .btn
{
	padding-top: .55rem;
	padding-bottom: .55rem;
	border-radius: 10px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.app-id-acciones .btn-primary
{
	--bs-btn-bg: #4f7f27;
	--bs-btn-border-color: #4f7f27;
	--bs-btn-hover-bg: #436c21;
	--bs-btn-hover-border-color: #436c21;
	--bs-btn-active-bg: #3b5f1d;
	--bs-btn-active-border-color: #3b5f1d;
}

.app-id-acciones .btn-outline-primary
{
	--bs-btn-color: #4f7f27;
	--bs-btn-border-color: #c9dcb8;
	--bs-btn-hover-color: #4f7f27;
	--bs-btn-hover-bg: #eef6e7;
	--bs-btn-hover-border-color: #73ac43;
	--bs-btn-active-color: #4f7f27;
	--bs-btn-active-bg: #e0eed4;
	--bs-btn-active-border-color: #73ac43;
}

/* Módulos del inicio: lista en el teléfono, rejilla de tarjetas en pantallas
   grandes. */
.dm-modulos
{
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	background: var(--dm-surface);
	border-radius: var(--dm-radius);
	box-shadow: var(--dm-shadow);
	overflow: hidden;
}

.dm-modulo
{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	color: var(--dm-text);
	border-top: 1px solid var(--dm-border);
}

.dm-modulo:first-child
{
	border-top: 0;
}

.dm-modulo:active
{
	background: var(--dm-surface-2);
}

.dm-modulo-t
{
	font-weight: 650;
	font-size: .93rem;
	line-height: 1.2;
}

.dm-modulo-d
{
	font-size: .75rem;
	color: var(--dm-muted);
	line-height: 1.35;
	margin-top: 2px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (min-width: 768px)
{
	.dm-modulos
	{
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
		background: transparent;
		box-shadow: none;
		overflow: visible;
	}

	.dm-modulo
	{
		flex-direction: row;          /* ícono a la izquierda, texto a la derecha (pedido del usuario) */
		align-items: center;         /* centrados verticalmente */
		border: 0;
		border-radius: var(--dm-radius);
		background: var(--dm-surface);
		box-shadow: var(--dm-shadow);
		padding: 16px;
		transition: transform .15s ease, box-shadow .15s ease;
	}

	.dm-modulo:hover
	{
		transform: translateY(-2px);
		box-shadow: var(--dm-shadow-lg);
	}

	.dm-modulo .dm-item-chevron
	{
		display: none;
	}
}

@media (min-width: 1100px)
{
	.dm-modulos
	{
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================================
   Estados del arranque (cargando perfil / correo sin prefecto) y login
   ========================================================================== */

.dm-gate
{
	min-height: calc(100vh - var(--dm-topbar-h) - 40px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
}

.dm-gate-card
{
	width: 100%;
	max-width: 420px;
	background: var(--dm-surface);
	border-radius: 24px;
	box-shadow: var(--dm-shadow-lg);
	padding: 28px 22px;
	text-align: center;
}

/* ==========================================================================
   Selector de escuela (varios perfiles)
   ========================================================================== */

.dm-overlay
{
	position: fixed;
	inset: 0;
	z-index: 2000;
	background: rgba(15, 23, 42, .45);
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

@media (min-width: 576px)
{
	.dm-overlay
	{
		align-items: center;
		padding: 20px;
	}
}

.dm-overlay-card
{
	width: 100%;
	max-width: 440px;
	background: var(--dm-surface);
	border-radius: 22px 22px 0 0;
	padding: 18px 16px calc(16px + var(--dm-safe-b));
	box-shadow: var(--dm-shadow-lg);
	max-height: 90vh;
	display: flex;
	flex-direction: column;
}

@media (min-width: 576px)
{
	.dm-overlay-card
	{
		border-radius: 22px;
	}
}

/* ==========================================================================
   Cargando — el mismo de /edu y /admin (pedido del usuario, 12-oct-2026): UN
   solo diseño, la burbuja blanca con el aro verde, SIEMPRE al centro de la
   pantalla y una sola a la vista.
    · .process-loader: el global de ws/js/directives.js en CADA petición al
      servidor (compartido con otros portales; aquí solo cambia el aspecto).
      Sin velo; sigue bloqueando los clics mientras dura (evita guardar dos veces).
    · .dm-loading («Preparando tu portal…»): la misma burbuja al centro con su
      texto debajo. Mientras se ve, la global no se dibuja.
    · .dws-loader-component (mientras baja un módulo): ya no dibuja nada propio
      (antes un esqueleto gris); durante la carga se ve la global.
   ========================================================================== */

@keyframes dm-giro
{
	to { transform: rotate(360deg); }
}

/* La burbuja */
.process-loader::before,
.dm-loading > .spinner-border
{
	content: '';
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 64px !important;
	height: 64px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50%;
	background: var(--dm-surface);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06);
	animation: none !important;
	vertical-align: middle;
}

/* El aro */
.process-loader::after,
.dm-loading > .spinner-border::after
{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 3px solid #eef1ec;
	border-top-color: var(--dm-brand);
	border-radius: 50%;
	animation: dm-giro .8s linear infinite;
}

/* Siempre al centro de la pantalla. El relleno de arriba (= separación + una
   línea de texto) deja la BURBUJA en el centro exacto aunque el texto vaya debajo,
   así queda en el mismo punto que la global. No bloquea los clics y queda debajo
   de la barra de arriba y de las pestañas. */
.dm-loading
{
	position: fixed;
	inset: 0;
	z-index: 1020;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	margin: 0 !important;
	padding: calc(.75rem + 1.35em) 1rem 0 !important;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--dm-muted);
	font-size: .875rem;
	line-height: 1.35;
	text-align: center;
	pointer-events: none;
}

.process-loader
{
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
}

.process-loader .circular
{
	display: none;
}

/* Si la pantalla ya muestra su burbuja, la global no se dibuja. */
body:has(.dm-loading) .process-loader::before,
body:has(.dm-loading) .process-loader::after
{
	display: none;
}

.loader-wait
{
	background-color: #FFF;
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 99999;
}

/* Mientras llega un componente (directiva prefecto-component): solo un hueco; la
   burbuja la pone la global (antes un esqueleto gris; en Inicio se montan varios). */
.dws-loader-component
{
	min-height: 2.5rem;
}

@keyframes rotate
{
	100% { transform: rotate(360deg); }
}

@keyframes dash
{
	0%   { stroke-dasharray: 1, 200;  stroke-dashoffset: 0; }
	50%  { stroke-dasharray: 89, 200; stroke-dashoffset: -35; }
	100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124; }
}

@keyframes color
{
	100%, 0% { stroke: #0B7E45; }
}

/* Utilidades sueltas que siguen usando vistas viejas */
.bg-dark.bg-verde
{
	background-color: #72AB42 !important;
}

.text-bg-dark
{
	color: #fff !important;
}

.img-avatar
{
	border-radius: 50%;
	object-fit: cover;
}

/* ==========================================================================
   Módulos de prefectos
   Sus componentes (alumnos, puerta segura, asistencias, rastreo) son de
   Bootstrap directo: aquí se les da la cara de /admin sin tocar su lógica.
   ========================================================================== */

/* Tablas: la cabecera oscura de antes (.table-dark) pasa a la clara de /admin
   (.adm-tabla): gris tenue, letra chica en mayúsculas. */
.dm-page .table
{
	--bs-table-bg: var(--dm-surface);
	--bs-table-border-color: var(--dm-border);
	--bs-table-hover-bg: var(--dm-surface-2);
	--bs-table-active-bg: rgba(var(--dm-brand-rgb), .14);
	font-size: .875rem;
}

.dm-page .table > :not(caption) > * > *
{
	padding: .6rem .75rem;
	vertical-align: middle;
}

.dm-page .table > thead.table-dark
{
	--bs-table-color: #475569;
	--bs-table-bg: #f6f7f9;
	--bs-table-border-color: var(--dm-border);
	--bs-table-striped-bg: #f6f7f9;
	--bs-table-active-bg: #f6f7f9;
	--bs-table-hover-bg: #f6f7f9;
}

.dm-page .table > thead.table-dark th
{
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	white-space: nowrap;
}

.dm-page .table > tbody > tr:last-child > *
{
	border-bottom: 0;
}

/* Fila elegida en una lista táctil (el alumno cuyas asistencias estás viendo). */
.dm-item--activo
{
	background: var(--dm-brand-50);
}

.dm-item--activo .dm-item-title
{
	color: var(--dm-brand-700);
}

/* El acordeón de la ficha del alumno (credenciales, tramitar, asistencias) con
   el verde de la marca en vez del azul de Bootstrap. */
.accordion
{
	--bs-accordion-border-color: var(--dm-border);
	--bs-accordion-border-radius: 14px;
	--bs-accordion-inner-border-radius: 13px;
	--bs-accordion-active-color: var(--dm-brand-700);
	--bs-accordion-active-bg: var(--dm-brand-50);
	--bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--dm-brand-rgb), .2);
}

.accordion-button
{
	font-weight: 600;
}

/* ==========================================================================
   Modo oscuro — el de /edu y /admin: negro y grises neutros, el verde solo como
   acento. Desde el 17-oct-2026 el tema es UNA sola preferencia para todo
   escolares.app: sitio público, /edu, /admin, /docentes y /prefectos (/js/tema.js pone data-bs-theme en <html>
   antes de pintar y lo cambia en vivo en todas las pestañas). Primero los tokens
   (los mismos valores que los --app-* oscuros de edu/theme/default/css/style.css
   y los --adm-* de admin/theme/admin.css); después las piezas que traen colores
   fijos. Si cambias la paleta aquí, cámbiala en los otros portales.
   ========================================================================== */

html[data-bs-theme="dark"]
{
	color-scheme: dark;

	--dm-brand-700: #a6d97c;       /* texto verde: botones de contorno y suaves */
	--dm-brand-50: rgba(124, 184, 75, .15);
	--dm-brand-100: rgba(124, 184, 75, .25);
	--dm-bg: #000;
	--dm-surface: #141414;
	--dm-surface-2: #181818;
	--dm-border: #2a2a2a;
	--dm-text: #ededed;
	--dm-muted: #a3a3a3;
	--dm-ok: #8fcf5e;      --dm-ok-bg: rgba(143, 207, 94, .15);
	--dm-warn: #f2c063;    --dm-warn-bg: rgba(242, 192, 99, .15);
	--dm-bad: #f28b82;     --dm-bad-bg: rgba(242, 139, 130, .15);
	--dm-info: #8ab4f8;    --dm-info-bg: rgba(138, 180, 248, .15);
	--dm-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .4);
	--dm-shadow-lg: 0 10px 30px rgba(0, 0, 0, .6);

	--app-verde: #7cb84b;
	--app-acento: #a6d97c;
	--app-verde-claro: rgba(124, 184, 75, .15);
	--app-verde-claro-2: rgba(124, 184, 75, .25);
	--app-verde-borde: rgba(124, 184, 75, .45);
	--app-hero: #000;
	--app-perfil: #1a1a1a;
	--app-fondo: #000;
	--app-card: #141414;
	--app-card-trans: rgba(28, 28, 30, .985);
	--app-sutil: #181818;
	--app-hover2: #202020;
	--app-linea: #222;
	--app-borde: #2a2a2a;
	--app-borde-form: #383838;
	--app-gris: #1f1f1f;
	--app-gris-2: #2c2c2c;
	--app-texto: #ededed;
	--app-texto-2: #d4d4d4;
	--app-suave: #a3a3a3;
	--app-etiqueta: #919191;
	--app-tenue: #6e6e6e;
	--app-sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .4);
	--app-sombra-alta: 0 10px 30px rgba(0, 0, 0, .6);
	--app-isla-texto: rgba(235, 235, 245, .55);

	/* Bootstrap. En oscuro --bs-body-bg SÍ se pone, como en /edu y /admin: es el
	   fondo de los campos; tarjetas, tablas, modales y paneles llevan el suyo. */
	--bs-body-bg: #1a1a1a;
	--bs-body-color: var(--app-texto);
	--bs-border-color: var(--app-borde-form);
	--bs-secondary-color: rgba(237, 237, 237, .65);
	--bs-tertiary-bg: #1f1f1f;
	--bs-emphasis-color: #fff;
	--bs-primary-text-emphasis: #a6d97c;
	--bs-primary-bg-subtle: rgba(124, 184, 75, .15);
	--bs-primary-border-subtle: rgba(124, 184, 75, .45);
	--bs-link-color: #a6d97c;
	--bs-link-color-rgb: 166, 217, 124;
	--bs-link-hover-color: #c3e8a3;
	--bs-link-hover-color-rgb: 195, 232, 163;
}

/* ── Bootstrap ── */

html[data-bs-theme="dark"] .text-primary,
html[data-bs-theme="dark"] ol li a
{
	color: var(--app-acento) !important;
}

html[data-bs-theme="dark"] hr
{
	color: var(--app-borde);
}

html[data-bs-theme="dark"] .card
{
	--bs-card-bg: var(--app-card);
	border-color: var(--app-borde);
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select
{
	border-color: var(--app-borde-form);
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus
{
	border-color: var(--dm-brand);
}

html[data-bs-theme="dark"] .form-label
{
	color: var(--app-texto-2);
}

html[data-bs-theme="dark"] .form-floating input::placeholder
{
	color: transparent !important;
}

html[data-bs-theme="dark"] .form-floating > label
{
	color: var(--app-suave) !important;
}

html[data-bs-theme="dark"] .input-group-text
{
	background-color: var(--app-gris);
	border-color: var(--app-borde-form);
	color: var(--app-suave);
}

/* El gris claro de Bootstrap deslumbra sobre negro: como .btn-ghost. */
html[data-bs-theme="dark"] .btn-light
{
	--bs-btn-color: var(--app-texto);
	--bs-btn-bg: var(--app-gris);
	--bs-btn-border-color: var(--app-borde-form);
	--bs-btn-hover-color: var(--app-texto);
	--bs-btn-hover-bg: var(--app-gris-2);
	--bs-btn-hover-border-color: var(--app-borde-form);
	--bs-btn-active-color: var(--app-texto);
	--bs-btn-active-bg: var(--app-gris-2);
	--bs-btn-active-border-color: var(--app-borde-form);
}

html[data-bs-theme="dark"] .btn-ghost
{
	--bs-btn-active-bg: var(--app-gris-2);
}

html[data-bs-theme="dark"] .list-group-item
{
	background-color: var(--app-card);
	border-color: var(--app-linea);
	color: var(--app-texto);
}

html[data-bs-theme="dark"] .list-group-item-action:hover
{
	background-color: var(--app-hover2);
}

html[data-bs-theme="dark"] .page-link
{
	background-color: var(--app-card);
	border-color: var(--app-borde);
}

html[data-bs-theme="dark"] .border-bottom
{
	border-bottom-color: var(--app-linea) !important;
}

html[data-bs-theme="dark"] .dropdown-menu
{
	background-color: var(--app-card);
	border-color: var(--app-borde);
	overflow: hidden;
}

html[data-bs-theme="dark"] .dropdown-item
{
	color: var(--app-texto-2);
}

html[data-bs-theme="dark"] .dropdown-divider
{
	border-top-color: var(--app-linea) !important;
}

html[data-bs-theme="dark"] .accordion
{
	--bs-accordion-bg: var(--app-card);
	--bs-accordion-color: var(--app-texto);
	--bs-accordion-border-color: var(--app-borde);
}

html[data-bs-theme="dark"] .table
{
	--bs-table-bg: var(--app-card);
	--bs-table-color: var(--app-texto);
	--bs-table-border-color: var(--app-linea);
}

html[data-bs-theme="dark"] .table thead th
{
	background-color: var(--app-sutil);
	color: var(--app-etiqueta);
}

html[data-bs-theme="dark"] .modal
{
	--bs-modal-footer-bg: var(--app-sutil);
}

html[data-bs-theme="dark"] .modal-content
{
	border: 1px solid var(--app-borde);
}

html[data-bs-theme="dark"] .modal-backdrop
{
	--bs-backdrop-bg: #000;
	--bs-backdrop-opacity: .6;
}

html[data-bs-theme="dark"] .offcanvas-backdrop
{
	--bs-backdrop-opacity: .6;
}

/* ── Armazón ── */

/* Logo de la entrada: el de color en claro y el blanco (con «MX» verde) en oscuro,
   como /admin (.logo-color / .logo-blanco de admin/theme/admin.css). */
.logo-blanco
{
	display: none !important;
}

html[data-bs-theme="dark"] .logo-color
{
	display: none !important;
}

html[data-bs-theme="dark"] .logo-blanco
{
	display: block !important;
}

html[data-bs-theme="dark"] .app-topbar,
html[data-bs-theme="dark"] .app-panel-cab
{
	border-bottom: 1px solid var(--app-linea);
}

html[data-bs-theme="dark"] .app-tabbar
{
	border-color: rgba(255, 255, 255, .1);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}

html[data-bs-theme="dark"] .tab-btn:active
{
	background-color: rgba(255, 255, 255, .06);
}

html[data-bs-theme="dark"] .app-panel.offcanvas-start
{
	border-right: 1px solid var(--app-borde);
}

html[data-bs-theme="dark"] .app-panel.offcanvas-end
{
	border-left: 1px solid var(--app-borde);
}

html[data-bs-theme="dark"] .app-nav-lista
{
	border: 1px solid var(--app-borde);
}

html[data-bs-theme="dark"] .app-panel-perfil
{
	border-bottom: 1px solid var(--app-borde);
}

html[data-bs-theme="dark"] .app-cuenta-foto,
html[data-bs-theme="dark"] .app-panel-perfil-foto img,
html[data-bs-theme="dark"] .dm-avatar
{
	background: var(--app-gris-2);
}

/* La tarjeta del inicio: los botones de contorno de /edu en oscuro. */
html[data-bs-theme="dark"] .app-id-acciones .btn-outline-primary
{
	--bs-btn-color: #a6d97c;
	--bs-btn-border-color: rgba(124, 184, 75, .45);
	--bs-btn-hover-color: #a6d97c;
	--bs-btn-hover-bg: rgba(124, 184, 75, .15);
	--bs-btn-active-color: #a6d97c;
	--bs-btn-active-bg: rgba(124, 184, 75, .25);
}

/* ── Piezas dm-*: sobre negro la sombra no se ve, así que llevan una orilla de
   1 px (con box-shadow donde no había borde, para no mover nada) ── */

html[data-bs-theme="dark"] .dm-card,
html[data-bs-theme="dark"] .app-id-card
{
	border-color: var(--app-borde);
}

html[data-bs-theme="dark"] .dm-list,
html[data-bs-theme="dark"] .dm-stat,
html[data-bs-theme="dark"] .dm-table-wrap,
html[data-bs-theme="dark"] .dm-gate-card,
html[data-bs-theme="dark"] .dm-overlay-card
{
	box-shadow: var(--dm-shadow), 0 0 0 1px var(--app-borde);
}

@media (max-width: 767.98px)
{
	html[data-bs-theme="dark"] .dm-modulos
	{
		box-shadow: var(--dm-shadow), 0 0 0 1px var(--app-borde);
	}
}

@media (min-width: 768px)
{
	html[data-bs-theme="dark"] .dm-modulo
	{
		box-shadow: var(--dm-shadow), 0 0 0 1px var(--app-borde);
	}

	html[data-bs-theme="dark"] .dm-modulo:hover
	{
		box-shadow: var(--dm-shadow-lg), 0 0 0 1px var(--app-borde);
	}
}

html[data-bs-theme="dark"] .dm-tone-green  { background: rgba(124, 184, 75, .16);  color: #a6d97c; }
html[data-bs-theme="dark"] .dm-tone-blue   { background: rgba(96, 165, 250, .16);  color: #93c5fd; }
html[data-bs-theme="dark"] .dm-tone-violet { background: rgba(167, 139, 250, .16); color: #c4b5fd; }
html[data-bs-theme="dark"] .dm-tone-amber  { background: rgba(251, 191, 36, .16);  color: #fcd34d; }
html[data-bs-theme="dark"] .dm-tone-rose   { background: rgba(251, 113, 133, .16); color: #fda4af; }
html[data-bs-theme="dark"] .dm-tone-teal   { background: rgba(45, 212, 191, .16);  color: #5eead4; }
html[data-bs-theme="dark"] .dm-tone-sky    { background: rgba(56, 189, 248, .16);  color: #7dd3fc; }
html[data-bs-theme="dark"] .dm-tone-orange { background: rgba(251, 146, 60, .16);  color: #fdba74; }
html[data-bs-theme="dark"] .dm-tone-slate  { background: rgba(148, 163, 184, .16); color: #cbd5e1; }

html[data-bs-theme="dark"] .dm-seg
{
	background: var(--app-gris);
}

html[data-bs-theme="dark"] .dm-seg .nav-link.active,
html[data-bs-theme="dark"] .dm-seg > button.active
{
	background: var(--app-gris-2) !important;
	box-shadow: none;
}

html[data-bs-theme="dark"] .dm-item-chevron,
html[data-bs-theme="dark"] .dm-num
{
	color: var(--app-tenue);
}

html[data-bs-theme="dark"] .dm-chip:not([class*="dm-chip--"])
{
	background: rgba(255, 255, 255, .08);
	color: var(--app-texto-2);
}

html[data-bs-theme="dark"] .dm-note       { color: #c6d8fb; }
html[data-bs-theme="dark"] .dm-note--warn { color: #f7dca6; }
html[data-bs-theme="dark"] .dm-note--bad  { color: #f8c4bf; }
html[data-bs-theme="dark"] .dm-note--ok   { color: #cdebb4; }

html[data-bs-theme="dark"] .dm-empty-ico
{
	background: var(--app-gris);
	color: var(--app-tenue);
}

html[data-bs-theme="dark"] .dm-actionbar
{
	background: rgba(28, 28, 30, .96);
	box-shadow: var(--dm-shadow-lg), 0 0 0 1px var(--app-borde);
}

html[data-bs-theme="dark"] .dm-table thead th
{
	background: var(--app-sutil);
	color: var(--app-etiqueta);
}

html[data-bs-theme="dark"] .dm-table tbody tr:hover td
{
	background: var(--app-hover2);
}

html[data-bs-theme="dark"] .dm-overlay
{
	background: rgba(0, 0, 0, .6);
}

/* La burbuja de «Cargando»: negra con orilla y el aro sobre gris. */
html[data-bs-theme="dark"] .process-loader::before,
html[data-bs-theme="dark"] .dm-loading > .spinner-border
{
	box-shadow: 0 10px 30px rgba(0, 0, 0, .6), 0 0 0 1px var(--app-borde);
}

html[data-bs-theme="dark"] .process-loader::after,
html[data-bs-theme="dark"] .dm-loading > .spinner-border::after
{
	border-color: var(--app-borde);
	border-top-color: var(--dm-brand);
}

html[data-bs-theme="dark"] .loader-wait
{
	background-color: var(--app-fondo);
}

html[data-bs-theme="dark"] .bg-dark.bg-verde
{
	background-color: var(--app-hero) !important;
}

/* ── Módulos de prefectos en oscuro: la cabecera de las tablas (.table-dark,
   que arriba ya se volvió la clara de /admin) ── */
html[data-bs-theme="dark"] .dm-page .table > thead.table-dark
{
	--bs-table-color: var(--app-etiqueta);
	--bs-table-bg: var(--app-sutil);
	--bs-table-border-color: var(--app-borde);
	--bs-table-striped-bg: var(--app-sutil);
	--bs-table-active-bg: var(--app-sutil);
	--bs-table-hover-bg: var(--app-sutil);
}