/* =========================================================================
   SIMDOLOR — TEMA CLINICO
   Sistema de diseno de la plataforma: paleta, tipografia y componentes.
   Se carga DESPUES de las hojas antiguas y prevalece sobre ellas.
   ========================================================================= */

:root {
	/* Paleta */
	--sd-fondo: #f5f7f9;
	--sd-superficie: #ffffff;
	--sd-tinta: #18242e;
	--sd-tinta-2: #43525f;
	--sd-apagado: #6d7c89;
	--sd-borde: #dbe2e8;
	--sd-borde-suave: #e8edf1;
	--sd-primario: #0b6e8e;
	--sd-primario-oscuro: #08556e;
	--sd-primario-suave: #e6f2f6;
	--sd-ok: #177a52;
	--sd-ok-suave: #e3f2ea;
	--sd-aviso: #96660f;
	--sd-aviso-suave: #faf1de;
	--sd-error: #a83a3c;
	--sd-error-suave: #f9e9e9;

	--sd-fuente: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--sd-radio: 8px;
	--sd-sombra: 0 1px 3px rgba(24, 36, 46, .08);
	--sd-sombra-alta: 0 4px 16px rgba(24, 36, 46, .12);
}

/* ---------- Base ---------- */

html { font-size: 16px; }

body {
	font-family: var(--sd-fuente) !important;
	background: var(--sd-fondo) !important;
	color: var(--sd-tinta);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, legend, .page-title {
	font-family: var(--sd-fuente) !important;
	color: var(--sd-tinta);
	font-weight: 600;
	line-height: 1.25;
}

h1, .page-title { font-size: 26px !important; letter-spacing: -0.01em; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }

a { color: var(--sd-primario); }
a:hover, a:focus { color: var(--sd-primario-oscuro); }

::selection { background: var(--sd-primario-suave); }

/* ---------- Cabecera nueva ---------- */

/* La foto de biblioteca de la etapa anterior desaparece */
#env-display-top { display: none !important; }

#main-header {
	background: var(--sd-superficie) !important;
	border-bottom: 1px solid var(--sd-borde) !important;
	box-shadow: none !important;
	min-height: 60px;
}

#main-header #header-logo img { max-height: 34px; }

#header-user-name { color: var(--sd-tinta) !important; font-weight: 600; }
#header-user-role { color: var(--sd-apagado) !important; font-size: 12px; }

/* Cabecera de las paginas de practica (layouts uvirtual) */
#adaptable-page-header-wrapper {
	background: #123240 !important;
	border-bottom: none;
}
#adaptable-page-header-wrapper #logo { max-height: 48px; }

/* ---------- Pie ---------- */

#main-footer {
	background: var(--sd-superficie) !important;
	border-top: 1px solid var(--sd-borde) !important;
	color: var(--sd-apagado) !important;
}
#main-footer a { color: var(--sd-primario) !important; }

/* ---------- Zona de contenido ---------- */

#main-content, .page-content, .container-full, .gray-bg {
	background: var(--sd-fondo) !important;
}

.page-content { padding-top: 8px; }

fieldset {
	background: var(--sd-superficie);
	border: 1px solid var(--sd-borde) !important;
	border-radius: var(--sd-radio);
	padding: 20px 24px !important;
	box-shadow: var(--sd-sombra);
}

legend {
	font-size: 17px !important;
	color: var(--sd-primario) !important;
	border: none !important;
	width: auto !important;
	padding: 0 8px !important;
	margin-bottom: 8px !important;
}

/* ---------- Botones ---------- */

.btn {
	font-family: var(--sd-fuente) !important;
	border-radius: 6px !important;
	font-weight: 500 !important;
	transition: background .15s ease, box-shadow .15s ease;
	box-shadow: none !important;
	text-transform: none !important;
}

.btn-primary {
	background: var(--sd-primario) !important;
	border-color: var(--sd-primario) !important;
	color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
	background: var(--sd-primario-oscuro) !important;
	border-color: var(--sd-primario-oscuro) !important;
}

.btn-default, .btn-secondary {
	background: var(--sd-superficie) !important;
	border: 1px solid var(--sd-borde) !important;
	color: var(--sd-tinta-2) !important;
}
.btn-default:hover, .btn-secondary:hover {
	border-color: var(--sd-primario) !important;
	color: var(--sd-primario) !important;
}

.btn:focus-visible {
	outline: 2px solid var(--sd-primario) !important;
	outline-offset: 2px;
}

/* ---------- Formularios ---------- */

input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="file"], select, textarea, .form-control {
	font-family: var(--sd-fuente) !important;
	border: 1px solid var(--sd-borde) !important;
	border-radius: 6px !important;
	background: var(--sd-superficie) !important;
	color: var(--sd-tinta) !important;
	padding: 8px 12px;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus, select:focus, textarea:focus, .form-control:focus {
	border-color: var(--sd-primario) !important;
	box-shadow: 0 0 0 3px var(--sd-primario-suave) !important;
	outline: none !important;
}

label { color: var(--sd-tinta-2); font-weight: 500; }

/* ---------- Tablas ---------- */

table { font-family: var(--sd-fuente); }

.page-content table:not(.sin-tema) {
	width: 100%;
	border-collapse: separate !important;
	border-spacing: 0;
	background: var(--sd-superficie);
	border: 1px solid var(--sd-borde);
	border-radius: var(--sd-radio);
	overflow: hidden;
	box-shadow: var(--sd-sombra);
}

.page-content table:not(.sin-tema) thead tr {
	background: var(--sd-fondo);
}

.page-content table:not(.sin-tema) th {
	font-size: 12px !important;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--sd-apagado) !important;
	font-weight: 600;
	padding: 10px 14px !important;
	border-bottom: 1px solid var(--sd-borde) !important;
}

.page-content table:not(.sin-tema) td {
	padding: 11px 14px !important;
	border-bottom: 1px solid var(--sd-borde-suave) !important;
	color: var(--sd-tinta-2);
	font-variant-numeric: tabular-nums;
}

.page-content table:not(.sin-tema) tbody tr:last-child td { border-bottom: none !important; }
.page-content table:not(.sin-tema) tbody tr:hover { background: #fafcfd; }

/* ---------- Tarjetas del selector ---------- */

.selector-fila { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; }

.selector-tarjeta {
	flex: 1 1 300px;
	max-width: 440px;
	display: block;
	border: 1px solid var(--sd-borde) !important;
	border-radius: var(--sd-radio) !important;
	padding: 26px 26px !important;
	text-decoration: none !important;
	color: inherit !important;
	background: var(--sd-superficie) !important;
	box-shadow: var(--sd-sombra);
	transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.selector-tarjeta:hover, .selector-tarjeta:focus {
	border-color: var(--sd-primario) !important;
	box-shadow: var(--sd-sombra-alta);
	transform: translateY(-2px);
}

.selector-tarjeta h2 { color: var(--sd-primario) !important; font-size: 19px !important; margin: 0 0 10px; }
.selector-tarjeta p { color: var(--sd-tinta-2) !important; font-size: 14px; margin: 0; }
.selector-tarjeta .selector-detalle { display: block; margin-top: 12px; color: var(--sd-apagado) !important; font-size: 13px; }

/* ---------- Avisos y estados ---------- */

.sd-alerta { border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid transparent; }
.sd-alerta-error { background: var(--sd-error-suave); border-color: #ecc8c8; color: var(--sd-error); }
.sd-alerta-aviso { background: var(--sd-aviso-suave); border-color: #ecd9ae; color: var(--sd-aviso); }
.sd-alerta-ok { background: var(--sd-ok-suave); border-color: #bfe0d0; color: var(--sd-ok); }

.sd-estado-ok { color: var(--sd-ok); font-weight: 500; }
.sd-estado-apagado { color: var(--sd-apagado); }
.sd-estado-error { color: var(--sd-error); font-weight: 500; }
.sd-estado-aviso { color: var(--sd-aviso); font-weight: 500; }

/* ---------- Panel de instrucciones de las practicas ---------- */

.panel-instrucciones, .instrucciones { border-radius: var(--sd-radio); overflow: hidden; }

/* ---------- Detalles heredados que se apagan ---------- */

#page-loader .dot { background: var(--sd-primario) !important; }

/* El recuadro azul de titulos antiguos pasa a acento lateral sobrio */
.page-title {
	border-left: 4px solid var(--sd-primario);
	padding-left: 14px;
}

/* ---------- Paneles genericos ---------- */

.panel, .panel-default {
	background: var(--sd-superficie) !important;
	border: 1px solid var(--sd-borde) !important;
	border-radius: var(--sd-radio) !important;
	box-shadow: var(--sd-sombra) !important;
}

/* ---------- Login ---------- */

#login-page .login-bg { display: none; }

#login-page .panel {
	max-width: 460px;
	margin: 48px auto 0;
}

#login-page h2 {
	color: var(--sd-tinta) !important;
	font-size: 22px !important;
	font-weight: 600 !important;
	margin: 8px 0 18px;
}

#login-page .login-logo img { max-height: 52px; margin: 12px 0 0; }

#login-page .btn-primary { width: 100%; padding: 10px 16px; font-size: 15px; }

#login-page .login-form a { font-size: 14px; }

/* ---------- Menu lateral ---------- */

#left-menu {
	background: #123240 !important;
}

#left-menu a {
	color: #cfe0e8 !important;
	transition: background .15s ease, color .15s ease;
}

#left-menu a:hover, #left-menu a:focus,
#left-menu .active > a {
	background: rgba(255, 255, 255, .08) !important;
	color: #ffffff !important;
}

