/* campus-meli -- base comun del prototipo (Entrega 1). Material de diseno, no se despliega (OM-036).
   Tokens: tokens.css (export de wiki/DESIGN.md). Aca solo componentes de marca y layout.
   Duenio: sesion principal. Los modulos NO editan este archivo: piden el cambio. */

@font-face { font-family: "Montserrat"; src: url("assets/fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("assets/fonts/work-sans.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Work Sans", system-ui, sans-serif;
  /* Elevacion en 3 niveles: marca-jac R1 (elevation-1/2/float). DESIGN.md, Elevation & Depth */
  --shadow-1: 0 var(--spacing-elevation-1-y) var(--spacing-elevation-1-blur) var(--color-shadow-1);      /* reposo: cards, paneles, objetos pegados; botones y opciones en hover */
  --shadow-2: 0 var(--spacing-elevation-2-y) var(--spacing-elevation-2-blur) var(--color-shadow-2);     /* lo que actua bajo el puntero o con foco */
  --shadow-float: 0 var(--spacing-elevation-float-y) var(--spacing-elevation-float-blur) var(--color-shadow-float); /* flota: arrastre, dialogos, menus, avisos */
  --nav-w: 248px;
}

/* ---- Barra de desplazamiento de marca (marca-jac R1c; DESIGN.md, Components > Barra de desplazamiento).
   CSS de referencia sin cambio. La canaleta (scrollbar-gutter + overflow-y) vive en el :root de abajo, sin condicion. ---- */
:root {
  scrollbar-gutter: stable;
  overflow-y: scroll;   /* WebKit ignora scrollbar-gutter: sin esto la pagina salta 16px */
  --scroll-canaleta: var(--color-surface-soft);
  --scroll-filete: var(--color-line);
  --scroll-pulgar: var(--color-ink-soft);
  --scroll-pulgar-activo: var(--color-ja-navy);
  /* triangulito del isotipo: mitad izquierda al 50%, mitad derecha solida (Manual p.12-13) */
  --scroll-marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M0 6 6 0 3.9 6z' fill='%23FFFFFF' fill-opacity='.5'/%3E%3Cpath d='M3.9 6 6 0v10z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  --scroll-marca-activo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M0 6 6 0 3.9 6z' fill='%23E3E24F' fill-opacity='.5'/%3E%3Cpath d='M3.9 6 6 0v10z' fill='%23E3E24F'/%3E%3C/svg%3E");
}
@media (forced-colors: none) {
  @supports not selector(::-webkit-scrollbar) {          /* Firefox: pulgar navy, sin forma */
    :root { scrollbar-color: var(--scroll-pulgar-activo) var(--scroll-canaleta); }
  }
  ::-webkit-scrollbar { width: var(--spacing-scrollbar); height: var(--spacing-scrollbar); background: var(--scroll-canaleta); }
  ::-webkit-scrollbar-track { background: var(--scroll-canaleta); box-shadow: inset 1px 0 0 var(--scroll-filete); }
  ::-webkit-scrollbar-track:horizontal { box-shadow: inset 0 1px 0 var(--scroll-filete); }
  ::-webkit-scrollbar-thumb {
    background: var(--scroll-pulgar) var(--scroll-marca) center / 6px 10px no-repeat;
    border: 2px solid transparent; background-clip: padding-box;
    border-radius: 4px;   /* 4px por fuera - 2px de aire = 2px visibles (rounded.sm) */
    min-height: var(--spacing-scrollbar-thumb-min); min-width: var(--spacing-scrollbar-thumb-min);
  }
  ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active {
    background-color: var(--scroll-pulgar-activo); background-image: var(--scroll-marca-activo);
  }
  ::-webkit-scrollbar-corner { background: var(--scroll-canaleta); }
}


*, *::before, *::after { box-sizing: border-box; }
html { color: var(--color-ink); background: var(--color-surface-soft); }
body { margin: 0; font: 400 16px/1.6 var(--font-body); color: var(--color-ink); }   /* sin min-width: a 320px con barra clasica el ancho util es 304px (1.4.10) */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-ink); margin: 0 0 var(--spacing-sm); }
h1 { font-size: 36px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
h2 { font-size: 28px; font-weight: 700; line-height: 1.2; }
h3 { font-size: 22px; font-weight: 700; line-height: 1.3; }
h4 { font-size: 18px; font-weight: 700; line-height: 1.35; }
p { margin: 0 0 var(--spacing-md); }
img { max-width: 100%; }
.eyebrow { font: 700 14px/1.3 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--color-ink); margin: 0 0 var(--spacing-xs); }
.texto-soft { color: var(--color-ink-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Foco de marca: 3px ink separado 2px; blanco sobre oscuros */
:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; }
.sobre-oscuro :focus-visible { outline-color: var(--color-surface); }

.skip { position: absolute; left: var(--spacing-md); top: -80px; z-index: 50; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--spacing-md); background: var(--color-ja-navy); color: var(--color-surface); border-radius: var(--rounded-sm); }
.skip:focus { top: var(--spacing-sm); }
.skip:focus-visible { outline-color: var(--color-ja-navy); } /* S-01: caja navy con anillo navy separado 2px: visible contra la pagina clara */

