/* medCrex - Hoja de estilos unica.

   El tema se controla con el atributo data-tema en <html>: "claro" u "oscuro".
   El claro es el predeterminado: no se adopta el del sistema operativo, porque el
   contenido clinico se lee mejor sobre fondo claro y es lo que la mayoria espera.
   El oscuro se aplica solo cuando el usuario lo elige. */

:root {
  --fondo: #f6f7f9;
  --fondo-panel: #ffffff;
  --fondo-hover: #eef1f5;
  --borde: #d8dee7;
  --texto: #1a2230;
  --texto-suave: #5b6879;
  --acento: #1f5f8b;
  --acento-claro: #e8f1f8;
  --sombra: 0 1px 3px rgba(16, 24, 40, .08);

  /* Enfasis de las secciones de una Perla Clinica */
  --clave-fondo: #e8eefc;
  --clave-borde: #4a6fd4;
  --clave-texto: #1b3a8f;
  --ecom-fondo: #fdf3e0;
  --ecom-borde: #c98a1a;
  --ecom-texto: #7a4e04;
  --trat-fondo: #e6f6ee;
  --trat-borde: #2f9163;
  --trat-texto: #145c39;
  --alerta-fondo: #fdeceb;
  --alerta-borde: #cf4b43;
  --alerta-texto: #8f2119;

  /* Dimensiones P D T S */
  --dim-p: #7a4fb5;
  --dim-d: #1f6fb2;
  --dim-t: #2f9163;
  --dim-s: #b5722f;
}

:root[data-tema="oscuro"] {
  --fondo: #0f141b;
  --fondo-panel: #171e27;
  --fondo-hover: #1f2833;
  --borde: #2a3542;
  --texto: #e4e9ef;
  --texto-suave: #9aa8b8;
  --acento: #6cb2e0;
  --acento-claro: #14293a;
  --sombra: 0 1px 3px rgba(0, 0, 0, .4);

  --clave-fondo: #17203c;
  --clave-borde: #4a6fd4;
  --clave-texto: #b9caf5;
  --ecom-fondo: #33260e;
  --ecom-borde: #d9a13c;
  --ecom-texto: #f4d79a;
  --trat-fondo: #122c20;
  --trat-borde: #3fa877;
  --trat-texto: #a5e0c2;
  --alerta-fondo: #331714;
  --alerta-borde: #d96057;
  --alerta-texto: #f5b8b3;

  --dim-p: #b18ee0;
  --dim-d: #6cb2e0;
  --dim-t: #5fc294;
  --dim-s: #dda661;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  /* En `rem` y no en `16px`: con un valor fijo el texto no seguia a la preferencia
     de tamano, que actua sobre la raiz. El resultado era lo peor de las dos cosas:
     los rellenos y los iconos encogian y la letra se quedaba igual, de modo que en
     «compacto» todo se veia descuadrado y con el texto proporcionalmente mas grande.
     La raiz vale 16 px salvo que la persona haya cambiado el tamano en su navegador,
     asi que esto ademas respeta ese ajuste. */
  font: 1rem/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Estructura: barra superior + menu lateral ---------- */

.barra {
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 3.25rem;
  padding: 0 1rem;
  background: var(--fondo-panel);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 30;
}

.barra .marca {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--texto);
  letter-spacing: -.01em;
}
.barra .marca:hover { text-decoration: none; }
/* «med» va con el color del texto y «Crex» con el acento. La regla apunta al span de
   dentro y no a cualquier span: el nombre viaja envuelto en `.palabra` para que el hueco
   de la marca no lo separe, y con un selector suelto ese envoltorio se pintaba tambien,
   dejando «medCrex» entero del color del acento. */
.barra .marca .palabra { color: var(--texto); }
.barra .marca .palabra span { color: var(--acento); }

.barra .accesos { margin-left: auto; display: flex; align-items: center; gap: .3rem; }
.barra .accesos form { display: flex; }

.icono {
  background: transparent;
  border: 1px solid transparent;
  color: var(--texto-suave);
  border-radius: 8px;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0;
}
.icono:hover { background: var(--fondo-hover); color: var(--texto); text-decoration: none; }

.boton.compacto { padding: .4rem .8rem; font-size: .88rem; min-height: 0; }

/* El menu lateral y el contenido comparten una rejilla de dos columnas.
   Se llama `armazon` y no `cuerpo` a proposito: `cuerpo` es el interior de
   cualquier panel plegable, y cuando ambos compartian nombre este marco le
   imponia su rejilla y su alto de pantalla completa a cada seccion de teoria. */
.armazon {
  display: grid;
  /* `minmax(0, 1fr)` y no `1fr` a secas: el tamaño minimo de una columna de rejilla
     es el de su CONTENIDO, asi que una tabla ancha o un grafico estiraban la columna
     -y con ella la pagina- en lugar de deslizarse por dentro. En el celular eso
     dejaba `main` en 520 px dentro de una pantalla de 371, con el texto cortado por
     la derecha y la barra superior corrida. */
  grid-template-columns: 15rem minmax(0, 1fr);
  align-items: start;
  min-height: calc(100vh - 3.25rem);
}

.lateral {
  position: sticky;
  top: 3.25rem;
  height: calc(100vh - 3.25rem);
  overflow-y: auto;
  background: var(--fondo-panel);
  border-right: 1px solid var(--borde);
  padding: 1rem .75rem;
}

.lateral .ficha-usuario {
  padding: .6rem .7rem .75rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid var(--borde);
}
.lateral .ficha-usuario .nombre { font-weight: 650; font-size: .95rem; }
.lateral .ficha-usuario .correo {
  font-size: .8rem; color: var(--texto-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lateral .grupo { margin-bottom: 1.25rem; }
.lateral .rotulo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
  font-weight: 700;
  padding: 0 .7rem .4rem;
}
.lateral .rotulo .ico { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.lateral a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .7rem;
  border-radius: 8px;
  color: var(--texto-suave);
  font-size: .96rem;
}
.lateral a:hover { background: var(--fondo-hover); color: var(--texto); text-decoration: none; }

/* Un enlace que ademas encabeza un grupo.
   «Estudio» y «Evaluación» llevan a una pagina, pero al quedar entre el rotulo del grupo
   y sus opciones sangradas se leian como un titulo de seccion, y nadie los pulsaba. La
   flecha a la derecha es la senal de que van a alguna parte; el peso extra los separa de
   las opciones que cuelgan de ellos sin volverlos otro rotulo. */
.lateral a.con-hijas { font-weight: 600; color: var(--texto); }
.lateral a.con-hijas .flecha {
  margin-left: auto;
  width: .8rem;
  height: .8rem;
  /* El mismo chevron de toda la aplicacion, apuntando hacia adelante. */
  transform: rotate(-90deg);
  opacity: .4;
  transition: opacity .12s ease;
}
.lateral a.con-hijas:hover .flecha,
.lateral a.con-hijas.activo .flecha { opacity: 1; }

/* Con el menu en franja de iconos no hay derecha donde poner la flecha. */
body.lateral-plegado .lateral a.con-hijas .flecha { display: none; }
.lateral a.activo {
  background: var(--acento-claro);
  color: var(--acento);
  font-weight: 600;
}
.lateral .simbolo { width: 1.2rem; text-align: center; flex-shrink: 0; }
.lateral .insignia { margin-top: .4rem; display: inline-block; }

.insignia {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--acento-claro);
  color: var(--acento);
  padding: .1rem .35rem;
  border-radius: 4px;
}

.velo { display: none; }
.solo-movil { display: none; }

main { max-width: 1000px; padding: 1.5rem 1.5rem 4rem; }

h1 { font-size: 1.5rem; margin: 0 0 .3rem; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; margin: 1.75rem 0 .75rem; }
.subtitulo { color: var(--texto-suave); margin: 0 0 1.5rem; font-size: .95rem; }

/* ---------- Lateral deslizable en pantallas estrechas ---------- */
@media (max-width: 900px) {
  .armazon { grid-template-columns: minmax(0, 1fr); }
  .solo-movil { display: inline-grid; }

  .lateral {
    position: fixed;
    top: 3.25rem;
    left: 0;
    width: 16rem;
    max-width: 82vw;
    z-index: 25;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 4px 0 16px rgba(0, 0, 0, .18);
  }
  body.menu-abierto .lateral { transform: translateX(0); }

  .velo {
    display: block;
    position: fixed;
    inset: 3.25rem 0 0 0;
    background: rgba(0, 0, 0, .45);
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  body.menu-abierto .velo { opacity: 1; pointer-events: auto; }

  /* El lateral tiene areas de toque mas generosas. */
  .lateral a { padding: .7rem .7rem; font-size: .97rem; }

  main { max-width: none; padding: 1.25rem 1rem 3rem; }
}

/* ---------- Migas de pan ---------- */

/* Las migas quedan FIJAS bajo la barra al bajar por la pagina. En la estructura del
   temario, con 645 contenidos, y en una subarea de 34 filas es facil perder de vista
   donde se esta; tenerlas siempre delante evita subir hasta arriba para saberlo, y
   deja el camino de vuelta a un clic.

   `top` vale lo que mide la barra superior, para que se apoyen justo debajo y no la
   tapen ni dejen un hueco. El fondo es opaco -el de la pagina, no el de los paneles-
   porque si no el contenido se leeria por detras al pasar. Los margenes negativos y
   el relleno hacen que esa banda de fondo llegue de borde a borde, cubriendo el
   relleno lateral de `main`; sin eso se veria texto asomando por los lados.

   El z-index queda por debajo del 30 de la barra y por encima del contenido: las
   migas pasan bajo la barra, no sobre ella. */
.migas {
  font-size: .88rem;
  color: var(--texto-suave);
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;

  position: sticky;
  top: 3.25rem;
  z-index: 20;
  background: var(--fondo);
  margin: -1.5rem -1.5rem 1rem;
  padding: .75rem 1.5rem .6rem;
  border-bottom: 1px solid var(--borde);
}
.migas span.sep { opacity: .5; }

/* ---------- Rejilla y tarjetas ---------- */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: .9rem;
}

.tarjeta {
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  box-shadow: var(--sombra);
  display: block;
  color: inherit;
}
a.tarjeta:hover { border-color: var(--acento); text-decoration: none; }

/* Borde de la tarjeta de un caso segun su dificultad: se ve de un golpe cual va a costar
   antes de abrirlo. `facil` no lleva regla y se queda con el borde de siempre, que es
   justamente lo que la distingue.

   El color no es la unica senal: la tarjeta dice «dificultad media» en texto. Un aviso
   solo por color no lo veria quien no distingue el ambar del rojo. */
.tarjeta.dificultad-media { border-color: var(--ecom-borde); }
.tarjeta.dificultad-dificil { border-color: var(--alerta-borde); }

/* Al pasar el raton se conserva el color de la dificultad y se marca con un halo del
   mismo tono. Con el borde de acento de las demas tarjetas se perderia justo la senal
   que se quiere dar. */
a.tarjeta.dificultad-media:hover {
  border-color: var(--ecom-borde);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ecom-borde) 22%, transparent);
}
a.tarjeta.dificultad-dificil:hover {
  border-color: var(--alerta-borde);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--alerta-borde) 22%, transparent);
}

/* Respaldo para navegadores sin color-mix. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  a.tarjeta.dificultad-media:hover { box-shadow: 0 0 0 3px rgba(201, 138, 26, .22); }
  a.tarjeta.dificultad-dificil:hover { box-shadow: 0 0 0 3px rgba(207, 75, 67, .22); }
}

.tarjeta .titulo { font-weight: 650; margin-bottom: .35rem; }
.tarjeta .meta { color: var(--texto-suave); font-size: .87rem; }

.codigo {
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: .82rem;
  color: var(--texto-suave);
  background: var(--fondo-hover);
  padding: .1rem .4rem;
  border-radius: 4px;
}

/* ---------- Chips de dimension ---------- */

.dims { display: inline-flex; gap: .25rem; }
.dim {
  width: 1.35rem; height: 1.35rem;
  display: inline-grid; place-items: center;
  border-radius: 4px;
  font-size: .72rem; font-weight: 700;
  color: #fff;
}
.dim.p { background: var(--dim-p); }
.dim.d { background: var(--dim-d); }
.dim.t { background: var(--dim-t); }
.dim.s { background: var(--dim-s); }
.dim.vacia { background: transparent; border: 1px dashed var(--borde); color: var(--texto-suave); }

/* ---------- Tabla de contenidos ---------- */

table.listado { width: 100%; border-collapse: collapse; background: var(--fondo-panel);
  border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
table.listado th {
  text-align: left; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texto-suave);
  padding: .6rem .9rem; border-bottom: 1px solid var(--borde); font-weight: 600;
}
table.listado td { padding: .55rem .9rem; border-bottom: 1px solid var(--borde); }
table.listado tr:last-child td { border-bottom: none; }
table.listado tbody tr:hover { background: var(--fondo-hover); }
.envoltura-tabla { overflow-x: auto; }

/* ---------- Tarjeta de Perla Clinica ---------- */

.perla {
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  box-shadow: var(--sombra);
  margin-bottom: 1rem;
}
.perla > h3 {
  margin: 0 0 .8rem;
  font-size: 1.08rem;
  color: var(--ecom-borde);
  letter-spacing: -.01em;
}
.perla .seccion { margin-bottom: .7rem; font-size: .95rem; }
.perla .seccion:last-child { margin-bottom: 0; }
.perla .seccion .etiqueta { font-weight: 700; }

/* El enfasis cuelga de `.seccion`, no de `.perla`. Colgaba de `.perla`, y la lista de
   Tarjetas Didacticas tiene cuatro formatos de los que solo uno -la rejilla- envuelve
   cada tarjeta en un `article.perla`: en lista, acordeon y presentacion las mismas
   secciones salian sin un solo color. El enfasis es de la seccion y no del envoltorio
   que le toque, asi que se define una vez y vale en los cuatro. */
.seccion.destacada {
  padding: .7rem .85rem;
  border-radius: 8px;
  border: 1px solid;
}
.seccion.dato_clave {
  background: var(--clave-fondo); border-color: var(--clave-borde); color: var(--clave-texto);
}
.seccion.perla_ecom {
  background: var(--ecom-fondo); border-color: var(--ecom-borde); color: var(--ecom-texto);
  font-weight: 500;
}
.seccion.tratamiento { color: var(--trat-texto); }
.seccion.tratamiento .etiqueta { color: var(--trat-borde); }
.seccion.alerta {
  background: var(--alerta-fondo); border-color: var(--alerta-borde); color: var(--alerta-texto);
}

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

label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .3rem; }
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=url], input[type=number], input[type=date], input[type=time],
textarea, select {
  /* `search` queda fuera a proposito: los dos buscadores de la app viven en
     .caja-buscar, que les da su propio aspecto de pastilla ambar. */
  width: 100%;
  padding: .5rem .65rem;
  background: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 6px;
  font: inherit;
  font-size: .95rem;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=tel]:focus, input[type=url]:focus, input[type=number]:focus,
input[type=date]:focus, input[type=time]:focus, textarea:focus, select:focus {
  outline: 2px solid var(--acento); outline-offset: -1px; border-color: var(--acento);
}
textarea { min-height: 4.5rem; resize: vertical; }
.campo { margin-bottom: .9rem; }
.fila-campos { display: flex; gap: .75rem; flex-wrap: wrap; }
.fila-campos > * { flex: 1 1 12rem; }

.boton {
  background: var(--acento); color: #fff; border: none;
  padding: .55rem 1.1rem; border-radius: 6px; font: inherit; font-weight: 600;
  cursor: pointer;
}
.boton:hover { filter: brightness(1.08); }
.boton.secundario { background: transparent; color: var(--texto-suave); border: 1px solid var(--borde); }
.boton.secundario:hover { background: var(--fondo-hover); color: var(--texto); }

.acciones { display: flex; gap: .6rem; align-items: center; margin-top: 1rem; }

/* ---------- Bloque de seccion editable ---------- */

.editor-seccion {
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: .8rem;
  margin-bottom: .7rem;
  background: var(--fondo);
}
.editor-seccion .encabezado { display: flex; gap: .6rem; align-items: flex-end; margin-bottom: .6rem; }

/* ---------- Avisos ---------- */

.aviso {
  padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem;
  border: 1px solid var(--borde); background: var(--fondo-panel);
  font-size: .93rem; color: var(--texto-suave);
}
.aviso.exito { background: var(--trat-fondo); border-color: var(--trat-borde); color: var(--trat-texto); }
.aviso.error { background: var(--alerta-fondo); border-color: var(--alerta-borde); color: var(--alerta-texto); }

.vacio { color: var(--texto-suave); font-style: italic; padding: 1.5rem 0; text-align: center; }

/* ---------- Barra de progreso simple ---------- */

.progreso { height: 6px; background: var(--fondo-hover); border-radius: 3px; overflow: hidden; }
.progreso > div { height: 100%; background: var(--acento); }


/* -------------------------------------------------------------------
   CAMPO CON ICONO
   Envoltorio para poner un icono guia dentro del campo (a la izquierda)
   y, si hace falta, un boton al otro extremo. Se usa en el ingreso y
   sirve igual para cualquier formulario: el relleno del campo se calcula
   con las mismas medidas del icono, asi que basta envolver el <input>.
   ------------------------------------------------------------------- */
.campo-icono { position: relative; display: block; }

.campo-icono > .ico-guia {
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.15rem;
  height: 1.15rem;
  color: var(--texto-suave);
  pointer-events: none;   /* el clic tiene que llegar al campo, no al icono */
}