/* ---------- Fieldset como tarjeta ---------- */

fieldset legend {
	background: transparent !important;
}

/* =========================================================================
   MODO OSCURO
   El boton de la esquina (assets/js/tema.js) fija data-tema en <html> y lo
   guarda en el navegador. Sin eleccion explicita, manda el ajuste del
   sistema operativo.
   ========================================================================= */

:root[data-tema="oscuro"] {
	--sd-fondo: #10181f;
	--sd-superficie: #182430;
	--sd-tinta: #e6ecf1;
	--sd-tinta-2: #b7c3cd;
	--sd-apagado: #8395a3;
	--sd-borde: #2b3a47;
	--sd-borde-suave: #223140;
	--sd-primario: #4fb3d4;
	--sd-primario-oscuro: #7ecbe4;
	--sd-primario-suave: #143240;
	--sd-ok: #5cc396;
	--sd-ok-suave: #14302a;
	--sd-aviso: #d9ad5e;
	--sd-aviso-suave: #322815;
	--sd-error: #e08e8e;
	--sd-error-suave: #35201f;
	--sd-sombra: 0 1px 3px rgba(0, 0, 0, .4);
	--sd-sombra-alta: 0 4px 16px rgba(0, 0, 0, .5);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) {
		--sd-fondo: #10181f;
		--sd-superficie: #182430;
		--sd-tinta: #e6ecf1;
		--sd-tinta-2: #b7c3cd;
		--sd-apagado: #8395a3;
		--sd-borde: #2b3a47;
		--sd-borde-suave: #223140;
		--sd-primario: #4fb3d4;
		--sd-primario-oscuro: #7ecbe4;
		--sd-primario-suave: #143240;
		--sd-ok: #5cc396;
		--sd-ok-suave: #14302a;
		--sd-aviso: #d9ad5e;
		--sd-aviso-suave: #322815;
		--sd-error: #e08e8e;
		--sd-error-suave: #35201f;
		--sd-sombra: 0 1px 3px rgba(0, 0, 0, .4);
		--sd-sombra-alta: 0 4px 16px rgba(0, 0, 0, .5);
	}
}

/* Ajustes que las variables no cubren solas */

body { color: var(--sd-tinta) !important; }

h1, h2, h3, h4, h5, .page-title { color: var(--sd-tinta) !important; }

p, td, li, label, span { color: inherit; }

#main-header, #main-footer {
	background: var(--sd-superficie) !important;
	border-color: var(--sd-borde) !important;
}

#main-footer, #main-footer * { color: var(--sd-apagado) !important; }
#main-footer a { color: var(--sd-primario) !important; }

.page-content table:not(.sin-tema) thead tr { background: var(--sd-fondo) !important; }
.page-content table:not(.sin-tema) tbody tr:hover { background: var(--sd-primario-suave) !important; }

.btn-primary { color: #ffffff !important; }

:root[data-tema="oscuro"] .btn-primary,
:root[data-tema="oscuro"] .btn-primary:hover { color: #0c1319 !important; }
@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) .btn-primary,
	:root:not([data-tema="claro"]) .btn-primary:hover { color: #0c1319 !important; }
}

/* El menu lateral ya es oscuro; en modo oscuro se funde con el resto */
:root[data-tema="oscuro"] #left-menu { background: #0c1319 !important; }
@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) #left-menu { background: #0c1319 !important; }
}

/* Boton flotante para cambiar de tema */
#sd-cambio-tema {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9999;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--sd-borde);
	background: var(--sd-superficie);
	color: var(--sd-tinta-2);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--sd-sombra-alta);
	transition: transform .15s ease;
}
#sd-cambio-tema:hover { transform: scale(1.08); }


/* ---------- Logotipo nuevo (SVG en linea, sin fondo) ---------- */

.sd-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none !important;
	color: var(--sd-tinta);
}

.sd-logo svg { height: 30px; width: auto; display: block; }

.sd-logo-sonda { fill: var(--sd-tinta); }
.sd-logo-onda { stroke: var(--sd-primario); }
.sd-logo-diana { fill: var(--sd-primario); }

.sd-logo-texto {
	font-family: var(--sd-fuente);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: -0.01em;
	color: var(--sd-tinta);
}
.sd-logo-texto b { color: var(--sd-primario); font-weight: 600; }

#header-logo { display: flex; align-items: center; height: 100%; }

#login-page .sd-logo { justify-content: center; width: 100%; margin: 20px 0 4px; }
#login-page .sd-logo svg { height: 46px; }
#login-page .sd-logo-texto { font-size: 32px; }

/* ---------- Texto general adaptado al tema ---------- */

.page-content { color: var(--sd-tinta-2); }
.page-content p, .page-content li, .page-content label, .page-content legend + * {
	color: var(--sd-tinta-2) !important;
}

/* ---------- Tablas antiguas de Bootstrap (listados de alumno) ---------- */

.page-content .table { background: var(--sd-superficie) !important; }
.page-content .table-striped > tbody > tr:nth-of-type(odd),
.page-content .table-striped > tbody > tr:nth-of-type(even) {
	background: var(--sd-superficie) !important;
}
.page-content .table-bordered,
.page-content .table-bordered td,
.page-content .table-bordered th {
	border-color: var(--sd-borde) !important;
}
.page-content .table td { color: var(--sd-tinta-2) !important; background: transparent !important; }
.page-content .table thead,
.page-content .table thead tr,
.page-content .table th {
	background: var(--sd-fondo) !important;
	color: var(--sd-apagado) !important;
}

/* ---------- Avisos antiguos de Bootstrap ---------- */

.page-content .alert {
	border-radius: var(--sd-radio) !important;
	border: 1px solid transparent !important;
}
.page-content .alert-warning { background: var(--sd-aviso-suave) !important; color: var(--sd-aviso) !important; }
.page-content .alert-danger { background: var(--sd-error-suave) !important; color: var(--sd-error) !important; }
.page-content .alert-success { background: var(--sd-ok-suave) !important; color: var(--sd-ok) !important; }
.page-content .alert h4, .page-content .alert p, .page-content .alert li {
	color: inherit !important;
}

/* ---------- Botones w3 de los listados de practicas ---------- */

.page-content .w3-btn {
	background: var(--sd-primario) !important;
	color: #ffffff !important;
	border-radius: 6px !important;
	box-shadow: none !important;
}
.page-content .w3-btn:hover { background: var(--sd-primario-oscuro) !important; }
:root[data-tema="oscuro"] .page-content .w3-btn { color: #0c1319 !important; }
@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) .page-content .w3-btn { color: #0c1319 !important; }
}

/* ---------- Conmutador de tema en la cabecera ---------- */

#main-header, #page-header { position: relative; }

#sd-cambio-tema.en-cabecera {
	position: absolute;
	top: 12px;
	bottom: auto;
	width: 36px;
	height: 36px;
	font-size: 16px;
	box-shadow: none;
}
#sd-cambio-tema.en-cabecera-admin {
	/* Justo a la derecha de la columna del menu (240px), lejos del logo
	   y del bloque de usuario */
	position: absolute;
	left: 252px;
	top: 10px;
}
#sd-cambio-tema.en-cabecera-curso { right: 16px; }

/* Tarjetas del selector de masteres: etiqueta grande, nombre completo debajo */
.selector-etiqueta {
	font-size: 26px !important;
	letter-spacing: .04em;
}
.selector-nombre-completo {
	color: var(--sd-apagado) !important;
	font-size: 13px !important;
	line-height: 1.45;
	margin: 0 !important;
}

/* ---------- Avisos de casos y practicas: estilo propio ---------- */

.page-content .alert {
	border-left: 4px solid var(--sd-borde) !important;
	padding: 14px 18px !important;
	box-shadow: var(--sd-sombra);
	margin-bottom: 14px;
}
.page-content .alert-warning { border-left-color: var(--sd-aviso) !important; }
.page-content .alert-danger { border-left-color: var(--sd-error) !important; }
.page-content .alert-success { border-left-color: var(--sd-ok) !important; }

.page-content .alert .alert-heading {
	font-size: 12.5px !important;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 600 !important;
	margin: 0 0 6px !important;
}

/* ---------- Instrucciones de las practicas (list-group) ---------- */

.page-content .list-group {
	border: 1px solid var(--sd-borde);
	border-radius: var(--sd-radio);
	overflow: hidden;
	background: var(--sd-superficie);
	box-shadow: var(--sd-sombra);
	margin-bottom: 16px;
}

.page-content .list-group-item {
	background: var(--sd-superficie) !important;
	border: none !important;
	border-bottom: 1px solid var(--sd-borde-suave) !important;
	color: var(--sd-tinta-2) !important;
	padding: 11px 16px !important;
	line-height: 1.55;
}
.page-content .list-group-item:last-child { border-bottom: none !important; }