/* ---- Layout: barra superior + navegacion de modulos + contenido. Objetivo 1024, minimo 700 ---- */
/* Capa del chrome (DESIGN.md, Orden de apilamiento): barra y navegacion pintan encima de main, con o sin la capa de
   movimiento (view-transition-name hace de main un contexto aparte). Nada dentro de main usa 30 o mas. */
.topbar { position: relative; z-index: 30; display: flex; align-items: center; gap: var(--spacing-lg); padding: var(--spacing-sm) var(--spacing-lg); background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.topbar__marca { flex: none; }
.topbar__logo { width: 345px; min-width: 345px; height: auto; display: block; } /* PNG con margen: 1812 de 2080 px visibles -> 300 px visibles (minimo de marca) */
.topbar__programa { height: 40px; width: auto; display: block; flex: none; }
.topbar__fin { margin-left: auto; display: flex; align-items: center; gap: var(--spacing-md); }
.topbar__progreso { min-width: 200px; }

.app { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: calc(100vh - 112px); }
.nav { position: relative; z-index: 30; background: var(--color-surface); border-right: 1px solid var(--color-line); padding: var(--spacing-lg) var(--spacing-md); }
.nav__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-xs); }
.nav__item a, .nav__item [aria-disabled="true"] { display: flex; flex-direction: row; align-items: center; gap: 12px; min-height: 56px; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--rounded-sm); color: var(--color-ink); text-decoration: none; border-left: 4px solid transparent; }
.nav__item a:hover { background: var(--color-ja-ice); }
.nav__item a[aria-current="page"] { background: var(--color-ja-ice); border-left-color: var(--color-ja-navy); font-weight: 600; }
.nav__item [aria-disabled="true"] { color: var(--color-ink-soft); background: var(--color-surface-soft); cursor: not-allowed; }
.nav__titulo { font: 600 16px/1.25 var(--font-body); }
.nav__estado { font: 400 14px/1.3 var(--font-body); color: var(--color-ink-soft); }
.nav__item a[aria-current="page"] .nav__estado { color: var(--color-ink); }

.contenido { min-width: 0; padding: var(--spacing-xl) 40px var(--spacing-3xl); max-width: 1120px; width: 100%; margin-inline: auto; }
.cabecera { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--spacing-lg); margin-bottom: var(--spacing-xl); }
.cabecera__picto { width: 64px; height: 64px; flex: none; }
.cabecera__texto { flex: 1; min-width: 260px; }
.cabecera__texto p { max-width: 70ch; margin: 0; }
.cabecera__acciones { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }

/* Numero de modulo (modulo-numero, ronda 1): cuadro de 32 px con el par de su color; gris si bloqueado */
.modnum { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: var(--rounded-sm); font: 600 16px/1 var(--font-body); }
.modnum--navy { background: var(--color-ja-navy); color: var(--color-surface); }
.modnum--cerulean { background: var(--color-ja-cerulean); color: var(--color-surface); }
.modnum--yellow { background: var(--color-ja-yellow); color: var(--color-ja-navy); border: 1px solid var(--color-ink-soft); }
.modnum--ice { background: var(--color-ja-ice); color: var(--color-ja-navy); border: 1px solid var(--color-ink-soft); }
.modnum--pale-blue { background: var(--color-ja-pale-blue); color: var(--color-ja-navy); border: 1px solid var(--color-ink-soft); }
.modnum--bloqueado { background: var(--color-surface-soft); color: var(--color-ink-soft); border: 1px solid var(--color-ink-soft); }
.modnum--inicio { background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-ink-soft); }