.campo-icono > input { padding-left: 2.5rem; }
.campo-icono.con-boton > input { padding-right: 2.6rem; }
/* El hueco de la izquierda solo se reserva cuando de verdad hay un icono guia. El
   campo de fecha lleva boton a la derecha y nada a la izquierda, y sin esto arrancaba
   el texto a media caja. */
.campo-icono:not(:has(> .ico-guia)) > input { padding-left: .65rem; }

/* El campo pinta su propio anillo de foco; el icono solo acompana el color. */
.campo-icono > input:focus ~ .ico-guia,
.campo-icono > input:focus + .ico-guia { color: var(--acento); }

.campo-icono > .revelar,
.campo-icono > .campo-fecha-abrir {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--texto-suave);
  cursor: pointer;
}
.campo-icono > .revelar:hover,
.campo-icono > .campo-fecha-abrir:hover { color: var(--texto); background: var(--fondo-hover); }
.campo-icono > .revelar:focus-visible,
.campo-icono > .campo-fecha-abrir:focus-visible { outline: 2px solid var(--acento); }
.campo-icono > .revelar .ico,
.campo-icono > .campo-fecha-abrir .ico { width: 1.15rem; height: 1.15rem; }

/* Un solo boton con los dos ojos dentro: se muestra el que corresponde al
   estado, sin tener que reescribir el SVG desde el guion. */
.campo-icono > .revelar .ojo-cerrar { display: none; }
.campo-icono > .revelar[aria-pressed="true"] .ojo-abrir { display: none; }
.campo-icono > .revelar[aria-pressed="true"] .ojo-cerrar { display: block; }

/* ===================================================================
   DISENO ADAPTABLE
   Tres cortes: tablet (900 px), movil grande (700 px) y movil (480 px).
   El tamano base del texto se mantiene en 16 px porque los navegadores
   moviles amplian la pagina automaticamente con tipografias menores.
   =================================================================== */

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  main { padding: 1.25rem 1rem 3rem; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* ---------- Movil grande y tablet en vertical ---------- */
@media (max-width: 700px) {
  
  main { padding: 1rem .85rem 3rem; }
  .migas { margin: -1rem -.85rem .9rem; padding: .6rem .85rem .5rem; }
  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.08rem; }

  /* Una sola columna: en pantallas estrechas dos columnas dejan el texto ilegible. */
  .rejilla { grid-template-columns: 1fr; }
  .fila-campos { flex-direction: column; gap: .6rem; }
  .fila-campos > * { flex: 1 1 auto; }

  /* El encabezado de cada seccion de perla se apila, con el boton de quitar
     alineado al final para que siga siendo alcanzable con el pulgar. */
  .editor-seccion .encabezado { flex-direction: column; align-items: stretch; gap: .5rem; }
  .editor-seccion .encabezado > button { align-self: flex-end; min-width: 3rem; }

  /* La tabla de contenidos se reorganiza en fichas: cada fila es un bloque y
     cada celda lleva su etiqueta delante, tomada de data-etiqueta. */
  table.listado { border: none; background: transparent; }
  table.listado thead { display: none; }
  table.listado tbody tr {
    display: block;
    background: var(--fondo-panel);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: .7rem .85rem;
    margin-bottom: .7rem;
    box-shadow: var(--sombra);
  }
  table.listado tbody tr:hover { background: var(--fondo-panel); }
  table.listado td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .25rem 0;
    border: none;
  }
  table.listado td::before {
    content: attr(data-etiqueta);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
    font-weight: 600;
    flex-shrink: 0;
  }
  /* El titulo del contenido ocupa el ancho completo, sin etiqueta delante. */
  table.listado td.principal { display: block; padding: .35rem 0 .5rem; }
  table.listado td.principal::before { display: none; }
  table.listado td.principal a { font-weight: 600; }
  .envoltura-tabla { overflow-x: visible; }

  /* Areas de toque: el minimo recomendado son 44 px de lado. */
  .boton, .boton-tema, button[type=submit] { min-height: 2.75rem; padding: .6rem 1rem; }
  select, input[type=text], input[type=email], input[type=password],
  input[type=tel], input[type=number] { min-height: 2.75rem; }

  .perla { padding: .9rem 1rem; border-radius: 10px; }
  .perla .acciones { flex-wrap: wrap; gap: .5rem; }
  .perla .acciones .meta { width: 100%; }

  .migas { font-size: .82rem; }
}

/* ---------- Movil ---------- */
@media (max-width: 480px) {
  .barra .marca { font-size: 1rem; }
  .barra nav a { font-size: .88rem; }
  main { padding: .85rem .7rem 3rem; }
  .migas { margin: -.85rem -.7rem .8rem; padding: .55rem .7rem .45rem; }
  h1 { font-size: 1.18rem; }
  .subtitulo { font-size: .9rem; }
  .tarjeta { padding: .85rem .95rem; }
  .perla > h3 { font-size: 1rem; }
  .perla .seccion { font-size: .93rem; }
  /* Los formularios de ingreso y registro dejan de tener margen superior grande. */
  main > div[style*="margin:2rem auto"] { margin: .5rem auto !important; }
}

/* ---------- Impresion ---------- */
@media print {
  .barra, .acciones, .boton, .boton-tema { display: none; }
  body { background: #fff; color: #000; }
  .perla, .tarjeta { break-inside: avoid; box-shadow: none; }
}

/* ===================================================================
   PORTADA DE INGRESO
   Dos paneles: presentacion con la ilustracion y formulario de acceso.
   En movil se apilan y la ilustracion se reduce para dejar sitio al teclado.
   =================================================================== */

body.portada { background: var(--fondo); }

.portada-marco {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 100vh;
}

/* ---------- Panel de presentacion ---------- */

.portada-imagen {
  /* El degradado no depende del tema: este panel siempre va oscuro, para que la
     ilustracion y el texto blanco tengan el contraste adecuado. */
  background: linear-gradient(150deg, #12405e 0%, #1f6f9e 55%, #2b8fb8 100%);
  color: #eaf4fa;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 3rem 3.5rem;
  position: relative;
  overflow: hidden;
}

.portada-imagen .ilustracion {
  width: 100%;
  max-width: 30rem;
  height: auto;
  /* Colores fijos, no del tema: este panel siempre va oscuro. */
  --marca-trazo:  #7fd4f5;
  --marca-cruz:   #eaf4fa;
  --marca-halo:   rgba(255, 255, 255, .12);
  --marca-puntos: rgba(255, 255, 255, .35);
}

.portada-texto h1 {
  font-size: 2.4rem;
  margin: 0 0 .4rem;
  letter-spacing: -.03em;
  color: #fff;
}
.portada-texto h1 span { color: #7fd4f5; }
.portada-texto .lema { font-size: 1.05rem; margin: 0 0 1.5rem; opacity: .92; }

.portada-texto .rasgos { list-style: none; padding: 0; margin: 0; }
.portada-texto .rasgos li {
  padding: .4rem 0 .4rem 1.6rem;
  position: relative;
  font-size: .96rem;
  opacity: .92;
}
.portada-texto .rasgos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .95rem;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #7fd4f5;
}
.portada-texto .rasgos strong { color: #fff; }

/* ---------- Panel de acceso ---------- */

.portada-acceso {
  display: grid;
  place-items: center;
  padding: 2rem 1.5rem;
  background: var(--fondo);
}

.acceso-caja { width: 100%; max-width: 23rem; }

/* --- Confirmación del borrado total de una cuenta ---------------------- */

.borrado-total { max-width: 46rem; margin: 0 auto; }

.borrado-quien {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: .75rem 0 1.25rem;
  padding: .8rem 1rem;
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: 6px;
}
.borrado-quien .codigo-usuario {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--acento);
}

/* Dos columnas mientras quepan, apiladas cuando no: son dos listas cortas y una al
   lado de la otra se comparan de un vistazo, que es justo lo que hay que hacer
   antes de decidir. */
.borrado-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.borrado-caja {
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 1rem 1.1rem;
}
/* El color dice cuál es cuál sin leer el título: rojo lo que desaparece, neutro lo
   que se queda. */
.borrado-caja.pierde { border-color: var(--alerta-borde); background: var(--alerta-fondo); }
.borrado-caja.queda  { background: var(--fondo-panel); }

.borrado-caja h2 { font-size: 1rem; margin: 0 0 .6rem; }
.borrado-caja ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.borrado-caja li b { font-variant-numeric: tabular-nums; }
.borrado-caja .meta { margin: .6rem 0 0; }

.borrado-aviso {
  font-weight: 600;
  color: var(--alerta-texto);
  margin: .8rem 0 1rem;
}

/* El código de la cuenta en la tabla de usuarios. Cifras de ancho fijo para que
   la columna se lea de arriba abajo sin que los números bailen, y en tono suave
   porque es un dato de apoyo: se busca cuando hace falta, no se lee siempre. */
.codigo-usuario {
  font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
  white-space: nowrap;
}

/* --- Instrucciones de pago, en la pantalla que sigue al registro ---------
   La caja de acceso mide 23rem porque solo lleva un formulario; esta pantalla
   lleva tres pasos con un monto y dos botones, y a ese ancho todo se parte.
   Se ensancha SOLO cuando toca, con una clase propia, en vez de subir el ancho
   base y desalinear el ingreso y la recuperacion. */
.acceso-caja.recibido { max-width: 30rem; }

.pago {
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 1.25rem 1.35rem;
  margin: 0 0 1.25rem;
}
.pago h2 { font-size: 1.1rem; margin: 0 0 1rem; }

/* La numeracion la pone la lista, no un texto escrito a mano: si manana se
   esconde un paso -sin WhatsApp, sin montos- los numeros se recorren solos. */
.pago-pasos { list-style: decimal; margin: 0; padding-left: 1.3rem; }
.pago-pasos > li { margin-bottom: 1.1rem; }
.pago-pasos > li:last-child { margin-bottom: 0; }

.pago-rotulo {
  display: block;
  font-weight: 600;
  margin-bottom: .4rem;
}

.pago-dato {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}
/* El numero es el dato que hay que leer y transcribir: va grande, con cifras de
   ancho fijo para que no baile, y con espacio entre caracteres para no confundir
   un 6 con un 8 de un vistazo. */
.pago-numero {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--acento);
}

.pago-nota { margin: .45rem 0 0; font-size: .9rem; color: var(--texto-suave); }

.pago-montos { border-collapse: collapse; width: 100%; max-width: 22rem; }
.pago-montos td { padding: .3rem 0; border-bottom: 1px solid var(--borde); }
.pago-montos tr:last-child td { border-bottom: 0; }
.pago-montos td:last-child {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* El precio manda en dolares y el monto en colones es la conversion del dia: por eso
   el de dolares va con mas peso y el de colones en tono suave, detras. */
.pago-montos .en-dolares { font-weight: 700; white-space: nowrap; }
.pago-montos .en-colones {
  text-align: right;
  color: var(--texto-suave);
  font-weight: 400;
  white-space: nowrap;
}

.pago-canales { display: flex; flex-wrap: wrap; gap: .6rem; }

.pago-cierre {
  margin: 1.1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--borde);
  font-size: .95rem;
  color: var(--texto-suave);
}

/* Confirmacion de que el numero se copio. Verde de «tratamiento», que es el que
   ya usa la aplicacion para decir que algo salio bien. */
.boton.copiar.copiado {
  background: var(--trat-fondo);
  border-color: var(--trat-borde);
  color: var(--trat-texto);
}

/* La marca no lleva fondo propio: se apoya en el del panel de acceso, y toma los
   colores del tema para que se lea igual de bien en claro y en oscuro. */
.acceso-marca { text-align: center; margin-bottom: 1.4rem; }

.acceso-marca .emblema {
  display: block;
  width: 100%;
  max-width: 12rem;
  height: auto;
  margin: 0 auto .25rem;
  --marca-trazo:  var(--acento);
  --marca-cruz:   var(--acento);
  --marca-halo:   var(--acento-claro);
  --marca-puntos: color-mix(in srgb, var(--acento) 40%, transparent);
}

.acceso-marca .palabra {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--texto);
}
.acceso-marca .palabra span { color: var(--acento); }

.acceso-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.acceso-encabezado h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; }

.casilla {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 400;
  font-size: .92rem;
  color: var(--texto-suave);
  margin: .25rem 0 1.25rem;
  cursor: pointer;
}
.casilla input[type=checkbox] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--acento);
  cursor: pointer;
  flex-shrink: 0;
}

.boton.ancho { width: 100%; justify-content: center; }

.acceso-pie {
  margin: 1.25rem 0 0;
  font-size: .9rem;
  color: var(--texto-suave);
  text-align: center;
}

/* ---------- Portada en pantallas estrechas ---------- */

@media (max-width: 860px) {
  .portada-marco { grid-template-columns: 1fr; min-height: 0; }

  .portada-imagen {
    padding: 1.75rem 1.5rem 1.5rem;
    gap: 1.25rem;
    /* La ilustracion se recorta para que el formulario quede a la vista sin
       necesidad de desplazarse, sobre todo con el teclado abierto. */
    align-items: center;
    text-align: center;
  }
  .portada-imagen .ilustracion { max-width: 17rem; }
  .portada-texto h1 { font-size: 1.9rem; }
  .portada-texto .lema { font-size: .95rem; margin-bottom: 0; }
  /* Los rasgos se omiten en movil: el espacio vertical vale mas que el reclamo. */
  .portada-texto .rasgos { display: none; }

  .portada-acceso { padding: 1.75rem 1.25rem 3rem; place-items: start center; }
}

@media (max-width: 480px) {
  .portada-imagen { padding: 1.25rem 1rem; }
  .portada-imagen .ilustracion { max-width: 12rem; }
  .portada-texto h1 { font-size: 1.6rem; }
}

/* ---------- Iconos SVG ----------
   Todos los iconos de la interfaz son SVG de trazo que heredan el color del texto,
   para que se dibujen igual en cualquier sistema operativo. */

.ico {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -.2em;
}

/* Al tamano base de la aplicacion. Estaban en 1,15rem, 1,6 px por debajo del resto
   de los iconos y casi 2,5 px por debajo de los de la barra superior, que quedan
   justo encima y sirven de referencia inmediata: el menu se leia como la zona de
   letra chica de la plataforma. */
.lateral .ico { width: 1.25rem; height: 1.25rem; }
.icono .ico { width: 1.3rem; height: 1.3rem; vertical-align: 0; }
.boton .ico, button .ico { width: 1.15rem; height: 1.15rem; }

/* ---------- Administracion ---------- */

table.credenciales { border-collapse: collapse; margin: .3rem 0; }
table.credenciales th {
  text-align: left; padding: .25rem .9rem .25rem 0;
  font-size: .85rem; font-weight: 600; white-space: nowrap; vertical-align: top;
}
table.credenciales td { padding: .25rem 0; }
table.credenciales code {
  font-family: "Cascadia Mono", Consolas, monospace;
  background: rgba(0, 0, 0, .07); padding: .15rem .45rem; border-radius: 4px;
}
:root[data-tema="oscuro"] table.credenciales code { background: rgba(255, 255, 255, .1); }
table.credenciales code.destacada { font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; }