.page-content .list-group-item.active {
	background: var(--sd-primario-suave) !important;
	color: var(--sd-primario) !important;
	font-weight: 600;
	font-size: 12.5px !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--sd-borde) !important;
	text-shadow: none !important;
}

/* ---------- Preguntas y respuestas de los casos clinicos ---------- */
/* Los bloques antiguos llevaban fondo claro fijo (#edeff5) y bordes rojo y
   verde fosforito: ilegibles en oscuro y estridentes en claro. */

.page-content .question,
.page-content .info,
.page-content .leftBarList {
	background: var(--sd-superficie) !important;
	color: var(--sd-tinta-2) !important;
	border: 1px solid var(--sd-borde) !important;
	border-left-width: 4px !important;
	border-radius: 0 6px 6px 0;
	padding: 10px 14px !important;
	font-style: normal !important;
}

.page-content .question {
	border-left-color: var(--sd-primario) !important;
	color: var(--sd-tinta) !important;
	font-weight: 500;
}

.page-content .info {
	border-left-color: var(--sd-ok) !important;
}

.page-content .leftBarList {
	background: var(--sd-fondo) !important;
	border-left-color: var(--sd-borde) !important;
	list-style: none;
}
.page-content .leftBarList:hover {
	border-left-color: var(--sd-primario) !important;
}

.page-content .custom-control-label {
	color: var(--sd-tinta-2) !important;
	font-weight: 400;
}

/* ---------- Simulador de bloqueos: las dos pantallas siempre juntas ---------- */
/* Antes, por debajo de ~1280px se apilaban y habia que hacer scroll para ver
   la ecografia mientras se movia el transductor. Ahora comparten fila y se
   escalan (Phaser recalcula la entrada de raton al escalar el lienzo). */

#faseEcografo, #faseBloqueo {
	display: flex !important;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-start;
}
#faseEcografo[style*="display: none"], #faseBloqueo[style*="display: none"] {
	display: none !important;
}

#pantallaEcografo1, #pantallaEcografo2,
#pantallaBloqueo1, #pantallaBloqueo2 {
	float: none !important;
	margin: 0 !important;
	flex: 1 1 300px;
	max-width: 463px;
	aspect-ratio: 463 / 395;
	border: 1px solid var(--sd-borde) !important;
	border-radius: 6px;
	padding: 0 !important;
	overflow: hidden;
	background: #000;
}
#pantallaEcografo1 canvas, #pantallaEcografo2 canvas,
#pantallaBloqueo1 canvas, #pantallaBloqueo2 canvas {
	display: block;
}

/* El resto de bloques de la fase ocupan la fila completa */
#faseEcografo > .col-md-10, #faseBloqueo > .col-md-10,
#faseEcografo > .row, #faseBloqueo > .row {
	flex: 0 0 100%;
	max-width: 100%;
}


/* ---------- Menu lateral plegado ---------- */
/* El plegado antiguo oculta los textos con color transparente; las reglas
   del tema lo rompian. Y su hover ponia el icono azul electrico con sombra. */

#left-menu.menu-hidden #left-menu-content > li a,
#left-menu.menu-hidden #left-menu-content > li.active a {
	color: transparent !important;
}

#left-menu.menu-hidden #left-menu-content > li a .glyphicon,
#left-menu.menu-hidden #left-menu-content > li.active a .glyphicon {
	color: #cfe0e8 !important;
}

#left-menu.menu-hidden #left-menu-content > li a:hover,
#left-menu.menu-hidden #left-menu-content > li.active a:hover {
	background: transparent !important;
	color: transparent !important;
}

#left-menu.menu-hidden #left-menu-content > li a:hover .glyphicon,
#left-menu.menu-hidden #left-menu-content > li.active a:hover .glyphicon {
	color: #ffffff !important;
	font-size: inherit !important;
	margin-left: 0 !important;
	text-shadow: none !important;
}

/* ---------- Logo de la Universidad en la cabecera ---------- */

#header-marcas {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	gap: 28px;
}
#header-marcas img {
	width: auto;
	/* Los archivos son blancos: en claro se oscurecen con filtro */
	filter: brightness(0.35);
	opacity: .95;
}
#header-usal { height: 42px; }
#header-uvirtual { height: 26px; }

:root[data-tema="oscuro"] #header-marcas img { filter: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) #header-marcas img { filter: none; }
}
@media (max-width: 980px) {
	#header-marcas { display: none; }
}

/* Logos institucionales en la cabecera de las paginas de practica
   (franja oscura: los archivos blancos van tal cual, sin filtro) */
.logo-practica { height: 40px; width: auto; vertical-align: middle; }
.logo-practica-uv { height: 24px; margin-left: 22px; }

/* Cabecera de las practicas: logos siempre visibles y pegados a la izquierda,
   en cualquier ancho de pantalla y en los dos simuladores */
#adaptable-page-header-wrapper #page-header {
	display: block !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 12px 18px !important;
}
#adaptable-page-header-wrapper .p-2 { padding: 0 !important; }
#adaptable-page-header-wrapper .d-none { display: block !important; }


/* Cabecera de las practicas: franja oscura fija en ambos temas, con los
   logotipos blancos (sin filtro) alineados a la izquierda */
#adaptable-page-header-wrapper,
#adaptable-page-header-wrapper #page-header {
	background: #123240 !important;
}
.logo-practica { filter: none !important; }

/* Quitar el UVirtual grande del centro de la cabecera de practicas:
   ya esta arriba a la izquierda junto al escudo */
.uvirtual-logo-extra { background-image: none !important; }

/* Banner de practicas mas fino: alto ajustado a los logos, sin la altura
   sobrante que dejaban los bloques internos de bootstrap */
#adaptable-page-header-wrapper #page-header {
	padding: 8px 18px !important;
}
#adaptable-page-header-wrapper .row { margin: 0 !important; }
#adaptable-page-header-wrapper .socialbox,
#adaptable-page-header-wrapper #course-header { display: none !important; }
#adaptable-page-header-wrapper .uvirtual-logo-extra { min-height: 0 !important; }

/* ---------- Avisos del simulador (sustituyen a los alert del navegador) ---------- */

.aviso-simulador {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	z-index: 2000;
	max-width: min(560px, calc(100vw - 32px));
	padding: 12px 18px;
	border-radius: 8px;
	background: var(--sd-superficie, #fff);
	color: var(--sd-tinta, #18242e);
	border: 1px solid var(--sd-borde, #d5dde2);
	border-left: 5px solid var(--sd-primario, #0b6e8e);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	font-weight: 500;
	animation: aviso-simulador-entra .25s ease-out;
}
.aviso-simulador-ok { border-left-color: var(--sd-ok, #177a52); }
.aviso-simulador-error { border-left-color: var(--sd-error, #a83a3c); }
@keyframes aviso-simulador-entra {
	from { opacity: 0; transform: translate(-50%, 12px); }
	to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Fase 1 del bloqueo: eleccion de material ---------- */

.material .page-title { margin-bottom: 4px !important; }
.material-subtitulo { color: var(--sd-apagado); font-size: 14px; margin: 0 0 18px; }

.pasos-practica {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	list-style: none;
	padding: 0;
	margin: 0 0 18px;
}
.pasos-practica li {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--sd-apagado);
	font-size: 14px;
	font-weight: 500;
}
.pasos-practica .paso-numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1.5px solid var(--sd-borde);
	background: var(--sd-superficie);
	font-size: 13px;
	font-weight: 600;
}
.pasos-practica .paso-activo { color: var(--sd-primario); }
.pasos-practica .paso-activo .paso-numero {
	background: var(--sd-primario);
	border-color: var(--sd-primario);
	color: #fff;
}

.material-intro { color: var(--sd-tinta-2); max-width: 640px; margin-bottom: 18px; }

.material-paneles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	max-width: 760px;
}
.material-panel {
	background: var(--sd-superficie);
	border: 1px solid var(--sd-borde);
	border-radius: var(--sd-radio);
	box-shadow: var(--sd-sombra);
	padding: 18px 20px 6px;
}
.material-panel h2 {
	font-size: 16px !important;
	color: var(--sd-primario) !important;
	margin: 0 0 14px !important;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--sd-borde-suave);
}
.material-panel .campo { margin-bottom: 14px; }
.material-panel .campo label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--sd-tinta-2);
	margin-bottom: 5px;
}
.material-select {
	display: block;
	width: 100%;
	max-width: 300px;
	height: 40px;
	padding: 6px 36px 6px 12px;
	font-size: 15px;
	line-height: 1.3;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236d7c89' stroke-width='1.8' stroke-linecap='round'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	cursor: pointer;
}
.material-select-corto { max-width: 140px; }
.campo-fila { display: flex; gap: 14px; flex-wrap: wrap; }
.campo-fila .campo { flex: 0 1 140px; }

.material-acciones {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 20px;
}
.material .alert { max-width: 760px; }

:root[data-tema="oscuro"] .material-select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%239fb0bd' stroke-width='1.8' stroke-linecap='round'/></svg>") !important;
}
.pasos-practica .paso-hecho { color: var(--sd-tinta-2); }
.pasos-practica .paso-hecho .paso-numero {
	background: var(--sd-primario-suave);
	border-color: var(--sd-primario-suave);
	color: var(--sd-primario);
}
:root[data-tema="oscuro"] .pasos-practica .paso-activo .paso-numero { color: #0c1319; }
/* En las practicas la cabecera es oscura siempre; el indicador va sobre el fondo de la pagina */
#faseEcografo .pasos-practica, #faseBloqueo .pasos-practica { margin-top: 4px; }

/* ---------- Fase 2 del bloqueo: ecografo ---------- */

/* Ventana ecografica: el borde acompana al estado de alineacion */
#pantallaEcografo2 { transition: box-shadow .25s ease, border-color .25s ease; }
#pantallaEcografo2.plano-cerca { border-color: #f0c419 !important; }
#pantallaEcografo2.plano-correcto {
	border-color: #5ad06a !important;
	box-shadow: 0 0 0 3px rgba(90, 208, 106, .35);
}

/* Franja compacta bajo las ventanas: pasos en linea y botones */
.franja-fase {
	flex: 0 0 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
	margin-top: 2px;
	padding: 10px 14px;
	background: var(--sd-superficie);
	border: 1px solid var(--sd-borde);
	border-radius: var(--sd-radio);
}
.pasos-cortos {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 420px;
}
.pasos-cortos li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13.5px;
	line-height: 1.35;
	color: var(--sd-tinta-2);
	max-width: 260px;
}
.pasos-cortos li .t { flex: 1 1 auto; }
.pasos-cortos li .n {
	flex: 0 0 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--sd-primario-suave);
	color: var(--sd-primario);
	font-size: 12px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}