/* Navegacion completa: el numero corto solo se ve en el riel */
.nav__corto, .nav .nav__toggle, .nav .nav__salir { display: none; }   /* .nav delante: gana a .btn, que es display: inline-flex */
.nav__texto { display: flex; flex-direction: column; }

/* Navegacion plegable en todos los modulos, desde 900 px: completa (248 px) o riel de 72 px (DESIGN.md "Navegacion en riel").
   Un solo boton la pliega o la expande (sin panel flotante ni casilla "fijar"). Solo las paginas de pizarra sueltan el ancho
   maximo del contenido (.app--pizarra). */
@media (min-width: 900px) {
  .app--riel { grid-template-columns: var(--spacing-nav-rail-w, 72px) minmax(0, 1fr); }
  .app--riel > .contenido { grid-column: 2; }
  .app--pizarra.app--riel > .contenido { max-width: none; }
  .nav { display: flex; flex-direction: column; padding: var(--spacing-sm) var(--spacing-xs); }   /* el mismo relleno plegada y expandida */
  .nav__lista { flex: none; }
  .nav .nav__toggle { display: inline-flex; align-self: flex-start; margin: 0 0 var(--spacing-sm) 10px; }   /* 10 + 4 de relleno = 14: el mismo lugar que centrado en el riel */
  /* Expandida: mismo relleno y misma separacion entre modulos que el riel; el numero de modulo no se mueve al expandir (x = 20). */
  .nav:not(.nav--riel) .nav__item a, .nav:not(.nav--riel) .nav__item [aria-disabled="true"] { padding: var(--spacing-xs) 12px; }
  .nav--riel .nav__toggle { align-self: center; margin-left: 0; }
  .nav--riel .nav__item a, .nav--riel .nav__item [aria-disabled="true"] { position: relative; justify-content: center; gap: 2px; padding: var(--spacing-xs); min-height: 56px; }
  .nav--riel .nav__corto { display: inline-flex; align-items: center; gap: 2px; font: 600 16px/1.25 var(--font-body); }
  .nav__icono { display: inline-flex; }
  .nav--riel .nav__texto { display: none; position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); z-index: 30; width: max-content; max-width: 240px; padding: var(--spacing-sm) var(--spacing-md); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--rounded-sm); box-shadow: var(--shadow-float); }
  .nav--riel .nav__item a:hover .nav__texto, .nav--riel .nav__item a:focus-visible .nav__texto, .nav--riel .nav__item [aria-disabled="true"]:hover .nav__texto { display: flex; }
  /* Cerrar sesion: al pie de la navegacion expandida (en el riel no hay lugar; la persona la tiene tambien en el menu de la barra). */
  .nav:not(.nav--riel) .nav__salir { display: inline-flex; flex: none; margin-top: var(--spacing-sm); align-self: stretch; justify-content: flex-start; gap: var(--spacing-sm); }
  /* Expandida: la lista scrollea sola y Cerrar sesion queda siempre a la vista al pie (el relleno deja lugar al anillo de foco). */
  .nav:not(.nav--riel) .nav__lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; padding: 4px; margin: -4px; }   /* align-content: start: sin esto la grilla reparte la altura sobrante entre las filas */
}

/* Navegacion pegada: acompana el desplazamiento y no pasa del final de .app (nunca tapa el pie). .app toma el alto de la ventana
   para que la navegacion de 100vh quepa en su fila. En pantallas bajas queda en el flujo para no dejar items inalcanzables. */
@media (min-width: 900px) and (min-height: 640px) {
  .app { min-height: 100vh; }
  .nav { position: sticky; top: 0; align-self: start; height: var(--nav-alto, 100vh); overflow: hidden; }   /* --nav-alto: ver montarRiel */
  .nav--riel { overflow: visible; }  /* la placa del item sale de la caja */
}