.opciones-roles { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.opciones-roles .casilla { margin: 0; }

.casilla.compacta { margin: 0; font-size: .82rem; gap: .3rem; }
.casilla.compacta input[type=checkbox] { width: .95rem; height: .95rem; }

.roles-en-linea { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.boton.diminuto { padding: .25rem .55rem; font-size: .8rem; min-height: 0; }
/* Los diminutos que llevan icono lo alinean con el texto en vez de dejarlo en su propia
   linea, y lo bajan de escala: el tamano de fabrica de `.ico` es para el menu lateral y
   aqui desbordaria el alto del boton. */
.boton.diminuto { display: inline-flex; align-items: center; gap: .35rem; }
.boton.diminuto .ico { width: .95rem; height: .95rem; flex-shrink: 0; }
.boton.diminuto .meta { font-size: .75rem; }

/* Un salto dentro de la pagina no puede dejar el destino debajo de las migas, que van
   fijas arriba al hacer scroll: el encabezado al que se salta quedaba tapado justo por
   ellas. El margen cubre la barra superior mas el alto de las migas.

   Van 7rem y no 6: con 6 el encabezado aterrizaba a 3 px de las migas en el celular,
   donde ocupan mas alto porque el texto se parte en dos lineas. Tres pixeles no son un
   margen, son casualidad. */
h1[id], h2[id], h3[id], .pregunta[id], .seccion-teoria[id], .perla[id] { scroll-margin-top: 7rem; }

.acciones-fila { display: flex; gap: .4rem; flex-wrap: wrap; }
.acciones-fila form { display: inline; }

.estado {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: .15rem .45rem; border-radius: 4px;
}
.estado.activo { background: var(--trat-fondo); color: var(--trat-texto); }
.estado.inactivo { background: var(--alerta-fondo); color: var(--alerta-texto); }

/* Cifras de resumen, reutilizadas por Importar y por Estado (DRY) */
.rejilla-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: .7rem;
  margin-bottom: 1.5rem;
}
.cifra {
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: .85rem 1rem;
  box-shadow: var(--sombra);
}
.cifra .valor { font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.cifra .rotulo { font-size: .82rem; color: var(--texto-suave); margin-top: .2rem; }

.lista-mensajes { margin: 0; padding-left: 1.2rem; }
.lista-mensajes li { margin-bottom: .35rem; }

input[type=file] {
  width: 100%;
  padding: .55rem;
  background: var(--fondo);
  color: var(--texto);
  border: 1px dashed var(--borde);
  border-radius: 6px;
  font: inherit;
  font-size: .92rem;
}
input[type=file]:focus { outline: 2px solid var(--acento); outline-offset: -1px; }

/* ===================================================================
   MODULO DE EVALUACION
   =================================================================== */

/* Entradas secundarias del menu lateral, sangradas bajo su seccion */
/* Dos cosas distintas que antes iban juntas en una sola clase:

   `sangrada`  solo desplaza a la derecha. Es lo que necesita una opcion que cuelga
               del rotulo de su grupo, como las de Administracion y Mi cuenta: son
               secundarias respecto al grupo, no respecto a otra opcion.

   `secundaria` sangra Y encoge. Solo tiene sentido donde conviven con una principal
               que da la referencia: en Contenido, «Estructura del temario» se ve
               menor que «Estudio», y ese contraste dice cual es cual.

   Usar `secundaria` en un grupo entero dejaba el bloque completo en tamano reducido,
   sin nada con que compararlo: solo se veia pequeno. */
.lateral a.sangrada,
.lateral a.secundaria {
  padding-left: 2.1rem;
}
.lateral a.secundaria {
  font-size: .91rem;
}
.lateral a.secundaria .ico { width: 1.1rem; height: 1.1rem; }

/* ---------- Ficha del caso clinico ---------- */

.ficha-caso {
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--sombra);
}

.datos-paciente { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.datos-paciente .dato {
  background: var(--fondo-hover);
  border-radius: 6px;
  padding: .2rem .6rem;
  font-size: .85rem;
  color: var(--texto-suave);
}
.datos-paciente .dato strong { color: var(--texto); }

.seccion-caso { margin-bottom: .9rem; }
.seccion-caso:last-child { margin-bottom: 0; }
.seccion-caso .rotulo {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave); font-weight: 700; margin-bottom: .2rem;
}
.seccion-caso p { margin: 0; font-size: .95rem; }

.caso-plegable {
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--fondo-panel);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.caso-plegable > summary {
  padding: .8rem 1.1rem;
  cursor: pointer;
  font-weight: 650;
  background: var(--fondo-hover);
}
.caso-plegable > summary:hover { color: var(--acento); }
.caso-plegable .ficha-caso {
  border: none; border-left: none; box-shadow: none; margin: 0; border-radius: 0;
}

/* ---------- Imagenes clinicas ---------- */

.galeria { display: flex; gap: .7rem; flex-wrap: wrap; margin: .8rem 0; }
.galeria figure {
  margin: 0; max-width: 20rem;
  border: 1px solid var(--borde); border-radius: 8px; overflow: hidden;
  background: var(--fondo);
}
.galeria img { display: block; width: 100%; height: auto; }
.galeria figcaption {
  padding: .35rem .6rem; font-size: .8rem; color: var(--texto-suave);
  border-top: 1px solid var(--borde);
}

/* Formulario de procedencia en la ficha del archivo. Solo acota el ancho: los
   campos y las acciones ya tienen sus reglas genericas. */
.ficha-procedencia { max-width: 46rem; }

/* Credito de la imagen: fuente y licencia. Una sola regla para las dos galerias,
   porque la obligacion de atribuir es la misma se estudie o se rinda un examen.
   Va en linea aparte y en cuerpo menor: acompania al pie sin competir con el. */
.credito {
  display: block;
  margin-top: .2rem;
  font-size: .7rem;
  line-height: 1.3;
  color: var(--texto-suave);
}

/* ---------- Preguntas ---------- */

.pregunta {
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra);
}
.pregunta.destacada { border-color: var(--acento); }
.pregunta.acertada { border-left: 3px solid var(--trat-borde); }
.pregunta.errada { border-left: 3px solid var(--alerta-borde); }
/* La pregunta a la que lleva la busqueda, dentro de su caso: sin resalte, al bajar
   hasta ella no se sabe cual de las cuatro era. */
.pregunta:target { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-claro); }

.pregunta .enunciado {
  font-size: 1.02rem; font-weight: 500; line-height: 1.5; margin-bottom: .5rem;
}
.pregunta .enunciado .numero {
  display: inline-grid; place-items: center;
  width: 1.6rem; height: 1.6rem; margin-right: .4rem;
  background: var(--acento-claro); color: var(--acento);
  border-radius: 50%; font-size: .82rem; font-weight: 700;
}

ol.opciones { list-style: none; padding: 0; margin: .8rem 0 0; }
ol.opciones li {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .65rem .8rem; margin-bottom: .45rem;
  border: 1px solid var(--borde); border-radius: 8px;
  font-size: .95rem;
}
ol.opciones li .letra {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 1.5rem; height: 1.5rem;
  border: 1px solid var(--borde); border-radius: 50%;
  font-size: .8rem; font-weight: 700; color: var(--texto-suave);
}
ol.opciones li .texto { flex: 1; }
ol.opciones li .marca {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700; padding: .1rem .4rem; border-radius: 4px;
  background: var(--trat-fondo); color: var(--trat-texto); white-space: nowrap;
}
ol.opciones li .marca.mala { background: var(--alerta-fondo); color: var(--alerta-texto); }

ol.opciones li.correcta {
  background: var(--trat-fondo); border-color: var(--trat-borde); color: var(--trat-texto);
}
ol.opciones li.correcta .letra { border-color: var(--trat-borde); color: var(--trat-borde); }
ol.opciones li.fallada {
  background: var(--alerta-fondo); border-color: var(--alerta-borde); color: var(--alerta-texto);
}
ol.opciones li.fallada .letra { border-color: var(--alerta-borde); color: var(--alerta-borde); }

/* Opciones elegibles: toda la fila es area de toque */
ol.opciones.elegibles li { padding: 0; }
ol.opciones.elegibles li label {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .75rem .8rem; width: 100%; cursor: pointer;
  font-weight: 400; margin: 0;
}
ol.opciones.elegibles li:hover { border-color: var(--acento); }
ol.opciones.elegibles input[type=radio] {
  margin-top: .15rem; accent-color: var(--acento); flex-shrink: 0;
  width: 1.1rem; height: 1.1rem;
}

.veredicto {
  margin-top: .9rem; padding: .7rem .9rem; border-radius: 8px;
  font-weight: 650; border: 1px solid;
}
.veredicto.bien { background: var(--trat-fondo); border-color: var(--trat-borde); color: var(--trat-texto); }
.veredicto.mal { background: var(--alerta-fondo); border-color: var(--alerta-borde); color: var(--alerta-texto); }

.explicacion {
  margin-top: .9rem; padding: .85rem 1rem;
  background: var(--fondo); border: 1px solid var(--borde);
  border-left: 3px solid var(--acento); border-radius: 8px;
}
.explicacion .rotulo {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--acento); font-weight: 700; margin-bottom: .35rem;
}
.explicacion p { margin: 0 0 .4rem; font-size: .94rem; }
.explicacion p:last-child { margin-bottom: 0; }

/* ---------- Parrafos del material, justificados ----------
   Teoria, Tarjetas Didacticas -en sus cuatro formatos y en el reproductor, que
   comparten `.seccion`-, casos clinicos y explicaciones. Una sola regla para todos.

   `hyphens: auto` es la otra mitad: justificar sin cortar palabras abre huecos
   grandes entre ellas en una columna angosta, y en el telefono todas lo son. Corta
   segun el idioma del documento, que es el `lang="es"` de base.html.

   Las referencias bibliograficas quedan fuera: son nombres propios, siglas y
   direcciones, y cortarlas con guion las vuelve ilegibles. */
.seccion-teoria .cuerpo p:not(.referencia),
.seccion,
.seccion-caso p,
.explicacion p:not(.meta) {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ---------- Barra del examen ---------- */

.barra-examen {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--fondo-panel); border: 1px solid var(--borde);
  border-radius: 10px; padding: .7rem 1rem; margin-bottom: 1.25rem;
}
.barra-examen .avance { font-size: .95rem; white-space: nowrap; }
.barra-examen .reloj {
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 1.05rem; font-weight: 700; padding: .2rem .5rem;
  border-radius: 6px; background: var(--fondo-hover);
}
.barra-examen .reloj.poco { background: var(--ecom-fondo); color: var(--ecom-texto); }
.barra-examen .reloj.agotado { background: var(--alerta-fondo); color: var(--alerta-texto); }
.etiqueta-modo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; padding: .15rem .5rem; border-radius: 4px;
  background: var(--acento-claro); color: var(--acento);
}

.acciones.navegacion { flex-wrap: wrap; }

/* ---------- Mapa de preguntas ---------- */

.mapa-preguntas { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: 1.25rem; }
.casilla-pregunta {
  width: 2.1rem; height: 2.1rem;
  display: inline-grid; place-items: center;
  border: 1px solid var(--borde); border-radius: 6px;
  font-size: .82rem; color: var(--texto-suave);
  background: var(--fondo-panel);
}
.casilla-pregunta:hover { border-color: var(--acento); text-decoration: none; }
.casilla-pregunta.hecha { background: var(--acento-claro); color: var(--acento); font-weight: 650; }
.casilla-pregunta.actual { border-color: var(--acento); border-width: 2px; font-weight: 700; }

/* ---------- Nota del examen ---------- */

.tarjeta-nota {
  display: flex; align-items: center; gap: 1.5rem;
  background: var(--fondo-panel); border: 1px solid var(--borde);
  border-radius: 12px; padding: 1.3rem 1.5rem; margin-bottom: 1.75rem;
  box-shadow: var(--sombra);
}
.tarjeta-nota.aprobado { border-left: 4px solid var(--trat-borde); }
.tarjeta-nota.reprobado { border-left: 4px solid var(--alerta-borde); }
/* El abandono se marca en gris y no en rojo: no es un mal resultado, es la
   ausencia de resultado. */
.tarjeta-nota.abandonado { border-left: 4px solid var(--texto-suave); }
.tarjeta-nota .nota { font-size: 2.8rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.tarjeta-nota .nota .signo { font-size: 1.3rem; margin-left: .1rem; }
.tarjeta-nota.aprobado .nota { color: var(--trat-borde); }
.tarjeta-nota.reprobado .nota { color: var(--alerta-borde); }
.tarjeta-nota.abandonado .nota { color: var(--texto-suave); }

.barra-medida { display: flex; align-items: center; gap: .6rem; }
.barra-medida span { font-size: .85rem; white-space: nowrap; min-width: 3.2rem; text-align: right; }

/* ---------- Configuracion del examen ---------- */

.opciones-modo { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .7rem; }
.tarjeta-opcion {
  display: flex; align-items: flex-start; gap: .6rem;
  border: 1px solid var(--borde); border-radius: 10px;
  padding: .85rem 1rem; cursor: pointer; font-weight: 400;
  background: var(--fondo-panel);
}
.tarjeta-opcion:hover { border-color: var(--acento); }
.tarjeta-opcion input[type=radio] { margin-top: .15rem; accent-color: var(--acento); width: 1.1rem; height: 1.1rem; }
.tarjeta-opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-claro); }
.tarjeta-opcion .cuerpo { display: flex; flex-direction: column; gap: .2rem; }

.opciones-lista { display: flex; flex-direction: column; gap: .1rem; }
.opciones-lista.horizontal { flex-direction: row; gap: 1rem; flex-wrap: wrap; }
.opciones-lista .casilla { margin: .1rem 0; }
.opciones-lista .casilla.apagada { opacity: .45; cursor: not-allowed; }

input[type=number] {
  width: 100%; padding: .5rem .65rem;
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 6px;
  font: inherit; font-size: .95rem;
}
input[type=number]:focus { outline: 2px solid var(--acento); outline-offset: -1px; }

@media (max-width: 700px) {
  .galeria figure { max-width: 100%; }
  .tarjeta-nota { gap: 1rem; padding: 1.1rem; }
  .tarjeta-nota .nota { font-size: 2.2rem; }
  .barra-examen { gap: .6rem; padding: .6rem .8rem; }
  .barra-examen .avance { font-size: .88rem; }
  .casilla-pregunta { width: 2.4rem; height: 2.4rem; }
}

/* ---------- Indicador de imagenes asociadas ---------- */

.chip-imagenes {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--texto-suave);
  background: var(--fondo-hover);
  border-radius: 5px;
  padding: .1rem .4rem;
  white-space: nowrap;
}
.chip-imagenes .ico { width: .95rem; height: .95rem; }
a.tarjeta:hover .chip-imagenes { color: var(--acento); }

/* ---------- Galeria de imagenes de un contenido ---------- */

.galeria-contenido {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .9rem;
  margin-bottom: 1.5rem;
}

.galeria-contenido figure {
  margin: 0;
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
}

/* La miniatura es un boton: se puede activar con el teclado, no solo con el raton. */
.galeria-contenido .visor-abrir {
  border: none;
  padding: 0;
  background: var(--fondo-hover);
  cursor: zoom-in;
  display: block;
  width: 100%;
}
.galeria-contenido .visor-abrir:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}
.galeria-contenido img {
  display: block;
  width: 100%;
  height: 11rem;
  object-fit: contain;
}

.galeria-contenido figcaption {
  padding: .6rem .75rem;
  border-top: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-size: .84rem;
}
.galeria-contenido .procedencia {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--acento);
}
.galeria-contenido .descripcion { color: var(--texto); }
.galeria-contenido .fuente { color: var(--texto-suave); font-size: .8rem; }

/* ---------- Visor a tamano completo ---------- */

.visor {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, .88);
  display: grid;
  place-items: center;
  padding: 2.5rem 1rem;
  cursor: zoom-out;
}
.visor[hidden] { display: none; }

.visor figure {
  margin: 0;
  max-width: min(96vw, 70rem);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  cursor: default;
}
.visor img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}
.visor figcaption {
  color: #e9eef4;
  font-size: .9rem;
  text-align: center;
}

.visor-cerrar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .14);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
}
.visor-cerrar:hover { background: rgba(255, 255, 255, .26); }
.visor-cerrar .ico { width: 1.4rem; height: 1.4rem; }

@media (max-width: 700px) {
  .galeria-contenido { grid-template-columns: 1fr; }
  .galeria-contenido img { height: 13rem; }
  .visor { padding: 3.5rem .5rem 1rem; }
}

/* ---------- La galeria simple tambien abre el visor ----------
   Las miniaturas son botones para poder activarlas con el teclado, no solo con el
   raton, y para que el area de toque sea toda la imagen. */

.galeria .visor-abrir {
  border: none;
  padding: 0;
  margin: 0;
  background: var(--fondo-hover);
  cursor: zoom-in;
  display: block;
  width: 100%;
  min-height: 0;
}
.galeria .visor-abrir:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}
.galeria .visor-abrir img { display: block; width: 100%; height: auto; }
.galeria figure:hover { border-color: var(--acento); }

/* ---------- Desarrollo teorico de un contenido ---------- */

.teoria { margin-bottom: 1.75rem; }

.seccion-teoria {
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--fondo-panel);
  margin-bottom: .6rem;
  overflow: hidden;
  box-shadow: var(--sombra);
}

.seccion-teoria > summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  cursor: pointer;
  background: var(--fondo-panel);
  list-style: none;
}
/* Se oculta el triangulo nativo para dibujar uno propio, igual en todos los
   navegadores. */
.seccion-teoria > summary::-webkit-details-marker { display: none; }
.seccion-teoria > summary::before {
  content: "";
  width: .5rem;
  height: .5rem;
  flex-shrink: 0;
  border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave);
  transform: rotate(-45deg);
  transition: transform .15s ease;
  margin-right: .1rem;
}
.seccion-teoria[open] > summary::before { transform: rotate(45deg); }
.seccion-teoria > summary:hover { background: var(--fondo-hover); }

.seccion-teoria .titulo { font-weight: 650; font-size: .98rem; flex: 1; }

.seccion-teoria .cuerpo {
  display: block;
  min-height: 0;
  padding: .8rem 1rem 1rem 2.1rem;
  border-top: 1px solid var(--borde);
}
/* Cada seccion ocupa lo que ocupa su texto y nada mas: con once secciones
   abiertas, el aire sobrante obliga a desplazarse de mas para leerlas. */
.seccion-teoria[open] > .cuerpo > *:last-child { margin-bottom: 0; }
.seccion-teoria .cuerpo > .galeria:last-child,
.seccion-teoria .cuerpo > .galeria-contenido:last-child { margin-bottom: 0; }
.seccion-teoria .cuerpo p { margin: 0 0 .6rem; font-size: .96rem; line-height: 1.6; }
.seccion-teoria .cuerpo p:last-child { margin-bottom: 0; }
.seccion-teoria .cuerpo .referencia {
  font-size: .84rem;
  padding-top: .5rem;
  border-top: 1px dashed var(--borde);
}

@media (max-width: 700px) {
  .seccion-teoria > summary { padding: .8rem .85rem; }
  .seccion-teoria .cuerpo { padding: .8rem .85rem 1rem; }
}


/* --- Graficos SVG -------------------------------------------------------- */
/* Los graficos usan las mismas variables de color que el resto de la interfaz,
   asi que cambian solos entre tema claro y oscuro. Nada de imagenes ni fuentes
   externas: solo formas y texto SVG. */
.panel-graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.grafico {
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: var(--sombra);
  padding: .9rem 1rem;
  margin: 0 0 1rem;
  overflow-x: auto;
}
.grafico svg { display: block; width: 100%; height: auto; min-width: 18rem; }
.grafico.rosco { display: flex; align-items: center; justify-content: center; margin: 0; }
.grafico.rosco svg { max-width: 11rem; min-width: 0; }