.franja-botones { display: flex; gap: 8px; flex: 0 0 auto; }
.franja-botones .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Portada de una practica de bloqueo ---------- */

.portada-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--sd-superficie);
	border: 1px solid var(--sd-borde);
	color: var(--sd-tinta-2);
	font-size: 13px;
	line-height: 1.3;
}
.chip strong { color: var(--sd-tinta); font-weight: 600; }
.chip-fecha { border-color: var(--sd-primario-suave); background: var(--sd-primario-suave); color: var(--sd-primario); }
.chip-fecha strong { color: var(--sd-primario); }
.chip-aviso { background: var(--sd-aviso-suave); border-color: var(--sd-aviso-suave); color: var(--sd-aviso); font-weight: 500; }

.niveles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
	max-width: 900px;
}
.nivel {
	display: flex;
	flex-direction: column;
	background: var(--sd-superficie);
	border: 1px solid var(--sd-borde);
	border-radius: var(--sd-radio);
	box-shadow: var(--sd-sombra);
	padding: 18px 20px;
}
.nivel header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.nivel h2 { font-size: 16px !important; margin: 0 !important; color: var(--sd-primario) !important; }
.nivel-estado {
	font-size: 12px;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--sd-borde-suave);
	color: var(--sd-apagado);
	white-space: nowrap;
}
.nivel-estado-ok { background: var(--sd-ok-suave); color: var(--sd-ok); }
.nivel-desc { color: var(--sd-tinta-2); font-size: 13.5px; line-height: 1.4; margin: 0 0 14px; min-height: 38px; }
.nivel-datos { display: flex; gap: 22px; margin: 0 0 16px; }
.nivel-datos div { display: flex; flex-direction: column; }
.nivel-datos dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--sd-apagado); font-weight: 600; }
.nivel-datos dd { margin: 2px 0 0; font-size: 22px; font-weight: 600; color: var(--sd-tinta); line-height: 1.1; }
.nivel .btn { align-self: flex-start; margin-top: auto; }
.nivel-finalizado { border-color: var(--sd-ok-suave); }

.nota-final {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	max-width: 900px;
	margin-top: 16px;
	padding: 14px 20px;
	border-radius: var(--sd-radio);
	background: var(--sd-primario-suave);
	color: var(--sd-primario);
}
.nota-final span { font-weight: 500; }
.nota-final strong { font-size: 24px; }
.nota-final small { flex: 1 1 100%; color: var(--sd-tinta-2); font-size: 13px; }

/* ---------- Fase 3 del bloqueo: interfaz nueva ---------- */

#faseBloqueo { display: block !important; }
#faseBloqueo[style*="display: none"] { display: none !important; }