@media (max-width: 899px) {
  .app { grid-template-columns: 1fr; }
  .nav { border-right: 0; border-bottom: 1px solid var(--color-line); }
  .nav__lista { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .contenido { padding: var(--spacing-lg) var(--spacing-md) var(--spacing-2xl); }
  .topbar { flex-wrap: wrap; }
  /* Pantallas angostas (marca R1c, D-32): si 345px mas el padding de la barra no entran, el logo se achica al ancho
     disponible, entero y sin deformar. El ancho lo pone el link (base 345px que encoge); la imagen lo llena. Con
     `flex: 0 1 auto` + `width: min(345px, 100%)` el link crece a todo el renglon y baja el logo del programa. */
  .topbar__marca { flex: 0 1 345px; min-width: 0; }
  .topbar__logo { width: 100%; min-width: 0; }
}
/* Igual que la app (base.css, Oleada 8): el final de la barra envuelve en vez de desbordar */
@media (max-width: 899px) {
  .topbar__fin { flex-wrap: wrap; max-width: 100%; }
  .topbar__progreso { min-width: min(200px, 100%); }
}
/* Solo el prototipo: la casilla "Vista de revision" (que la app no tiene) no entra junto al avance entre 900 y 956px.
   El final de la barra envuelve, como hace por debajo de 900px, en vez de desplazar la pagina (R1d punto 46). */
@media (min-width: 900px) { .topbar__fin { flex-wrap: wrap; justify-content: flex-end; } }

/* Selector de alternativas de una pantalla (revision con JAC y MeLi) */
.alternativas { display: flex; align-items: center; gap: var(--spacing-xs); flex-wrap: wrap; margin: 0 0 var(--spacing-lg); }
.alternativas__label { font: 600 14px/1.3 var(--font-body); margin-right: var(--spacing-sm); }
.alternativas__opcion { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--spacing-md); border: 1px solid var(--color-ink-soft); border-radius: var(--rounded-sm); background: var(--color-surface); color: var(--color-ink); text-decoration: none; font: 600 14px/1.3 var(--font-body); }
.alternativas__opcion:hover { background: var(--color-ja-ice); color: var(--color-ink); }
.alternativas__opcion[aria-current="page"] { background: var(--color-ja-navy); border-color: var(--color-ja-navy); color: var(--color-surface); }

/* Link al cierre del modulo, al final del contenido */
.cierre-enlace { margin: var(--spacing-xl) 0 0; padding-top: var(--spacing-lg); border-top: 1px solid var(--color-line); }

/* ---- Componentes de marca ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); min-height: 48px; padding: 12px 20px; border: 1px solid transparent; border-radius: var(--rounded-sm); font: 600 16px/1.25 var(--font-body); cursor: pointer; text-decoration: none; }
.btn--primario { background: var(--color-ja-blue); color: var(--color-surface); }
.btn--primario:hover { background: var(--color-ja-navy); color: var(--color-surface); } /* color: a:hover le gana a .btn--primario cuando el boton es <a> (R1b-B1) */
/* button-primary-on-dark: primario sobre bloque navy (DESIGN.md, P-07 a marca-jac) */
.btn--primario-oscuro { background: var(--color-ja-yellow); color: var(--color-ja-navy); }
.btn--primario-oscuro:hover { background: var(--color-surface); color: var(--color-ja-navy); }
.btn--secundario { background: var(--color-surface); color: var(--color-ja-navy); border-color: var(--color-ink-soft); }
.btn--secundario:hover { background: var(--color-ja-ice); color: var(--color-ja-navy); }
.btn--chico { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.btn--icono { min-width: 44px; min-height: 44px; padding: 0; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--color-line); color: var(--color-ink-soft); border-color: transparent; cursor: not-allowed; }

.campo { display: grid; gap: var(--spacing-xs); margin-bottom: var(--spacing-md); }
.campo label, .campo legend { font: 600 14px/1.3 var(--font-body); color: var(--color-ink); }
.campo input, .campo select, .campo textarea { font: 400 16px/1.5 var(--font-body); color: var(--color-ink); background: var(--color-surface); border: 1px solid var(--color-ink-soft); border-radius: var(--rounded-sm); padding: 11px 12px; min-height: 48px; width: 100%; }
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { border-color: var(--color-ja-teal); }
.campo__hint { font-size: 14px; color: var(--color-ink-soft); margin: 0; }
.campo__error { font-size: 14px; font-weight: 600; color: var(--color-error); margin: 0; }
.campo--error input, .campo--error textarea { border-color: var(--color-error); }

