/*
	mi-salon.css — Base visual de Mi Salón (diseño de Claude Design v3, 2026-10-06).
	Contrato y ejemplos de marcado: docs/DISENO-MI-SALON.md. Tokens espejo: js/mi-salon-theme.js.
	Carga: <link rel="stylesheet" href="css/mi-salon.css"> (ruta relativa: funciona bajo /salon/).

	Decisiones de Jorge sobre el Sistema de Claude Design: los campos formativos y los momentos de
	la secuencia llevan los colores de las planeaciones; el botón principal es board; Justificada
	en violeta; un solo subrayado de gis por pantalla.

	ÍNDICE DE CLASES
	Base ........ .ms-page  :focus-visible  .tnum
	Títulos ..... .ms-band .ms-band-titulo .ms-band-sub .ms-gis .ms-seccion-titulo .ms-num
	Superficies . .ms-card .ms-card--hundida .ms-suelta .ms-hoja
	Botones ..... .ms-btn + --primario --secundario --neutro --peligro --peligro-solido --fantasma --icono --chico
	Chips ....... .ms-chip[data-tono] (+ .ms-chip-ico) --suave --grande ; .ms-escala ; .ms-conteo[data-tono]
	Insignias ... .ms-campo[data-campo] .ms-grado[data-grado] .ms-insignia --docente --familia --propuesta --confirmada --cerrada
	Momentos .... .ms-momento[data-momento] (cuadro numerado de la secuencia)
	Controles ... .ms-tabs .ms-tab .ms-input .ms-select .ms-textarea .ms-label .ms-ayuda .ms-enlace .ms-opcion .ms-switch
	Capas ....... .ms-velo .ms-dialogo .ms-hoja-inferior .ms-panel .ms-visor (+ .is-closing)
	Avisos ...... .ms-toast --ok --warn --oscuro (+ .is-leaving)
	Estados ..... .ms-save (.is-idle .ms-spin) .ms-aviso --warn --info --error --lectura .ms-vacio .ms-skel .ms-cargando --texto .ms-validando-carga
	Otros ....... .ms-plegable (.ms-plegable-chev) .ms-tabla (.ms-tabla-fija .ms-tabla-caja) .ms-chalk-draw .ms-no-imprimir
*/

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
	/* Marca */
	--ms-brand: #1e3a8a;  --ms-brand-deep: #16276b;  --ms-brand-soft: #26499f;
	--ms-brand-tint: #eef3fd;  --ms-chalk: #f2cf6b;  --ms-chalk-white: #f6f8fe;
	--ms-action: #059669;  --ms-action-press: #047a55; /* solo Tienda y la raya de la barra inferior */
	/* Superficies */
	--ms-page: #faf9f4;  --ms-card: #ffffff;  --ms-sunken: #f6f5f0;
	--ms-raised: #ffffff;  --ms-veil: rgba(14,22,48,.5);  --ms-sidebar: #16276b;
	/* Texto */
	--ms-text: #1c2434;  --ms-text-2: #5b6473;  --ms-text-3: #6b7080;
	--ms-on-dark: #ffffff;  --ms-on-dark-2: #dfe6fb;  --ms-link: #1e3a8a;
	/* Bordes */
	--ms-border: #e7e6df;  --ms-border-strong: #8f8b7e;  --ms-focus: #f2cf6b;
	/* Estados */
	--ms-ok: #15803d;    --ms-ok-soft: #e7f4ec;    --ms-ok-text: #14532d;
	--ms-warn: #f4b740;  --ms-warn-soft: #fdf3d8;  --ms-warn-text: #6b4500;  --ms-warn-line: #b07a0f;
	--ms-bad: #c0262d;   --ms-bad-soft: #fbe7e7;   --ms-bad-text: #8a1c21;
	--ms-just: #6d28d9;  --ms-just-soft: #f0eafd;  --ms-just-text: #4c1d95;
	--ms-na: #4b5563;    --ms-na-soft: #eef0f2;    --ms-na-text: #374151;
	--ms-np: #1f2937;    --ms-np-soft: #e5e7eb;    --ms-np-text: #1f2937;
	--ms-info: #1e3a8a;  --ms-info-soft: #eef3fd;  --ms-info-line: #9db3e6;
	--ms-cero: #6b1d3a; /* el 0 «Sin evidencias» de los Ejercicios integradores (vino distinto de np) */
	/* Semáforo / asistencia / entrega (alias) */
	--ms-logrado: var(--ms-ok);  --ms-en-proceso: var(--ms-warn);  --ms-requiere-apoyo: var(--ms-bad);
	--ms-presente: var(--ms-ok); --ms-falta: var(--ms-bad);        --ms-justificada: var(--ms-just);
	--ms-entrego: var(--ms-ok);  --ms-incompleta: var(--ms-warn);  --ms-no-entrego: var(--ms-bad);
	--ms-no-aplica: var(--ms-na); --ms-no-presento: #1f2937;
	/* Campos formativos: colores de las planeaciones (decisión de Jorge). color / suave / línea / texto sobre el suave */
	--ms-len: #059669;  --ms-len-soft: #ecfdf5;  --ms-len-line: #6ee7b7;  --ms-len-text: #047857;
	--ms-sab: #ea580c;  --ms-sab-soft: #fff7ed;  --ms-sab-line: #fed7aa;  --ms-sab-text: #c2410c;
	--ms-eti: #7c3aed;  --ms-eti-soft: #f5f3ff;  --ms-eti-line: #c4b5fd;  --ms-eti-text: #6d28d9;
	--ms-dhl: #0284c7;  --ms-dhl-soft: #f0f9ff;  --ms-dhl-line: #bae6fd;  --ms-dhl-text: #0369a1;
	/* Grados (gis de la tienda) */
	--ms-g1: #f2cf6b; --ms-g2: #85b8e6; --ms-g3: #79c8a6;
	--ms-g4: #a99fe0; --ms-g5: #ef9277; --ms-g6: #f0b285;
	/* Rubros de "Cómo califico" */
	--ms-rubro-tareas: #1e3a8a;  --ms-rubro-trabajos: #0f766e;
	--ms-rubro-participacion: #b07a0f;  --ms-rubro-examen: #be185d;
	--ms-rubro-producto-final: #6d4c41; /* b53: solo cuando el docente le da su propio porcentaje */
	--ms-rubro-asistencia: #64748b;  --ms-rubro-conducta: #4338ca; /* b62: solo cuando el docente les da porcentaje */
	/* Cierre del día / sueltas */
	--ms-cierre-part: #efedfb;  --ms-cierre-cond: #e6f4ee;  --ms-cierre-com: #fdf6df;
	--ms-suelta: #f4f2fb;  --ms-suelta-line: #d6d1f1;
	/* Momentos de la secuencia: colores de las planeaciones (decisión de Jorge) */
	--ms-seq-inicio: #d2503a;  --ms-seq-desarrollo: #00a1a8;  --ms-seq-cierre: #b8325a;
	--ms-seq-anexos: #f2cf6b;  --ms-seq-tarea: #d97706;
	/* Tipografía */
	--ms-font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	/* Radios */
	--ms-r-xl: 24px; --ms-r-lg: 20px; --ms-r-md: 16px; --ms-r-sm: 12px; --ms-r-xs: 6px; --ms-r-pill: 999px;
	/* Sombras */
	--ms-shadow-rest: none;
	--ms-shadow-raised: 0 10px 28px -14px rgba(28,36,52,.45);
	--ms-shadow-dialog: 0 24px 60px -24px rgba(14,22,48,.55);
	/* Espaciado: escala de 4 px (Tailwind 1 = 4px) */
	--ms-control-h: 44px;  --ms-control-h-lg: 48px;
	/* Z-index */
	--ms-z-content: 0; --ms-z-sticky: 10; --ms-z-nav: 30; --ms-z-toast-q: 40;
	--ms-z-veil: 60; --ms-z-panel: 70; --ms-z-dialog: 80; --ms-z-toast: 90;
	--ms-z-viewer: 100; --ms-z-camera: 110;
	/* Movimiento */
	--ms-dur-instant: 80ms; --ms-dur-fast: 140ms; --ms-dur-normal: 200ms;
	--ms-dur-panel: 240ms; --ms-dur-achieve: 380ms;
	--ms-ease-out: cubic-bezier(.2,.8,.2,1);
	--ms-ease-in: cubic-bezier(.4,0,1,1);
	--ms-ease-std: cubic-bezier(.2,0,0,1);
	/* --nav-l (ancho de la barra lateral, o 0) y --nav-b (alto de la barra de abajo, o 0) los pone
	   js/navbar.js en <html>: los avisos flotantes los usan con valor de respaldo 0px. */
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
.ms-page {
	background: var(--ms-page);
	color: var(--ms-text);
	font-family: var(--ms-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
:focus-visible { outline: 3px solid var(--ms-focus); outline-offset: 2px; }
.tnum { font-variant-numeric: tabular-nums; }

/* ── Banda de la página y títulos ─────────────────────────────────────────── */
.ms-band {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px;
	padding: 18px; border-radius: 20px; color: #fff;
	background-color: var(--ms-brand);
	background-image:
		radial-gradient(circle at 12% 0%, rgba(255,255,255,.09), transparent 40%),
		radial-gradient(circle at 92% 110%, rgba(255,255,255,.06), transparent 45%),
		radial-gradient(rgba(255,255,255,.05) .6px, transparent .6px);
	background-size: auto, auto, 4px 4px;
}
@media (min-width: 600px) { .ms-band { padding: 20px 24px; border-radius: var(--ms-r-xl); } }
@media (min-width: 1024px) { .ms-band { padding: 22px 28px; } }
.ms-band-titulo {
	margin: 0; font-size: 26px; line-height: 1.08; font-weight: 900; letter-spacing: -.025em; text-wrap: balance;
}
@media (min-width: 600px) { .ms-band-titulo { font-size: 30px; } }
@media (min-width: 1024px) { .ms-band-titulo { font-size: 34px; } }
.ms-band-sub { font-size: 15px; font-weight: 500; color: var(--ms-on-dark-2); }
/* Subrayado de gis: UNO por pantalla (título de la banda y "Jornada finalizada") */
.ms-gis {
	background-image: linear-gradient(var(--ms-chalk), var(--ms-chalk));
	background-repeat: no-repeat; background-position: 0 100%; background-size: 100% .12em;
	padding-bottom: .04em;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ms-seccion-titulo { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.ms-num {
	width: 30px; height: 30px; flex: none; display: inline-grid; place-items: center;
	border-radius: var(--ms-r-pill); background: var(--ms-brand); color: #fff; font-size: 14px; font-weight: 800;
}

/* ── Superficies ──────────────────────────────────────────────────────────── */
.ms-card { background: var(--ms-card); border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg); }
.ms-card--hundida { background: var(--ms-sunken); }
.ms-suelta { background: var(--ms-suelta); border: 1px solid var(--ms-suelta-line); border-radius: var(--ms-r-lg); }
/* Hoja carta para imprimir: blanco y negro, sin depender del color */
.ms-hoja {
	width: 100%; max-width: 816px; margin: 0 auto; padding: 24px 20px; box-sizing: border-box;
	background: #fff; color: #111; border: 1px solid var(--ms-border);
	font-size: 13px; line-height: 1.45;
}
@media (min-width: 700px) { .ms-hoja { padding: 48px 56px; } }
@media print {
	.ms-hoja { max-width: none; width: auto; margin: 0; padding: 0; border: 0; color: #000; background: #fff; font-size: 11pt; }
}

/* ── Botones ──────────────────────────────────────────────────────────────── */
.ms-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: var(--ms-control-h-lg); padding: 0 20px; box-sizing: border-box;
	border: 1.5px solid transparent; border-radius: var(--ms-r-sm);
	font: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap;
	cursor: pointer; touch-action: manipulation;
	transition: transform var(--ms-dur-instant) var(--ms-ease-out), background-color var(--ms-dur-fast) ease;
}
.ms-btn:active:not(:disabled) { transform: scale(.97); }
.ms-btn svg { width: 18px; height: 18px; flex: none; }
.ms-btn--primario { background: var(--ms-brand); color: #fff; }
.ms-btn--primario:hover:not(:disabled) { background: var(--ms-brand-deep); }
.ms-btn--secundario { background: #fff; border-color: var(--ms-brand); color: var(--ms-brand); }
.ms-btn--secundario:hover:not(:disabled) { background: var(--ms-brand-tint); }
.ms-btn--neutro { background: #fff; border-color: var(--ms-border-strong); color: var(--ms-text); font-weight: 600; }
.ms-btn--neutro:hover:not(:disabled) { background: #f1f0ea; }
.ms-btn--peligro { background: #fff; border-color: var(--ms-bad); color: var(--ms-bad-text); }
.ms-btn--peligro:hover:not(:disabled) { background: var(--ms-bad-soft); }
.ms-btn--peligro-solido { background: var(--ms-bad); color: #fff; }
.ms-btn--peligro-solido:hover:not(:disabled) { background: #a51f25; }
.ms-btn--fantasma { background: transparent; color: var(--ms-brand); }
.ms-btn--fantasma:hover:not(:disabled) { background: var(--ms-brand-tint); }
.ms-btn--icono { width: var(--ms-control-h); min-height: var(--ms-control-h); padding: 0; border-color: #c9c6ba; background: #fff; color: var(--ms-text); }
.ms-btn--icono:hover:not(:disabled) { background: #f1f0ea; }
.ms-btn--icono svg { width: 18px; height: 18px; }
.ms-btn--chico { min-height: var(--ms-control-h); padding: 0 14px; font-size: 14px; }
/* Deshabilitado, como en el Sistema (los de solo ícono y los fantasma, con opacidad) */
.ms-btn:disabled, .ms-btn[aria-disabled="true"] {
	background: #9aa6c7; border-color: #9aa6c7; color: #fff; cursor: not-allowed; transform: none;
}
.ms-btn--icono:disabled, .ms-btn--fantasma:disabled, .ms-btn--icono[aria-disabled="true"], .ms-btn--fantasma[aria-disabled="true"] {
	background: transparent; border-color: #c9c6ba; color: var(--ms-text); opacity: .5;
}
.ms-btn--fantasma:disabled { border-color: transparent; }

/* ── Chips de estado ──────────────────────────────────────────────────────── */
/* Tono por data-tono: --c (sólido), --c-fg (texto sobre sólido), --c-soft, --c-soft-fg y --c-bd (borde al seleccionar) */
.ms-chip {
	--c: var(--ms-brand); --c-fg: #fff; --c-soft: var(--ms-brand-tint); --c-soft-fg: var(--ms-brand); --c-bd: var(--ms-brand);
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: var(--ms-control-h); padding: 0 14px; box-sizing: border-box; flex: none;
	border: 1.5px solid var(--ms-border-strong); border-radius: var(--ms-r-sm);
	background: #fff; color: var(--ms-text);
	font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer;
	transition: transform var(--ms-dur-instant) var(--ms-ease-out); touch-action: manipulation;
}
/* Nivel propuesto por un instrumento (Hoy): contorno punteado hasta que el docente lo confirma tocándolo */
.ms-chip[data-propuesto="1"]:not([aria-pressed="true"]) { outline: 2px dashed var(--ms-brand); outline-offset: 2px; }
.ms-chip[data-tono="ok"]   { --c: var(--ms-ok);   --c-fg: #fff;    --c-soft: var(--ms-ok-soft);   --c-soft-fg: var(--ms-ok-text);   --c-bd: var(--ms-ok); }
.ms-chip[data-tono="warn"] { --c: var(--ms-warn); --c-fg: #3a2700; --c-soft: var(--ms-warn-soft); --c-soft-fg: var(--ms-warn-text); --c-bd: var(--ms-warn-line); }
.ms-chip[data-tono="bad"]  { --c: var(--ms-bad);  --c-fg: #fff;    --c-soft: var(--ms-bad-soft);  --c-soft-fg: var(--ms-bad-text);  --c-bd: var(--ms-bad); }
.ms-chip[data-tono="just"] { --c: var(--ms-just); --c-fg: #fff;    --c-soft: var(--ms-just-soft); --c-soft-fg: var(--ms-just-text); --c-bd: var(--ms-just); }
.ms-chip[data-tono="na"]   { --c: var(--ms-na);   --c-fg: #fff;    --c-soft: var(--ms-na-soft);   --c-soft-fg: var(--ms-na-text);   --c-bd: #6b7280; }
.ms-chip[data-tono="np"]   { --c: var(--ms-np);   --c-fg: #fff;    --c-soft: var(--ms-np-soft);   --c-soft-fg: var(--ms-np-text);   --c-bd: var(--ms-np); }
.ms-chip[data-tono="board"]{ --c: var(--ms-brand); --c-fg: #fff;   --c-soft: var(--ms-brand-tint); --c-soft-fg: var(--ms-brand);   --c-bd: var(--ms-brand); }
.ms-chip:hover:not([aria-pressed="true"]):not(:disabled) { background: #f1f0ea; }
.ms-chip:active:not(:disabled) { transform: scale(.95); }
.ms-chip-ico { display: none; width: 18px; height: 18px; flex: none; }
.ms-chip[aria-pressed="true"] { background: var(--c); border-color: var(--c-bd); color: var(--c-fg); font-weight: 800; }
.ms-chip[aria-pressed="true"]:hover:not(:disabled) { filter: brightness(.94); }
.ms-chip[aria-pressed="true"] .ms-chip-ico { display: inline-block; animation: ms-pop 160ms var(--ms-ease-out); }
.ms-chip--suave[aria-pressed="true"] { background: var(--c-soft); color: var(--c-soft-fg); }
.ms-chip--grande { min-height: var(--ms-control-h-lg); padding: 0 18px; font-size: 16px; }
.ms-chip:disabled, .ms-chip[data-captura][disabled], .is-lectura .ms-chip { opacity: .5; cursor: not-allowed; }

/* Escala 0 · 1 · 2: una escala, no un estado (board, para no leerse como semáforo) */
.ms-escala { display: inline-flex; gap: 4px; }
.ms-escala > button, .ms-escala-op {
	width: 48px; min-height: var(--ms-control-h); padding: 0; box-sizing: border-box; flex: none;
	border: 1.5px solid var(--ms-border-strong); border-radius: var(--ms-r-sm); background: #fff; color: var(--ms-text);
	font: inherit; font-size: 16px; font-weight: 800; white-space: nowrap; cursor: pointer;
	transition: transform var(--ms-dur-instant) var(--ms-ease-out); touch-action: manipulation;
}
.ms-escala > button:active:not(:disabled), .ms-escala-op:active:not(:disabled) { transform: scale(.92); }
.ms-escala > button[aria-pressed="true"], .ms-escala-op[aria-pressed="true"] { background: var(--ms-brand); border-color: var(--ms-brand); color: #fff; }
.ms-escala > button:disabled, .is-lectura .ms-escala > button { opacity: .5; cursor: not-allowed; }

/* Píldoras de conteo (no se tocan): "12 presentes" */
.ms-conteo {
	display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: var(--ms-r-pill);
	background: var(--ms-sunken); color: var(--ms-text); font-size: 13px; font-weight: 700; line-height: 1.5;
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ms-conteo[data-tono="ok"]   { background: var(--ms-ok-soft);   color: var(--ms-ok-text); }
.ms-conteo[data-tono="warn"] { background: var(--ms-warn-soft); color: var(--ms-warn-text); }
.ms-conteo[data-tono="bad"]  { background: var(--ms-bad-soft);  color: var(--ms-bad-text); }
.ms-conteo[data-tono="just"] { background: var(--ms-just-soft); color: var(--ms-just-text); }
.ms-conteo[data-tono="na"]   { background: var(--ms-na-soft);   color: var(--ms-na-text); }
.ms-conteo[data-tono="np"]   { background: var(--ms-np-soft);   color: var(--ms-np-text); }
.ms-conteo[data-tono="board"]{ background: var(--ms-brand-tint); color: var(--ms-brand); }

/* ── Insignias ────────────────────────────────────────────────────────────── */
/* Campo formativo: SIEMPRE insignia cuadrada con su sigla (suave + borde de 1.5 px + texto del tono); nunca relleno sólido */
.ms-campo {
	--cf: var(--ms-len); --cf-soft: var(--ms-len-soft); --cf-text: var(--ms-len-text);
	display: inline-flex; align-items: center; flex: none; height: 24px; padding: 0 7px; box-sizing: border-box;
	border: 1.5px solid var(--cf); border-radius: var(--ms-r-xs); background: var(--cf-soft); color: var(--cf-text);
	font-size: 12px; font-weight: 800; letter-spacing: .05em; line-height: 1; white-space: nowrap;
}
.ms-campo[data-campo="LEN"] { --cf: var(--ms-len); --cf-soft: var(--ms-len-soft); --cf-text: var(--ms-len-text); }
.ms-campo[data-campo="SAB"] { --cf: var(--ms-sab); --cf-soft: var(--ms-sab-soft); --cf-text: var(--ms-sab-text); }
.ms-campo[data-campo="ETI"] { --cf: var(--ms-eti); --cf-soft: var(--ms-eti-soft); --cf-text: var(--ms-eti-text); }
.ms-campo[data-campo="DHL"], .ms-campo[data-campo="HUM"] { --cf: var(--ms-dhl); --cf-soft: var(--ms-dhl-soft); --cf-text: var(--ms-dhl-text); }

.ms-grado {
	display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--ms-r-pill);
	background: var(--ms-g1); color: var(--ms-text); font-size: 12px; font-weight: 800; line-height: 1.3; white-space: nowrap;
}
.ms-grado[data-grado="1"] { background: var(--ms-g1); }
.ms-grado[data-grado="2"] { background: var(--ms-g2); }
.ms-grado[data-grado="3"] { background: var(--ms-g3); }
.ms-grado[data-grado="4"] { background: var(--ms-g4); }
.ms-grado[data-grado="5"] { background: var(--ms-g5); }
.ms-grado[data-grado="6"] { background: var(--ms-g6); }

.ms-insignia {
	display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--ms-r-pill);
	background: #eeede7; color: #3d4452; font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap;
}
.ms-insignia svg { width: 13px; height: 13px; flex: none; }
.ms-insignia--docente { background: #eeede7; color: #3d4452; }
.ms-insignia--familia { background: var(--ms-warn-soft); color: var(--ms-warn-text); }
.ms-insignia--propuesta { background: var(--ms-brand-tint); color: var(--ms-brand); }
.ms-insignia--confirmada { background: var(--ms-ok-soft); color: var(--ms-ok-text); }
.ms-insignia--cerrada { background: var(--ms-text); color: #fff; }
/* Producto final del proyecto (modelo C): sólido de la marca; el texto lo dice, el color no es lo único */
.ms-insignia--final { background: var(--ms-brand); color: #fff; flex-shrink: 0; }

/* Momento de la secuencia (Inicio, Desarrollo, Cierre, Anexos y libros, Tarea para casa): cuadro numerado.
   Texto blanco si llega a 4.5:1; si no, ink (Anexos, Desarrollo, Tarea). Inicio: ningún texto llega a 4.5 (blanco 4.24,
   ink 3.66); queda el blanco, con el número grande y en negritas (texto grande: 3:1). */
.ms-momento {
	--mo: var(--ms-seq-inicio); --mo-fg: #fff;
	display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--ms-r-xs);
	background: var(--mo); color: var(--mo-fg); font-size: 18px; font-weight: 800; line-height: 1;
}
.ms-momento[data-momento="inicio"]     { --mo: var(--ms-seq-inicio);     --mo-fg: #fff; }
.ms-momento[data-momento="desarrollo"] { --mo: var(--ms-seq-desarrollo); --mo-fg: var(--ms-text); }
.ms-momento[data-momento="cierre"]     { --mo: var(--ms-seq-cierre);     --mo-fg: #fff; }
.ms-momento[data-momento="anexos"]     { --mo: var(--ms-seq-anexos);     --mo-fg: var(--ms-text); }
.ms-momento[data-momento="tarea"]      { --mo: var(--ms-seq-tarea);      --mo-fg: var(--ms-text); }

/* ── Controles ────────────────────────────────────────────────────────────── */
.ms-tabs {
	display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: #efeee8;
	overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ms-tabs::-webkit-scrollbar { display: none; }
.ms-tab {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	min-height: var(--ms-control-h); padding: 0 14px; box-sizing: border-box; border: 0; border-radius: 10px;
	background: transparent; color: #3d4452; font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer;
	text-decoration: none;
}
.ms-tab:hover { background: rgba(255,255,255,.55); }
.ms-tab[aria-selected="true"], .ms-tab[aria-pressed="true"] { background: #fff; color: var(--ms-brand); box-shadow: inset 0 0 0 1.5px var(--ms-brand); }

.ms-input, .ms-select, .ms-textarea {
	display: block; width: 100%; min-height: var(--ms-control-h-lg); padding: 0 14px; box-sizing: border-box;
	border: 1.5px solid var(--ms-border-strong); border-radius: var(--ms-r-sm); background: #fff; color: var(--ms-text);
	font: inherit; font-size: 16px; line-height: 1.3;
}
/* Lo escrito y el ejemplo en peso normal: dentro de un .ms-label (800) la casilla heredaba negritas y el ejemplo parecía un dato ya escrito (auditoría L1-012) */
.ms-input, .ms-textarea { font-weight: 400; }
.ms-textarea { min-height: 96px; padding: 12px 14px; resize: vertical; }
.ms-select {
	-webkit-appearance: none; appearance: none; padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231c2434' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center;
}
.ms-input::placeholder, .ms-textarea::placeholder { color: var(--ms-text-3); }
.ms-input:focus, .ms-select:focus, .ms-textarea:focus { border-color: var(--ms-brand); }
.ms-input[aria-invalid="true"], .ms-select[aria-invalid="true"], .ms-textarea[aria-invalid="true"] { border-color: var(--ms-bad); }
.ms-input:disabled, .ms-select:disabled, .ms-textarea:disabled, .ms-textarea[data-bloqueado] { background: var(--ms-sunken); opacity: .7; cursor: not-allowed; }
.ms-label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 800; color: var(--ms-text); }
.ms-ayuda { font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--ms-text-2); }
/* Enlace de texto con zona táctil de 44 px (regla 5): «Cómo califico · Ajustes», «Volver a…» */
.ms-enlace {
	display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ms-brand);
	text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.ms-enlace:hover { color: var(--ms-brand-deep); }

/* Opciones cortas como botones (js/opciones-botones.js): el <select> queda escondido y manda; estos botones lo reflejan */
.ms-opciones-origen {
	position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important;
	overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important;
}
.ms-segmentos { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; min-width: 0; max-width: 100%; }
.ms-segmentos[hidden] { display: none; }
.ms-segmento {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 1 auto; min-width: min-content;
	min-height: var(--ms-control-h); padding: 6px 14px; box-sizing: border-box;
	border: 1.5px solid var(--ms-border-strong); border-radius: var(--ms-r-sm); background: #fff; color: var(--ms-text);
	font: inherit; font-size: 15px; font-weight: 600; line-height: 1.25; text-align: center; cursor: pointer;
	overflow-wrap: normal; word-break: normal; text-transform: none; letter-spacing: normal; touch-action: manipulation;
	transition: transform var(--ms-dur-instant) var(--ms-ease-out);
}
.ms-segmento:hover:not([aria-checked="true"]):not(:disabled) { background: #f1f0ea; }
.ms-segmento:active:not(:disabled) { transform: scale(.97); }
/* La palomita ocupa su lugar siempre (invisible sin marcar) y el texto reserva su ancho en negrita: el botón elegido no cambia de tamaño */
.ms-segmento-ico { display: inline-flex; visibility: hidden; width: 18px; height: 18px; flex: none; }
.ms-segmento-txt { display: inline-flex; flex-direction: column; align-items: center; }
.ms-segmento-txt::after { content: attr(data-t); font-weight: 800; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.ms-segmento-campo { display: inline-flex; flex: none; }
.ms-segmentos-aviso { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--ms-bad-text); }
.ms-segmentos-aviso[hidden] { display: none; }
.ms-segmento-ico svg { display: block; width: 18px; height: 18px; }
.ms-segmento[aria-checked="true"] { background: var(--ms-brand); border-color: var(--ms-brand); color: #fff; font-weight: 800; }
.ms-segmento[aria-checked="true"]:hover:not(:disabled) { background: var(--ms-brand-deep); }
.ms-segmento[aria-checked="true"] .ms-segmento-ico { visibility: visible; }
.ms-segmento[aria-disabled="true"] { cursor: not-allowed; }
.ms-segmento:disabled { opacity: .6; cursor: not-allowed; }
.ms-segmentos[aria-invalid="true"] .ms-segmento:not([aria-checked="true"]) { border-color: var(--ms-bad); }
@media (max-width: 480px) { .ms-segmentos > .ms-segmento { flex: 1 1 calc(50% - 8px); } }
@media (prefers-reduced-motion: reduce) { .ms-segmento { transition: none; } .ms-segmento:active:not(:disabled) { transform: none; } }

/* Casilla o radio como botón de 48 px:<label class="ms-opcion"><input type="checkbox"> Texto</label> */
.ms-opcion {
	display: flex; align-items: center; gap: 10px; min-height: var(--ms-control-h-lg); padding: 0 14px; box-sizing: border-box;
	border: 1.5px solid var(--ms-border-strong); border-radius: var(--ms-r-sm); background: #fff; color: var(--ms-text);
	font-size: 16px; font-weight: 600; line-height: 1.3; cursor: pointer; touch-action: manipulation;
}
.ms-opcion input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--ms-brand); cursor: pointer; }
.ms-opcion:hover { background: #f1f0ea; }
.ms-opcion[aria-pressed="true"], .ms-opcion:has(:checked) { border-color: var(--ms-brand); background: var(--ms-brand-tint); color: var(--ms-brand); font-weight: 800; }
.ms-opcion:has(:focus-visible) { outline: 3px solid var(--ms-focus); outline-offset: 2px; }
.ms-opcion input:focus-visible { outline: 0; }
.ms-opcion:has(:disabled) { opacity: .5; cursor: not-allowed; }

/* Interruptor 48×28: <label class="ms-switch"><input type="checkbox" role="switch"><span class="ms-switch-pista"></span></label> */
.ms-switch { position: relative; display: inline-flex; align-items: center; width: 48px; min-height: var(--ms-control-h); flex: none; cursor: pointer; }
.ms-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ms-switch-pista {
	position: relative; width: 48px; height: 28px; border-radius: var(--ms-r-pill); box-sizing: border-box;
	background: #fff; border: 1.5px solid var(--ms-border-strong); pointer-events: none;
	transition: background-color var(--ms-dur-fast) ease, border-color var(--ms-dur-fast) ease;
}
.ms-switch-pista::after {
	content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%;
	background: var(--ms-border-strong); transition: transform var(--ms-dur-fast) var(--ms-ease-out), background-color var(--ms-dur-fast) ease;
}
.ms-switch input:checked + .ms-switch-pista { background: var(--ms-brand); border-color: var(--ms-brand); }
.ms-switch input:checked + .ms-switch-pista::after { transform: translateX(20px); background: #fff; }
.ms-switch input:focus-visible + .ms-switch-pista { outline: 3px solid var(--ms-focus); outline-offset: 2px; }
.ms-switch input:disabled + .ms-switch-pista { opacity: .5; }

/* ── Capas ────────────────────────────────────────────────────────────────── */
.ms-velo { position: fixed; inset: 0; z-index: var(--ms-z-veil); background: var(--ms-veil); animation: ms-fade var(--ms-dur-normal) ease; }
.ms-velo.is-closing { animation: ms-fade-out 160ms ease forwards; }

.ms-dialogo {
	position: fixed; inset: 0; margin: auto; z-index: var(--ms-z-dialog);
	width: min(560px, calc(100% - 32px)); height: fit-content; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
	overflow: auto; box-sizing: border-box; background: #fff; color: var(--ms-text);
	border-radius: var(--ms-r-lg); box-shadow: var(--ms-shadow-dialog);
	animation: ms-dialog-in 220ms var(--ms-ease-out);
}
.ms-dialogo--ancho { width: min(760px, calc(100% - 32px)); }
.ms-dialogo.is-closing { animation: ms-dialog-out 160ms var(--ms-ease-in) forwards; }

.ms-hoja-inferior {
	position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto; z-index: var(--ms-z-dialog);
	width: min(640px, 100%); max-height: 90vh; max-height: 90dvh; overflow: auto; box-sizing: border-box;
	padding-top: 22px; padding-bottom: env(safe-area-inset-bottom, 0px);
	background: #fff; color: var(--ms-text); border-radius: var(--ms-r-xl) var(--ms-r-xl) 0 0; box-shadow: var(--ms-shadow-dialog);
	animation: ms-sheet-in 260ms var(--ms-ease-out);
}
/* Asa */
.ms-hoja-inferior::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: #c9c6ba; }
.ms-hoja-inferior.is-closing { animation: ms-sheet-out 180ms var(--ms-ease-in) forwards; }

.ms-panel {
	position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--ms-z-panel);
	width: min(300px, 86%); overflow-y: auto; box-sizing: border-box; background: #fff; color: var(--ms-text);
	box-shadow: var(--ms-shadow-raised); animation: ms-panel-in var(--ms-dur-panel) var(--ms-ease-out);
}
.ms-panel.is-closing { animation: ms-panel-out 180ms var(--ms-ease-in) forwards; }

.ms-visor {
	position: fixed; top: 0; bottom: 0; right: 0; z-index: var(--ms-z-viewer);
	width: min(560px, 100%); overflow: hidden; box-sizing: border-box; background: #fff; color: var(--ms-text);
	box-shadow: var(--ms-shadow-raised); animation: ms-viewer-in var(--ms-dur-panel) var(--ms-ease-out);
}
.ms-visor.is-closing { animation: ms-viewer-out 180ms var(--ms-ease-in) forwards; }

/* ── Avisos flotantes ─────────────────────────────────────────────────────── */
/* Fijos abajo, después de la barra lateral (--nav-l) y sobre la barra de abajo (--nav-b) */
.ms-toast {
	position: fixed; z-index: var(--ms-z-toast);
	left: calc(var(--nav-l, 0px) + 16px); bottom: calc(var(--nav-b, 0px) + 16px);
	max-width: min(520px, calc(100% - var(--nav-l, 0px) - 32px)); box-sizing: border-box;
	display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: 14px;
	border: 1px solid #e6c46e; background: var(--ms-warn-soft); color: #5a3b00;
	font-size: 14px; font-weight: 600; line-height: 1.4;
	animation: ms-toast-in 220ms var(--ms-ease-out);
}
.ms-toast svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.ms-toast--ok { border-color: #9fd1b0; background: var(--ms-ok-soft); color: var(--ms-ok-text); }
.ms-toast--warn { border-color: #e6c46e; background: var(--ms-warn-soft); color: #5a3b00; }
.ms-toast--oscuro { border-color: var(--ms-text); background: var(--ms-text); color: #fff; }
.ms-toast.is-leaving { animation: ms-fade-out 200ms ease forwards; }

/* ── Línea de guardado, avisos de página, vacío y carga ───────────────────── */
.ms-save {
	display: inline-flex; align-items: center; gap: 6px; height: 20px; font-size: 13px; font-weight: 600; line-height: 20px;
	color: var(--ms-text-2); transition: opacity 400ms ease;
}
.ms-save svg { width: 16px; height: 16px; flex: none; }
.ms-save.is-idle { opacity: .7; }
.ms-save--ok { color: var(--ms-ok-text); }
.ms-save--warn { color: var(--ms-warn-text); }
.ms-save--error { color: var(--ms-bad-text); }
.ms-spin { animation: ms-spin .9s linear infinite; }

.ms-aviso { padding: 10px 14px; border-radius: var(--ms-r-sm); font-size: 14px; line-height: 1.4; box-sizing: border-box; }
.ms-aviso--warn { background: var(--ms-warn-soft); border: 1px solid #e6c46e; color: #5a3b00; }
.ms-aviso--info { background: #fff; border: 1.5px solid var(--ms-info-line); color: var(--ms-info); }
.ms-aviso--error { background: var(--ms-bad-soft); border: 1px solid #e3a5a5; color: var(--ms-bad-text); font-weight: 600; }
.ms-aviso--lectura {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border-radius: var(--ms-r-md);
	background: var(--ms-warn-soft); border: 1px solid #e6c46e; color: #5a3b00; font-size: 15px;
}
.ms-aviso--lectura svg { width: 20px; height: 20px; flex: none; }

.ms-vacio {
	display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px; text-align: center; box-sizing: border-box;
	border: 1.5px dashed #b9b6aa; border-radius: 14px; color: var(--ms-text-2); font-size: 13px;
	animation: ms-fade var(--ms-dur-normal) ease;
}
.ms-vacio b { color: var(--ms-text); font-size: 15px; }
.ms-skel { background: var(--ms-sunken); border-radius: 8px; min-height: 12px; animation: ms-breathe 1.4s ease-in-out infinite alternate; }

/*
	Carga (regla 11): toda pantalla que pinta por JS trae esto en su contenedor desde el HTML y el JS lo
	reemplaza al pintar. Siempre con role="status" y aria-busy="true"; el texto «Cargando…» lo lee el lector
	de pantalla (en el esqueleto va en .sr-only).
	Esqueleto (3 barras; 6 o más para una sección larga):
	  <div class="ms-cargando" role="status" aria-busy="true"><i></i><i></i><i></i><span class="sr-only">Cargando…</span></div>
	Texto con aro (para listas cortas, selectores o una línea):
	  <div class="ms-cargando ms-cargando--texto" role="status" aria-busy="true"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>Cargando…</div>
*/
.ms-cargando { display: flex; flex-direction: column; gap: 12px; padding: 6px 0; box-sizing: border-box; }
.ms-cargando > i {
	display: block; height: 14px; border-radius: 999px;
	background: linear-gradient(90deg, var(--ms-border) 0%, #f3f2ec 45%, var(--ms-border) 90%) 0 0 / 200% 100%;
	animation: ms-brillo 1.6s ease-in-out infinite;
}
/* Anchos 100 / 82 / 58 %, repetidos si la sección es larga y lleva más barras */
.ms-cargando > i:nth-of-type(3n+2) { width: 82%; }
.ms-cargando > i:nth-of-type(3n) { width: 58%; }
.ms-cargando--texto {
	flex-direction: row; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px;
	color: var(--ms-text-3); font-size: 14px; font-weight: 600; line-height: 1.4;
}
.ms-cargando--texto svg {
	width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
	animation: ms-spin .9s linear infinite;
}

/*
	Mientras js/saas-guard.js comprueba el acceso la página sale oculta, salvo la navegación y la banda de la
	pantalla (sin toques: aún no se sabe si la cuenta puede usarla), con un «Cargando…» propio que el candado quita
	al decidir (auditoría L2-025: con red lenta la pantalla quedaba vacía varios segundos). El aviso aparece a los
	400 ms para no parpadear cuando la red es buena.
*/
html.ms-validando #app-navbar, html.ms-validando .ms-band, html.ms-validando .ms-validando-carga { visibility: visible; }
html.ms-validando #app-navbar, html.ms-validando .ms-band { pointer-events: none; }
.ms-validando-carga {
	position: fixed; left: var(--nav-l, 0px); right: 0; top: 42vh; z-index: var(--ms-z-sticky);
	opacity: 0; animation: ms-fade 1ms linear 400ms forwards;
}
html:not(.ms-validando) .ms-validando-carga { display: none; }

/* ── Plegable, tabla, logro ───────────────────────────────────────────────── */
/* <details class="ms-plegable"><summary>Título <svg class="ms-plegable-chev">…</svg></summary><div>cuerpo</div></details> */
.ms-plegable > summary {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--ms-control-h);
	cursor: pointer; list-style: none;
}
.ms-plegable > summary::-webkit-details-marker { display: none; }
.ms-plegable-chev { width: 18px; height: 18px; flex: none; transition: transform var(--ms-dur-normal) var(--ms-ease-out); }
.ms-plegable[open] > summary .ms-plegable-chev { transform: rotate(90deg); }
.ms-plegable[open] > :not(summary) { animation: ms-unfold var(--ms-dur-normal) var(--ms-ease-out); }

.ms-tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ms-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.ms-tabla th {
	padding: 10px 14px; background: var(--ms-sunken); text-align: left; white-space: nowrap;
	font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ms-text-2);
}
.ms-tabla td { padding: 10px 14px; border-top: 1px solid #efeee8; background: #fff; }
.ms-tabla .ms-tabla-fija { position: sticky; left: 0; z-index: 1; }
.ms-tabla th.ms-tabla-fija { background: var(--ms-sunken); }
.ms-tabla td.ms-tabla-fija { background: #fff; font-weight: 700; }

/* Jornada finalizada: único gesto de logro */
.ms-chalk-draw { transform-origin: left; animation: ms-chalk var(--ms-dur-achieve) 220ms var(--ms-ease-out) both; }

/* ── Movimiento ───────────────────────────────────────────────────────────── */
@keyframes ms-pop        { from { transform: scale(.4); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes ms-unfold     { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
@keyframes ms-fade       { from { opacity: 0 } to { opacity: 1 } }
@keyframes ms-fade-out   { from { opacity: 1 } to { opacity: 0 } }
@keyframes ms-dialog-in  { from { opacity: 0; transform: translateY(10px) scale(.98) } to { opacity: 1; transform: none } }
@keyframes ms-dialog-out { to { opacity: 0; transform: translateY(6px) scale(.99) } }
@keyframes ms-sheet-in   { from { transform: translateY(100%) } to { transform: none } }
@keyframes ms-sheet-out  { to { transform: translateY(100%) } }
@keyframes ms-panel-in   { from { transform: translateX(-100%) } to { transform: none } }
@keyframes ms-panel-out  { to { transform: translateX(-100%) } }
@keyframes ms-viewer-in  { from { transform: translateX(100%) } to { transform: none } }
@keyframes ms-viewer-out { to { transform: translateX(100%) } }
@keyframes ms-toast-in   { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes ms-chalk      { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes ms-spin       { to { transform: rotate(360deg) } }
@keyframes ms-breathe    { from { opacity: .55 } to { opacity: 1 } }
@keyframes ms-brillo     { from { background-position: 100% 0 } to { background-position: -100% 0 } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 1ms !important; animation-iteration-count: 1 !important;
		transition-duration: 1ms !important; scroll-behavior: auto !important;
	}
	/* La carga queda quieta: barras lisas y aro sin girar */
	.ms-cargando > i, .ms-cargando--texto svg { animation: none !important; }
	.ms-cargando > i { background: var(--ms-border); }
}
@media print {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.ms-no-imprimir { display: none !important; }
}

/* Mejora opcional: entrada de página sin parpadeo entre apartados */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; }