.bloqueo-barra {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.bloqueo-barra-derecha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.bloqueo-cuerpo { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.bloqueo-eco { flex: 1 1 420px; min-width: 280px; max-width: 640px; }
.bloqueo-lateral { flex: 0 0 300px; display: flex; flex-direction: column; gap: 10px; }
#faseBloqueo #pantallaBloqueo1 { max-width: 100% !important; width: 100%; flex: none; }
#faseBloqueo #pantallaBloqueo2 { width: 100%; flex: none; transition: box-shadow .25s ease, border-color .25s ease; }
#pantallaBloqueo2.resultado-ko { border-color: var(--sd-error) !important; box-shadow: 0 0 0 3px var(--sd-error-suave); }
#pantallaBloqueo2.resultado-ok { border-color: var(--sd-ok) !important; box-shadow: 0 0 0 3px var(--sd-ok-suave); }

/* Chips para mostrar u ocultar estructuras (nivel facil) */
.chips-estructuras { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip-toggle {
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid var(--sd-borde);
	background: var(--sd-superficie);
	color: var(--sd-tinta-2);
	font-family: var(--sd-fuente);
	font-size: 13px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.chip-toggle[aria-pressed="true"] { background: var(--sd-primario); border-color: var(--sd-primario); color: #fff; }
.chip-toggle[disabled] { opacity: .4; cursor: default; }

/* Mando de la aguja */
.mando-aguja {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	background: var(--sd-superficie);
	border: 1px solid var(--sd-borde);
	border-radius: var(--sd-radio);
	box-shadow: var(--sd-sombra);
}
.mando-aguja button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: 52px;
	padding: 6px 4px;
	border: 1px solid var(--sd-borde);
	border-radius: 6px;
	background: var(--sd-fondo);
	color: var(--sd-tinta-2);
	font-family: var(--sd-fuente);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.1;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
	transition: background .12s ease, border-color .12s ease;
}
.mando-aguja button svg { width: 22px; height: 22px; pointer-events: none; color: var(--sd-primario); }
.mando-aguja button:active svg { color: var(--sd-primario-oscuro); }
.mando-aguja .mando-inyectar svg { color: inherit; }
.mando-aguja button:hover { border-color: var(--sd-primario); }
.mando-aguja button:active { background: var(--sd-primario-suave); border-color: var(--sd-primario); color: var(--sd-primario); }
.mando-aguja button[disabled] { opacity: .4; cursor: not-allowed; }
.mando-fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mando-cruz {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas: ". arriba lento" "izq abajo der";
	gap: 6px;
}
.mando-arriba { grid-area: arriba; }
.mando-izq { grid-area: izq; }
.mando-abajo { grid-area: abajo; }
.mando-der { grid-area: der; }
.mando-lento { grid-area: lento; }
.mando-aguja .mando-inyectar {
	flex-direction: row;
	gap: 8px;
	min-height: 44px;
	background: var(--sd-primario);
	border-color: var(--sd-primario);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
}
.mando-aguja .mando-inyectar:active { background: var(--sd-primario-oscuro); color: #fff; }
:root[data-tema="oscuro"] .mando-aguja .mando-inyectar { color: #0c1319; }

/* Resultado del intento */
.aviso-bloqueo {
	margin-top: 12px;
	padding: 12px 16px;
	border-radius: var(--sd-radio);
	border-left: 5px solid var(--sd-primario);
	background: var(--sd-superficie);
	color: var(--sd-tinta);
	font-size: 14px;
	line-height: 1.5;
}
.aviso-bloqueo-ko { background: var(--sd-error-suave); color: var(--sd-error); border-color: var(--sd-error); }
.aviso-bloqueo-ok { background: var(--sd-ok-suave); color: var(--sd-ok); border-color: var(--sd-ok); }
.aviso-bloqueo .btn { margin-left: 10px; vertical-align: baseline; }

/* Pasos del bloqueo */
.bloqueo-pasos {
	margin-top: 14px;
	padding: 12px 16px;
	background: var(--sd-superficie);
	border: 1px solid var(--sd-borde);
	border-radius: var(--sd-radio);
}
.bloqueo-pasos-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.bloqueo-pasos h3 { font-size: 15px !important; margin: 0 !important; color: var(--sd-primario) !important; }
.bloqueo-pasos-cabecera span { font-size: 12.5px; color: var(--sd-apagado); }
.lista-pasos-bloqueo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.page-content .lista-pasos-bloqueo > li, .lista-pasos-bloqueo > li {
	position: relative;
	margin: 0 !important;
	padding: 8px 12px 8px 42px !important;
	border: 1px solid var(--sd-borde-suave) !important;
	border-radius: 6px !important;
	background: var(--sd-fondo) !important;
	color: var(--sd-tinta-2) !important;
	font-size: 13.5px;
	line-height: 1.45;
}
.lista-pasos-bloqueo > li::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 10px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--sd-borde);
	box-sizing: border-box;
	font-size: 10px;
	font-weight: 700;
	line-height: 12px;
	text-align: center;
	color: #fff;
}
.page-content .lista-pasos-bloqueo > li.paso-ok, .lista-pasos-bloqueo > li.paso-ok { color: var(--sd-ok) !important; background: var(--sd-ok-suave) !important; border-color: var(--sd-ok-suave) !important; }
.lista-pasos-bloqueo > li.paso-ok::before { content: "\\2713"; background: var(--sd-ok); border-color: var(--sd-ok); }
.page-content .lista-pasos-bloqueo > li.paso-ko, .lista-pasos-bloqueo > li.paso-ko { color: var(--sd-error) !important; background: var(--sd-error-suave) !important; border-color: var(--sd-error-suave) !important; }
.lista-pasos-bloqueo > li.paso-ko::before { content: "\\2715"; background: var(--sd-error); border-color: var(--sd-error); }

.bloqueo-pie { margin-top: 12px; }

/* Ayuda del mando */
.tabla-teclas { width: 100%; border-collapse: collapse; }
.tabla-teclas td { padding: 7px 10px; border-bottom: 1px solid var(--sd-borde-suave); vertical-align: top; font-size: 14px; }
.tabla-teclas td:first-child { white-space: nowrap; width: 40%; }
.tabla-teclas kbd {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 5px;
	border: 1px solid var(--sd-borde);
	border-bottom-width: 2px;
	background: var(--sd-fondo);
	color: var(--sd-tinta);
	font-family: var(--sd-fuente);
	font-size: 12.5px;
	box-shadow: none;
}
.ayuda-nota { margin: 12px 0 0; font-size: 13px; color: var(--sd-tinta-2); }

/* El lienzo no participa en el layout: el contenedor manda (ancho por flex,
   alto por aspect-ratio) y Phaser ajusta el lienzo dentro. Evita el bucle
   contenedor -> lienzo -> contenedor. */
#pantallaEcografo1, #pantallaEcografo2, #pantallaBloqueo1, #pantallaBloqueo2 { position: relative; min-width: 0; }
#pantallaEcografo1 canvas, #pantallaEcografo2 canvas, #pantallaBloqueo1 canvas, #pantallaBloqueo2 canvas {
	position: absolute;
	left: 0;
	top: 0;
}
.bloqueo-lateral { width: 300px; max-width: 300px; min-width: 0; }
.bloqueo-eco { min-width: 0; }
.bloqueo-cuerpo .bloqueo-pasos { flex: 1 1 240px; min-width: 220px; margin-top: 0; align-self: stretch; }
.bloqueo-cuerpo .bloqueo-pasos-cabecera { flex-direction: column; gap: 2px; }
.aviso-bloqueo { margin: 0 0 12px; }

/* ---------- Fase 3: consola del ecografo (siempre oscura) ---------- */

.consola {
	--c-fondo: #0b1319;
	--c-panel: #121e27;
	--c-panel-2: #182732;
	--c-borde: #24384a;
	--c-texto: #e6eef3;
	--c-apagado: #8ea3b3;
	--c-acento: #2fb5d6;
	--c-acento-suave: rgba(47, 181, 214, .16);
	--c-ok: #4fcf6e;
	--c-error: #ef5a5a;
	--c-aviso: #e8c84a;
	background: var(--c-fondo);
	color: var(--c-texto);
	border: 1px solid var(--c-borde);
	border-radius: 12px;
	padding: 12px;
	font-family: var(--sd-fuente);
}
.consola-barra {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.consola-barra-grupo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.consola-dato {
	font-size: 12.5px;
	color: var(--c-apagado);
	padding: 4px 10px;
	border: 1px solid var(--c-borde);
	border-radius: 999px;
	background: var(--c-panel);
}
.consola-dato-aviso { color: var(--c-aviso); border-color: rgba(232, 200, 74, .4); }
.consola-btn {
	font-family: var(--sd-fuente);
	font-size: 13px;
	font-weight: 500;
	color: var(--c-texto);
	background: var(--c-panel);
	border: 1px solid var(--c-borde);
	border-radius: 8px;
	padding: 7px 12px;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease;
}
.consola-btn:hover { border-color: var(--c-acento); background: var(--c-panel-2); }

.consola-cuerpo { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.consola-pantalla {
	position: relative;
	flex: 1 1 520px;
	min-width: 0;
	background: #000;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--c-borde);
}
/* La pantalla ocupa su columna; el lienzo se escala dentro (hasta un 30% mas que el nativo). */
#faseBloqueo #pantallaBloqueo2 {
	width: 100%;
	max-width: none !important;
	border: none !important;
	border-radius: 0;
	background: #000;
	margin: 0 auto;
}
#faseBloqueo .consola-pantalla.resultado-ko { border-color: var(--c-error); box-shadow: 0 0 0 3px rgba(239, 90, 90, .35); }
#faseBloqueo .consola-pantalla.resultado-ok { border-color: var(--c-ok); box-shadow: 0 0 0 3px rgba(79, 207, 110, .35); }
#faseBloqueo #pantallaBloqueo2.resultado-ko, #faseBloqueo #pantallaBloqueo2.resultado-ok { box-shadow: none; }

.hud {
	position: absolute;
	pointer-events: none;
	color: var(--c-texto);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
	font-size: 13px;
	line-height: 1.2;
}
.hud-etiqueta {
	display: block;
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-apagado);
	margin-bottom: 2px;
}
.hud-sup-izq { left: 12px; top: 10px; max-width: 55%; }
.hud-valor-texto { font-size: 12.5px; font-weight: 500; }
.hud-inf-izq { left: 12px; bottom: 10px; display: flex; gap: 22px; }
.hud-inf-izq strong { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hud-pista {
	right: 12px;
	top: 10px;
	max-width: 42%;
	text-align: right;
	font-size: 11px;
	color: var(--c-apagado);
	opacity: .9;
}
.pip {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 34%;
	min-width: 150px;
	max-width: 240px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 8px;
	overflow: hidden;
	background: #000;
	cursor: zoom-in;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .6);
	transition: width .2s ease, max-width .2s ease;
}
.pip.pip-grande { width: 62%; max-width: 62%; cursor: zoom-out; }
#faseBloqueo #pantallaBloqueo1 { width: 100%; max-width: none !important; border: none !important; border-radius: 0; margin: 0; }
.pip-etiqueta {
	position: absolute;
	left: 8px;
	top: 6px;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-apagado);
	text-shadow: 0 1px 2px #000;
}

.consola-lateral {
	flex: 0 0 280px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
.consola-inyectar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 13px 14px;
	border-radius: 10px;
	border: 1px solid var(--c-acento);
	background: var(--c-acento);
	color: #06131a;
	font-family: var(--sd-fuente);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: filter .12s ease;
}
.consola-inyectar:hover { filter: brightness(1.08); }
.consola-inyectar:active { filter: brightness(.92); }
.consola-inyectar[disabled] { opacity: .35; cursor: not-allowed; filter: none; }
.consola-inyectar kbd {
	margin-left: auto;
	font-family: var(--sd-fuente);
	font-size: 11px;
	font-weight: 500;
	padding: 2px 7px;
	border-radius: 5px;
	background: rgba(0, 0, 0, .22);
	color: #06131a;
}
.consola-bloque {
	background: var(--c-panel);
	border: 1px solid var(--c-borde);
	border-radius: 10px;
	padding: 10px 12px;
}
.consola-bloque h4 {
	margin: 0 0 8px !important;
	font-size: 11px !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-apagado) !important;
	font-weight: 600;
}
.consola-bloque h4 small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.capas { display: flex; flex-wrap: wrap; gap: 6px; }
.capa {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 10px 5px 8px;
	border-radius: 999px;
	border: 1px solid var(--c-borde);
	background: var(--c-panel-2);
	color: var(--c-apagado);
	font-family: var(--sd-fuente);
	font-size: 12.5px;
	cursor: pointer;
}
.capa i { width: 10px; height: 10px; border-radius: 50%; background: var(--capa); opacity: .45; }
.capa[aria-pressed="true"] { color: var(--c-texto); border-color: var(--capa); }
.capa[aria-pressed="true"] i { opacity: 1; box-shadow: 0 0 6px var(--capa); }

.consola .lista-pasos-bloqueo { gap: 6px; }
.consola .lista-pasos-bloqueo > li, .page-content .consola .lista-pasos-bloqueo > li {
	background: var(--c-panel-2) !important;
	border-color: var(--c-borde) !important;
	color: var(--c-texto) !important;
	font-size: 13px;
	padding: 8px 10px 8px 36px !important;
}
.consola .lista-pasos-bloqueo > li::before { left: 10px; border-color: var(--c-apagado); }
.consola .lista-pasos-bloqueo > li.paso-ok, .page-content .consola .lista-pasos-bloqueo > li.paso-ok { color: var(--c-ok) !important; background: rgba(79, 207, 110, .12) !important; border-color: rgba(79, 207, 110, .4) !important; }
.consola .lista-pasos-bloqueo > li.paso-ok::before { background: var(--c-ok); border-color: var(--c-ok); color: #06131a; }
.consola .lista-pasos-bloqueo > li.paso-ko, .page-content .consola .lista-pasos-bloqueo > li.paso-ko { color: var(--c-error) !important; background: rgba(239, 90, 90, .12) !important; border-color: rgba(239, 90, 90, .4) !important; }
.consola .lista-pasos-bloqueo > li.paso-ko::before { background: var(--c-error); border-color: var(--c-error); }

.mando-plegable summary {
	cursor: pointer;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-apagado);
	font-weight: 600;
	list-style: none;
}
.mando-plegable summary::-webkit-details-marker { display: none; }
.mando-plegable summary::after { content: "+"; float: right; font-size: 14px; }
.mando-plegable[open] summary::after { content: "–"; }
.mando-plegable .mando-aguja { margin-top: 10px; padding: 0; background: transparent; border: none; box-shadow: none; }
.consola .mando-aguja button {
	background: var(--c-panel-2);
	border-color: var(--c-borde);
	color: var(--c-apagado);
	min-height: 46px;
}
.consola .mando-aguja button svg { color: var(--c-acento); }
.consola .mando-aguja button:hover { border-color: var(--c-acento); color: var(--c-texto); }
.consola .mando-aguja button:active { background: var(--c-acento-suave); }

.consola-salir { align-self: flex-start; }

.consola .aviso-bloqueo { margin: 0 0 10px; background: var(--c-panel); color: var(--c-texto); border-color: var(--c-acento); }
.consola .aviso-bloqueo-ko { color: var(--c-error); border-color: var(--c-error); background: rgba(239, 90, 90, .1); }
.consola .aviso-bloqueo-ok { color: var(--c-ok); border-color: var(--c-ok); background: rgba(79, 207, 110, .1); }
.consola .aviso-bloqueo .consola-btn { margin-left: 10px; }

@media (max-width: 900px) {
	.consola-lateral { flex: 1 1 100%; }
	.hud-pista { display: none; }
}
.consola-columna { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.consola-columna .consola-pantalla { flex: none; width: 100%; }
.consola-pista { margin: 0; font-size: 12px; color: var(--c-apagado); line-height: 1.4; }

/* Resultado del intento en la consola: acciones y resumen */
.aviso-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.consola .aviso-bloqueo .consola-btn { margin-left: 0; }
.consola-btn-acento { background: var(--c-acento) !important; border-color: var(--c-acento) !important; color: #06131a !important; font-weight: 600; }
.aviso-nota-fin { font-size: 13px; color: var(--c-apagado); }
.resumen-intento {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 10px 0 0;
	color: var(--c-texto);
}
.resumen-intento div { display: flex; flex-direction: column; }
.resumen-intento dt { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-apagado); font-weight: 600; }
.resumen-intento dd { margin: 2px 0 0; font-size: 18px; font-weight: 600; }
.resumen-intento dd small { font-size: 12px; font-weight: 400; color: var(--c-apagado); }

/* ---------- Temario del bloqueo (teoria y debriefing) ---------- */

.temario-panel { margin: 0 0 12px; }
.portada-teoria { max-width: 900px; margin-top: 16px; }
.portada-teoria .temario-panel {
	margin-top: 12px;
	padding: 16px 20px;
	background: var(--sd-superficie);
	border: 1px solid var(--sd-borde);
	border-radius: var(--sd-radio);
}
.temario { font-size: calc(14.5px * var(--temario-escala, 1)); line-height: 1.55; position: relative; }
.temario-cabecera h3 { font-size: calc(18px * var(--temario-escala, 1)) !important; margin: 0 0 4px !important; padding-right: 90px; }
.temario-fuente { font-size: 12px; color: var(--sd-apagado); margin: 0 0 10px; }
.temario-cargando { color: var(--sd-apagado); margin: 0; }
.temario h4 { font-size: calc(13px * var(--temario-escala, 1)) !important; letter-spacing: .08em; text-transform: uppercase; margin: 16px 0 6px !important; color: var(--sd-primario) !important; }
.temario h4:first-child { margin-top: 0 !important; }
.temario h5 { font-size: calc(14px * var(--temario-escala, 1)) !important; font-weight: 600; margin: 12px 0 4px !important; }
.temario p { margin: 0 0 8px; }
.temario ul { margin: 0 0 8px; padding-left: 20px; list-style: disc; }
.temario li { margin-bottom: 4px; }
.temario-seccion { border-top: 1px solid var(--sd-borde-suave); padding: 8px 0; }
.temario-seccion summary { cursor: pointer; font-weight: 600; color: var(--sd-tinta); list-style: none; padding: 4px 0; }
.temario-seccion summary::-webkit-details-marker { display: none; }
.temario-seccion summary::before { content: "+"; display: inline-block; width: 18px; color: var(--sd-primario); font-weight: 700; }
.temario-seccion[open] summary::before { content: "–"; }
.temario-cuerpo { padding: 4px 0 4px 18px; }
.temario-figura { margin: 10px 0 14px; max-width: 560px; }
.temario-figura img { display: block; width: 100%; border-radius: 6px; border: 1px solid var(--sd-borde); background: #000; }
.temario-figura figcaption { font-size: calc(12.5px * var(--temario-escala, 1)); color: var(--sd-tinta-2); margin-top: 6px; line-height: 1.4; }
.temario-leyenda { display: block; color: var(--sd-apagado); margin-top: 2px; }
.temario-figuras { display: flex; flex-wrap: wrap; gap: 14px; }
.temario-figuras .temario-figura { flex: 1 1 260px; max-width: 420px; }
.temario-ver-todo { margin-left: 8px; font-weight: 600; }

/* dentro de la consola oscura */
.consola .temario { color: var(--c-texto); }
.consola .temario h4 { color: var(--c-acento) !important; }
.consola .temario h5, .consola .temario-seccion summary, .consola .temario-cabecera h3 { color: var(--c-texto) !important; }
.consola .temario-fuente, .consola .temario-cargando, .consola .temario-figura figcaption { color: var(--c-apagado); }
.consola .temario-seccion { border-color: var(--c-borde); }
.consola .temario-seccion summary::before { color: var(--c-acento); }
.consola .temario-figura img { border-color: var(--c-borde); }
.consola .temario-ver-todo { color: var(--c-acento); }
.consola .temario p, .consola .temario li, .page-content .consola .temario p, .page-content .consola .temario li { color: var(--c-texto) !important; }
.consola #debriefingBloqueo { margin: 12px 0 0; }


/* ---------- acceso libre: grupos de prácticas por parte del libro ---------- */
.grupo-practicas {
	background: var(--sd-superficie);
	border: 1px solid var(--sd-borde);
	border-radius: var(--sd-radio);
	margin-bottom: 14px;
	overflow: hidden;
}
.grupo-practicas-cabecera {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 12px 16px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.grupo-practicas-suelto .grupo-practicas-cabecera { cursor: default; }
.grupo-practicas-cabecera::-webkit-details-marker { display: none; }
details.grupo-practicas > .grupo-practicas-cabecera::before {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--sd-primario);
	border-bottom: 2px solid var(--sd-primario);
	transform: rotate(-45deg);
	transition: transform .15s;
	flex: none;
	position: relative;
	top: -2px;
}
details.grupo-practicas[open] > .grupo-practicas-cabecera::before { transform: rotate(45deg); top: -4px; }
.grupo-practicas-titulo { font-weight: 600; color: var(--sd-tinta); font-size: 1.05em; }
.grupo-practicas-nota { color: var(--sd-tinta-2); font-size: .85em; }
.grupo-practicas .tabla-practicas-libre { border-top: 1px solid var(--sd-borde); }
.grupo-practicas .tabla-practicas-libre thead th { color: var(--sd-tinta-2); font-weight: 500; font-size: .85em; }
.grupo-practicas .tabla-practicas-libre tbody tr:last-child td { border-bottom: 0; }
.grupo-practicas .tabla-practicas-libre td, .grupo-practicas .tabla-practicas-libre th { color: var(--sd-tinta); }

/* ---------- temario: botones de tamaño de letra ---------- */
.temario-zoom { position: absolute; top: 0; right: 0; display: flex; gap: 4px; }
.temario-zoom button {
	font: 600 12px/1 var(--sd-fuente, sans-serif);
	color: var(--sd-tinta-2);
	background: var(--sd-superficie);
	border: 1px solid var(--sd-borde);
	border-radius: 6px;
	padding: 5px 7px;
	cursor: pointer;
}
.temario-zoom button span { font-size: 11px; margin-left: 1px; }
.temario-zoom button:hover:not(:disabled) { color: var(--sd-primario); border-color: var(--sd-primario); }
.temario-zoom button:disabled { opacity: .4; cursor: default; }
.temario > .temario-zoom + h4 { margin-top: 0 !important; padding-right: 90px; }
.consola .temario-zoom button { color: var(--c-texto); background: transparent; border-color: var(--c-borde); }
.consola .temario-zoom button:hover:not(:disabled) { color: var(--c-acento); border-color: var(--c-acento); }

/* ---------- visor anatomico 3D (portada y consola) ---------- */
.visor3d-panel-contenedor { margin-top: 12px; }
.visor3d { display: grid; grid-template-columns: 1fr 236px; height: 560px; background: #0b1319; border: 1px solid #233340; border-radius: 10px; overflow: hidden; color: #e6edf2; font-family: var(--sd-fuente, "IBM Plex Sans", system-ui, sans-serif); }
.visor3d-lienzo { position: relative; min-width: 0; min-height: 0; }
.visor3d-lienzo canvas { width: 100% !important; height: 100% !important; display: block; }
.visor3d-panel { background: #111c24; border-left: 1px solid #233340; padding: 12px 14px 16px; overflow: auto; font-size: 12.5px; }
.visor3d-panel h4 { font-size: 13px !important; margin: 0 0 6px !important; font-weight: 600; color: #e6edf2 !important; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.visor3d-panel h5 { font-size: 10.5px !important; letter-spacing: .08em; text-transform: uppercase; color: #2fb5d6 !important; margin: 14px 0 6px !important; font-weight: 600; }
.visor3d-panel p { margin: 0 0 8px; color: #8fa3b1 !important; line-height: 1.4; font-size: 12px; }
.visor3d-panel label { display: flex; align-items: center; gap: 7px; padding: 3px 0; cursor: pointer; color: #e6edf2; font-weight: normal; margin: 0; font-size: 12.5px; }
.visor3d-panel label.visor3d-nivel { display: block; }
.visor3d-panel input[type=checkbox] { accent-color: #2fb5d6; width: 14px; height: 14px; margin: 0; }
.visor3d-panel input[type=range] { width: 100%; accent-color: #2fb5d6; display: block; margin-top: 4px; }
.visor3d-btn { display: block; width: 100%; text-align: left; background: #182632; color: #e6edf2; border: 1px solid #233340; border-radius: 7px; padding: 6px 9px; margin: 4px 0; cursor: pointer; font: inherit; font-size: 12.5px; }
.visor3d-btn:hover { border-color: #2fb5d6; }
.visor3d-btn-acento { background: #2fb5d6; color: #06131a; font-weight: 600; border-color: #2fb5d6; }
.visor3d-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.visor3d-fila .visor3d-btn { margin: 0; text-align: center; padding: 6px 4px; }
.visor3d-etiqueta { position: absolute; pointer-events: none; background: rgba(6,19,26,.92); color: #fff; border: 1px solid #2fb5d6; border-radius: 6px; padding: 4px 8px; font-size: 12px; white-space: nowrap; z-index: 5; }
.visor3d-seleccion { background: #182632; border: 1px solid #233340; border-radius: 8px; padding: 7px 10px; min-height: 40px; }
.visor3d-seleccion strong { display: block; font-size: 12.5px; color: #e6edf2; }
.visor3d-seleccion span { color: #8fa3b1; font-size: 11.5px; }
.visor3d-punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 2px; vertical-align: middle; }
.visor3d-nota { font-size: 11px !important; margin-top: 12px !important; }
.visor3d-cargando { color: var(--sd-apagado); margin: 8px 0; }
.portada-3d { max-width: 900px; margin-top: 10px; }
.consola #visor3dConsola { margin-top: 12px; padding: 0; background: transparent; border: 0; }
@media (max-width: 720px) { .visor3d { grid-template-columns: 1fr; grid-template-rows: 380px auto; height: auto; } .visor3d-panel { border-left: 0; border-top: 1px solid #233340; } }
.visor3d-plano { font-size: 11.5px; line-height: 1.35; margin: 4px 0 0; color: #8fa3b1; min-height: 16px; }
.visor3d-plano strong { color: #e6edf2; font-weight: 600; }

/* Visor 3D flotante sobre la consola (la ecografia y el 3D a la vez en pantalla) */
.visor3d-flotante { position: fixed; right: 18px; bottom: 18px; width: 620px; height: 470px; z-index: 1060; display: flex; flex-direction: column; background: #0b1319; border: 1px solid #2fb5d6; border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.55); overflow: hidden; resize: both; min-width: 360px; min-height: 260px; margin: 0 !important; padding: 0 !important; }
.visor3d-flotante[hidden] { display: none !important; }
.visor3d-flotante.visor3d-flotante-grande { width: min(980px, calc(100vw - 36px)); height: min(700px, calc(100vh - 36px)); }
.visor3d-flotante-barra { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; background: #111c24; border-bottom: 1px solid #233340; cursor: move; user-select: none; -webkit-user-select: none; touch-action: none; font-size: 12.5px; color: #e6edf2; flex: none; }
.visor3d-flotante-titulo { font-weight: 600; }
.visor3d-flotante-botones { display: flex; gap: 4px; flex-wrap: wrap; }
.visor3d-flotante-botones button { background: #182632; color: #e6edf2; border: 1px solid #233340; border-radius: 6px; padding: 3px 8px; font: inherit; font-size: 12px; line-height: 1.3; cursor: pointer; }
.visor3d-flotante-botones button:hover { border-color: #2fb5d6; }
.visor3d-flotante-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.visor3d-flotante-cuerpo > * { flex: 1; min-height: 0; }
.visor3d-flotante .visor3d { height: 100% !important; border: 0; border-radius: 0; }
.visor3d-flotante.visor3d-sin-controles .visor3d { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.visor3d-flotante.visor3d-sin-controles .visor3d-panel { display: none; }
@media (max-width: 720px) { .visor3d-flotante { left: 8px; right: 8px; bottom: 8px; width: auto; height: 62vh; } .visor3d-flotante .visor3d { grid-template-rows: 1fr auto; } }

.visor3d-plano-otro strong { color: #f0c419; }
.visor3d-panel input[type=range]::-webkit-slider-runnable-track { background: #233340; height: 4px; border-radius: 2px; }


/* ---------- Consola compacta: el simulador sube (Jorge, 5-9-2026) ----------
   Titulo, nivel y pasos en una sola fila; logos de la cabecera mas bajos. */
.practica-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; margin: 0 0 8px; }
.practica-cabecera-titulo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.practica-cabecera .page-title { font-size: 20px !important; margin: 0 !important; padding-left: 10px; line-height: 1.25; }
.practica-cabecera .material-subtitulo { margin: 0; font-size: 13px; }
.practica-cabecera .pasos-practica { margin: 0; gap: 6px 16px; }
.practica-cabecera .pasos-practica li { font-size: 13px; }
.practica-cabecera .pasos-practica .paso-numero { width: 22px; height: 22px; font-size: 12px; }
#faseEcografo .pasos-practica, #faseBloqueo .pasos-practica { margin-top: 0; }
#adaptable-page-header-wrapper #page-header { padding: 5px 18px !important; }
.logo-practica { height: 32px; }
.logo-practica-uv { height: 20px; margin-left: 18px; }
#sd-cambio-tema.en-cabecera-curso { width: 30px; height: 30px; }
.page-content { padding-top: 4px; }

/* ---------- Visor 3D acoplado: 2D y 3D en paralelo ----------
   El visor ocupa una franja fija a la derecha; la pagina (consola incluida) se
   desplaza a la izquierda. El boton ⇆ de la barra alterna con el modo flotante. */
body.con-visor3d-acoplado { --visor3d-acoplado-ancho: clamp(420px, 42vw, 960px); }
.visor3d-flotante.visor3d-acoplado { top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: var(--visor3d-acoplado-ancho, 42vw) !important; height: auto !important; border-radius: 0; border-width: 0 0 0 1px; resize: none; box-shadow: -8px 0 30px rgba(0,0,0,.45); }
.visor3d-flotante.visor3d-acoplado .visor3d-flotante-barra { cursor: default; }
body.con-visor3d-acoplado #main-wrapper,
body.con-visor3d-acoplado #adaptable-page-header-wrapper,
body.con-visor3d-acoplado #main-footer { padding-right: var(--visor3d-acoplado-ancho) !important; box-sizing: border-box; }
body.con-visor3d-acoplado #main-wrapper .container { width: auto !important; max-width: none !important; margin-left: 0 !important; }
body.con-visor3d-acoplado #sd-cambio-tema.en-cabecera { right: calc(var(--visor3d-acoplado-ancho) + 16px) !important; }
body.con-visor3d-acoplado .aviso-simulador { left: calc((100vw - var(--visor3d-acoplado-ancho)) / 2); }

/* Boton Doppler de la consola (activo = pulsado) */
.consola-btn[aria-pressed="true"] { border-color: var(--c-acento); background: var(--c-acento-suave); color: var(--c-texto); box-shadow: inset 0 0 0 1px var(--c-acento); }

/* ---------- Calidad del intento (indice orientativo 0-100) ---------- */
.calidad-intento { display: flex; gap: 16px; align-items: flex-start; margin: 12px 0 4px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--c-borde); --calidad: var(--c-ok); }
.calidad-intento.calidad-media { --calidad: #8fd4e8; }
.calidad-intento.calidad-baja { --calidad: var(--c-aviso); }
.calidad-intento.calidad-muy-baja { --calidad: var(--c-error); }
.calidad-cifra { flex: 0 0 120px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.calidad-numero { font-size: 40px; font-weight: 700; line-height: 1; color: var(--calidad); font-variant-numeric: tabular-nums; }
.calidad-etiqueta { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-apagado); }
.calidad-barra { width: 100%; height: 6px; border-radius: 3px; background: var(--c-panel-2); overflow: hidden; margin-top: 4px; }
.calidad-barra i { display: block; height: 100%; background: var(--calidad); border-radius: 3px; }
.calidad-desglose { flex: 1; min-width: 0; }
.calidad-desglose h5 { margin: 0 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-apagado) !important; }
.calidad-desglose h5 small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.calidad-desglose ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.calidad-desglose li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--c-texto); }
.calidad-desglose li b { color: var(--c-error); font-variant-numeric: tabular-nums; flex: none; }
.calidad-desglose p { margin: 0; font-size: 13px; color: var(--c-ok); }
.resumen-intento dd small { color: var(--c-apagado); font-size: 11px; }
@media (max-width: 560px) { .calidad-intento { flex-direction: column; } .calidad-cifra { flex-direction: row; gap: 10px; align-items: baseline; } .calidad-barra { flex: 1; } }
.consola .calidad-desglose li, .page-content .consola .calidad-desglose li { color: var(--c-texto) !important; }
.consola .calidad-desglose li b { color: var(--c-error) !important; }

/* ---------- Demostracion guiada (rotulo fijo arriba) ---------- */
.demo-rotulo { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1200; width: min(720px, calc(100vw - 24px)); display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(12, 20, 28, .95); border: 1px solid rgba(255,255,255,.2); color: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.45); }
.demo-rotulo-cuerpo { flex: 1; min-width: 0; }
.demo-paso { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #ffd35a; margin-bottom: 3px; }
.demo-texto { display: block; font-size: 14.5px; line-height: 1.4; }
.demo-rotulo .consola-btn { flex: none; }
@media (max-width: 560px) { .demo-rotulo { flex-direction: column; align-items: stretch; } }

/* ---------- Nombre de la estructura bajo el puntero (fase bloqueo) ---------- */
.pista-estructura { position: absolute; z-index: 5; pointer-events: none; padding: 3px 8px; border-radius: 6px; background: rgba(12, 20, 28, .92); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 12.5px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.4); }

/* ---------- Pregunta «¿Que estructura esta señalada?» al empezar el bloqueo (S e I) ---------- */
.pregunta-estructura { position: absolute; inset: 0; z-index: 6; pointer-events: auto; }
.pregunta-anillo { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 3px solid #ffd35a; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.55), 0 0 14px rgba(255,211,90,.8); animation: pregunta-latido 1.1s ease-in-out infinite; pointer-events: none; }
@keyframes pregunta-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.pregunta-panel { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(12, 20, 28, .93); border: 1px solid rgba(255,255,255,.18); color: #f2f5f7; box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.pregunta-texto { margin: 0 0 8px; font-weight: 600; font-size: 14px; color: #fff; }
.pregunta-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pregunta-opciones .consola-btn { white-space: normal; text-align: left; line-height: 1.25; padding: 7px 10px; font-size: 13px; }
.pregunta-opciones .consola-btn.pregunta-correcta { border-color: var(--c-ok); background: rgba(79,207,110,.18); color: #fff; }
.pregunta-opciones .consola-btn.pregunta-fallo { border-color: var(--c-error); background: rgba(239,90,90,.2); color: #fff; }
.pregunta-respuesta { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: #fff; }
.pregunta-respuesta .consola-btn { margin-left: 8px; vertical-align: middle; }
.pregunta-arriba .pregunta-panel { top: 8px; bottom: auto; }
.pregunta-acierto .pregunta-respuesta { color: var(--c-ok); }
.pregunta-error .pregunta-respuesta { color: #ffb3b3; }
.pregunta-error .pregunta-respuesta strong { color: #fff; }
@media (max-width: 480px) { .pregunta-opciones { grid-template-columns: 1fr; } }

/* ---------- Evolucion del alumno entre intentos (mismo nivel) ---------- */
.evolucion-intento { margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--c-borde); }
.evolucion-intento h5 { margin: 0 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-apagado) !important; }
.evolucion-intento h5 small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.evolucion-intento ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.evolucion-intento li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--c-texto); }
.evolucion-intento li small { color: var(--c-apagado); font-size: 11px; }
.evolucion-intento li b { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.evolucion-intento i { font-style: normal; font-weight: 700; margin-left: 4px; }
.evolucion-intento .evo-mejor { color: var(--c-ok); }
.evolucion-intento .evo-peor { color: var(--c-error); }
.evolucion-intento .evo-igual { color: var(--c-apagado); }
.evolucion-intento p { margin: 6px 0 0; font-size: 13px; color: var(--c-texto); }
.evolucion-intento p.evo-mejor { color: var(--c-ok); font-weight: 600; }
.evo-barras { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 8px; }
.evo-barras span { flex: 0 1 14px; height: 100%; display: flex; align-items: flex-end; background: rgba(255,255,255,.05); border-radius: 2px; }
.evo-barras span i { display: block; width: 100%; border-radius: 2px; background: var(--c-apagado); opacity: .55; margin: 0; }
.evo-barras .evo-ok i { background: var(--c-ok); }
.evo-barras .evo-ko i { background: var(--c-error); }
.evo-barras .evo-actual i { opacity: 1; box-shadow: 0 0 0 1px var(--c-texto); }
.consola .evolucion-intento li, .page-content .consola .evolucion-intento li, .consola .evolucion-intento p { color: var(--c-texto) !important; }

/* ---- Selección de material: nota bajo un campo ---- */
.material-panel .campo-nota { color: var(--sd-apagado); font-size: 12px; line-height: 1.35; margin: 6px 0 0; }

/* ---- Nivel superexperto: las ayudas (anatomía, sección, teoría, 3D) solo al terminar el intento ---- */
body.nivel-superexperto:not(.intento-terminado) [data-solo-al-terminar] { display: none !important; }
.nivel.nivel-superexperto header h2 { color: var(--sd-primario); }
.nivel.nivel-superexperto { border-color: var(--sd-primario); }

/* ---- Progresión por dominio e intentos totales en el listado ---- */
.nivel.nivel-bloqueado { opacity: 0.72; }
.nivel-estado-bloqueado { background: var(--sd-aviso-suave); color: var(--sd-aviso); }
.nivel-bloqueo { color: var(--sd-apagado); font-size: 13px; margin: auto 0 0; }
.nivel-datos .nivel-nota-peq { color: var(--sd-apagado); font-weight: 400; font-size: 11px; }
.nivel-datos { flex-wrap: wrap; row-gap: 8px; }

/* ---- Página de instrucciones ---- */
.instrucciones .instr-bloque { margin: 0 0 22px; }
.instrucciones .instr-bloque h2 { font-size: 17px; margin: 0 0 8px; color: var(--sd-tinta); }
.instrucciones .instr-bloque p, .instrucciones .instr-bloque li { color: var(--sd-tinta-2); font-size: 14.5px; line-height: 1.55; }
.instrucciones .instr-bloque ul, .instrucciones .instr-bloque ol { padding-left: 22px; margin: 6px 0 10px; }
.instrucciones .instr-tabla-marco { overflow-x: auto; margin: 6px 0 12px; }
.instrucciones .instr-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.instrucciones .instr-tabla th, .instrucciones .instr-tabla td { border: 1px solid var(--sd-borde); padding: 8px 10px; vertical-align: top; text-align: left; color: var(--sd-tinta-2); }
.instrucciones .instr-tabla th { background: var(--sd-primario-suave); color: var(--sd-tinta); }
.instrucciones kbd { font-family: inherit; font-size: 12px; padding: 1px 6px; border: 1px solid var(--sd-borde); border-radius: 4px; background: var(--sd-superficie); }

/* ---- Portada de la practica: los cuatro niveles en una fila, todo a la vista sin scroll ---- */
.portada-practica .material-subtitulo { margin-bottom: 8px; }
.portada-practica .portada-chips { margin-bottom: 14px; }
.portada-practica .niveles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: none; }
.portada-practica .nivel { padding: 14px 16px; }
.portada-practica .nivel header { margin-bottom: 6px; flex-wrap: wrap; }
.portada-practica .nivel h2 { font-size: 15px !important; }
.portada-practica .nivel-estado { font-size: 11px; padding: 2px 8px; }
.portada-practica .nivel-desc { font-size: 12.5px; line-height: 1.35; margin: 0 0 10px; min-height: 0; }
.portada-practica .nivel-datos { gap: 14px; margin: 0 0 12px; }
.portada-practica .nivel-datos dd { font-size: 18px; }
.portada-practica .nivel .btn { padding: 6px 12px; font-size: 13px; }
.portada-practica .portada-teoria { margin-top: 12px; max-width: none; }
.portada-practica .nota-final { margin-top: 12px; }
@media (max-width: 900px) { .portada-practica .niveles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .portada-practica .niveles { grid-template-columns: minmax(0, 1fr); } }
.hud strong.hud-aviso { color: #ff6b6b; }