.card { background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-line); border-radius: var(--rounded-md); padding: var(--spacing-lg); }
.grilla { display: grid; gap: var(--spacing-lg); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.badge { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: 4px 12px; border-radius: var(--rounded-sm); font: 600 14px/1.3 var(--font-body); }
.badge--ok { background: var(--color-ok-tint); color: var(--color-ok); }
.badge--info { background: var(--color-info-tint); color: var(--color-info); }
.badge--warn { background: var(--color-warn-tint); color: var(--color-warn); }
.badge--error { background: var(--color-error-tint); color: var(--color-error); }

a { color: var(--color-ja-blue); }
a:hover { color: var(--color-ja-navy); }
.link-suelto { display: inline-flex; align-items: center; min-height: 44px; }

/* Barra de progreso: pista navy, relleno amarillo, porcentaje en texto */
.progreso__label { display: flex; justify-content: space-between; gap: var(--spacing-sm); font: 600 14px/1.3 var(--font-body); margin-bottom: var(--spacing-xs); }
.progreso__pista { height: 12px; background: var(--color-ja-navy); border-radius: var(--rounded-sm); overflow: hidden; }
.progreso__barra { height: 100%; background: var(--color-ja-yellow); border-radius: var(--rounded-sm); transform-origin: left; transform: scaleX(0); }

/* ---- Cabecera de modulo (ronda 1): pictograma 96 px sobre la pagina + bloque de color a sangre con filete ---- */
.cabecera--modulo { flex-wrap: nowrap; align-items: flex-start; }
.cabecera--modulo .cabecera__picto { width: 96px; height: 96px; }
.cabecera__bloque { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--spacing-md) var(--spacing-lg); padding: var(--spacing-xl); margin-right: -40px; border-radius: var(--rounded-none);
  background: var(--cab-bg); color: var(--cab-fg); border-bottom: 8px solid var(--cab-filete, transparent); }
.cabecera__bloque h1 { color: var(--cab-fg); }
.cabecera__bloque .eyebrow { color: var(--cab-eyebrow); }
.cabecera__bloque p:not(.eyebrow), .cabecera__bloque .texto-soft { color: var(--cab-bajada); max-width: 68ch; }
.cabecera__bloque a:not(.btn) { color: var(--cab-fg); }
.cabecera__bloque .cabecera__acciones { margin-left: auto; }
.cab--yellow { --cab-bg: var(--color-ja-yellow); --cab-fg: var(--color-ja-navy); --cab-eyebrow: var(--color-ja-navy); --cab-bajada: var(--color-ja-navy); }
.cab--ice { --cab-bg: var(--color-ja-ice); --cab-fg: var(--color-ja-navy); --cab-eyebrow: var(--color-ja-navy); --cab-bajada: var(--color-ja-navy); }
.cab--pale-blue { --cab-bg: var(--color-ja-pale-blue); --cab-fg: var(--color-ja-navy); --cab-eyebrow: var(--color-ja-navy); --cab-bajada: var(--color-ja-navy); }
.cab--navy { --cab-bg: var(--color-ja-navy); --cab-fg: var(--color-surface); --cab-eyebrow: var(--color-ja-yellow); --cab-bajada: var(--color-ja-ice); }
.cab--cerulean { --cab-bg: var(--color-ja-cerulean); --cab-fg: var(--color-surface); --cab-eyebrow: var(--color-ja-yellow); --cab-bajada: var(--color-ja-ice); }
/* Filete: decorativo, sin texto (unica via de los turquesas en la app) */
.filete--navy { --cab-filete: var(--color-ja-navy); }
.filete--yellow { --cab-filete: var(--color-ja-yellow); }
.filete--pale-blue { --cab-filete: var(--color-ja-pale-blue); }
.filete--cerulean { --cab-filete: var(--color-ja-cerulean); }
.filete--teal { --cab-filete: var(--color-ja-teal); }
.filete--aqua { --cab-filete: var(--color-ja-aqua); }
.filete--teal-deep { --cab-filete: var(--color-ja-teal-deep); }
@media (max-width: 899px) {
  .cabecera--modulo { flex-direction: column; gap: var(--spacing-sm); }
  .cabecera--modulo .cabecera__picto { width: 64px; height: 64px; }
  .cabecera__bloque { width: calc(100% + var(--spacing-md)); margin-right: calc(var(--spacing-md) * -1); padding: var(--spacing-lg); }
}

/* ---- Pie con creditos (ronda 1): navy a sangre, texto blanco, secundario ja-ice, links ja-yellow ---- */
.pie { background: var(--color-ja-navy); color: var(--color-surface); padding: var(--spacing-xl); font-size: 14px; line-height: 1.5; }
.pie p { margin: 0 0 var(--spacing-xs); }
.pie__creditos { color: var(--color-ja-ice); }
.pie__links { display: flex; flex-wrap: wrap; gap: 0 var(--spacing-lg); margin: 0; }
.pie__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ja-yellow); font-weight: 600; }
.pie__link:hover { color: var(--color-surface); }