.grafico figcaption,
.grafico > .rotulo {
  color: var(--texto-suave);
  font-size: .8rem;
  text-align: center;
  margin-top: .4rem;
}

/* Texto dentro del SVG */
.grafico text { fill: var(--texto); font-family: inherit; }
.g-etiqueta { font-size: 11.5px; fill: var(--texto); }
.g-valor { font-size: 11.5px; font-weight: 600; fill: var(--texto); }
.g-escala { font-size: 9.5px; fill: var(--texto-suave); }

/* Guias, pistas y barras */
.g-guia { stroke: var(--borde); stroke-width: 1; }
.g-guia.base { stroke: var(--texto-suave); }
.g-pista { fill: var(--fondo-hover); }
.g-barra { fill: var(--acento); }
.g-barra:hover { opacity: .85; }

/* Coloreado por dimension y por juicio de valor, reutilizando la paleta */
.g-barra.p { fill: var(--dim-p); }
.g-barra.d { fill: var(--dim-d); }
.g-barra.t { fill: var(--dim-t); }
.g-barra.s { fill: var(--dim-s); }
.g-barra.bien { fill: var(--trat-borde); }
.g-barra.regular { fill: var(--ecom-borde); }
.g-barra.flojo { fill: var(--alerta-borde); }

/* Linea de aprobacion: discontinua para que se lea como umbral, no como dato */
.g-referencia {
  stroke: var(--alerta-borde);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

/* Evolucion */
.g-trazo { fill: none; stroke: var(--acento); stroke-width: 2.5; stroke-linejoin: round; }
.g-area { fill: var(--acento); opacity: .13; stroke: none; }
.g-punto { stroke: var(--fondo-panel); stroke-width: 2; }
.g-punto.aprobado { fill: var(--trat-borde); }
.g-punto.reprobado { fill: var(--alerta-borde); }

/* Rosco */
.g-rosco-pista { fill: none; stroke: var(--fondo-hover); stroke-width: 14; }
.g-rosco-valor {
  fill: none;
  stroke: var(--acento);
  stroke-width: 14;
  stroke-linecap: round;
}
.g-rosco-valor.bien { stroke: var(--trat-borde); }
.g-rosco-valor.regular { stroke: var(--ecom-borde); }
.g-rosco-valor.flojo { stroke: var(--alerta-borde); }
.g-rosco-cifra { font-size: 26px; font-weight: 700; fill: var(--texto); }
.g-rosco-pie { font-size: 10px; fill: var(--texto-suave); }
.g-rosco-titulo { font-size: 11.5px; fill: var(--texto-suave); }

/* En pantalla angosta el grafico se desliza en lugar de encogerse hasta ser
   ilegible: es la misma decision que en las tablas. */
@media (max-width: 640px) {
  .grafico { padding: .7rem .5rem; }
  .grafico svg { min-width: 30rem; }
  .grafico.rosco svg { min-width: 0; }
}

/* Pastilla de color para un porcentaje suelto en una tabla. Comparte la escala
   bien / regular / flojo con los graficos, para que un 62 % se vea igual en los
   dos sitios. */
.pastilla {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  border: 1px solid var(--borde);
  color: var(--texto-suave);
  white-space: nowrap;
}
.pastilla.bien { background: var(--trat-fondo); border-color: var(--trat-borde); color: var(--trat-texto); }
.pastilla.regular { background: var(--ecom-fondo); border-color: var(--ecom-borde); color: var(--ecom-texto); }
.pastilla.flojo { background: var(--alerta-fondo); border-color: var(--alerta-borde); color: var(--alerta-texto); }

/* --- Eleccion del banco de preguntas ------------------------------------- */
/* Cuatro opciones excluyentes con su cuenta de preguntas disponibles. Se
   presentan como tarjetas y no como un desplegable porque la cuenta es lo que
   hace tomar la decision, y en un <select> no cabria. */
.opciones-historial { display: grid; gap: .5rem; }

.opcion-historial {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .8rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo-panel);
  cursor: pointer;
}
.opcion-historial:hover { background: var(--fondo-hover); }
.opcion-historial .cuerpo { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.opcion-historial .titulo { font-weight: 600; }
.opcion-historial .meta { font-size: .82rem; color: var(--texto-suave); }
.opcion-historial .cuenta {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--acento);
  padding: .1rem .55rem;
  border-radius: 6px;
  background: var(--acento-claro);
}
.opcion-historial:has(input:checked) {
  border-color: var(--acento);
  background: var(--acento-claro);
  box-shadow: inset 0 0 0 1px var(--acento);
}
/* Sin preguntas disponibles la opcion sigue visible, para que se entienda por
   que no se puede elegir, pero queda apagada. */
.opcion-historial.vacia { opacity: .55; cursor: not-allowed; }
.opcion-historial.vacia .cuenta { color: var(--texto-suave); background: var(--fondo-hover); }

/* --- Boton de accion destructiva ----------------------------------------- */
/* Se usa para abandonar un examen. Va en variante `plano` (sin relleno) para que
   no compita con Finalizar: es una salida, no la accion principal. */
.boton.peligro {
  background: var(--alerta-borde);
  border-color: var(--alerta-borde);
  color: #fff;
}
.boton.peligro.plano {
  background: transparent;
  color: var(--alerta-texto);
  border-color: var(--alerta-borde);
}
.boton.peligro.plano:hover { background: var(--alerta-fondo); }

/* La fila del abandono se separa de la navegacion con una linea, para que no se
   pulse por inercia despues de Siguiente. */
.acciones.abandono {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--borde);
}
.acciones.abandono .meta { font-size: .82rem; color: var(--texto-suave); flex: 1; min-width: 12rem; }

/* --- Ventana modal de la plataforma -------------------------------------- */
/* Reemplaza a confirm() y a alert() del navegador: respeta el tema, se dibuja igual
   en todos los sistemas, se escribe en espanol y permite distinguir un error de un
   aviso o de una accion destructiva. Sirve para confirmar y tambien para informar. */
.modal {
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--fondo-panel);
  color: var(--texto);
  padding: 0;
  max-width: min(30rem, calc(100vw - 2rem));
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}
.modal::backdrop { background: rgba(10, 15, 22, .55); }

.modal .marco { padding: 1.3rem 1.4rem 1.1rem; }

/* Cabecera con icono a la izquierda del titulo. El icono se alinea con la primera
   linea y no se encoge cuando el titulo ocupa dos renglones. */
.modal .cabecera { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .6rem; }
.modal .titulo { margin: 0; font-size: 1.12rem; font-weight: 650; }
.modal .icono-tono { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; margin-top: .05rem; }

/* Un tono por situacion. El color viene de las variables que ya usa el resto de la
   plataforma, asi que el modal cambia con el tema sin definir paleta propia. El
   icono ademas distingue por forma -cruz, triangulo, i, visto-, para que no dependa
   solo del color. */
.modal.error   .icono-tono { color: var(--alerta-borde); }
.modal.peligro .icono-tono { color: var(--alerta-borde); }
.modal.aviso   .icono-tono { color: var(--ecom-borde); }
.modal.info    .icono-tono { color: var(--clave-borde); }
.modal.exito   .icono-tono { color: var(--trat-borde); }

/* Una linea de color en el borde superior repite el tono sin teñir toda la ventana:
   el texto sigue leyendose sobre el fondo de siempre. */
.modal.error, .modal.peligro { border-top: 3px solid var(--alerta-borde); }
.modal.aviso { border-top: 3px solid var(--ecom-borde); }
.modal.info  { border-top: 3px solid var(--clave-borde); }
.modal.exito { border-top: 3px solid var(--trat-borde); }

/* Un mensaje sin cuerpo esconde el parrafo; si no, deja un hueco bajo el titulo. */
.modal .texto[hidden] { display: none; }
/* Con un solo boton queda a la derecha igual que el principal de una confirmacion,
   asi el dedo lo busca siempre en el mismo sitio. */
.modal .acciones .boton[hidden] { display: none; }
.modal .texto {
  margin: 0 0 1.2rem;
  color: var(--texto-suave);
  font-size: .95rem;
  line-height: 1.6;
}
.modal .acciones {
  display: flex;
  gap: .6rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin: 0;
}

/* En movil los botones ocupan el ancho: son mas faciles de acertar con el dedo y
   dejan claro cual es cual. */
@media (max-width: 480px) {
  .modal .acciones { flex-direction: column-reverse; }
  .modal .acciones .boton { width: 100%; }
}

/* Aviso pequeno bajo un boton que exige confirmacion. */
.nota-confirmar {
  display: block;
  font-size: .78rem;
  color: var(--texto-suave);
  margin-top: .35rem;
}

/* --- Interruptor de si / no ---------------------------------------------- */
/* Se usa en Mis Preferencias para cualquier opcion de dos estados. Es una casilla
   real debajo: funciona con teclado y con lectores de pantalla; lo que se dibuja
   es la palanca. Todo con formas CSS, sin imagenes. */
.interruptor {
  display: flex;
  align-items: center;
  gap: .7rem;
  cursor: pointer;
  font-weight: 500;
  margin: 0;
  user-select: none;
}

/* La casilla se esconde sin sacarla del arbol de accesibilidad. */
.interruptor input {
  position: absolute;
  opacity: 0;
  width: 2.6rem;
  height: 1.5rem;
  margin: 0;
  cursor: pointer;
}

.interruptor .palanca {
  position: relative;
  flex-shrink: 0;
  width: 2.6rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--fondo-hover);
  border: 1px solid var(--borde);
  transition: background .15s ease, border-color .15s ease;
}
.interruptor .palanca::after {
  content: "";
  position: absolute;
  top: 50%;
  left: .18rem;
  transform: translateY(-50%);
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--fondo-panel);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: left .15s ease;
}

.interruptor input:checked + .palanca {
  background: var(--acento);
  border-color: var(--acento);
}
.interruptor input:checked + .palanca::after { left: 1.32rem; }

/* El foco tiene que verse: la casilla real es invisible, asi que se marca la palanca. */
.interruptor input:focus-visible + .palanca {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.interruptor .texto { flex: 1; }

/* --- Arbol del temario --------------------------------------------------- */
/* Jerarquia de areas, subareas y contenidos. Se construye con <details> nativo:
   funciona sin JavaScript, recuerda el estado de cada rama y es accesible con
   teclado sin escribir nada. El guion solo agrega abrir y cerrar todo de golpe. */
.arbol { margin: 1rem 0 2rem; }

.nodo {
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo-panel);
  margin-bottom: .45rem;
}
.nodo > summary {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .6rem .85rem;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
}
.nodo > summary::-webkit-details-marker { display: none; }
.nodo > summary::before {
  content: "";
  width: .45rem;
  height: .45rem;
  flex-shrink: 0;
  border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave);
  transform: rotate(-45deg);
  transition: transform .12s ease;
}
.nodo[open] > summary::before { transform: rotate(45deg); }
.nodo > summary:hover { background: var(--fondo-hover); }

.nodo.area > summary .titulo { font-weight: 650; font-size: 1rem; }
.nodo.tema { background: transparent; border-color: transparent; margin-bottom: 0; }
.nodo.tema > summary { padding: .45rem .6rem; }
.nodo.tema > summary .titulo { font-weight: 550; font-size: .95rem; }

.nodo .cuentas { color: var(--texto-suave); font-size: .82rem; margin-left: auto; }
.rama { padding: 0 .5rem .5rem 1.4rem; }

/* Las hojas son los 645 contenidos: filas compactas, con su codigo alineado. */
.hojas { list-style: none; margin: 0 0 .4rem; padding: 0 0 0 1.5rem; }
.hojas li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .22rem .4rem;
  border-radius: 5px;
  font-size: .9rem;
}
.hojas li:hover { background: var(--fondo-hover); }
.hojas li a { display: flex; gap: .5rem; align-items: baseline; flex: 1; min-width: 0; }
.hojas li .nombre { overflow-wrap: anywhere; }
/* Un contenido sin nada cargado se atenua: se ve que existe, sin invitar a entrar. */
.hojas li.vacia a { color: var(--texto-suave); }

.hojas .contadores { display: inline-flex; gap: .25rem; flex-shrink: 0; }
/* Contador de lo que tiene un contenido en el arbol del temario. Se llama `contador` y
   no `marca` porque `marca` ya era la marca de la aplicacion en la barra superior y la
   etiqueta «correcta» de una opcion: una regla suelta con ese nombre se filtraba a las
   dos. */
.contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.2rem;
  padding: 0 .3rem;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.contador.teoria { background: var(--clave-fondo); color: var(--clave-texto); border-color: var(--clave-borde); }
.contador.tarjeta { background: var(--ecom-fondo); color: var(--ecom-texto); border-color: var(--ecom-borde); }
.contador.pregunta { background: var(--trat-fondo); color: var(--trat-texto); border-color: var(--trat-borde); }
.contador.imagen { background: var(--fondo-hover); color: var(--texto-suave); border-color: var(--borde); }

.leyenda-arbol {
  color: var(--texto-suave);
  font-size: .84rem;
  padding: .6rem .85rem;
  border: 1px dashed var(--borde);
  border-radius: 8px;
  margin: 1rem 0;
  line-height: 2;
}
.acciones-arbol { display: inline-flex; gap: .4rem; }

@media (max-width: 640px) {
  .rama { padding-left: .5rem; }
  .hojas { padding-left: .4rem; }
  .nodo .cuentas { margin-left: 0; width: 100%; }
  .hojas li { flex-wrap: wrap; }
}

/* --- Un parametro, como tarjeta -------------------------------------------
   El problema que resuelve: todos los parametros iban seguidos sobre el fondo de la
   pagina, con el rotulo, el campo, los limites y la explicacion al mismo peso y la
   misma sangria. No se veia donde acababa uno y empezaba el siguiente, y la
   explicacion de arriba parecia el rotulo del campo de abajo.

   Cada uno pasa a tener superficie propia, y dentro hay tres alturas distintas:
   el rotulo manda, el control se ve como control, y la prosa queda claramente detras. */
.campo.parametro {
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-left: 3px solid transparent;
  border-radius: 6px;
  padding: .9rem 1.1rem;
  margin-bottom: .7rem;
}

/* Los que alguien cambio respecto al valor de fabrica llevan un filo de color. Dice
   algo verdadero -«esto se configuro aqui»- y se lee sin abrir nada. */
.campo.parametro.tocado { border-left-color: var(--acento); }

/* El rotulo manda dentro de la tarjeta. */
.campo.parametro > label,
.campo.parametro > .interruptor .texto {
  font-weight: 600;
  font-size: 1rem;
}

/* La unidad, entre parentesis, es apoyo del rotulo y no compite con el. */
.campo.parametro > label .meta { font-weight: 400; }

/* El campo tiene que verse como campo: borde franco y algo mas de aire que el resto
   de la pagina. Sobre el fondo del panel, un borde de un pixel al tono del texto
   suave desaparecia. */
.campo.parametro input[type="text"],
.campo.parametro input[type="password"],
.campo.parametro input[type="email"],
.campo.parametro input[type="number"],
.campo.parametro select {
  background: var(--fondo);
  border: 1px solid var(--borde-fuerte, var(--borde));
  padding: .5rem .65rem;
  font-size: 1rem;
}

/* Al enfocar, el anillo del acento: es la senial de «aqui estas escribiendo». */
.campo.parametro input:focus-visible,
.campo.parametro select:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

/* Los limites y la procedencia van DEBAJO del campo, no a su lado: al lado competian
   con el a la misma altura y se leian como si fueran parte del valor. */
.campo.parametro .fila-parametro { align-items: baseline; }
.campo.parametro .fila-parametro > .meta {
  flex: 1 1 100%;
  margin-top: .35rem;
  font-size: .8rem;
  color: var(--texto-suave);
}

/* La explicacion: prosa, no control. Separada por una linea, con menos peso y con la
   medida acotada para que se lea de corrido en vez de cruzar toda la pantalla. */
.parametro-ayuda {
  margin: .7rem 0 0;
  padding-top: .6rem;
  border-top: 1px solid var(--borde);
  max-width: 62ch;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--texto-suave);
}

/* Un interruptor no tiene rotulo aparte: el texto va dentro del propio control, asi
   que su explicacion no necesita la linea de separacion. */
.campo.parametro .interruptor + .parametro-ayuda {
  border-top: 0;
  padding-top: 0;
  margin-top: .5rem;
}

/* Un parametro: el campo y sus limites en la misma linea, para que se lea el rango
   sin bajar la vista. */