/* Bloque a sangre (radio 0) */
.bloque { border-radius: var(--rounded-none); padding: var(--spacing-xl); }
.bloque--navy { background: var(--color-ja-navy); color: var(--color-surface); }
.bloque--navy h2, .bloque--navy h3, .bloque--navy p { color: var(--color-surface); }
.bloque--ice { background: var(--color-ja-ice); }
.bloque--yellow { background: var(--color-ja-yellow); }

/* Estado de actividad */
.actividad-estado { display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap; margin-top: var(--spacing-xl); padding-top: var(--spacing-lg); border-top: 1px solid var(--color-line); }

/* Aviso de dato provisorio */
.gap { border-left: 4px solid var(--color-warn); background: var(--color-warn-tint); color: var(--color-ink); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--rounded-sm); font-size: 14px; }
.gap strong { color: var(--color-warn); }

/* ---- Panel de teoria (<dialog>) ---- */
.teoria { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--color-line); border-radius: var(--rounded-md); box-shadow: var(--shadow-float); color: var(--color-ink); background: var(--color-surface); }
.teoria::backdrop { background: rgba(34, 64, 77, .55); }
.teoria__cabecera { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.teoria__cabecera h2 { font-size: 22px; margin: 0; }
.teoria__cuerpo { padding: var(--spacing-lg); overflow: auto; overscroll-behavior: contain; }
/* Con un modal abierto la pagina de atras no se desplaza; la canaleta (scrollbar-gutter) se conserva, sin salto. */
html:has(dialog:modal) { overflow-y: hidden; }
/* Teoria flotante (direccion, 2026-10-02): arriba a la derecha del contenido y siempre a mano. La caja mide 0 de alto y se pega al
   desplazar (sticky): en reposo queda bajo la barra superior, nunca encima de ella. */
.teoria-flotante-caja { position: sticky; top: var(--spacing-md); z-index: 30; display: flex; justify-content: flex-end; height: 0; margin-right: -40px; pointer-events: none; }   /* -40: el relleno lateral de .contenido; el boton queda al ras del borde derecho, donde termina la cabecera de color */
@media (max-width: 899px) { .teoria-flotante-caja { margin-right: calc(var(--spacing-md) * -1); } }   /* .contenido usa 16 px de relleno lateral */
.teoria-flotante, .teoria-flotante:hover { pointer-events: auto; gap: var(--spacing-xs); min-height: 48px; box-shadow: 0 8px 20px color-mix(in srgb, var(--color-ja-navy) 40%, transparent), 0 2px 6px color-mix(in srgb, var(--color-ja-navy) 32%, transparent); }   /* sombra de flotacion mas la de contacto, mas marcadas que --shadow-float: se notan sobre la cabecera de color */

/* Estilo de lectura pedido en la reunion, adaptado por contraste (ADR-0002) */
.md { max-width: 68ch; }
.md h1, .md h2, .md h3 { margin-top: var(--spacing-lg); }
.md strong { color: var(--color-ja-blue); font-weight: 700; }
.md em { font-style: italic; background: var(--color-ja-yellow); color: var(--color-ja-navy); padding: 0 .2em; }
.md table { border-collapse: collapse; width: 100%; margin: 0 0 var(--spacing-md); font-size: 15px; }
.md th { background: var(--color-ja-ice); color: var(--color-ja-navy); text-align: left; font-weight: 700; }
.md th, .md td { border: 1px solid var(--color-line); padding: var(--spacing-sm) var(--spacing-md); }
.md ul, .md ol { padding-left: 1.4em; margin: 0 0 var(--spacing-md); }
.md blockquote { margin: 0 0 var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); border-left: 4px solid var(--color-ja-teal); background: var(--color-surface-soft); }

/* Region de anuncios para lectores de pantalla + toast visible */
.aviso { position: fixed; right: var(--spacing-lg); bottom: var(--spacing-lg); max-width: 360px; padding: var(--spacing-sm) var(--spacing-md); background: var(--color-ja-navy); color: var(--color-surface); border-radius: var(--rounded-sm); box-shadow: var(--shadow-float); font-size: 14px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .15s, transform .15s; }
.aviso.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
  .aviso { transform: none; }
}