.fila-parametro { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
/* 7rem alcanza para un numero de tres o cuatro cifras, que es lo que son casi todos
   los parametros. */
.fila-parametro input { width: 7rem; flex: 0 0 auto; }
/* Los de texto libre guardan nombres de servidor y direcciones de correo, que ahi no
   caben: «mail.smartchainerp.com» se veia cortado a la mitad y no habia forma de
   comprobar de un vistazo si estaba bien escrito. Se estiran hasta ocupar el ancho
   disponible, con un tope para que no crucen la pantalla entera en un monitor ancho. */
.fila-parametro input[type="text"],
.fila-parametro input[type="password"],
.fila-parametro input[type="email"] {
  width: auto;
  flex: 1 1 22rem;
  min-width: 14rem;
  max-width: 30rem;
}
/* El de mm:ss es de texto, pero sigue siendo un numero corto: vuelve al ancho chico. */
.fila-parametro input.tiempo {
  width: 7rem;
  flex: 0 0 auto;
  min-width: 0;
}
/* Los desplegables llevan rotulos largos («Editores y administradores»), asi que no
   caben en el ancho de un campo numerico. */
.fila-parametro select.ancho { width: auto; min-width: 15rem; flex: 0 0 auto; }

/* Con un campo ancho, la explicacion de al lado se va a la linea siguiente y la fila
   queda mas alta; alinear arriba evita que el rotulo baile respecto al campo. */
.fila-parametro { align-items: center; }
.fila-parametro .meta { font-size: .82rem; color: var(--texto-suave); }

/* --- Editor de recorte de imagenes --------------------------------------- */
/* Se marca sobre la imagen que parte se muestra durante un examen. Lo que queda
   fuera se oscurece con cuatro velos, para que se lea de un golpe que se descarta. */
.editor-recorte {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin: 1rem 0 2rem;
}

.lienzo {
  position: relative;
  display: inline-block;
  line-height: 0;
  border: 1px solid var(--borde);
  border-radius: 8px;
  overflow: hidden;
  background: var(--fondo-hover);
  cursor: crosshair;
  touch-action: none;   /* el arrastre marca el recorte, no desplaza la pagina */
  user-select: none;
  max-width: 100%;
}
.lienzo img { display: block; width: 100%; height: auto; }

.velo-recorte {
  position: absolute;
  background: rgba(10, 15, 22, .68);
  pointer-events: none;
}

.marco-recorte {
  position: absolute;
  border: 2px solid var(--acento);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
  pointer-events: none;
}
/* Las cuatro esquinas se marcan para que el rectangulo se lea como algo ajustable. */
.marco-recorte::before,
.marco-recorte::after {
  content: "";
  position: absolute;
  width: .55rem;
  height: .55rem;
  border: 2px solid var(--acento);
  background: var(--fondo-panel);
}
.marco-recorte::before { left: -.3rem; top: -.3rem; }
.marco-recorte::after { right: -.3rem; bottom: -.3rem; }

.panel-recorte h2 { font-size: 1rem; margin: 1.2rem 0 .5rem; }

.atajos-recorte { display: flex; flex-direction: column; gap: .5rem; }
.atajos-recorte .grupo { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.atajos-recorte .rotulo {
  font-size: .8rem;
  color: var(--texto-suave);
  min-width: 6.5rem;
}

/* La vista previa agranda la imagen dentro de una ventana y la desplaza: se ve el
   recorte sin pedir nada al servidor. */
.vista-recorte { margin: .5rem 0 1rem; }
.vista-recorte .ventana {
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo-hover);
  max-width: 20rem;
  line-height: 0;
}
.vista-recorte .ventana img { display: block; }
.vista-recorte .meta {
  font-size: .8rem;
  color: var(--texto-suave);
  padding: .3rem .1rem 0;
}

@media (max-width: 900px) {
  .editor-recorte { grid-template-columns: 1fr; }
}

/* --- Revision de imagenes ------------------------------------------------ */
/* Una rejilla de miniaturas para mirarlas todas de un tiron: es la unica forma de
   detectar un diagnostico escrito encima de la ilustracion. */
.rejilla-imagenes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.ficha-imagen {
  margin: 0;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--fondo-panel);
  box-shadow: var(--sombra);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ficha-imagen .muestra {
  display: block;
  background: var(--fondo-hover);
  line-height: 0;
  min-height: 7rem;
  cursor: zoom-in;
}
.ficha-imagen .muestra img { display: block; width: 100%; height: auto; }
.ficha-imagen .sin-uso {
  display: block;
  padding: 2rem .8rem;
  text-align: center;
  font-size: .82rem;
  color: var(--texto-suave);
  line-height: 1.4;
}

.ficha-imagen figcaption {
  padding: .6rem .7rem .7rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  font-size: .85rem;
}
.ficha-imagen .nombre { font-weight: 600; overflow-wrap: anywhere; }
.ficha-imagen .meta { font-size: .78rem; color: var(--texto-suave); }

/* --- Arbol de filtros al generar un examen -------------------------------- */
/* Reutiliza el arbol del temario, con casillas en cada nodo. Va con altura maxima y
   desplazamiento propio: veinte subareas abiertas empujarian el boton de generar
   fuera de la pantalla. */
.arbol-filtros {
  max-height: 22rem;
  overflow-y: auto;
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: .5rem;
  background: var(--fondo);
  margin: .4rem 0 0;
}
.arbol-filtros .nodo { box-shadow: none; }
.arbol-filtros .nodo > summary { padding: .35rem .5rem; }
.arbol-filtros .casilla { margin: 0; }
.arbol-filtros .casilla.area { flex: 1; }
.arbol-filtros .rama { padding: .1rem .5rem .5rem 2rem; display: grid; gap: .1rem; }
.arbol-filtros .rama .casilla { padding: .18rem .3rem; border-radius: 5px; }
.arbol-filtros .rama .casilla:hover { background: var(--fondo-hover); }
/* Sin preguntas la casilla se ve pero no se puede marcar: se entiende por que. */
.arbol-filtros .casilla.apagada { opacity: .5; }

/* --- Menu lateral contraido ----------------------------------------------- */
/* El interruptor de la barra superior lo reduce a una franja de iconos. Se esconde
   el texto y no el enlace: el area de toque se mantiene y el `title` sirve de ayuda
   emergente, asi que sigue siendo usable sin adivinar. */
body.lateral-plegado .armazon { grid-template-columns: 3.5rem 1fr; }

body.lateral-plegado .lateral { padding: 1rem .35rem; overflow-x: hidden; }
body.lateral-plegado .lateral a { justify-content: center; padding: .6rem .3rem; }
body.lateral-plegado .lateral a > span,
body.lateral-plegado .lateral .rotulo > span,
body.lateral-plegado .lateral .ficha-usuario { display: none; }

/* El rotulo del grupo se queda como icono centrado: separa las secciones sin ocupar
   una linea de texto que no cabe. */
body.lateral-plegado .lateral .rotulo {
  justify-content: center;
  padding: 0 0 .4rem;
  border-bottom: 1px solid var(--borde);
  margin-bottom: .4rem;
}
body.lateral-plegado .lateral .grupo { margin-bottom: .9rem; }

/* La franja no debe empujar el contenido de golpe al pulsar el interruptor. */
.armazon { transition: grid-template-columns .18s ease; }
@media (prefers-reduced-motion: reduce) {
  .armazon { transition: none; }
  .lateral { transition: none !important; }
}

/* En movil el lateral es un cajon: contraerlo no aplica, y la regla de escritorio
   no debe estorbar si quedo puesta al girar el dispositivo. */
@media (max-width: 900px) {
  body.lateral-plegado .armazon { grid-template-columns: 1fr; }
  body.lateral-plegado .lateral { padding: 1rem .75rem; }
  body.lateral-plegado .lateral a { justify-content: flex-start; padding: .7rem; }
  body.lateral-plegado .lateral a > span,
  body.lateral-plegado .lateral .rotulo > span,
  body.lateral-plegado .lateral .ficha-usuario { display: revert; }
  body.lateral-plegado .lateral .rotulo { justify-content: flex-start; border: 0; }
}

/* --- Marca de la aplicacion ---------------------------------------------- */
/* El logo va junto al nombre y no suelto: los dos juntos son la identidad, y de paso
   ocupa el hueco que dejo el interruptor al mudarse a la linea divisoria. */
/* La marca es «medCrex» pegado, con el logo al lado. El hueco va entre el nombre y el
   logo, no dentro del nombre: por eso el nombre viaja envuelto en su propio elemento. */
.barra .marca { display: inline-flex; align-items: center; gap: .5rem; }
.barra .marca .palabra { display: inline; letter-spacing: normal; }

/* El bloque del interruptor mas la marca ocupa exactamente el ancho del menu lateral,
   de modo que la caja de busqueda que va despues arranca sobre la linea que separa el
   lateral del contenido.

   El calculo: 15rem del lateral, menos 1rem de relleno de la barra, menos 2,25rem del
   boton y menos dos huecos de 0,75rem entre los tres elementos. */
@media (min-width: 901px) {
  .barra .marca { width: calc(15rem - 1rem - 2.25rem - 1.5rem); flex: 0 0 auto; }

  /* Con el menu contraido a 3,5rem el boton ya lo llena: el nombre no cabe y queda
     solo el logo, con la caja siguiendo al borde. */
  body.lateral-plegado .barra .marca { width: auto; }
  body.lateral-plegado .barra .marca .palabra { display: none; }
}
.barra .marca .logo {
  width: 1.45rem;
  height: 1.45rem;
  flex-shrink: 0;
  color: var(--acento);
}

/* El interruptor del menu vive en la barra superior, al extremo izquierdo: es donde
   se busca y sirve igual en movil y en escritorio. Antes habia ademas una manija
   flotando sobre la linea que separa el lateral del contenido; se retiro porque se
   superponia al contenido y, desde que las migas quedan fijas al bajar, chocaba con
   ellas. El estilo del boton es el de `.icono`, compartido con los demas de la barra. */

/* Ejemplo de JSON dentro de la ayuda. Se desliza en horizontal en lugar de partir las
   lineas: un JSON con saltos donde no van deja de servir para copiar y pegar. */
.ejemplo-json {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: .8rem 1rem;
  overflow-x: auto;
  font-size: .82rem;
  line-height: 1.5;
  margin: .6rem 0 1rem;
}

/* --- Campo de archivo en espanol ----------------------------------------- */
/* El control nativo escribe «Choose Files» y «No file chosen» en el idioma del
   navegador, y ese texto no se puede cambiar ni con HTML ni con CSS. Se esconde el
   control y se muestra una etiqueta propia: al pulsar una <label> se abre el selector
   sin necesidad de JavaScript. */
.campo-archivo {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
}

/* Escondido pero no retirado: sigue recibiendo el foco con el teclado y los lectores
   de pantalla lo siguen anunciando. */
.campo-archivo input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.campo-archivo label { cursor: pointer; margin: 0; }
/* El foco del control invisible se marca en la etiqueta, que es lo que se ve. */
.campo-archivo input[type="file"]:focus-visible + label {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.campo-archivo .elegidos {
  font-size: .88rem;
  color: var(--texto-suave);
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 10rem;
}
.campo-archivo .elegidos.con-archivos { color: var(--texto); font-weight: 500; }

/* --- Pestanas -------------------------------------------------------------- */
/* Se hacen con radios y CSS, sin JavaScript: el navegador recuerda cual esta marcada,
   funciona con el teclado y con lectores de pantalla, y si el guion no carga la pagina
   sigue siendo usable. Se usan cuando una pantalla junta grupos de campos que no se
   miran a la vez, como los parametros de examen y los de contrasena. */
.pestanas { margin: 1rem 0 1.5rem; }

.pestanas .tiras {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  border-bottom: 1px solid var(--borde);
  /* Se apilan en varias filas en vez de deslizarse. La version anterior las
     hacia rodar de lado con `overflow-x`, y una pestania fuera de la vista es
     una pestania que no existe: nadie la busca arrastrando. Al sumar secciones
     -con «Estudio» ya son siete- eso dejo de ser teorico. */
}

/* El radio va escondido pero no retirado: sigue tomando el foco con el teclado. */
.pestanas .tira-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.pestanas .tira {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem 1rem;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
  font-size: .93rem;
  font-weight: 550;
  color: var(--texto-suave);
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
}
.pestanas .tira:hover { background: var(--fondo-hover); color: var(--texto); }

.pestanas .tira .cuenta {
  font-size: .74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: .05rem .4rem;
  border-radius: 999px;
  background: var(--fondo-hover);
  color: var(--texto-suave);
}

/* La pestana marcada: subrayada con el color de acento, como se espera. */
.pestanas .tira-radio:checked + .tira {
  color: var(--acento);
  border-bottom-color: var(--acento);
  background: var(--fondo-panel);
}
.pestanas .tira-radio:checked + .tira .cuenta {
  background: var(--acento-claro);
  color: var(--acento);
}
.pestanas .tira-radio:focus-visible + .tira {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}

/* Los paneles se esconden todos y se muestra el de la pestana marcada. Se hace con
   :has() sobre el contenedor, que es lo que permite relacionar un radio con un panel
   que no es su hermano inmediato. */
.pestanas .panel { display: none; padding: 1.25rem 0 0; }
/* La regla que empareja cada radio con su panel la genera la propia plantilla, con un
   <style> de una linea por seccion: enumerarlas aqui obligaria a recordar agregar una
   cada vez que nace una seccion, y olvidarlo esconderia la pestana sin ningun aviso. */

/* Sin :has() se muestran todos, uno debajo del otro, con su titulo. Es peor, pero se
   puede usar: nunca se esconde contenido que no se pueda alcanzar. */
@supports not selector(:has(*)) {
  .pestanas .panel { display: block; border-top: 1px solid var(--borde); }
  .pestanas .tiras { display: none; }
}

/* --- Buscador ------------------------------------------------------------- */
/* La caja va en la barra superior porque la busqueda sirve desde cualquier pantalla. */
.caja-buscar {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 26rem;
  margin: 0;
}
.caja-buscar .lupa {
  position: absolute;
  left: .6rem;
  width: 1rem;
  height: 1rem;
  color: var(--texto-suave);
  pointer-events: none;
}
.caja-buscar input[type="search"] {
  width: 100%;
  /* Varios navegadores dibujan `input[type=search]` con su propio aspecto nativo y se
     comen el borde declarado. Con esto manda la hoja de estilos. */
  appearance: none;
  -webkit-appearance: none;
  padding: .45rem .7rem .45rem 2.1rem;
  font-size: .9rem;
  /* Borde ambar: la caja queda entre la marca y los accesos, y con el borde gris de
     siempre se perdia contra el fondo de la barra.

     Va en 1px. Estuvo en 2px con el argumento de que en 1px el ambar no se distinguia
     del gris, pero a tamano real 2px sobre una pastilla redondeada se lee como si
     fueran dos lineas, y el color ya basta para separarla del fondo. */
  border: 1px solid var(--ecom-borde);
  border-radius: 999px;
  background: var(--fondo);
  color: var(--texto);
}
.caja-buscar .lupa { color: var(--ecom-borde); }
.caja-buscar input::placeholder { color: var(--texto-suave); }

/* Foco SIN anillo, igual que el resto de los campos de la aplicacion.
   La version anterior quitaba el `outline` del navegador y ponia en su lugar un halo
   ambar por fuera del borde. Como el borde ya es ambar de 2px, se veian dos anillos del
   mismo color, uno pegado al otro. El halo se fue; queda el borde y nada mas.

   Para que el foco siga siendo visible, que hace falta para quien navega con el teclado,
   cambian dos cosas que no agregan contorno: el fondo pasa al del panel y el borde se
   oscurece un poco. No se usa `--ecom-texto` puro para ese borde -es el color del texto
   sobre fondo ambar, #7a4e04, casi negro- sino una mezcla, que lo aparta del ambar de
   reposo sin volverlo un aro oscuro. */
.caja-buscar input[type="search"]:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--ecom-borde) 72%, var(--ecom-texto));
  background: var(--fondo-panel);
}

/* Respaldo para navegadores sin color-mix: la senal queda en el fondo y en el borde
   ambar de siempre, que es mejor que un aro de un color que no pega con la caja. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .caja-buscar input[type="search"]:focus { border-color: var(--ecom-borde); }
}

/* La caja de la pagina de resultados es mas ancha y lleva boton visible. */
.caja-buscar.grande {
  max-width: none;
  margin: 1rem 0 1.5rem;
  gap: .5rem;
}
.caja-buscar.grande input[type="search"] {
  padding: .65rem .9rem;
  border-radius: 8px;
  font-size: 1rem;
}

/* Etiqueta que solo leen los lectores de pantalla. */
.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.titulo-grupo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1rem;
  margin: 1.75rem 0 .6rem;
}
.titulo-grupo .ico { width: 1.05rem; height: 1.05rem; color: var(--texto-suave); }
.titulo-grupo .cuenta {
  font-size: .74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: .05rem .45rem;
  border-radius: 999px;
  background: var(--acento-claro);
  color: var(--acento);
}

.resultados { display: grid; gap: .5rem; }

.resultado {
  display: grid;
  gap: .2rem;
  padding: .7rem .9rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo-panel);
  color: var(--texto);
}
.resultado:hover {
  border-color: var(--acento);
  background: var(--fondo-hover);
  text-decoration: none;
}
.resultado .titulo { font-weight: 600; font-size: .95rem; }
.resultado .fragmento, .fila-resultado .fragmento { font-size: .88rem; color: var(--texto-suave); line-height: 1.55; }
.resultado .donde { font-size: .78rem; color: var(--texto-suave); }

/* La coincidencia se marca con fondo, no con negrita: la negrita ya la usa el titulo
   del resultado y se confundirian.

   La regla va suelta y no acotada a los resultados porque el mismo resaltado aparece
   ahora dentro de la ficha del contenido, sobre la teoria y las Tarjetas Didacticas.
   Acotarla obligaba a repetirla ahi con otro selector, y las dos se irian separando.
   El amarillo de fabrica del navegador no sirve: no es del tema y en modo oscuro queda
   ilegible. */
mark {
  background: var(--ecom-fondo);
  color: var(--ecom-texto);
  padding: 0 .1rem;
  border-radius: 3px;
}
/* Sobre un fondo que ya es ambar -la seccion «Perla ECOM» de una Tarjeta- la marca
   desaparecia: mismo fondo, mismo texto. Ahi se invierten los dos colores del mismo
   par, asi sigue siendo ambar, se lee en los dos temas y no hace falta un color nuevo. */
.seccion.perla_ecom mark {
  background: var(--ecom-texto);
  color: var(--ecom-fondo);
}

@media (max-width: 760px) {
  /* En movil el campo no cabe junto a la marca: queda el icono de lupa. */
  .caja-buscar:not(.grande) { display: none; }
}

/* Separa los datos de la cuenta de las preferencias, que son cosas distintas. */
.separador {
  border: 0;
  border-top: 1px solid var(--borde);
  margin: 1.5rem 0;
}

/* --- Paginas recientes ---------------------------------------------------- */
/* Menu con las siete ultimas paginas. Va como menu y no como tira de fichas porque los
   titulos son largos y siete no caben en la barra junto a la marca y el buscador. */
.recientes { position: relative; display: inline-flex; }

.menu-recientes {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  min-width: 15rem;
  max-width: 22rem;
  padding: .5rem;
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  z-index: 40;
}

.menu-recientes .rotulo {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
  font-weight: 700;
  padding: .1rem .5rem .45rem;
}

.menu-recientes ul { list-style: none; margin: 0 0 .4rem; padding: 0; }
.menu-recientes li { margin: 0; }
.menu-recientes a {
  display: block;
  padding: .4rem .5rem;
  border-radius: 6px;
  font-size: .9rem;
  color: var(--texto);
  /* Un titulo largo se recorta en lugar de partir el menu en dos lineas. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-recientes a:hover {
  background: var(--fondo-hover);
  text-decoration: none;
}
.menu-recientes .boton { width: 100%; }

/* ===================================================================
   REVISION A DOS PANELES
   En la correccion de un examen, las preguntas de un mismo caso se
   rinden con el escenario a la izquierda y sus preguntas a la derecha.
   El panel del caso queda pegajoso al bajar, que es lo que hace util la
   division: el enunciado del paciente sigue a la vista mientras se
   repasa cada pregunta, sin repetir el caso una vez por pregunta.
   =================================================================== */
.revision-con-caso {
  display: grid;
  grid-template-columns: minmax(17rem, 22rem) 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 2rem;
}

.revision-con-caso .panel-caso {
  position: sticky;
  /* Deja aire bajo la barra superior para que el caso no quede pegado al borde. */
  top: 1.5rem;
  /* Si el caso es mas alto que la pantalla se desplaza dentro de su panel, para
     que nunca tape las preguntas ni obligue a bajar toda la pagina. */
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}

/* El titulo del caso vive dentro de la tarjeta. Puesto encima empujaba la ficha
   hacia abajo y su borde superior dejaba de coincidir con el de las preguntas de
   al lado: las tarjetas se alinean entre si, no por su primera linea de texto.
   Ni .ficha-caso ni .pregunta llevan margen superior y las dos usan el mismo
   relleno, asi que arrancan a la misma altura sin compensar nada. */
.ficha-caso .titulo-caso {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 .8rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--borde);
  color: var(--texto);
}

.revision-con-caso .panel-caso .ficha-caso { margin-bottom: .5rem; }
.revision-con-caso .pie-caso { margin: 0; }

.revision-con-caso .panel-preguntas > .pregunta:last-child { margin-bottom: 0; }

/* Apilado en pantallas angostas: dos columnas de 8rem no las lee nadie. El caso
   deja de ser pegajoso porque ahi ocupa el ancho entero y taparia las preguntas. */
@media (max-width: 900px) {
  .revision-con-caso { grid-template-columns: 1fr; gap: 1rem; }
  .revision-con-caso .panel-caso {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

/* Numero del examen: se muestra en el panel, en el historial y en la cabecera del
   resultado para poder nombrarlo sin ambiguedad, porque dos examenes del mismo dia
   y el mismo modo llevan el mismo titulo. Va en cifras tabulares y en tono suave:
   es un dato de referencia, no compite con la nota ni con el titulo. */
.numero-examen {
  font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
}

/* --- Pantalla de error ---------------------------------------------------- */
/* Se centra en la pagina y da siempre una salida: sin un enlace de vuelta, quien
   cae aqui desde un enlace guardado no tiene a donde ir mas que al boton atras. */
.pagina-error {
  max-width: 34rem;
  margin: 2.5rem auto;
  text-align: center;
}
.pagina-error .icono-error {
  width: 3rem;
  height: 3rem;
  color: var(--texto-suave);
  margin-bottom: .8rem;
}
/* El codigo se muestra pequeno y en cifras tabulares: sirve para reportar el
   problema, pero no es lo que la persona necesita leer primero. */
.pagina-error .codigo {
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
  letter-spacing: .12em;
  color: var(--texto-suave);
  margin-bottom: .2rem;
}
.pagina-error h1 { margin: 0 0 .5rem; }
.pagina-error .subtitulo { margin: 0 auto 1.6rem; max-width: 30rem; }
.pagina-error .acciones {
  display: flex;
  gap: .7rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.pagina-error .meta { font-size: .85rem; }

@media (max-width: 480px) {
  .pagina-error .acciones { flex-direction: column; }
  .pagina-error .acciones .boton { width: 100%; }
}

/* Texto que solo leen los lectores de pantalla. Se usa junto a un icono que ya dice
   lo mismo a la vista: el icono lleva aria-hidden y este texto da el nombre, para
   que la celda no quede muda para quien no ve el dibujo. No se usa `display:none`
   porque eso lo esconde tambien de los lectores. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Contencion del desbordamiento horizontal ---------------------------- */
/* En una rejilla o en un flex, el tamaño minimo de cada hijo es su CONTENIDO, no
   cero. Por eso un grafico con `min-width: 30rem` -que se desliza a proposito para
   no volverse ilegible en pantalla angosta- estiraba su columna, y con ella la
   pagina entera: en el celular todo aparecia corrido hacia la derecha y el texto se
   cortaba. `min-width: 0` devuelve el control al contenedor y deja que el
   `overflow-x` del propio grafico haga su trabajo.
   
   Se aplica a los tres sitios donde hay hijos de rejilla con contenido ancho. */
.panel-graficos > *,
.rejilla-cifras > *,
.revision-con-caso > * {
  min-width: 0;
}

.grafico { min-width: 0; }

/* Red de seguridad: ningun elemento deberia sobresalir, pero si alguno lo hace, que
   no arrastre la pagina.

   Se usa `clip` y NO `hidden`: `hidden` convierte al elemento en un contenedor de
   desplazamiento, y eso rompe el `position: sticky` de la barra superior y del panel
   lateral del caso clinico, que dejan de quedarse fijos. `clip` recorta sin crear
   ese contenedor, que es justo lo que hace falta aqui. */
html, body { overflow-x: clip; }

/* Las tablas anchas ya se deslizan dentro de su envoltura; esto impide que la
   envoltura misma estire la pagina. */
.envoltura-tabla { max-width: 100%; }

/* --- Grupo plegable del menu lateral ------------------------------------- */
/* Administracion son seis opciones que la mayoria del tiempo no se usan, y dejarlas
   siempre abiertas empujaba el resto del menu fuera de la pantalla en un portatil.

   Se usa <details>, que es nativo: funciona sin JavaScript, recuerda su estado
   mientras la pagina no se recargue y trae la accesibilidad hecha -el resumen ya es
   un boton para el lector de pantalla-. Es el mismo mecanismo del arbol del temario
   y del caso plegable, asi que la plataforma se comporta igual en los tres sitios. */
.lateral .grupo.plegable > summary {
  cursor: pointer;
  /* El marcador propio del navegador se dibuja distinto en cada uno y no hereda el
     color del tema; se quita y se pone el chevron del sprite. */
  list-style: none;
  user-select: none;
  border-radius: 8px;
}
.lateral .grupo.plegable > summary::-webkit-details-marker { display: none; }
.lateral .grupo.plegable > summary:hover { background: var(--fondo-hover); color: var(--texto); }

/* El chevron se empuja al extremo derecho y gira al abrir: un solo simbolo para los
   dos estados. */
.lateral .grupo.plegable > summary .chevron {
  margin-left: auto;
  transition: transform .15s ease;
}
.lateral .grupo.plegable[open] > summary .chevron { transform: rotate(180deg); }

/* El resumen respira igual que un enlace del menu, para que la fila no baile al
   plegarse. */
.lateral .grupo.plegable > summary { padding: .5rem .7rem; }

/* --- Tamano del texto ----------------------------------------------------- */
/* La preferencia se escribe en el <html> y de ahi lo hereda todo, porque el CSS de la
   plataforma esta en `rem`: cambiar el tamano de la raiz reescala la interfaz entera
   -letra, iconos, rellenos, alturas- sin tocar ninguna otra regla. Es el mismo
   mecanismo que el tema, que tambien vive en un atributo del <html>.

   Se usa `font-size` en porcentaje y no un valor fijo para respetar a quien haya
   cambiado el tamano de letra en su navegador o en el sistema: la escala se aplica
   SOBRE su ajuste, no en lugar de el. */
:root[data-texto="compacto"] { font-size: 87.5%; }   /* 14 px si la base son 16 */
:root[data-texto="amplio"]   { font-size: 112.5%; }  /* 18 px */

/* --- Fila de filtros y buscadores ------------------------------------------ */
/* Los filtros en una fila que se parte sola: en el celular caen uno bajo otro sin
   necesidad de un corte de pantalla propio. La usan el indice de Tarjetas
   Didacticas y el buscador de contenidos, que tienen que verse igual. */
.filtros {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
}
.filtros .campo { margin: 0; flex: 1 1 11rem; min-width: 0; }
/* `flex-wrap` porque la pantalla de resultados suma una accion propia y tres botones
   no caben en cualquier ancho: se parten en vez de desbordar. */
.filtros .campo.acciones-filtro { flex: 0 0 auto; display: flex; gap: .5rem; flex-wrap: wrap; }
/* La flecha del boton que abre el recorrido apunta hacia adelante: es la misma que
   despues pasa de pagina. */
.filtros .acciones-filtro .boton .ico { transform: rotate(-90deg); }

/* El campo de busqueda con el MISMO aspecto que los desplegables de al lado: mismo
   ancho, alto, fondo, borde y esquinas.

   Hace falta escribirlo porque `input[type=search]` esta excluido a proposito de los
   estilos generales de formulario: los dos buscadores de la plataforma viven en
   `.caja-buscar`, que les da su aspecto de pastilla ambar. Este no es ese buscador
   sino un filtro mas de la fila, asi que tiene que verse como sus vecinos.

   Se conserva `type=search` y no se cambia a `text` porque en el movil abre el
   teclado con la tecla de buscar y anade el boton de limpiar. */
.filtros .campo-icono { display: block; width: 100%; }
.filtros input[type="search"],
.filtros select {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.5rem;
  padding: .5rem .65rem;
  background: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 6px;
  font: inherit;
  font-size: .95rem;
}
/* La lupa va dentro, asi que el texto arranca despues de ella. */
.filtros .campo-icono > input[type="search"] { padding-left: 2.5rem; }
/* Varios navegadores dibujan `search` con su aspecto nativo, que ignora el borde y
   el fondo de arriba. `line-height` fijo iguala los dos ultimos pixeles de alto: un
   `select` y un `input` con la misma letra y el mismo relleno no miden igual porque
   el navegador les da distinta altura de linea. */
.filtros input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.35;
}
.filtros select { line-height: 1.35; }
/* `input[type=search]` no entra en la regla general de foco de los formularios, asi que
   sin esto se queda con el aro propio del navegador, de otro color y por fuera del
   borde. Mismo trato que el resto: contorno por dentro, que no dobla el borde. */
.filtros input[type="search"]:focus {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
  border-color: var(--acento);
}

/* Los cuatro formatos que ofrece la preferencia. Cambian la densidad, no el
   contenido: ver muchas de un vistazo, leerlas seguidas, abrirlas una a una o
   pasarlas como diapositivas. */
.tarjetas-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}
.tarjetas-rejilla > * { min-width: 0; }

.tarjetas-lista .fila-tarjeta {
  padding: 1rem 0;
  border-bottom: 1px solid var(--borde);
}
.tarjetas-lista .fila-tarjeta:last-child { border-bottom: none; }
.tarjetas-lista h3 { margin: 0 0 .3rem; font-size: 1.02rem; }

.tarjetas-acordeon .seccion-teoria { margin-bottom: .5rem; }

/* Una por pantalla, con aire alrededor: se lee de lejos, como una diapositiva. */
.tarjetas-presentacion .diapositiva {
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--sombra);
}
.tarjetas-presentacion .diapositiva h3 { font-size: 1.4rem; margin: 0 0 .8rem; }
.tarjetas-presentacion .diapositiva .seccion { font-size: 1.05rem; }

@media (max-width: 700px) {
  .tarjetas-presentacion .diapositiva { padding: 1.2rem; min-height: 0; }
  .tarjetas-presentacion .diapositiva h3 { font-size: 1.15rem; }
}

.paginacion {
  display: flex;
  gap: .8rem;
  align-items: center;
  justify-content: center;
  margin: 2rem 0 1rem;
  flex-wrap: wrap;
}

/* --- Pasar de contenido, como paginas de un libro ------------------------- */
/* En PANTALLA ANCHA hay sitio para el titulo completo del contenido vecino, que es
   lo que permite decidir si seguir o no; en el CELULAR no cabe, asi que ahi va una
   barra fija al pie con las flechas, donde llega el pulgar sin estirar la mano ni
   recorrer toda la pagina hasta el final. */
.paso-contenido {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: stretch;
  margin: 2.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--borde);
}
.paso-contenido > * { min-width: 0; }

.paso-contenido .paso {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem 1rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--fondo-panel);
  color: var(--texto);
  min-width: 0;
}
.paso-contenido .paso:hover {
  border-color: var(--acento);
  background: var(--acento-claro);
  text-decoration: none;
}
.paso-contenido .paso.vacia { border: none; background: none; }
.paso-contenido .paso .cuerpo { display: flex; flex-direction: column; min-width: 0; }
.paso-contenido .paso .rotulo {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
  font-weight: 700;
}
/* El titulo se recorta con puntos suspensivos en lugar de partir la tarjeta en dos
   lineas de alto distinto: las dos deben medir igual para que la fila no baile. */
.paso-contenido .paso .titulo {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.paso-contenido .paso .ico { flex-shrink: 0; color: var(--texto-suave); }
/* La flecha del sprite apunta hacia abajo: se gira un cuarto de vuelta a cada lado. */
.paso-contenido .anterior .ico { transform: rotate(90deg); }
.paso-contenido .siguiente .ico { transform: rotate(-90deg); }
.paso-contenido .siguiente { text-align: right; }
/* El texto se alinea a la derecha con `text-align`, NO con `align-items: flex-end`.
   Con `flex-end` el titulo deja de estirarse al ancho de la caja y toma el suyo
   propio, que con `nowrap` es el del texto entero: entonces el recorte de arriba no
   tiene nada que recortar y el titulo se sale por la izquierda de la tarjeta. En una
   tableta de 744 px medimos 341 px de titulo dentro de una caja de 244, pisando el
   «1 de 645» del centro. Los hijos deben quedar en `stretch`, que es lo que hay por
   omision. */
.paso-contenido .posicion { align-self: center; white-space: nowrap; }

/* La barra del celular no existe en pantalla ancha. */
.paso-movil { display: none; }

/* El mismo corte con el que el menu lateral se vuelve un cajon: por debajo de 900 px
   la aplicacion ya se comporta como tactil, y pasar de contenido es de las acciones
   que mas se repiten al estudiar. En una tableta -744 px el iPad mini, 810 el iPad-
   las tarjetas con titulo entraban pero obligaban a apuntarle a un blanco pequeno al
   final de una pagina larga; la barra del pie queda donde llega el pulgar. */
@media (max-width: 900px) {
  /* Las tarjetas con titulo se van: en 350 px no caben dos y se leen peor que un
     boton claro. Queda la barra fija al pie. */
  .paso-contenido { display: none; }

  .paso-movil {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 24;
    padding: .6rem .8rem;
    /* Respeta la franja del gesto de inicio en los telefonos que la tienen. */
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--fondo-panel);
    border-top: 1px solid var(--borde);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
  }
  /* `flex: 1 1 0` reparte lo que haya, que en un telefono es lo justo. El tope evita
     que en una tableta se estiren de borde a borde: con un solo boton -el primer y el
     ultimo contenido del recorrido- ocupaba los 660 px enteros de la barra, y un
     blanco de ese tamano ya no se lee como boton sino como franja de color. */
  .paso-movil .boton { flex: 1 1 0; max-width: 16rem; justify-content: center; gap: .4rem; }
  .paso-movil .anterior .ico, .paso-movil .boton:first-child .ico { transform: rotate(90deg); }
  .paso-movil .boton:last-child .ico { transform: rotate(-90deg); }
  .paso-movil .meta { flex: 0 0 auto; }

  /* Sitio al final de la pagina para que la barra no tape la ultima linea. */
  main { padding-bottom: 5rem; }
}


/* --- Buscador acotado a los contenidos ------------------------------------- */
/* La fila reutiliza `.filtros`, que es la misma de Tarjetas Didacticas, para que los
   dos buscadores de contenido se vean iguales. Aqui solo va lo propio: la variante
   compacta de la ficha y el plegado del celular. */
.buscador-contenidos > .filtros { margin-bottom: 0; }
.buscador-contenidos { margin-bottom: 1.5rem; }