@media print {
  .topbar, .nav, .skip, .no-imprimir, .aviso, .pie { display: none !important; }
  .cabecera__bloque { background: none; border-bottom: 0; margin-right: 0; padding: 0; --cab-fg: var(--color-ink); --cab-eyebrow: var(--color-ink); --cab-bajada: var(--color-ink); }
  .app { display: block; }
  body, html { background: #fff; }
}

/* ---- Capa de dinamismo (marca-jac R1; DESIGN.md, Components > Capa de dinamismo) ----
   Superficie que actua: elevacion + sube 1-2px. Parte del flujo: color + borde o barra interior. */
.card { box-shadow: var(--shadow-1); }
.pz-hoja .card, .card .card { box-shadow: none; }   /* sin card anidada */
.persona__boton, .persona__item, .campo input, .campo select, .campo textarea { transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out, box-shadow 120ms ease-out; }
.btn { transition: transform 160ms ease-out, box-shadow 160ms ease-out, background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out; }
.nav__item a, .alternativas__opcion, a { transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out, text-decoration-color 120ms ease-out; }
@media (hover: hover) and (pointer: fine) {
  /* chico, icono y herramientas de pizarra viven en barras densas: solo color */
  :is(.btn--primario, .btn--secundario):not(.btn--chico, .btn--icono, .pz-herr, .pz-obj__menu):hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
  .btn--secundario:not(.btn--chico, .btn--icono, .pz-herr, .pz-obj__menu):hover { border-color: var(--color-ja-navy); }
  /* Chico primario: barra interior amarilla sobre el navy del hover (7.99:1); sin subir */
  .btn--primario:is(.btn--chico, .btn--icono):hover { background: var(--color-ja-navy); box-shadow: inset 0 -2px 0 var(--color-ja-yellow); }
  :is(.btn--primario-oscuro, .btn--sobre-oscuro):not(.btn--chico, .btn--icono):hover { transform: translateY(-1px); box-shadow: none; }
  /* Botones chicos, de icono y de barra: fondo ja-ice + barra interior inferior; sin subir (barras densas).
     Los chicos primarios conservan su hover de color (la barra navy sobre navy no se ve). */
  :is(.btn--secundario:is(.btn--chico, .btn--icono), .persona__boton):hover { background: var(--color-ja-ice); color: var(--color-ja-navy); box-shadow: inset 0 -2px 0 var(--color-ja-navy); }
  .persona__item:hover { box-shadow: inset 3px 0 0 var(--color-ja-navy); }
  :is(.campo input, .campo select, .campo textarea):hover:not(:focus-visible) { border-color: var(--color-ja-navy); }
  :is(.campo--error input, .campo--error textarea):hover:not(:focus-visible) { border-color: var(--color-error); }
  .btn:active { transform: none; box-shadow: none; }
  .btn:disabled:hover, .btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; border-color: transparent; background: var(--color-line); color: var(--color-ink-soft); }
  .alternativas__opcion:hover:not([aria-current="page"]) { border-color: var(--color-ja-navy); }
  .nav__item a:hover:not([aria-current="page"]):not([aria-disabled="true"]) { border-left-color: var(--color-ink-soft); }
  .nav__item a:hover .nav__estado { color: var(--color-ink); }
  a:hover, .pie__link:hover, .barra-lectura__link:hover { text-decoration-thickness: 2px; }
}
/* Presionado (tambien en tactil) */
:is(.btn--secundario:is(.btn--chico, .btn--icono), .persona__boton):active:not(:disabled) { background: var(--color-ja-pale-blue); color: var(--color-ja-navy); }
.btn--primario:is(.btn--chico, .btn--icono):active:not(:disabled) { background: var(--color-ja-navy); box-shadow: none; }
.nav__item a:active:not([aria-disabled="true"]) { background: var(--color-ja-pale-blue); }
@media (prefers-reduced-motion: reduce) {
  .btn:not(.btn--chico, .btn--icono):is(:hover, :focus-visible, :active) { transform: none !important; box-shadow: none !important; }
}

/* ---- Casilla y radio propios (componente casilla/radio, DESIGN.md; el tick animado es E-10, movimiento.css) ----
   Mismos inputs nativos; solo CSS. El tamanio lo sigue fijando cada modulo (20, 22 o 24 px). */