/* En la ficha del contenido la barra es un accesorio, no el asunto de la pantalla:
   menos relleno y menos aire debajo, para no empujar el titulo hacia abajo. */
.buscador-contenidos.compacta { margin-bottom: 1.2rem; }
.buscador-contenidos.compacta > .filtros { padding: .6rem .7rem; }

/* El boton de la lupa solo existe en el celular. */
.buscador-contenidos .abre-buscador { display: none; }

/* --- Resultados de la busqueda de contenidos -------------------------------- */
.resultados-contenido { display: flex; flex-direction: column; gap: .6rem; }
.fila-resultado {
  padding: .85rem 1rem;
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
}
.fila-resultado:hover { border-color: var(--acento); }
.fila-resultado .titulo {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  font-weight: 600;
}
.fila-resultado .donde { margin: .25rem 0 .4rem; font-size: .78rem; }
.fila-resultado .fragmento { margin: 0; }

/* --- Pasar pagina dentro de una busqueda ------------------------------------ */
/* Sin busqueda, el centro es solo «319 de 645». Dentro de una, ahi va tambien que se
   esta recorriendo y como salirse, porque si no, no hay forma de saber por que las
   flechas saltan de Cardiologia a Nefrologia. */
.paso-contenido .posicion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  text-align: center;
}
.paso-contenido .rotulo-busqueda {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  max-width: 12rem;
  font-size: .85rem;
  font-weight: 600;
}
.paso-contenido .rotulo-busqueda .ico { width: .9rem; height: .9rem; flex-shrink: 0; }
/* El termino puede ser largo: se corta con puntos suspensivos en vez de ensanchar la
   columna del medio y aplastar las dos tarjetas de los lados. */
.paso-contenido .rotulo-busqueda > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.paso-contenido .salir { font-size: .76rem; }

/* El conteo del celular se vuelve enlace de regreso a los resultados. */
.paso-movil .conteo { display: inline-flex; align-items: center; gap: .3rem; }
.paso-movil .conteo .ico { width: .9rem; height: .9rem; }

/* 700 y no 900, aunque las flechas del pie corten en 900: los dos umbrales miden cosas
   distintas y por eso NO deben coincidir. Las flechas suben a 900 por una cuestion de
   ALCANCE -donde llega el pulgar-, y una tableta se agarra igual que un telefono. El
   plegado de esta barra es por ALTURA: en un telefono, con las migas fijas arriba y las
   flechas fijas abajo, una fila mas de campo se come lo poco que queda para leer. Una
   tableta tiene 1.133 px de alto y ese problema no existe, asi que ahi esconder el
   campo detras de una lupa solo agrega un toque para llegar a lo mismo.

   Se probo al reves -las dos en 900- y en el iPad el campo desaparecia sin motivo. */
@media (max-width: 700px) {
  .buscador-contenidos.compacta { display: flex; align-items: center; gap: .5rem; }
  .buscador-contenidos.compacta .abre-buscador {
    display: inline-flex;
    flex: 0 0 auto;
    padding: .5rem .7rem;
  }
  .buscador-contenidos.compacta > .filtros { display: none; flex: 1 1 auto; }
  .buscador-contenidos.compacta.abierto > .filtros { display: flex; }
  .buscador-contenidos.compacta.abierto .abre-buscador { display: none; }

  /* El boton de leer todos seguidos ocupa el ancho: es la accion principal de la
     pantalla de resultados y en 371 px, puesto junto a «Buscar» y «Limpiar», quedaria
     partido en dos lineas de texto. Otro caso de ancho, no de alcance: tambien 700. */
  .filtros .acciones-filtro { width: 100%; }
  .filtros .acciones-filtro .boton:not(.secundario) {
    flex: 1 1 100%;
    justify-content: center;
  }
}


/* --- Panel de comparacion de duplicados ------------------------------------ */
/* Lo que el archivo trae ya cargado se pinta con los dos lados enfrentados, para
   decidir viendolos, no leyendo un aviso. Los colores salen de las variables de
   enfasis que ya usan las Tarjetas Didacticas: lo que esta en la base se lee como
   dato asentado -azul- y lo que llega en el archivo como el punto a decidir
   -ambar-. Definidos una sola vez, sirven igual en tema claro y oscuro. */

.panel-duplicados { margin-bottom: 1.5rem; }
.panel-duplicados > h3 {
  margin: 0 0 .6rem;
  font-size: 1rem;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.duplicado {
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo-panel);
  box-shadow: var(--sombra);
  padding: .9rem 1rem;
  margin-bottom: .9rem;
}

.cabecera-duplicado {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
.clase-duplicado {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--acento);
  background: var(--acento-claro);
  border-radius: 4px;
  padding: .15rem .45rem;
  white-space: nowrap;
}
.rotulo-duplicado {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Dos columnas mientras quepan; debajo del ancho de una tableta en vertical se
   apilan, porque dos textos clinicos en columnas de 15 caracteres no se leen. */
.comparacion {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin-top: .7rem;
}
@media (max-width: 700px) {
  .comparacion { grid-template-columns: minmax(0, 1fr); }
}

.columna-cargado, .columna-archivo {
  border-radius: 6px;
  padding: .7rem .8rem;
  border: 1px solid;
  min-width: 0;
}
.columna-cargado {
  background: var(--clave-fondo);
  border-color: var(--clave-borde);
}
.columna-archivo {
  background: var(--ecom-fondo);
  border-color: var(--ecom-borde);
}
.columna-cargado h4, .columna-archivo h4 {
  margin: 0 0 .5rem;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.columna-cargado h4 { color: var(--clave-texto); }
.columna-archivo h4 { color: var(--ecom-texto); }

.campos-comparados {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .15rem .6rem;
  margin: 0;
  font-size: .88rem;
}
.campos-comparados dt { color: var(--texto-suave); }
.campos-comparados dd { margin: 0; overflow-wrap: anywhere; }

.texto-comparado {
  margin: .5rem 0 0;
  padding: .6rem;
  max-height: 22rem;
  overflow: auto;
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: 4px;
  font-size: .85rem;
  font-family: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --- Estado de publicacion del contenido ----------------------------------- */
/* Cada elemento es una ficha con su casilla, su estado y su cuerpo plegado: un caso o
   una pregunta en borrador no tienen otra pantalla donde leerse, y publicar sin poder
   leer es firmar a ciegas. */

.publicable {
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo-panel);
  padding: .8rem .9rem;
  margin-bottom: .7rem;
}

.cabecera-publicable {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  flex-wrap: wrap;
}
.cabecera-publicable .casilla { flex: 1; min-width: 0; margin: 0; }
.rotulo-publicable { font-weight: 600; overflow-wrap: anywhere; }

.texto-publicable {
  margin: .5rem 0 0;
  padding: .6rem;
  max-height: 24rem;
  overflow: auto;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 4px;
  font-size: .85rem;
  font-family: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Los recuentos de la cabecera son enlaces: cada uno lleva a su clase. */
a.cifra { text-decoration: none; color: inherit; display: block; }
a.cifra:hover { border-color: var(--acento); }
a.cifra.elegida { border-color: var(--acento); background: var(--acento-claro); }

/* --- lup-Dup: el estetoscopio que conduce la sesión guiada -------------------- */
/* El dibujo está en `parciales/rostro.html`; aquí vive todo su movimiento.

   Dos ejes independientes de estado, puestos como clase en el propio <svg>:

     actividad   `reposo` o `hablando`
     ánimo       nada, `acierto` o `error`

   Se combinan (`rostro hablando acierto`) porque lup-Dup puede estar celebrando y
   hablando a la vez. Si fueran un solo eje habría que inventar cuatro clases
   más para las mezclas. */

.rostro {
  width: 88px;
  height: 88px;
  flex: none;
  color: var(--acento);
  transition: color .25s ease;
}
.rostro.grande { width: 128px; height: 128px; }
.rostro.chico  { width: 44px;  height: 44px; }

.rostro .campana   { fill: var(--acento-claro); }
.rostro .diafragma { stroke: var(--borde); }
.rostro .brillo    { fill: var(--fondo-panel); }

/* El ánimo se dice también con el color, no solo con la boca: a un vistazo, y
   sin leer, ya se sabe si estuvo bien. */
.rostro.acierto { color: var(--trat-borde); }
.rostro.error   { color: var(--alerta-borde); }

/* Cada pieza que se anima necesita su propia caja de referencia: sin
   `transform-box: fill-box` el navegador toma el origen del lienzo entero y un
   `scale` sobre un ojo lo manda fuera de la cara. */
.rostro .cuerpo, .rostro .ojo, .rostro .olivas,
.rostro .onda, .rostro .habla, .rostro .campana, .rostro .diafragma {
  transform-box: fill-box;
  transform-origin: center;
}
/* El balanceo cuelga de las olivas, que es de donde colgaría un estetoscopio
   de verdad. */
.rostro .cuerpo { transform-origin: 50% 10%; }

/* Reposo: respira y se balancea al borde de lo perceptible. Un muñequito que se
   mueve mucho compite con el texto que uno está tratando de leer. */
.rostro.reposo .cuerpo { animation: rostro-balanceo 6.5s ease-in-out infinite; }
@keyframes rostro-balanceo {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.5deg); }
}

/* Parpadeo. Los dos ojos llevan la misma animación y arrancan juntos, así que
   parpadean a la vez sin tener que sincronizar nada. */
.rostro .ojo { animation: rostro-parpadeo 5.4s infinite; }
@keyframes rostro-parpadeo {
  0%, 91%, 100% { transform: scaleY(1); }
  94%           { transform: scaleY(.1); }
}
.rostro .brillo { transition: opacity .1s; }

/* La boca: una línea por ánimo, y la pieza rellena para cuando habla. */
.rostro .boca .linea, .rostro .boca .habla { opacity: 0; transition: opacity .16s ease; }
.rostro .boca .recta { opacity: 1; }
.rostro.acierto .boca .recta, .rostro.error .boca .recta { opacity: 0; }
.rostro.acierto .boca .alegre  { opacity: 1; }
.rostro.error   .boca .apenada { opacity: 1; }

/* Hablando: la boca se abre y se cierra, y salen ondas de la campana. El ritmo
   es irregular a propósito -tres tiempos distintos en el mismo ciclo- porque una
   boca que se abre a compás exacto parece un metrónomo, no alguien hablando. */
.rostro.hablando .boca .linea { opacity: 0; }
.rostro.hablando .boca .habla { opacity: 1; animation: rostro-boca .62s ease-in-out infinite; }
@keyframes rostro-boca {
  0%   { transform: scaleY(.18) scaleX(1); }
  18%  { transform: scaleY(1)   scaleX(.9); }
  34%  { transform: scaleY(.3)  scaleX(1); }
  52%  { transform: scaleY(.85) scaleX(.94); }
  70%  { transform: scaleY(.22) scaleX(1); }
  86%  { transform: scaleY(.7)  scaleX(.92); }
  100% { transform: scaleY(.18) scaleX(1); }
}

.rostro .ondas { opacity: 0; transition: opacity .2s ease; }
.rostro.hablando .ondas { opacity: 1; }
.rostro.hablando .onda { animation: rostro-onda 1.15s ease-out infinite; }
.rostro.hablando .onda + .onda { animation-delay: .3s; }
@keyframes rostro-onda {
  0%   { opacity: 0; transform: translateX(-4px) scale(.85); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(4px) scale(1.1); }
}
/* Un latido apenas visible en la campana mientras habla, para que la cara no
   quede rígida sosteniendo una boca que se mueve sola. */
.rostro.hablando .campana, .rostro.hablando .diafragma {
  animation: rostro-latido 1.15s ease-in-out infinite;
}
@keyframes rostro-latido {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* Acierto: un salto corto y las olivas hacia arriba. Una sola vez: celebrar en
   bucle deja de ser una celebración a los tres segundos. */
.rostro.acierto .cuerpo { animation: rostro-salto .6s ease-out 1; }
@keyframes rostro-salto {
  0%   { transform: translateY(0)    rotate(0); }
  30%  { transform: translateY(-10px) rotate(-4deg); }
  55%  { transform: translateY(0)    rotate(3deg); }
  75%  { transform: translateY(-3px) rotate(-1deg); }
  100% { transform: translateY(0)    rotate(0); }
}
.rostro.acierto .olivas { animation: rostro-olivas .6s ease-out 1; }
@keyframes rostro-olivas {
  0%, 100% { transform: translateY(0); }
  35%      { transform: translateY(-5px); }
}

/* Error: niega con la cabeza y para. Sin sacudidas largas ni rojo parpadeante:
   quien se equivocó ya lo sabe, y lo que necesita es la explicación. */
.rostro.error .cuerpo { animation: rostro-negacion .55s ease-in-out 1; }
@keyframes rostro-negacion {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-4.5deg); }
  75%      { transform: rotate(4.5deg); }
}

/* Quien pidió menos movimiento en su sistema no debe recibir NADA de esto. Los
   estados se siguen leyendo: la boca, el color y las ondas quedan puestos, solo
   deja de haber animación. */
@media (prefers-reduced-motion: reduce) {
  .rostro .cuerpo, .rostro .ojo, .rostro .olivas, .rostro .onda,
  .rostro .habla, .rostro .campana, .rostro .diafragma {
    animation: none !important;
  }
  .rostro.hablando .boca .habla { transform: scaleY(.6); }
}

/* --- La tarima: lup-Dup y lo que dice ---------------------------------------- */

.tarima {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
/* lup-Dup se queda a la vista mientras se baja por una sección larga de teoría: si
   se va con el desplazamiento, el globo queda hablando solo. */
.tarima .figura { position: sticky; top: 4.6rem; }

.tarima .dice {
  position: relative;
  flex: 1;
  min-width: 0;
  background: var(--acento-claro);
  border: 1px solid var(--borde);
  border-radius: .8rem;
  padding: .85rem 1rem;
  line-height: 1.5;
}
/* El pico del globo: dos triángulos superpuestos, el de atrás del color del
   borde y el de adelante del relleno, que es como se dibuja un borde en un
   triángulo de CSS. */
.tarima .dice::before, .tarima .dice::after {
  content: "";
  position: absolute;
  top: 1.6rem;
  border: .55rem solid transparent;
}
.tarima .dice::before { left: -1.1rem; border-right-color: var(--borde); }
.tarima .dice::after  { left: -1rem;   border-right-color: var(--acento-claro); }
.tarima .dice strong { color: var(--acento); }
.tarima .dice .meta { display: block; margin-top: .35rem; }

/* En móvil lup-Dup se pone arriba y el globo debajo, con el pico apuntando hacia
   él: al costado no caben los dos sin dejar el texto en una columna de tres
   palabras. */
@media (max-width: 560px) {
  .tarima { flex-direction: column; align-items: center; gap: .6rem; }
  .tarima .figura { position: static; }
  .tarima .dice { width: 100%; }
  .tarima .dice::before, .tarima .dice::after {
    top: auto; left: 50%; margin-left: -.55rem;
  }
  .tarima .dice::before { bottom: 100%; border-right-color: transparent; border-bottom-color: var(--borde); }
  .tarima .dice::after  { bottom: calc(100% - 1px); border-right-color: transparent; border-bottom-color: var(--acento-claro); }
}

/* --- La sesión guiada ------------------------------------------------------ */

.sesion-guiada .paso[hidden] { display: none; }
.sesion-guiada .paso { animation: paso-entra .25s ease-out; }
@keyframes paso-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sesion-guiada .paso { animation: none; }
}

/* La barra de arriba: en qué paso va y el interruptor de la voz. */
.barra-guia {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.barra-guia .progreso { flex: 1; min-width: 8rem; }

/* El interruptor de la voz. Es un botón y no una casilla porque cambia algo que
   ocurre ya, no una preferencia que se guarda al enviar un formulario.

   El icono se cambia entero desde el guion —`#i-voz` y `#i-voz-callada`—, igual
   que la luna y el sol del tema. Apagar con CSS las ondas del propio icono no
   funciona: `<use>` mete el dibujo en un árbol sombra donde solo entran las
   variables de color, no los selectores. */
.boton-voz { display: inline-flex; align-items: center; gap: .4rem; }
.boton-voz .ico { width: 1.1rem; height: 1.1rem; }
.boton-voz[aria-pressed="true"] { border-color: var(--acento); color: var(--acento); }

.sesion-guiada .acciones { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.sesion-guiada .acciones .separa { margin-left: auto; }

/* El marcador de la ronda de preguntas. */
.marcador { display: flex; gap: .35rem; align-items: center; }
.marcador .punto {
  width: .7rem; height: .7rem; border-radius: 50%;
  border: 1.5px solid var(--borde); background: transparent;
}
.marcador .punto.bien { background: var(--trat-borde); border-color: var(--trat-borde); }
.marcador .punto.mal  { background: var(--alerta-borde); border-color: var(--alerta-borde); }

/* Elegir por dónde empezar. */
.rejilla-guia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .7rem;
}
.rejilla-guia a {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--borde);
  border-radius: .7rem;
  padding: .7rem .85rem;
  background: var(--fondo-panel);
}
.rejilla-guia a:hover { border-color: var(--acento); background: var(--acento-claro); }
.rejilla-guia .titulo { display: block; font-weight: 600; margin-bottom: .25rem; }

/* --- La lista de reproducción: verla, ordenarla, vaciarla ----------------- */

/* Qué lista se está viendo. Fichas y no un desplegable: son pocas y hay que
   poder cambiar de lista sin dos pulsaciones. */