:is(.cq-opcion, .opcion, .mp5-opcion, .escala, .mp6-escala, .ed-casilla, .asistencia-casilla, .admin-radio, .admin-check, .nav__fijar) input:is([type="checkbox"], [type="radio"]) {
  appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; flex: none;
  border: 2px solid var(--color-ink-soft); border-radius: var(--rounded-sm); background: var(--color-surface); cursor: pointer;
  transition: border-color 120ms ease-out, background-color 120ms ease-out;
}
:is(.cq-opcion, .opcion, .mp5-opcion, .escala, .mp6-escala, .ed-casilla, .asistencia-casilla, .admin-radio, .admin-check, .nav__fijar) input[type="radio"] { border-radius: 50%; }   /* el radio es un circulo: unica excepcion de forma */
:is(.cq-opcion, .opcion, .mp5-opcion, .escala, .mp6-escala, .ed-casilla, .asistencia-casilla, .admin-radio, .admin-check, .nav__fijar) input[type="checkbox"]:checked { background: var(--color-ja-navy); border-color: var(--color-ja-navy); }
:is(.cq-opcion, .opcion, .mp5-opcion, .escala, .mp6-escala, .ed-casilla, .asistencia-casilla, .admin-radio, .admin-check, .nav__fijar) input[type="checkbox"]:checked::after {
  content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid var(--color-surface); border-width: 0 2px 2px 0; transform: rotate(45deg); --tick-desde: rotate(45deg) scale(.6);
}
:is(.cq-opcion, .opcion, .mp5-opcion, .escala, .mp6-escala, .ed-casilla, .asistencia-casilla, .admin-radio, .admin-check, .nav__fijar) input[type="radio"]:checked { border-color: var(--color-ja-navy); }
:is(.cq-opcion, .opcion, .mp5-opcion, .escala, .mp6-escala, .ed-casilla, .asistencia-casilla, .admin-radio, .admin-check, .nav__fijar) input[type="radio"]:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-ja-navy); }
:is(.cq-opcion, .opcion, .mp5-opcion, .escala, .mp6-escala, .ed-casilla, .asistencia-casilla, .admin-radio, .admin-check, .nav__fijar) input:is([type="checkbox"], [type="radio"]):disabled { background: var(--color-line); border-color: var(--color-ink-soft); cursor: default; }
:is(.cq-opcion, .opcion, .mp5-opcion, .escala, .mp6-escala, .ed-casilla, .asistencia-casilla, .admin-radio, .admin-check, .nav__fijar) input[type="checkbox"]:checked:disabled { background: var(--color-ja-navy); border-color: var(--color-ja-navy); }
@media (hover: hover) and (pointer: fine) {
  :is(.cq-opcion, .opcion, .mp5-opcion, .escala, .mp6-escala, .ed-casilla, .asistencia-casilla, .admin-radio, .admin-check, .nav__fijar) input:is([type="checkbox"], [type="radio"]):not(:disabled):hover,
  :is(.cq-opcion, .opcion, .mp5-opcion, .escala, .mp6-escala, .ed-casilla, .asistencia-casilla, .admin-radio, .admin-check, .nav__fijar):hover input:is([type="checkbox"], [type="radio"]):not(:disabled) { border-color: var(--color-ja-navy); }
}
@media (forced-colors: active) {
  :is(.cq-opcion, .opcion, .mp5-opcion, .escala, .mp6-escala, .ed-casilla, .asistencia-casilla, .admin-radio, .admin-check, .nav__fijar) input:is([type="checkbox"], [type="radio"]) { appearance: auto; -webkit-appearance: auto; }
  :is(.cq-opcion, .opcion, .mp5-opcion, .escala, .mp6-escala, .ed-casilla, .asistencia-casilla, .admin-radio, .admin-check, .nav__fijar) input:is([type="checkbox"], [type="radio"])::after { content: none; }
}


/* Pantalla completa de una actividad (pantalla-completa.js): la barra con el boton va arriba del tablero; al activarla se esconde todo lo
   que no es el tablero y el tablero ocupa la ventana (en pantalla completa del navegador si la concede). */
.pc__barra { display: flex; justify-content: flex-end; margin-bottom: var(--spacing-xs); }
.pc__btn { gap: var(--spacing-xs); }
html.pc-activa .pc-oculto { display: none !important; }
html.pc-activa .app { display: block; min-height: 0; }
html.pc-activa .contenido { max-width: none; margin: 0; padding: var(--spacing-md); }
html.pc-activa .pc-camino { margin: 0 !important; padding: 0 !important; border: 0 !important; }
html.pc-activa .pc { background: var(--color-surface-soft); }