.fichas-lista {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.1rem;
}
.ficha-lista {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--borde);
  border-radius: 2rem;
  padding: .35rem .8rem;
  background: var(--fondo-panel);
}
.ficha-lista:hover { border-color: var(--acento); }
.ficha-lista.elegida {
  border-color: var(--acento);
  background: var(--acento-claro);
  color: var(--acento);
  font-weight: 600;
}
.ficha-lista .meta {
  border: 1px solid var(--borde);
  border-radius: 1rem;
  padding: 0 .4rem;
  font-size: .78rem;
}
.nueva-lista { display: inline-block; }
.nueva-lista > summary { list-style: none; cursor: pointer; display: inline-flex; }
.nueva-lista > summary::-webkit-details-marker { display: none; }
.nueva-lista form { display: flex; gap: .4rem; margin-top: .5rem; }

/* Las líneas de la lista. */
.cola { list-style: none; margin: 0; padding: 0; }
.cola .pista {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .7rem;
  border: 1px solid var(--borde);
  border-radius: .6rem;
  background: var(--fondo-panel);
  margin-bottom: .4rem;
}
.cola .numero {
  min-width: 1.6rem;
  text-align: right;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}
.cola .cuerpo { flex: 1; min-width: 0; }
.cola .titulo { display: block; }
.cola .mandos { display: flex; gap: .15rem; }
.cola .mandos form { display: inline; }

/* La etiqueta de qué clase de material es. Cada clase con su color, porque en
   una lista de treinta líneas el color es lo que se lee antes que el texto. */
.cola .clase, .cola-desplegable .clase {
  display: inline-block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  border: 1px solid var(--borde);
  border-radius: .3rem;
  padding: 0 .35rem;
  margin-right: .4rem;
  color: var(--texto-suave);
}
.clase.contenido { border-color: var(--acento);      color: var(--acento); }
.clase.teoria    { border-color: var(--dim-d);       color: var(--dim-d); }
.clase.perla     { border-color: var(--ecom-borde);  color: var(--ecom-borde); }
.clase.caso      { border-color: var(--dim-p);       color: var(--dim-p); }
.clase.pregunta  { border-color: var(--dim-t);       color: var(--dim-t); }

/* --- El reproductor -------------------------------------------------------- */

.reproductor .posicion { color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.reproductor .pista-vista[hidden] { display: none; }
.reproductor .pista-vista { margin-bottom: 1rem; }
.reproductor .origen { margin-bottom: .3rem; }
.reproductor .texto-teoria { line-height: 1.65; white-space: pre-wrap; }

/* Los mandos. Grandes y separados: esto se usa caminando, con una mano y sin
   mirar, así que un botón de 24 px al lado de otro no sirve. */
.mandos-guia {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  padding: .7rem .9rem;
  border: 1px solid var(--borde);
  border-radius: .8rem;
  background: var(--fondo-panel);
  margin-bottom: .6rem;
}
.boton.grande { padding: .7rem 1.3rem; font-size: 1.02rem; }
.icono.grande { width: 2.9rem; height: 2.9rem; }
.icono.grande .ico { width: 1.5rem; height: 1.5rem; }
.icono.peligro:hover { color: var(--alerta-borde); border-color: var(--alerta-borde); }

.velocidad { display: flex; align-items: center; gap: .45rem; font-size: .88rem; }
.velocidad input[type=range] { width: 7rem; }
.velocidad output { font-variant-numeric: tabular-nums; color: var(--texto-suave); }

.aviso-audifonos { margin: 0 0 1.1rem; }

/* La cola desplegada dentro del reproductor: para saltar a una pista. */
.cola-desplegable { margin-top: 1.4rem; }
.cola-desplegable > summary { cursor: pointer; color: var(--texto-suave); }
.cola.compacta .pista { padding: 0; border: 0; background: none; margin: 0; }
.cola.compacta .salto {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: .4rem;
  padding: .4rem .5rem;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.cola.compacta .salto:hover { background: var(--fondo-hover); }
.cola.compacta .pista.sonando .salto {
  background: var(--acento-claro);
  color: var(--acento);
  font-weight: 600;
}
.cola.compacta .titulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- El botón «Agregar a la lista» ---------------------------------------- */

/* Es un formulario, pero no debe ocupar su propia línea: donde se pone va al
   lado del título o de la tarjeta a la que pertenece. */
form.agregar-lista { display: inline-block; margin: 0; }

/* ---------- Marcar como leido ----------
   Mismo tamanio que «Agregar a la lista», con el que comparte encabezado. Marcado se
   pinta con los colores de tratamiento, el verde que en toda la plataforma dice
   «bien». `.acciones-titulo` junta los dos botones para que el titulo no quede
   partido entre ellos. */
form.marca-lectura { display: inline-block; margin: 0; }
.marca-lectura-boton.leida {
  background: var(--trat-fondo);
  border-color: var(--trat-borde);
  color: var(--trat-texto);
}
.acciones-titulo { display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; }
table.listado .completo { color: var(--trat-texto); font-weight: 650; }

/* La letra de la dimension junto a su casilla, al generar un examen. */
.casilla .dim { display: inline-grid; vertical-align: middle; margin-right: .25rem; }
.agregar-lista-boton.agregado {
  border-color: var(--trat-borde);
  color: var(--trat-texto);
  background: var(--trat-fondo);
  opacity: 1;   /* un botón deshabilitado se apaga, y este dice algo: no se apaga */
  cursor: default;
}

@media (max-width: 560px) {
  .mandos-guia { gap: .55rem; justify-content: center; }
  .velocidad { order: 3; }
  .cola .pista { flex-wrap: wrap; }
}

/* --- Dónde se posa el botón «Agregar a la lista» -------------------------- */

/* Junto a un título: el botón al lado, no debajo. */
.titulo-con-accion {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
}
.titulo-con-accion > h1, .titulo-con-accion > h3 { margin: 0; }

/* Encima de una ficha o de un resultado que ENTERO es un enlace. El botón no
   puede ir dentro del <a> —un <form> anidado en un <a> no es HTML válido y cada
   navegador lo repara distinto—, así que cuelga de un envoltorio y se posa
   encima. El hueco a la derecha evita que tape el texto. */
.tarjeta-con-accion, .resultado-con-accion { position: relative; display: flex; }
.tarjeta-con-accion > .tarjeta, .resultado-con-accion > .resultado {
  flex: 1;
  min-width: 0;
  padding-right: 3rem;
}
.tarjeta-con-accion > form.agregar-lista,
.resultado-con-accion > form.agregar-lista {
  position: absolute;
  top: .45rem;
  right: .45rem;
}

/* --- Avisos flotantes y contador de la lista ------------------------------ */

/* El aviso que confirma que algo se agregó a la lista. Aparece abajo a la
   derecha, dice qué se agregó y a cuál lista, y se va solo.

   Va abajo y no arriba porque arriba está la barra con la marca y el buscador, y
   un aviso encima de ellos tapa justo lo que se usa para seguir agregando. */
.notificaciones {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  /* El contenedor no debe interceptar pulsaciones: ocupa una esquina entera y
     dejaría muerto lo que haya debajo entre aviso y aviso. Cada aviso sí las
     recibe, para poder cerrarlo antes de tiempo. */
  pointer-events: none;
}

.notificacion {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: .7rem .9rem;
  border: 1px solid var(--trat-borde);
  border-left-width: 4px;
  border-radius: .6rem;
  background: var(--fondo-panel);
  color: var(--texto);
  box-shadow: var(--sombra);
  font-size: .9rem;
  line-height: 1.4;
  cursor: pointer;
  animation: notificacion-entra .22s ease-out;
}
.notificacion .ico {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--trat-borde);
  margin-top: .1rem;
}
/* El aviso de que algo NO se hizo -ya estaba en la lista, o el material ya no
   existe- se distingue por el color, no por el texto solo. */
.notificacion.repetida { border-color: var(--ecom-borde); }
.notificacion.repetida .ico { color: var(--ecom-borde); }

@keyframes notificacion-entra {
  from { opacity: 0; transform: translateY(.7rem); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Salida: la clase se pone antes de quitarlo del documento. */
.notificacion.saliendo {
  opacity: 0;
  transform: translateY(.4rem);
  transition: opacity .2s ease, transform .2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .notificacion { animation: none; }
  .notificacion.saliendo { transition: none; }
}

/* En móvil ocupa el ancho: una tarjeta de 22 rem pegada a la derecha en una
   pantalla de 360 px queda partida contra el borde. */
@media (max-width: 560px) {
  .notificaciones { left: .7rem; right: .7rem; bottom: .7rem; align-items: stretch; }
  .notificacion { max-width: none; }
}

/* El contador junto a «Lista de reproducción» en el menú. */
.contador-lista {
  margin-left: auto;
  min-width: 1.35rem;
  padding: 0 .35rem;
  border-radius: 1rem;
  background: var(--acento);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.35rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Con el menú contraído a franja de iconos no hay sitio para el número al lado
   del rótulo, así que se posa sobre la esquina del icono. */
body.lateral-plegado .lateral .contador-lista {
  position: absolute;
  top: .25rem;
  right: .25rem;
  margin-left: 0;
  min-width: 1.1rem;
  line-height: 1.1rem;
  font-size: .68rem;
}
body.lateral-plegado .lateral a { position: relative; }

/* El aviso se ve un instante también en el propio botón, que queda marcado. */
.contador-lista.subiendo { animation: contador-late .45s ease-out; }
@keyframes contador-late {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  .contador-lista.subiendo { animation: none; }
}

/* --- Antizoom de iOS en los campos de texto ------------------------------- */
/* Safari amplia la pagina al enfocar un campo que mide MENOS de 16 px, y al salir NO
   la devuelve a su tamano: queda agrandada, con el contenido corrido y los bordes
   cortados. Medido en esta aplicacion antes de escribir esto: el buscador de la barra
   iba a 14,4 px y el resto de los campos a 15,2.
 
   Tres cosas que hay que respetar aqui y que es facil equivocar:
 
   1. La condicion es el PUNTERO, nunca el ancho. Un iPad mini tiene 744 px logicos y
      entra por la rama de escritorio de cualquier `max-width`, asi que el arreglo
      «funciona» en el telefono y sigue roto en la tableta.
 
   2. Se pregunta por `any-pointer`, no por `pointer`. En modo «sitio de escritorio»
      -el de fabrica en el iPad- Safari responde que su puntero principal es fino,
      pero la pantalla tactil sigue ahi y sigue ampliando. `any-pointer` la ve igual.
 
   3. Una consulta de medios NO suma especificidad. Estos selectores repiten los
      MISMOS que fijan el tamano base -0,1,1 los campos comunes, 0,2,1 los buscadores,
      0,3,1 el buscador grande- y el bloque va al final del archivo: con la misma
      especificidad, gana el ultimo. Escribir aqui `input { font-size: 16px }` habria
      dejado la regla muerta sin que se notara.
 
   Van 16 px absolutos y no `1rem`: con el texto en «compacto» la raiz baja a 14 px y
   `1rem` volveria a quedar por debajo del limite. */
@media (any-pointer: coarse) {
  input[type=text], input[type=email], input[type=password], input[type=tel],
  input[type=url], input[type=number], input[type=date], input[type=time],
  input[type=search], textarea, select,
  .filtros input[type="search"], .filtros select,
  .caja-buscar input[type="search"],
  .caja-buscar.grande input[type="search"] {
    font-size: 16px;
  }
}

/* ---------- Campo de fecha en dd/mm/aaaa ----------
   El campo original queda en el arbol pero fuera de la vista: no se usa `display:none`
   ni `type=hidden` porque el boton necesita poder abrir SU calendario nativo con
   `showPicker()`, y un elemento sin caja no lo permite. Ver el bloque del mismo nombre
   en `app.js`. */
/* El ancho minimo es el del texto que va a llevar: sin el, dentro de una celda
   angosta el campo se encoge hasta mostrar «28» y el formato deja de leerse. */
.campo-icono > input[type="text"][inputmode="numeric"] { min-width: 8.5rem; }

.campo-fecha-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: 0;
  padding: 0;
}



/* ---------- Ficha de usuarios ----------
   Las casillas de roles y los botones de la fila van en horizontal, como estaban. */
table.listado .roles-en-linea .casilla.compacta { white-space: nowrap; }

/* Solo el borrado total baja de linea: no es una accion mas, lleva a la pantalla que
   enseña que se pierde. */
table.listado .acciones-fila .salta-linea { flex-basis: 100%; justify-content: flex-start; }

/* --- La fila de la matricula ---
   Va pegada a la de su usuario y a todo el ancho: el plan, su vencimiento y cuando se
   creo la cuenta son tres datos de la misma cosa, y en columnas propias empujaban
   «Acciones» fuera de la pantalla. La fila de arriba pierde su linea inferior para que
   las dos se lean como un solo bloque. */
table.listado tr:has(+ tr.matricula) > td { border-bottom: none; padding-bottom: .2rem; }
table.listado tr.matricula > td { padding-top: 0; }
table.listado tr.matricula .roles-en-linea { gap: .5rem; row-gap: .4rem; }
table.listado tr.matricula select { width: auto; }
table.listado tr.matricula .campo-icono { width: auto; }
/* El campo se queda con el ancho que necesita «dd/mm/aaaa» y su boton, y no con
   el 100% que le da el estilo general de los formularios: estirado se comia los
   ultimos 40 px y devolvia el desplazamiento lateral a la tabla. */
table.listado tr.matricula .campo-icono > input[type="text"] { width: 10rem; }
table.listado tr.matricula .separador { opacity: .5; }
table.listado tr.matricula:hover { background: transparent; }

/* ---------- Marca de agua con el correo de quien mira ----------
   No impide copiar: nada lo impide, y lo que lo intenta -bloquear el clic derecho,
   prohibir seleccionar- solo estorba a quien paga. Lo que hace es poner NOMBRE a lo
   que se reparta, y eso si cambia la decision de quien piensa pasar sus capturas.

   Va detras del contenido, sin capturar el raton y sin poder seleccionarse, de modo
   que leer, copiar una frase o pulsar un boton siguen igual que antes. */
/* `isolation` en vez de tocar la posicion de los hijos: la primera version les
   ponia `position: relative` a todos, y eso le quitaba el `sticky` a las migas.
   Su `top: 3.25rem` dejaba de ser umbral de pegado y pasaba a ser un
   desplazamiento, de modo que las migas se montaban encima del titulo.
   Aislando `main` basta con mandar la marca al fondo con `z-index: -1`: queda
   debajo de todo el contenido y por encima del fondo, sin tocar a nadie.
   El visor de imagenes y la ventana de confirmacion viven FUERA de `main`, asi
   que el aislamiento no los atrapa. */
main { position: relative; isolation: isolate; }

.marca-agua {
  position: absolute;
  inset: 0;
  /* ENCIMA del contenido, no debajo: las tarjetas tienen fondo solido y una marca
     por detras no sale en la captura, que es justo para lo que existe. Con
     `pointer-events` y `user-select` apagados no estorba leer, seleccionar ni
     pulsar; a esta opacidad se ve si uno mira la imagen, no mientras estudia. */
  z-index: 2;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-around;
  /* Junta y sin escalar de mas: separada caia sobre todo en el margen derecho,
     donde no hay contenido, y en el texto apenas se veia una cada dos pantallas.
     La marca sirve si sale EN la captura del material, no al lado. */
  /* La densidad se reparte entre estas dos cosas: cuantas repeticiones pone la
     plantilla y cuanto se separan aqui. Con 160 y esta separacion el fondo se
     volvia un tejido continuo y competia con el texto; con 40 y el doble de
     hueco no salia en un recorte pequenio. 54 deja una marca cada pantalla y
     media de lectura, que es lo que hace falta. */
  gap: 5rem 3.5rem;
  padding: 1rem;
  /* La rotacion va en CADA texto, no en el contenedor. Rotando y escalando el
     contenedor entero, la caja transformada se salia de `main` -que mide 1000 px
     como mucho- y la marca acababa cayendo sobre el menu lateral en vez de sobre
     el material. Sin transformar, el contenedor es un rectangulo pegado a `main`
     y su `overflow: hidden` recorta lo que sobra. */
  pointer-events: none;
  user-select: none;
}
.marca-agua span {
  font-family: var(--display, inherit);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  transform: rotate(-24deg);
  color: var(--texto);
  /* Tenue a proposito: tiene que verse en una captura mirada de cerca, no estorbar
     al leer. Es la perilla que conviene mover para que se note mas; subir el numero
     de repeticiones, en cambio, convierte el fondo en una trama. */
  opacity: .05;
}

/* En impresion sube: un PDF impreso es justo lo que se reparte. */
@media print {
  .marca-agua span { opacity: .12; }
}

/* ---------- Aviso de que el acceso esta por vencerse ----------
   Ambar y no rojo: no es un error ni algo que este mal, es un plazo que se acerca. El
   rojo se reserva para lo que ya fallo -las alertas del contenido, el borrado- y
   gastarlo aqui le quitaria fuerza donde importa.

   Va sobre `main` y no dentro, para que no se cuele entre el titulo y su contenido. */
.aviso-vence {
  margin: 0 0 1.25rem;
  padding: .7rem 1rem;
  border-radius: 8px;
  /* La familia ambar que ya usa la Perla Clinica: existe en los dos temas y no
     hace falta inventar colores nuevos para decir lo mismo. */
  background: var(--ecom-fondo);
  border: 1px solid var(--ecom-borde);
  color: var(--ecom-texto);
  font-size: .92rem;
}
.aviso-vence strong { color: var(--ecom-texto); }