:root{
  /* LOS COLORES DE LA CASA, no los de fabrica.
     El gris azulado de antes (#f6f7f9 con acento #1d4ed8) chocaba con el
     verde del lateral: verde de un lado y azul del otro. Ahora el fondo es
     su crema y el acento su bronce, que sobre crema se lee de sobra y hace
     juego con el arena del logo sin pelearse con el verde. */
  --fondo:#F2F1EC; --panel:#FFFFFF; --panel2:#EAE7DE; --borde:#DDD8CB;

  /* LA ESCALERA DE GRISES, MEDIDA -- 29 de septiembre de 2026.
     --tenue es el tercer nivel de texto (el pie de una cifra, la fecha de
     una fila, la aclaracion de un campo) y se usa 70 veces. Medido sobre los
     fondos donde de verdad cae: daba 2.59 sobre el panel blanco y 2.10 sobre
     el crema, con el minimo en 4.5. No es poco margen: es la mitad. Y
     --suave, el segundo nivel, se quedaba en 4.48 -- por un pelo, pero por
     debajo.
     Los tres niveles nuevos conservan el tono verde-gris de siempre (solo se
     movio la luminosidad) y siguen escalonados, que es para lo que existen:
       claro   texto 13.76/11.13 · suave 6.77/5.47 · tenue 5.62/4.55
       oscuro  texto 12.38/10.98 · suave 6.61/5.86 · tenue 5.38/4.77 */
  --texto:#22302B; --suave:#535E56; --tenue:#606A62;
  --acento:#8C6A3A; --acento-suave:#EFE4D2;
  --verde:#3D6B52; --verde-suave:#DDE9E0;
  --rojo:#A63D2F;  --rojo-suave:#F5E2DE;
  --ambar:#9A6B22; --ambar-suave:#F6EBD6; --sobre-ambar:#FFFFFF;
  --sombra:0 1px 2px rgba(30,58,50,.05), 0 1px 3px rgba(30,58,50,.08);
  --r:14px; --barra:64px;

  /* EL ORO, CUANDO ES TEXTO. --art-oro se escogio para dibujar SOBRE MADERA
     (una tarjeta oscura en los dos temas), y ahi cumple de sobra. Usarlo de
     color de letra sobre el panel claro no: medido, #9A7743 da 4.12 sobre
     blanco y 3.33 sobre --panel2, con el minimo en 4.5. Este es el mismo
     bronce bajado lo justo para pasar en los dos fondos claros (5.69 y 4.61)
     -- y es el bronce de su linea grafica, no un color nuevo.
     En tema oscuro no hace falta bajarlo: ahi --art-oro ya da 5.99 y 5.32. */
  --oro-texto:#8A5C41;

  /* SIN ESTO, ANDROID ROMPE LOS COLORES.
     Chrome en Android le mete su "modo oscuro automatico" a cualquier pagina
     que no declare que ella misma maneja sus colores -- invierte y ensucia
     todo. Safari en el iPhone no lo hace, por eso alla se veia bien y aqui
     no. Declarar color-scheme le dice al navegador "yo me encargo", y deja
     de forzar nada. En automatico sigue al sistema (como el @media de abajo);
     con tema fijo, se ancla a ese. */
  color-scheme: light dark;

  /* Los botones de fondo sólido llevan texto blanco encima, así que
     necesitan SU PROPIO tono -- no el --acento/--verde de arriba, que en
     modo oscuro se aclaran a propósito para leerse como TEXTO sobre fondo
     oscuro. Puesto como fondo con letras blancas, ese mismo tono claro deja
     casi sin contraste (medido: 1.74:1, el mínimo legal es 4.5:1). Estos dos
     no cambian entre claro y oscuro porque no dependen del fondo de la
     pantalla, solo de sí mismos: --acento-solido da 7.67:1, --verde-solido
     6.13:1, ambos muy por encima del mínimo. */
  --acento-solido:#6B4E22; --verde-solido:#3D6B52; --dorado-solido:#B07D31;
}
:root[data-tema="claro"]{ color-scheme: light; }
:root[data-tema="oscuro"]{ color-scheme: dark; }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --fondo:#141D1A; --panel:#1D2A25; --panel2:#25332D; --borde:#33443C;
    --oro-texto:#BFA06A;
    --sobre-acento:#141D1A;
    --texto:#EDEAE1; --suave:#A3B0A7; --tenue:#949E95;
    --acento:#D6C29A; --acento-suave:#3A3226;
    --verde:#8FBF9E; --verde-suave:#1E3A2C;
    --rojo:#E2907F;  --rojo-suave:#3D211C;
    --ambar:#E0A961; --ambar-suave:#3D2E15; --sobre-ambar:#141D1A;
    --sombra:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-tema="oscuro"]{
  --fondo:#141D1A; --panel:#1D2A25; --panel2:#25332D; --borde:#33443C;
  --oro-texto:#BFA06A;
  --sobre-acento:#141D1A;
  --texto:#EDEAE1; --suave:#A3B0A7; --tenue:#949E95;
  --acento:#D6C29A; --acento-suave:#3A3226;
  --verde:#8FBF9E; --verde-suave:#1E3A2C;
  --rojo:#E2907F;  --rojo-suave:#3D211C;
  --ambar:#E0A961; --ambar-suave:#3D2E15; --sobre-ambar:#141D1A;
  --sombra:0 1px 2px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Medidas del papel. El JS las reescribe segun lo elegido en Perfil.
 * El valor de fabrica es A4 para que coincida con el de ui.js: si aqui
 * dijera carta, un documento pintado antes de la primera llamada a
 * aplicarPapel se medaria contra un alto y se dibujaria contra otro. */
:root{--da-w:8.27in;--da-h:11.69in}
body{
  background:var(--fondo); color:var(--texto);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--barra) + env(safe-area-inset-bottom));
}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}

/* ---------- candado ---------- */
.candado{position:fixed;inset:0;z-index:100;background:var(--fondo);
  display:grid;place-items:center;padding:24px}
.candado.oculto{display:none}
.candado-caja{width:100%;max-width:340px;text-align:center}
.candado-caja h1{font-size:26px}
.candado-caja .sub{color:var(--suave);margin:4px 0 28px}
.candado-caja input[type=password]{width:100%;padding:13px 15px;border-radius:12px;
  border:1px solid var(--borde);background:var(--panel);margin-bottom:14px}
.candado-caja button{width:100%;padding:13px;border:0;border-radius:12px;
  background:var(--acento);color:#fff;font-weight:600;cursor:pointer}
.recordar{display:flex;gap:8px;align-items:center;justify-content:center;
  color:var(--suave);font-size:13px;margin-bottom:18px}
.error{color:var(--rojo);font-size:13px;min-height:18px;margin:12px 0 0}

/* ---------- cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:14px 16px;
  background:color-mix(in srgb,var(--fondo) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--borde)}
.marca strong{display:block;font-size:16px}
/* El mes y la esquina de mercados son la misma familia -- mismo tamaño,
   mismo color, guardado en --marca-color para que .mkt-b (abajo) alterne
   sobre el mismo tono que esté activo. Dorado/arena en los dos temas: en
   oscuro el propio --acento (contrasta de sobra sobre el fondo casi
   negro); en claro ese mismo bronce apenas da 4.38:1 contra el crema --
   por debajo del 4.5:1 que pide AA -- así que en claro se usa
   --acento-solido, la versión oscurecida del mismo tono que ya existía
   para texto (7.67:1), en vez de saltar a otro color. Antes caía en
   verde, que se confundía con la flechita verde de "subió" en la esquina
   de al lado -- dos verdes pegados que no debían leerse como la misma
   señal. */
:root{--marca-color:var(--acento-solido)}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){--marca-color:var(--acento)}
}
:root[data-tema="oscuro"]{--marca-color:var(--acento)}
.marca span{font-size:13.5px;font-weight:600;color:var(--marca-color);
  text-transform:none;letter-spacing:.01em}
/* Dentro de una franja del mercado, cada dato alterna entre dos tonos del
   mismo color -- para que el ojo note dónde termina uno y empieza el
   otro sin que compitan como si fueran dos colores distintos. Al 65% no
   se notaba (avisó que sin lentes no lo distinguía); dos señales juntas,
   el tono MÁS separado y el grosor, sí se ven. */
.mkt-b{color:color-mix(in srgb,var(--marca-color) 45%,var(--texto));font-weight:800}
.mkt-fl{font-style:normal;font-size:.85em}
.mkt-up{color:var(--verde)}
.mkt-down{color:var(--rojo)}
.acciones-cabecera{display:flex;gap:8px}
.icono{width:38px;height:38px;border-radius:10px;border:1px solid var(--borde);
  background:var(--panel);cursor:pointer;font-size:17px;line-height:1}
.icono:active{transform:scale(.95)}
.icono svg{width:19px;height:19px;display:block;margin:0 auto}
/* La lupa se esconde SOLO en Inicio -- ahí el Concierge ya hace la misma
   búsqueda, y tener las dos era "redundante tener 2 buscadores en la
   pantalla". En cualquier otra pantalla sigue siendo el único buscador que
   hay -- ahí no se toca. */
#btn-buscar.oculto{display:none}

/* ---------- contenido ---------- */
/* EL CONTENIDO USA EL ANCHO QUE HAY.
   900px era la medida buena cuando la app era solo movil. Con el lateral
   puesto en la Mac sobraba media pantalla a los lados. En el telefono no
   cambia nada: alli 900 nunca se alcanzaba. */
.contenido{padding:16px;max-width:900px;margin:0 auto}
@media (min-width:1100px){
  .contenido{max-width:1180px;padding:20px 26px}
}
@media (min-width:1500px){
  .contenido{max-width:1380px}
}
.cargando{color:var(--suave);text-align:center;padding:60px 0}

/* ===========================================================================
   EL MATERIAL COMPARTIDO  ·  29 de septiembre de 2026

   LA BRECHA QUE EL SEÑALÓ, Y QUE SE PUEDE CONTAR. Conté las clases del traje
   nuevo (art2-, ag2-, sec2-) que usa cada pantalla:

       L'Agenda    64        Il Capitale / Balance     4
       El Artista  53        Los Míos                  2

   El Artista y L'Agenda tienen su propio archivo de piel -- nogal, fieltro,
   clip, sello, cuero, latón. Las otras portadas pasan por pintarSeccion(),
   que es un traje de percha. Y DETRAS de todas ellas, 33 pantallas seguían
   con el diseño de antes: se toca una puerta preciosa y se cae en un cuarto
   pelado. Eso es lo que se veía.

   POR QUE ESTO Y NO 33 ARCHIVOS. Esas 33 pantallas no comparten nada de su
   contenido, pero comparten su ROPA: 63 abren dentro de .modal-caja, 35
   apilan .tarjeta, 63 usan .btn y .vacio. Subiendo cuatro piezas suben las
   33 a la vez -- el mismo razonamiento que hizo que pintarSeccion() sirviera
   para catorce.

   QUE SE SUBE Y QUE NO. El fondo se queda en var(--panel): --art-papel es un
   color CLARO en tema oscuro (es papel sobre una tarjeta de madera), así que
   usarlo de fondo aquí daría un modal blanco de noche. Lo que se trae es lo
   que de verdad hace que El Artista se vea como se ve: el filo de oro, la
   veta del papel, y el rótulo en oro en vez de gris.

   Y EL ROTULO YA ERA EL MISMO RECURSO. `.tarjeta h2` lleva desde siempre
   mayúscula, 12px y letra espaciada -- exactamente la "placa" del traje
   nuevo. Solo estaba en gris. Cambiarle el color y ponerle su filete es una
   línea, y es el cambio que más se nota de todos.
   =========================================================================== */
.tarjeta{background-color:var(--panel);background-image:var(--art-vetas);
  border:1px solid var(--borde);border-radius:var(--r);
  box-shadow:var(--sombra),inset 0 1px 0 var(--art-oroS);
  padding:16px;margin-bottom:14px}
/* El rótulo de cada bloque: la misma placa de El Artista, con su filete.
   El filete se dibuja con ::after y no con border-bottom para que llegue de
   canto a canto de la tarjeta (los 16px de relleno incluidos) -- un subrayado
   que se queda corto se lee como un error, no como un remate. */
.tarjeta h2{position:relative;font-size:12px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--oro-texto);margin:0 0 14px;padding-bottom:9px;
  font-weight:600}
.tarjeta h2::after{content:"";position:absolute;left:-16px;right:-16px;bottom:0;
  height:1px;background:linear-gradient(90deg,var(--art-oroS),transparent 82%)}

.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.cifra{background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);
  padding:14px;box-shadow:var(--sombra)}
.cifra .rotulo{font-size:11.5px;color:var(--suave);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:6px}
.cifra .valor{font-size:23px;font-weight:680;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.cifra .pie{font-size:12px;color:var(--tenue);margin-top:4px}
.cifra.verde .valor{color:var(--verde)}
.cifra.rojo .valor{color:var(--rojo)}
.cifra.ambar .valor{color:var(--ambar)}

/* ---------- listas ---------- */
.lista{list-style:none;margin:0;padding:0}
.lista li{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--borde)}
.lista li:last-child{border-bottom:0}
.lista .txt, .carpetas .txt{flex:1;min-width:0}
.lista .t1, .carpetas .t1{font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista .t2, .carpetas .t2{font-size:12.5px;color:var(--suave);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.lista .monto, .carpetas .monto{font-variant-numeric:tabular-nums;font-weight:620;white-space:nowrap}

/* ---------- carpetas ----------
   Nacieron el 4 de sep como folders de verdad, apilados y rotados. Rehecho
   el 14 de sep: el look de folder se sentía anticuado al lado del resto
   (pedido "look iOS/Apple moderno") -- filas planas, esquinas parejas.

   La INTERACCIÓN de abajo NO cambió, solo su vestido:
     - Con mouse de verdad, pasar por encima YA es el gesto que la eleva --
       tocar entra directo, no hace falta un segundo paso.
     - Sin mouse (el celular), no existe "pasar por encima": el primer toque
       la eleva y enseña el botón ("Abrir"); el segundo toque entra. Esto
       sigue siendo a propósito (pedido el 9 de sep) -- adentro hay varias
       pestañas y un toque accidental no debe mandar para allá directo.
       Ver activarCarpetas() en util/carpeta-alumno.js -- esa lógica no se
       tocó, solo estas reglas de estilo.

   El color de familia (--c) es el MISMO recurso que ya usa .ficha.familia. */
.carpetas{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.carpeta{
  position:relative; list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:10px; padding:13px 14px;
  background:color-mix(in srgb, var(--c, var(--acento-solido)) 7%, var(--panel));
  border:1px solid var(--borde); border-radius:var(--r);
  transition:transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s ease,
    background .18s ease, border-color .18s ease;
}
.carpeta .carpeta-info{flex:1; min-width:0; display:flex; align-items:center; gap:10px}
.carpeta .carpeta-abrir{
  flex:0 0 auto; padding:6px 13px; border-radius:999px; font-size:12px; font-weight:640;
  background:var(--c, var(--acento-solido)); color:#fff;
  opacity:0; transform:translateX(6px) scale(.92); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
/* El realce con mouse: la misma regla que .ficha, solo donde hay mouse de
   verdad -- en el celular "pasar por encima" no existe. */
@media (hover:hover) and (pointer:fine){
  .carpeta:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 22px -10px color-mix(in srgb, var(--c, var(--acento-solido)) 50%, transparent);
    background:color-mix(in srgb, var(--c, var(--acento-solido)) 12%, var(--panel));
    border-color:color-mix(in srgb, var(--c, var(--acento-solido)) 38%, var(--borde));
  }
  .carpeta:hover .carpeta-abrir{opacity:1; transform:none}
}
/* Sin mouse: el primer toque la saca del reposo y enseña el botón;
   el segundo toque -- en cualquier parte, o en el botón -- entra. */
.carpeta.abierta{
  transform:translateY(-3px);
  box-shadow:0 10px 22px -10px color-mix(in srgb, var(--c, var(--acento-solido)) 50%, transparent);
  background:color-mix(in srgb, var(--c, var(--acento-solido)) 12%, var(--panel));
  border-color:color-mix(in srgb, var(--c, var(--acento-solido)) 38%, var(--borde));
}
.carpeta.abierta .carpeta-abrir{opacity:1; transform:none; pointer-events:auto}
.carpeta:active{transform:scale(.985)}

.etiqueta{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;
  font-weight:600;vertical-align:middle}
.e-cobrado{background:var(--verde-suave);color:var(--verde)}
/* LAS DOS ETIQUETAS QUE NO SE LEIAN -- 29 de septiembre de 2026.
   Son 11px, y son el dato que se busca de un vistazo en una lista de
   trabajos: si ese cobro esta agendado, pendiente o ya entro. Medidas sobre
   su propio fondo daban 3.94 y 3.95, con el minimo en 4.5. Los colores de la
   familia (--acento, --ambar) estan pensados para texto de tamaño normal;
   a 11px sobre un fondo tan claro como el suyo no alcanzan.
   Se bajan SOLO aqui -- mismo tono y saturacion, menos luz -- para no mover
   --acento y --ambar, que se usan en medio sitio mas. 4.67 y 4.78.
   'Cobrado' ya pasaba (4.91) y se queda igual; en tema oscuro las tres
   pasaban, asi que alli no se toca nada. */
.e-pendiente{background:var(--ambar-suave);color:var(--ambar)}
.e-agendado{background:var(--acento-suave);color:var(--acento)}
:root:not([data-tema="oscuro"]) .e-pendiente{color:#895F1E}
:root:not([data-tema="oscuro"]) .e-agendado{color:#7E5F34}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .e-pendiente{color:var(--ambar)}
  :root:not([data-tema="claro"]) .e-agendado{color:var(--acento)}
}
.e-cortesia,.e-cancelado,.e-incobrable{background:var(--panel2);color:var(--suave)}
/* Préstamos, de solo lectura (Balance) -- el cierre mensual, 11 de sep. */
.e-cerrado{background:var(--verde-suave);color:var(--verde)}
.e-abierto{background:var(--ambar-suave);color:var(--ambar)}
.e-por-venir{background:var(--panel2);color:var(--suave)}

.barra-prog{height:8px;background:var(--panel2);border-radius:999px;overflow:hidden;margin:8px 0 6px}
.barra-prog i{display:block;height:100%;background:var(--acento);border-radius:999px}

.vacio{color:var(--suave);text-align:center;padding:28px 12px;font-size:14px}
.nota{font-size:12.5px;color:var(--suave);line-height:1.45}
.aviso-linea{background:var(--ambar-suave);color:var(--ambar);padding:10px 12px;
  border-radius:10px;font-size:13px;margin-bottom:12px}

/* ---------- botones ---------- */
/* appearance:none -- pedido el 14 de sep, al agregar Tailwind: su Preflight
   resetea <button> a appearance:button, y con color-scheme:dark (ver
   main.js) el navegador pinta SU PROPIO fondo nativo encima del nuestro --
   invisible mientras .btn siempre tuvo fondo sólido, pero .sutil (abajo,
   fondo transparente) lo dejó al descubierto: el botón se veía gris fijo
   sin importar el tema. */
/* El borde se tiñe hacia el bronce -- lo justo para que un boton no se vea
   de otro juego que el rotulo que tiene encima. El color de la letra no se
   toca: tiene que seguir siendo el texto normal, que es el que se lee. */
.btn{padding:10px 16px;border-radius:11px;
  border:1px solid color-mix(in srgb,var(--oro-texto) 30%,var(--borde));
  background:var(--panel);cursor:pointer;font-weight:560;
  appearance:none;-webkit-appearance:none;
  transition:box-shadow .18s ease, background .18s ease, transform .12s ease}
.btn.primario{background:var(--acento-solido);border-color:var(--acento-solido);color:#fff;
  box-shadow:0 4px 14px -5px color-mix(in srgb, var(--acento-solido) 60%, transparent)}
.btn.primario:hover{box-shadow:0 6px 18px -5px color-mix(in srgb, var(--acento-solido) 65%, transparent)}
/* Mismo botón principal, pero para lo que sale de tus manos hacia afuera:
   un documento que se abre, se imprime o se manda. El bronce sigue siendo
   la acción de trabajar adentro (Guardar, Agregar); el verde es lo que ya
   se entrega. */
.btn.entrega{background:var(--verde-solido);border-color:var(--verde-solido);color:#fff;
  box-shadow:0 4px 14px -5px color-mix(in srgb, var(--verde-solido) 60%, transparent)}
/* SUTIL -- pedido el 14 de sep, para que la acción principal de una pantalla
   no compita en peso visual con el resto ("crea jerarquía"). Sin relleno ni
   borde: se apoya en el mismo texto tenue que .nota, y solo se marca al
   tocarla o pasarle el mouse. */
.btn.sutil{background:transparent;border-color:transparent;color:var(--suave);box-shadow:none}
@media (hover:hover) and (pointer:fine){
  .btn.sutil:hover{background:var(--panel2);color:var(--texto)}
}
.btn.ancho{width:100%}
/* PELIGRO -- auditoría UX del 30 de sep (UX-028/UX-021). No existía: Borrar
   se veía igual que Editar. Rojo en el texto y el borde, sin relleno -- se
   distingue sin gritar, y el relleno queda para la acción principal. */
.btn.peligro{background:transparent;color:var(--rojo);
  border-color:color-mix(in srgb,var(--rojo) 45%,transparent)}
@media (hover:hover) and (pointer:fine){
  .btn.peligro:hover{background:color-mix(in srgb,var(--rojo) 10%,transparent)}
}
/* "Otras formas de mandarlo" (informe): el resumen se ve como un botón. */
details.inf-mas > summary{list-style:none;text-align:center}
details.inf-mas > summary::-webkit-details-marker{display:none}
/* TAMAÑO DE DEDO -- UX-030. En pantallas táctiles, los botones chicos, los
   chips y los iconos no bajan de 44 px de alto (la guía de Apple y la WCAG).
   En computadora se quedan como estaban. */
@media (pointer:coarse){
  .btn.chico, .chip, .icono, .cal-nav, .sem-nav .btn-icono, .modal-atras,
  .art-chip, .campo-atajo{min-height:44px}
  .icono, .cal-nav{min-width:44px}
}
.btn:active{transform:scale(.98)}
.fila-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* EL BOTON DE AGREGAR, QUE NO SE VEIA DE NOCHE -- 29 de septiembre de 2026.
   Era `color:#fff` fijo sobre --acento. En tema claro el acento es un bronce
   oscuro y el blanco encima da 4.96, bien. Pero en tema OSCURO el acento es
   un dorado CLARO (#D6C29A), y el blanco encima da 1.74 -- o sea, el "+" de
   Ingresos y de Gastos, que es el boton principal de esas dos pantallas,
   estaba practicamente en blanco sobre blanco. Con --sobre-acento (que ya se
   da la vuelta con el tema) da 9.87 de noche y sigue dando 4.96 de dia.

   Y la sombra era `rgba(29,78,216,.4)`: AZUL. Un resto de algun molde de
   antes, en una app que no tiene un solo azul. Ahora es la sombra del propio
   acento, que es lo que hace que el boton parezca levantado y no pegado. */
.flotante{position:fixed;right:18px;bottom:calc(var(--barra) + 18px + env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:50%;border:0;
  background:var(--acento);color:var(--sobre-acento,#fff);
  font-size:28px;line-height:1;cursor:pointer;z-index:30;
  box-shadow:0 6px 18px color-mix(in srgb,var(--acento) 45%,transparent)}

/* ---------- pestañas ---------- */
.pestanas{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  backdrop-filter:blur(12px);border-top:1px solid var(--borde);
  padding-bottom:env(safe-area-inset-bottom)}
.pestanas button{flex:1;border:0;background:none;padding:9px 4px;cursor:pointer;
  color:var(--suave);font-size:11px;display:flex;flex-direction:column;
  align-items:center;gap:3px;height:var(--barra)}
.pestanas button span{font-size:17px;line-height:1}
.pestanas button.activa{color:var(--acento)}

/* ---------- formularios y modal ---------- */
.modal{position:fixed;inset:0;z-index:60;background:rgba(6,10,20,.55);
  display:grid;place-items:end center;padding:0}
.modal.oculto{display:none}
/* Encima del modal normal -- ver abrirCapaAparte() en ui.js. */
.modal.capa-aparte{z-index:70}
/* LA CASA DE 63 PANTALLAS. Era un panel plano con una esquina redonda; lo
   unico que la separaba del fondo era un cambio de gris. Ahora lleva el filo
   de oro arriba -- el mismo gesto con el que empiezan El Artista y L'Agenda,
   que es lo que hace que una pantalla se sienta "abierta" y no "pegada". */
.modal-caja{background-color:var(--panel);background-image:var(--art-vetas);
  width:100%;max-width:640px;max-height:92vh;
  overflow:auto;border-radius:20px 20px 0 0;
  box-shadow:inset 0 2px 0 var(--art-oro),inset 0 3px 0 rgba(0,0,0,.10);
  padding:20px 18px calc(28px + env(safe-area-inset-bottom))}
@media(min-width:700px){
  .modal{place-items:center}
  .modal-caja{border-radius:20px;max-height:86vh}
  /* En la computadora, las pantallas con tablas piden mas sitio. En el
     telefono no cambia nada: ahi el ancho lo manda la pantalla. */
  .modal-caja.ancho{max-width:1040px;padding:24px 26px}
  /* "Que el calendario en vista general abra en toda la página del espacio
     del dashboard" -- ni .ancho (1040px) alcanza para una cuadrícula de mes
     cómoda en computadora. Ocupa casi toda la ventana, sin llegar a pantalla
     completa (mantiene el marco de modal: se cierra con Escape o tocando
     afuera, como el resto). En el teléfono ya era prácticamente esto -- solo
     sube un poco el alto. */
  .modal-caja.completo{max-width:1200px;width:94vw;height:90vh;max-height:90vh;padding:24px 26px}
  /* En un modal de 94vw las columnas se ensanchan mucho, y .dia-celda
     (aspect-ratio:1, ver más abajo) las hacía CUADRADAS a ese mismo ancho
     -- filas altísimas que ya no cabían las seis en la pantalla y obligaban
     a hacer scroll. Como ninguna celda lleva más que el número y los
     puntos, no hace falta que sea cuadrada aquí: se fija una altura corta,
     acotada por la altura de la ventana, para que el mes completo quepa
     siempre sin desplazar. En el teléfono (fuera de este media query) sigue
     cuadrada -- ahí el ancho de columna ya es chico por sí solo. */
  .modal-caja.completo .dia-celda{aspect-ratio:auto; height:min(60px, 8.5vh); min-height:34px}
}
.modal-caja.completo{max-height:96vh}

/* CRISTAL -- pedido el 14 de sep, look iOS/Apple, primero solo para Alumnos
   y extendido ese mismo día a las demás puertas de El Artista ("que no se
   sienta como otra app"). Clase propia (.cristal), no toca .modal-caja
   base: los modales de fuera de El Artista (formularios, avisos, Balance,
   Capitale, Agenda...) se quedan igual hasta que se decida llevarlo
   también para allá. Cada pantalla la pone al pintarse -- ver abrirModal()
   en ui.js, que la limpia en cada pantalla nueva igual que .completo.
   --panel ya cambia solo con el tema (ver data-tema en main.js), así que el
   cristal se ve bien en claro y en oscuro sin código aparte. */
.modal-caja.cristal{
  background:color-mix(in srgb, var(--panel) 72%, transparent);
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  border:1px solid color-mix(in srgb, var(--borde) 55%, transparent);
  box-shadow:0 24px 60px -20px rgba(16,24,40,.35), 0 2px 10px rgba(16,24,40,.06);
}

.campo{margin-bottom:13px}
.campo label{display:block;font-size:12.5px;color:var(--suave);margin-bottom:5px;font-weight:560}
.campo input,.campo select,.campo textarea{width:100%;padding:11px 13px;border-radius:11px;
  border:1px solid var(--borde);background:var(--panel2)}
.campo textarea{min-height:70px;resize:vertical}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal-caja h2{font-size:18px;margin-bottom:16px}

.aviso{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--barra) + 24px);
  background:var(--texto);color:var(--fondo);padding:11px 18px;border-radius:999px;
  font-size:13.5px;font-weight:560;opacity:0;pointer-events:none;transition:opacity .2s;z-index:80}
.aviso.visible{opacity:1}

/* HAY UNA VERSIÓN NUEVA -- a diferencia de .aviso, esta NO se cierra sola:
   se queda hasta que la toca o la descarta, porque actualizar es una
   decisión suya (puede estar a mitad de escribir algo), no un dato de
   paso. Mismo sitio que .aviso -- nunca salen las dos a la vez. */
.aviso-version{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--barra) + 24px);background:var(--acento-solido);color:#fff;
  padding:10px 10px 10px 16px;border-radius:999px;font-size:13.5px;font-weight:560;
  display:flex;align-items:center;gap:10px;z-index:80;box-shadow:var(--sombra)}
.aviso-version button{border:0;border-radius:999px;padding:7px 14px;font-size:13px;
  font-weight:600;cursor:pointer}
.aviso-version .av-ir{background:#fff;color:var(--acento-solido)}
.aviso-version .av-luego{background:transparent;color:#fff;opacity:.75;padding:7px 8px}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--suave);padding:6px 8px;border-bottom:1px solid var(--borde)}
td{padding:9px 8px;border-bottom:1px solid var(--borde)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.desliza{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* listas de apoyo: la misma lista pero mas apretada, para tablas de contexto */
/* tablas de respuesta: en telefono caben cinco columnas si se aprietan, y
   la que importa -- la ultima -- deja de quedar fuera de la pantalla */
.tabla-respuesta{font-size:12px}
.tabla-respuesta th{padding:5px 4px;font-size:9.5px;letter-spacing:.03em}
.tabla-respuesta td{padding:7px 4px}
.tabla-respuesta td:first-child,.tabla-respuesta th:first-child{padding-left:0}
.tabla-respuesta td:last-child,.tabla-respuesta th:last-child{padding-right:0}
.lista.chica li{padding:8px 0}
.lista.chica .t1{font-weight:500;font-size:14px}

/* ---------- documento imprimible ---------- */
.doc{background:#fff;color:#111;max-width:800px;margin:0 auto;padding:38px 42px;
  font-family:"Times New Roman",Georgia,serif;line-height:1.5}
.doc-cab{display:flex;justify-content:space-between;align-items:flex-start;
  gap:20px;border-bottom:2px solid #111;padding-bottom:14px;margin-bottom:22px}
.doc-cab h1{font-size:23px;letter-spacing:.02em;margin:0}
.doc-cab .sub{font-size:12.5px;color:#555;margin-top:2px}
.doc-cab .contacto{font-size:11.5px;color:#555;text-align:right;line-height:1.6}
.doc-tipo{text-align:right}
.doc-tipo strong{display:block;font-size:15px;text-transform:uppercase;letter-spacing:.12em}
.doc-tipo span{font-size:12px;color:#555}
.doc table{width:100%;border-collapse:collapse;margin-bottom:16px}
.doc th{background:#f2f2f2;color:#111;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.09em;padding:8px 10px;border-bottom:1px solid #999;
  font-family:Helvetica,Arial,sans-serif}
.doc td{padding:9px 10px;border-bottom:1px solid #e0e0e0;font-size:13.5px}
.doc td.num,.doc th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.doc-tot{margin-left:auto;width:290px;font-size:13.5px}
.doc-tot div{display:flex;justify-content:space-between;padding:5px 0}
.doc-tot .total{border-top:2px solid #111;margin-top:5px;padding-top:9px;
  font-size:16px;font-weight:700}
.doc-notas{margin-top:24px;font-size:12.5px;color:#444;border-top:1px solid #ddd;padding-top:12px}
.doc-pie{margin-top:30px;text-align:center;font-size:11px;color:#777;
  font-family:Helvetica,Arial,sans-serif}

.zona-impresion{display:none}
@media print{
  body{background:#fff;padding:0}
  .cabecera,.pestanas,.flotante,.modal,.aviso,#contenido,#candado{display:none !important}
  .zona-impresion{display:block !important}
  .doc{max-width:none;padding:0;box-shadow:none}
}
/* Sin margen: la barra verde tiene que sangrar hasta el borde del papel.
 * El 'size' lo pone el JS segun el papel elegido, porque si el documento no
 * mide lo mismo que la hoja Safari lo reescala y el verde queda corto. */
@page{margin:0}


/* ---------------------------------------------------------------------------
 * DOCUMENTOS DE ARTISTA — identidad visual de Porfirio Mateo (musico)
 * Paleta y tipografia: Logos/Guia de Estilo.dc.html
 * Todo bajo .doc-artista para no tocar el resto de la app.
 * ------------------------------------------------------------------------- */
.doc-artista{
  --da-verde:#1E3A32; --da-bronce:#8C6A3A; --da-arena:#D6C29A; --da-salvia:#A9C2AE;
  --da-crema:#F2F1EC; --da-papel:#FFFFFF; --da-texto:#26332e; --da-gris:#6b6559;
  --da-linea:#e3ded2;
  --da-esc:1;                      /* escala tipografica, la calcula el JS */
  --da-display:'Italiana',Georgia,serif;
  --da-cuerpo:'Jost',Helvetica,Arial,sans-serif;
  background:var(--da-papel); color:var(--da-texto);
  font-family:var(--da-cuerpo); font-weight:300;
  width:var(--da-w); min-height:var(--da-doc, var(--da-h)); margin:0 auto; position:relative;
  /* Sin esto el navegador imprime la barra verde en blanco. */
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.doc-artista *{box-sizing:border-box}
/* Documentos de una sola hoja: alto exacto del papel. Tiene que ser 'height' y
 * no 'min-height', porque con la altura indefinida los espaciadores de adentro
 * se iban a su maximo y estiraban la hoja mas alla del papel. */
.doc-hoja{display:flex;flex-direction:column;height:var(--da-doc, var(--da-h))}
.doc-hoja > *{flex:1 1 auto;min-height:0}
.doc-artista h1,.doc-artista h2,.doc-artista h3{margin:0;font-weight:400}
.doc-artista p{margin:0}

/* etiqueta en bronce, versalitas espaciadas: el recurso que estructura todo */
.da-lbl{font-size:9.5px;font-weight:400;letter-spacing:.16em;
  color:var(--da-bronce);text-transform:uppercase}

/* ---------- COTIZACION: barra lateral verde a sangre + contenido ---------- */
.da-cot{display:flex;min-height:var(--da-doc, var(--da-h))}

.da-lateral{
  width:2.15in;flex:0 0 2.15in;background:var(--da-verde);
  padding:0.45in 0.3in 0.45in 0.32in;display:flex;flex-direction:column;gap:0;
}

/* Lo que es, bajo el logo y sin etiqueta: se lee como credencial, no como
 * catalogo. Se reserva sitio para cuatro aunque casi siempre use una o dos,
 * para que lo de abajo no suba y baje entre un documento y otro. */
.da-rol{min-height:0.62in;margin-top:0.04in}
.da-rol div{font-size:12px;line-height:1.6;color:var(--da-arena);letter-spacing:.02em}

/* Cada grupo arranca donde mismo aunque traiga menos informacion. */
.da-grupo{margin-top:0.3in}
.da-grupo > div + div{margin-top:0.14in}
.da-g-contacto{min-height:1.45in}
.da-g-emision{min-height:0.95in}
.da-lateral .da-logo{width:100%;height:auto;display:block;margin-bottom:0.16in}
.da-lateral .da-lbl{color:var(--da-arena)}
.da-lateral .da-dato{font-size:11px;line-height:1.55;color:#EDEFEA;margin-top:4px;
  overflow-wrap:anywhere}
.da-lateral .da-dato .da-tenue{color:var(--da-salvia);display:block}
/* Las especialidades ocupan el vacio del medio de la barra sin empujar los
 * datos bancarios al ras del borde de abajo. */
/* Banco arriba, y debajo tipo/numero y titular: lo que el cliente necesita
 * para transferir sin preguntar nada. */
.da-lateral .da-pagos .da-cuenta{font-size:11.5px;line-height:1.45;
  color:var(--da-salvia);margin-top:9px}
.da-lateral .da-pagos .da-cuenta b{display:block;color:#EDEFEA;font-weight:400;
  font-size:12.5px}
.da-lateral .da-pagos .da-cuenta span{display:block}
.da-lateral .da-pagos .da-titular{color:var(--da-arena);font-size:10.5px;margin-top:1px}
.da-lateral .da-pagos .da-cuenta b{display:block;color:#EDEFEA;font-weight:400}

.da-contenido{flex:1;min-width:0;padding:0.42in 0.45in 0.4in 0.4in;
  display:flex;flex-direction:column}
/* Todo el bloque blanco comparte el mismo ancho de lectura: antes cada parte
 * tenia su propio maximo y las lineas quedaban de largos distintos. */
.da-contenido > *{max-width:5.35in}
.da-contenido .da-fila3, .da-contenido .da-servicios,
.da-contenido .da-cierre{max-width:none}

.da-contenido .da-lbl{font-size:calc(9.5px * var(--da-esc))}
.da-eyebrow{font-size:calc(11.5px * var(--da-esc));letter-spacing:.2em;color:var(--da-bronce);
  text-transform:uppercase;margin-bottom:0.1in}
.da-titulo{font-family:var(--da-display);font-size:calc(30px * var(--da-esc));line-height:1.12;
  color:var(--da-verde);text-wrap:balance}
.da-subtitulo{font-size:calc(13.5px * var(--da-esc));line-height:1.5;color:var(--da-gris);margin-top:7px}

.da-fila3{display:grid;grid-template-columns:1.15fr 1fr 1.15fr;gap:0.18in;
  margin:0.3in 0 0.28in;padding-bottom:0.2in;border-bottom:1px solid var(--da-linea)}
.da-fila3 .da-val{font-size:calc(12.5px * var(--da-esc));color:var(--da-texto);margin-top:5px;line-height:1.35}
.da-fila3 .da-val2{font-size:calc(11px * var(--da-esc));color:var(--da-gris);margin-top:2px}

.da-servicios{border-bottom:1px solid var(--da-linea)}
.da-serv{display:grid;grid-template-columns:0.3in 1fr;gap:0;
  padding:calc(0.15in * var(--da-esc)) 0;border-top:1px solid var(--da-linea)}
.da-serv:first-child{border-top:none}
.da-serv .da-n{font-size:calc(10.5px * var(--da-esc));color:var(--da-bronce);letter-spacing:.06em;padding-top:2px}
.da-serv h3{font-size:calc(14.5px * var(--da-esc));color:var(--da-texto);font-weight:400}
.da-serv .da-etq{font-size:calc(11px * var(--da-esc));color:var(--da-bronce);margin-top:3px}
.da-serv .da-desc{font-size:calc(11.5px * var(--da-esc));line-height:1.6;color:var(--da-gris);margin-top:5px}

/* caja de total: crema con filete bronce a la izquierda + condiciones al lado */
.da-cierre{display:grid;grid-template-columns:calc(2.4in * var(--da-esc)) 1fr;gap:0.3in;
  align-items:start;margin:0}
.da-caja-total{background:var(--da-crema);border-left:2px solid var(--da-bronce);
  padding:0.17in 0.2in}
.da-caja-total .da-cifra{font-family:var(--da-display);font-size:calc(29px * var(--da-esc));
  color:var(--da-verde);line-height:1.1;margin-top:7px;white-space:nowrap}
.da-caja-total .da-letras{font-size:calc(10.5px * var(--da-esc));font-style:italic;color:var(--da-gris);margin-top:5px}
.da-caja-total .da-desglose{font-size:calc(10.5px * var(--da-esc));color:var(--da-gris);margin-top:7px;
  padding-top:6px;border-top:1px solid var(--da-linea)}
.da-caja-total .da-desglose div{display:flex;justify-content:space-between;padding:1px 0}

/* Sin numerar: son dos o tres condiciones, no una lista larga. Y sin
 * white-space:nowrap, que era lo que estiraba un texto largo en una sola
 * linea interminable en vez de dejarlo bajar. */
.da-cond .da-item{margin-top:calc(9px * var(--da-esc))}
.da-cond .da-item:first-of-type{margin-top:7px}
.da-cond .da-monto{font-size:calc(12.5px * var(--da-esc));color:var(--da-texto);
  line-height:1.5;overflow-wrap:break-word}
.da-cond .da-cuando{font-size:calc(11px * var(--da-esc));color:var(--da-gris);
  margin-top:2px;line-height:1.5;overflow-wrap:break-word}

.da-aire{flex:1 1 0;min-height:0.14in;max-height:1.35in}
/* Mientras se busca la escala, los espaciadores no deben absorber nada y la
 * hoja tiene que quedar libre de alturas fijas: si no, el documento siempre
 * mide lo mismo que el papel y no hay forma de saber si el contenido cabe. */
.doc-artista.midiendo .da-aire{flex:0 0 0.14in}
.doc-artista.midiendo{height:auto;min-height:0}
.doc-artista.midiendo > *{min-height:0}
.da-notas{margin-top:0}
/* Sin numerar: no son pasos de un proceso, son aclaraciones sueltas. */
.da-nota{margin-top:calc(9px * var(--da-esc))}
.da-nota .da-txt{font-size:calc(12px * var(--da-esc));line-height:1.65;color:var(--da-gris)}
.da-nota .da-txt b{color:var(--da-bronce);font-weight:400}

.da-firma{padding-top:0.3in;max-width:none}
.da-firma .da-att{font-size:calc(11.5px * var(--da-esc));color:var(--da-gris)}
.da-firma .da-nombre{font-family:var(--da-display);font-size:calc(19px * var(--da-esc));
  color:var(--da-verde);margin-top:5px;white-space:nowrap}
.da-firma .da-pie{font-size:9px;letter-spacing:.14em;color:var(--da-bronce);
  text-transform:uppercase;text-align:right;line-height:1.7}

/* ---------- RECIBO ----------------------------------------------------------
 * Un recibo no es una cotizacion corta: certifica que el dinero YA entro. Por
 * eso manda la frase de constancia y no una tabla de precios. Misma linea
 * grafica (verde, bronce, Italiana) con la estructura propia de un recibo.
 * ------------------------------------------------------------------------- */
.da-recibo{display:flex;flex-direction:column;min-height:var(--da-doc, var(--da-h))}

/* Cinta verde arriba: la identidad, sin robarle la hoja al contenido. */
.da-rec-cinta{background:var(--da-verde);padding:0.34in 0.6in;
  display:flex;justify-content:space-between;align-items:center;gap:0.3in}
.da-rec-cinta .da-logo{width:2in;height:auto;display:block}
.da-rec-sello{text-align:right}
.da-rec-titulo{font-size:calc(17px * var(--da-esc));font-weight:400;letter-spacing:.3em;
  color:var(--da-arena);text-transform:uppercase}
.da-rec-num{font-size:calc(10.5px * var(--da-esc));color:var(--da-salvia);margin-top:5px}

.da-rec-cuerpo{flex:1;display:flex;flex-direction:column;padding:0.5in 0.6in 0.45in}

/* La constancia, escrita como se dice en voz alta. */
.da-rec-frase{font-size:calc(14px * var(--da-esc));line-height:2;
  color:var(--da-texto);text-align:justify;text-justify:inter-word}
.da-rec-frase b{font-weight:400;color:var(--da-verde);
  border-bottom:1px solid var(--da-linea);padding-bottom:1px}

.da-rec-caja{background:var(--da-crema);border-left:2px solid var(--da-bronce);
  padding:0.17in 0.22in;margin:0.32in 0 0;align-self:flex-start;
  min-width:calc(2.6in * var(--da-esc))}
.da-rec-caja .da-cifra{font-family:var(--da-display);font-size:calc(30px * var(--da-esc));
  color:var(--da-verde);line-height:1.1;margin-top:7px;white-space:nowrap}

.da-rec-detalle{margin-top:0.34in;max-width:4.6in}
.da-rec-linea{display:flex;justify-content:space-between;gap:0.3in;
  font-size:calc(11.5px * var(--da-esc));color:var(--da-texto);
  padding:6px 0;border-bottom:1px solid var(--da-linea);
  font-variant-numeric:tabular-nums}
.da-rec-linea.da-tenue{color:var(--da-gris)}
.da-rec-suma{border-bottom:0;border-top:1px solid var(--da-verde);
  margin-top:3px;padding-top:8px;color:var(--da-verde)}

.da-rec-datos{display:flex;gap:0.5in;margin-top:0.34in;flex-wrap:wrap}
.da-rec-datos .da-val{font-size:calc(12px * var(--da-esc));color:var(--da-texto);margin-top:5px}

/* El sello va junto a la firma, ligeramente inclinado como uno de goma. */
.da-rec-firma{padding-top:0.3in;position:relative}
.da-sello{position:absolute;right:0.1in;bottom:0.1in;
  width:calc(1.45in * var(--da-esc));color:var(--da-bronce);opacity:.72;
  transform:rotate(-11deg);pointer-events:none}
.da-sello svg{width:100%;height:auto;display:block}
.da-sello-aro{font-family:var(--da-cuerpo);font-size:15px;font-weight:500;
  letter-spacing:.16em;fill:currentColor}
.da-sello-pm{font-family:var(--da-display);font-size:52px;fill:currentColor}
.da-sello-fecha{font-family:var(--da-cuerpo);font-size:13px;
  letter-spacing:.05em;fill:currentColor}
.da-linea-firma{width:2.6in;border-top:1px solid var(--da-verde);margin-bottom:8px}
.da-rec-nombre{font-family:var(--da-display);font-size:calc(18px * var(--da-esc));
  color:var(--da-verde)}
.da-rec-pie{font-size:calc(10px * var(--da-esc));letter-spacing:.06em;
  color:var(--da-bronce);margin-top:5px}

/* ---------- Paginas tipo Carpeta de Artista ---------- */
.da-pagina{padding:0.95in 0.9in;min-height:var(--da-h);display:flex;flex-direction:column}
.da-pagina.da-fondo-verde{background:var(--da-verde);color:var(--da-salvia)}
.da-pagina.da-fondo-crema{background:#FAF9F6;color:var(--da-texto)}
.da-pagina .da-logo-portada{width:2.1in;height:auto;display:block;margin:0 auto 0.5in}
.da-pagina .da-logo-pie{width:2.6in;height:auto;display:block;margin:0.4in auto 0}
/* El nombre en letra cuando no es el papel de Porfirio (UX-017). */
.da-logo-texto{font-family:var(--da-display, 'Cormorant Garamond', serif);font-size:30px;line-height:1.1;text-align:center;letter-spacing:.02em}
.da-pagina .da-eyebrow{letter-spacing:.3em;font-size:11px;margin-bottom:0.3in}
.da-pagina.da-fondo-verde .da-eyebrow{color:var(--da-arena)}
.da-pagina h1.da-nombre{font-family:var(--da-display);font-size:42px;color:var(--da-verde)}
.da-pagina.da-fondo-verde h1.da-nombre{color:var(--da-arena)}
.da-pagina .da-sub{font-size:13px;letter-spacing:.08em;color:var(--da-bronce);
  text-transform:uppercase;margin:6px 0 0.3in}
.da-pagina p.da-cuerpo{font-size:15px;line-height:1.85;max-width:5.6in;text-align:justify}
.da-raya{width:44px;height:1px;background:var(--da-bronce)}
.da-item-marco{border-top:1px solid rgba(140,106,58,.28);padding:0.2in 0}
.da-fondo-verde .da-item-marco{border-top-color:rgba(214,194,154,.3)}
.da-item-marco h2{font-family:var(--da-display);font-size:24px;color:var(--da-verde);margin-bottom:8px}
.da-fondo-verde .da-item-marco h2{color:var(--da-arena)}
.da-item-marco p{font-size:13.5px;line-height:1.75;max-width:5.6in;color:var(--da-texto)}
.da-fondo-verde .da-item-marco p{color:var(--da-salvia)}
.da-pie{margin-top:auto;padding-top:0.25in;font-size:10.5px;letter-spacing:.12em;
  color:var(--da-bronce);text-transform:uppercase}
.da-fondo-verde .da-pie{color:var(--da-salvia)}
.da-salto-pagina{break-before:page;page-break-before:always}

/* ---------- Rider / Resume ---------- */
.da-doc-simple{padding:0.85in 0.9in;min-height:var(--da-h);display:flex;flex-direction:column}
.da-doc-simple .da-cab{display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:1px solid var(--da-verde);padding-bottom:0.16in;margin-bottom:0.28in}
.da-doc-simple .da-logo{width:1.75in;height:auto;display:block}
.da-doc-simple .da-titulo-doc{font-size:18px;font-weight:400;letter-spacing:.25em;
  color:var(--da-verde);text-transform:uppercase;text-align:right}
.da-doc-simple .da-sub-doc{font-size:10px;color:var(--da-bronce);margin-top:4px;text-align:right}
.da-doc-simple .da-seccion-lbl{font-size:9px;letter-spacing:.16em;color:var(--da-bronce);
  text-transform:uppercase;margin:0.24in 0 0.1in}
.da-doc-simple table{width:100%;border-collapse:collapse}
.da-doc-simple th{text-align:left;font-size:8.5px;font-weight:400;letter-spacing:.12em;
  text-transform:uppercase;color:var(--da-verde);padding:0 0 8px;
  border-bottom:1px solid var(--da-linea)}
.da-doc-simple td{font-size:12px;color:var(--da-texto);padding:10px 0;
  border-bottom:1px solid var(--da-linea)}
.da-doc-simple .da-doc-pie{margin-top:auto;padding-top:0.24in;
  border-top:1px solid var(--da-verde);display:flex;justify-content:space-between;
  font-size:9px;letter-spacing:.1em;color:var(--da-bronce)}

/* ---------------------------------------------------------------------------
 * REJILLA DE "MAS"
 * Fichas en vez de renglones: la lista se veia como una pantalla de ajustes.
 * Los colores y la tipografia son los mismos de sus cotizaciones (verde
 * bosque, bronce, arena, Italiana), para que la app y lo que le manda a un
 * cliente se sientan de la misma familia.
 * ------------------------------------------------------------------------- */
/* "Mas" son cuatro grupos con titulo, no quince mosaicos seguidos. El ultimo
   -- mantenimiento -- va apagado: existe, pero no pide atencion. */
.grupo-menu + .grupo-menu{margin-top:26px}
.grupo-titulo{display:flex; align-items:baseline; gap:8px; margin:0 2px 10px;
  flex-wrap:wrap}
.grupo-titulo h2{margin:0; font-size:15px; letter-spacing:.01em}
.grupo-titulo span{font-size:12.5px; color:var(--suave)}
.grupo-menu.apagado{margin-top:34px; padding-top:22px;
  border-top:1px solid var(--borde)}
.grupo-menu.apagado .grupo-titulo h2{font-size:13.5px; color:var(--suave);
  font-weight:600; text-transform:uppercase; letter-spacing:.06em}
.grupo-menu.apagado .ficha{opacity:.72}
.grupo-menu.apagado .ficha:hover,
.grupo-menu.apagado .ficha:focus-visible{opacity:1}

.rejilla-menu{
  --mv-verde:#1E3A32; --mv-bronce:#8C6A3A; --mv-arena:#D6C29A;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;
  list-style:none; margin:0; padding:0;
}

.ficha{
  position:relative; overflow:hidden;
  background:var(--panel); border:1px solid var(--borde); border-radius:var(--r);
  padding:12px 12px 11px; cursor:pointer;
  display:flex; flex-direction:column; gap:7px;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* El filete de bronce a la izquierda es el mismo recurso de la caja de total
 * de las cotizaciones. */
.ficha::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--mv-bronce); opacity:.55;
}
.ficha .icono-marco{
  width:32px; height:32px; border-radius:9px;
  background:var(--mv-verde); display:grid; place-items:center; flex:0 0 auto;
}
.ficha .icono-marco svg{width:19px; height:19px; display:block}
/* Insignia por familia (Opción C del diseño, 8 de sep): cuando la ficha trae
 * su color -- ver `color` en las entradas de pintarSeccion() -- el marco se
 * pinta redondo y sólido en ESE tono en vez del verde genérico, y el filete
 * de la izquierda toma el mismo color. Los tonos vienen de las variables
 * -solido (--acento-solido/--verde-solido/--dorado-solido): son fijos, no se
 * aclaran en oscuro como --acento/--verde, porque van con ícono blanco
 * encima -- el mismo motivo por el que existen esas variables ya en :root. */
/* El filete de una ficha con familia se muda de la izquierda (recurso
 * genérico, el de siempre) a un listón abajo, del ancho completo -- para
 * que El Artista tenga SU propia firma y no se confunda con el filete
 * plano que usan las demás secciones. Y el panel entero se tiñe apenas
 * (7%) del color de familia: antes solo el círculo llevaba color y el
 * resto de la ficha se quedaba neutro, que es justo lo que la hacía verse
 * "de lista", no de sección con identidad propia. */
.ficha.familia{background:color-mix(in srgb, var(--c) 7%, var(--panel))}
.ficha.familia::before{left:0; right:0; top:auto; bottom:0; width:auto; height:3px; background:var(--c); opacity:1}
.ficha .icono-marco.familia{background:var(--c); border-radius:50%;
  box-shadow:0 6px 16px -4px color-mix(in srgb, var(--c) 55%, transparent)}
/* El ícono venía en arena (#D6C29A) para verse sobre el verde genérico; sobre
 * un fondo sólido de familia se pone blanco -- una declaración CSS gana
 * siempre al atributo stroke="" del SVG, aunque esté puesto en el propio
 * elemento. */
.ficha .icono-marco.familia svg path,
.ficha .icono-marco.familia svg circle,
.ficha .icono-marco.familia svg rect,
.ficha .icono-marco.familia svg line,
.ficha .icono-marco.familia svg polygon,
.ficha .icono-marco.familia svg polyline{stroke:#fff}
/* El número (cuántos, cuánto por cobrar) es lo primero que se contesta sin
 * entrar -- que lo diga en el color de la familia, no en el texto genérico,
 * es lo que le faltaba para pesar tanto como el ícono. */
/* El número puro (var(--c)) se leía bien en claro pero casi desaparecía en
 * oscuro: el fondo de la ficha es 93% panel + 7% color, y en oscuro panel
 * ya es casi tan oscuro como el propio tono de familia (medido: verde-
 * solido ~2.3:1, acento-solido ~1.9:1, muy por debajo del mínimo). Mezclarlo
 * con --texto -- oscuro en claro, claro en oscuro -- lo empuja hacia el
 * lado legible en los dos temas sin perder el tinte de familia. */
.ficha.familia .dato{color:color-mix(in srgb, var(--c) 70%, var(--texto) 30%)}
/* UNA PALABRA LARGA SE PARTE, NO SE COME LAS LETRAS -- de la auditoría del
 * 18 de sep. En un teléfono angosto (320px: un SE, o el suyo con el texto
 * grande de accesibilidad) "Acompañamientos" mide 148px dentro de una caja
 * de 113px: se salía, y como .ficha recorta lo que se sale, la puerta decía
 * "Acompañamien" pegado al borde -- sin puntos ni nada que avisara que
 * faltaba texto. De 720px para arriba esto ya estaba resuelto (ahí el título
 * es de una sola línea y se corta con "..."); abajo no lo estaba, que es
 * justo donde él usa la app. Con hyphens el corte lleva guion y se lee. */
.ficha .nombre{
  font-family:'Italiana', Georgia, serif; font-size:19px; line-height:1.1;
  color:var(--texto); letter-spacing:.01em;
  overflow-wrap:break-word;
  -webkit-hyphens:auto; hyphens:auto;
}
.ficha .dato{
  font-size:17px; font-weight:620; font-variant-numeric:tabular-nums;
  color:var(--texto); line-height:1.15;
}
/* Pegado abajo: sin esto, las fichas sin cifra dejaban un hueco en el medio. */
.ficha .pie{
  margin-top:auto;
  font-size:11.5px; line-height:1.35; color:var(--suave);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.ficha:active{transform:scale(.985)}

/* El realce al pasar por encima solo donde hay mouse de verdad: en el telefono
 * no existe "pasar por encima" y activarlo dejaria fichas trabadas encendidas. */
@media (hover:hover) and (pointer:fine){
  .ficha:hover{
    transform:translateY(-2px);
    border-color:var(--mv-bronce);
    box-shadow:0 6px 18px rgba(0,0,0,.16);
  }
  .ficha:hover::before{opacity:1}
  .ficha .pie{transition:color .18s ease}
  .ficha:hover .pie{color:var(--texto)}
  .ficha.familia:hover{
    border-color:var(--c);
    box-shadow:0 10px 24px -8px color-mix(in srgb, var(--c) 45%, transparent);
  }
}
/* En pantalla grande las fichas crecen de verdad: con el tamano del telefono
 * quedaban como un bloquecito perdido en el medio del monitor. */
@media (min-width:720px){
  .rejilla-menu{grid-template-columns:repeat(4, 1fr); gap:16px}
  .ficha{padding:22px 20px 20px; gap:12px; min-height:232px}
  .ficha::before{width:3px}
  .ficha .icono-marco{width:64px; height:64px; border-radius:16px}
  .ficha .icono-marco svg{width:38px; height:38px; stroke-width:1.2}
  /* Italiana no tiene negrita -- viene en un solo grosor -- asi que lo que
   * hace que resalte es el tamano y un poco de aire entre letras. Nombres
   * largos ("Coro de la Catedral Primada") se truncan con "..." en vez de
   * pasar a una segunda linea -- la ficha no crece para acomodarlos. */
  .ficha .nombre{font-size:36px; letter-spacing:.025em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .ficha .dato{font-size:25px}
  .ficha .pie{font-size:13px; -webkit-line-clamp:3}
}

/* El resto de la app se limita a 900px porque son listas y textos, donde una
 * linea muy larga se lee mal. La rejilla no tiene ese problema: son fichas.
 * Aqui se sale de ese limite y se vuelve a centrar, para no dejar media
 * pantalla vacia en un monitor grande. */
@media (min-width:1100px){
  .rejilla-menu{
    width:min(1240px, calc(100vw - 48px));
    margin-left:calc(50% - min(1240px, 100vw - 48px) / 2);
  }
  .ficha{min-height:258px}
  .ficha .icono-marco{width:72px; height:72px}
  .ficha .icono-marco svg{width:42px; height:42px}
  .ficha .nombre{font-size:39px}
}

@media (prefers-reduced-motion:reduce){
  .ficha, .ficha .pie{transition:none}
  .ficha:hover{transform:none}
}

/* Vista previa dentro del modal: el documento mide 8.5in, la pantalla no. */
/* Formalidades plegadas: casi nunca se piden y no deben estorbar el flujo. */
.formalidades{border:1px solid var(--borde);border-radius:12px;
  padding:12px 14px;margin-bottom:14px;background:var(--panel2)}
.formalidades summary{cursor:pointer;font-weight:560;font-size:14px;
  color:var(--suave);list-style:none}
.formalidades summary::-webkit-details-marker{display:none}
.formalidades summary::before{content:'▸ ';color:var(--tenue)}
.formalidades[open] summary::before{content:'▾ '}
.formalidades[open] summary{color:var(--texto);margin-bottom:4px}

/* Casillas de especialidades: en columna, comodas de tocar en el telefono. */
.esp-lista{display:flex;flex-direction:column;gap:8px;margin-top:4px}
/* 44px de alto: la medida comoda para tocar con el dedo sin fallar. */
.esp-op{display:flex;align-items:center;gap:10px;font-weight:400;min-height:44px;
  padding:9px 12px;border:1px solid var(--borde);border-radius:10px;
  background:var(--panel2);cursor:pointer}
.esp-op input{width:17px;height:17px;flex:0 0 auto;margin:0}

/* Tres selectores en fila: hora, minutos y a.m./p.m. */
.hora-tri{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:6px}
.hora-tri select{width:100%}

.da-marco{overflow:auto;background:#8a8a8a;padding:14px;border-radius:12px;
  max-height:54vh;margin-bottom:14px;position:relative}
/* Solo aparece en una cuenta de prueba (D.secciones puesto) -- fija en el
   centro de la pantalla, no del documento, así se ve igual aunque se haga
   scroll. El mismo rojo tenue y el mismo giro que lleva el PDF real. */
.marca-agua-prueba{position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-32deg);
  font:700 15vw/1 Jost,Helvetica,Arial,sans-serif;letter-spacing:.1em;
  color:rgba(166,61,47,.18);pointer-events:none;white-space:nowrap;
  z-index:5;user-select:none}
/* .cnm-hoja (registros y programa del año) y .pe-hoja (programa de examen)
   entran en el mismo zoom que .doc-artista -- son las hojas que "Ver antes de
   bajar" puede enseñar, y sin esto se veían a su ancho real dentro de un
   celular, que es mucho mas ancho que la pantalla misma. */
.da-marco .doc-artista, .da-marco .cnm-hoja, .da-marco .pe-hoja,
.da-marco .doc-cons-hoja, .da-marco .doc-studio-hoja, .da-marco .doc-edit-hoja,
.da-marco .rd-hoja, .da-marco .rm-hoja,
.da-marco .doc-min-hoja, .da-marco .doc-crea-hoja, .da-marco .doc-prof-hoja{
  transform:scale(var(--da-zoom,.62));
  transform-origin:top left;margin:0;box-shadow:0 2px 18px rgba(0,0,0,.3)}
.da-marco .da-caja-zoom{width:calc(var(--da-w) * var(--da-zoom,.62));
  height:calc(var(--da-h) * var(--da-zoom,.62))}
/* Minimalista/Creativa/Profesional fluyen a su alto natural (ver el
   comentario grande en estilos de "PLANTILLAS DE DOCUMENTO" más abajo) --
   nunca se llamó aplicarPapel() para ellas, así que --da-h no aplica; el
   cuadro de zoom se ajusta solo al contenido real en vez de a una altura
   de página fija. */
.da-marco:has(.doc-min-hoja) .da-caja-zoom,
.da-marco:has(.doc-crea-hoja) .da-caja-zoom,
.da-marco:has(.doc-prof-hoja) .da-caja-zoom{
  width:fit-content;height:fit-content}

/* ==========================================================================
   PLANTILLAS DE DOCUMENTO -- 21 de sep. Il Capitale ya deja a cualquier
   cuenta hacer su cotización/recibo/factura desde su propio trabajo -- el
   diseño "Clásico" (.doc-artista, arriba) es el papel de Porfirio y solo
   sale con cfg.plantillaDocumento==='clasico-porfirio' puesto (ver
   documentos.js). Estas tres son las que ve cualquier otra cuenta -- y
   Porfirio también, si prefiere una de estas al suyo.

   Las tres se editan igual que el programa de examen (ver
   plantillas-programa.js): campos [contenteditable][data-campo], sin
   formulario aparte -- lo que se ve en pantalla es lo que sale en el PDF.

   NO usan .doc-artista/.da-esc: ese ajuste automático de letra (ver
   ajustarEscalaDocumento en ui.js) está hecho a la medida de la hoja de
   una sola página de Clásico. Estas fluyen a su alto natural -- una
   cotización larga simplemente ocupa más de una página, como cualquier
   factura de verdad.
   ========================================================================== */
:root{
  --dm-w:8.5in;
  --dm-tinta:#1e293b; --dm-gris:#64748b; --dm-gris-claro:#94a3b8;
  --dm-linea:#e2e8f0; --dm-panel:#f8fafc;
}

/* ---- MINIMALISTA -------------------------------------------------------- */
.doc-min-hoja{width:var(--dm-w);margin:0 auto;background:#fff;color:var(--dm-tinta);
  font-family:'Inter',sans-serif;padding:0.75in 0.85in;box-sizing:border-box;
  print-color-adjust:exact;-webkit-print-color-adjust:exact}
.doc-min-hoja *{box-sizing:border-box}
.dm-header{display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:1px solid var(--dm-linea);padding-bottom:0.3in;margin-bottom:0.3in}
.dm-marca{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.dm-logo{width:38px;height:38px;border-radius:8px;background:var(--dm-tinta);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex:none}
.dm-marca span{font-size:19px;font-weight:700;letter-spacing:-.01em}
.dm-direccion{font-size:11.5px;color:var(--dm-gris);line-height:1.6}
.dm-header-der{text-align:right}
.dm-doctitulo{font-size:28px;font-weight:700;letter-spacing:-.01em;text-transform:uppercase;margin:0 0 6px}
.dm-folio{font-size:12px;color:var(--dm-gris-claro);font-weight:500;letter-spacing:.06em}
.dm-cliente-meta{display:flex;justify-content:space-between;gap:0.4in;margin-bottom:0.34in}
.dm-etq{font-size:10px;font-weight:700;color:var(--dm-gris-claro);text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:6px}
.dm-cliente-nombre{font-size:16px;font-weight:600;margin-bottom:3px}
.dm-cliente-linea{font-size:12px;color:var(--dm-gris)}
.dm-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.28in;text-align:right;font-size:12.5px}
.dm-meta-val{font-weight:600;margin-top:2px}
.dm-badge{display:inline-flex;align-items:center;gap:4px;background:#d1fae5;color:#047857;
  border:1px solid #a7f3d0;border-radius:999px;padding:3px 11px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;margin-top:8px}
.dm-tabla{width:100%;border-collapse:collapse;margin-bottom:0.3in;font-size:12.5px}
.dm-tabla th{text-align:left;font-size:10px;font-weight:700;color:var(--dm-gris-claro);
  text-transform:uppercase;letter-spacing:.08em;padding:0 0 10px;border-bottom:2px solid var(--dm-tinta)}
.dm-tabla th.num,.dm-tabla td.num{text-align:right}
.dm-tabla th.cen,.dm-tabla td.cen{text-align:center}
.dm-tabla td{padding:13px 0;border-bottom:1px solid var(--dm-linea);vertical-align:top}
.dm-serv-titulo{font-weight:600;margin:0}
.dm-serv-detalle{font-size:11.5px;color:var(--dm-gris);margin-top:3px;line-height:1.5}
.dm-fila-final{display:flex;justify-content:space-between;align-items:flex-start;gap:0.4in}
.dm-notas{width:48%;font-size:12px;color:var(--dm-gris);line-height:1.6}
.dm-totales{width:44%;background:var(--dm-panel);border-radius:10px;padding:0.24in}
.dm-totales div{display:flex;justify-content:space-between;font-size:12.5px;color:var(--dm-gris);margin-bottom:9px}
.dm-total-final{border-top:1px solid var(--dm-linea);padding-top:12px;margin-top:2px !important;
  font-size:15px !important;font-weight:700;color:var(--dm-tinta) !important}
.dm-pie{margin-top:0.5in;padding-top:0.24in;border-top:1px solid var(--dm-linea);
  text-align:center;font-size:10.5px;color:var(--dm-gris-claro)}

/* ---- CREATIVA ------------------------------------------------------------ */
.doc-crea-hoja{width:var(--dm-w);margin:0 auto;background:#fff;color:#292524;
  font-family:'Inter',sans-serif;border-radius:22px;overflow:hidden;
  box-shadow:0 8px 30px rgba(30,27,75,.12);
  print-color-adjust:exact;-webkit-print-color-adjust:exact}
.doc-crea-hoja *{box-sizing:border-box}
.dc-cinta{height:9px;background:linear-gradient(to right,#4338ca,#a855f7,#fb923c)}
.dc-cuerpo{padding:0.7in 0.75in}
.dc-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0.45in}
.dc-marca{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.dc-logo{width:44px;height:44px;border-radius:12px;flex:none;
  background:linear-gradient(135deg,#312e81,#4f46e5);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-weight:700;font-size:21px}
.dc-marca span{font-family:'Playfair Display',serif;font-weight:700;font-size:20px;color:#1e1b4b}
.dc-direccion{font-size:11.5px;color:#78716c;line-height:1.7}
.dc-direccion .correo{color:#4f46e5;font-weight:500}
.dc-header-der{text-align:right}
.dc-doctitulo{font-family:'Playfair Display',serif;font-weight:700;font-size:34px;
  color:#1e1b4b;margin:0 0 5px}
.dc-folio{font-size:11.5px;color:#a8a29e;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.dc-folio b{color:#44403c}
.dc-info{display:flex;justify-content:space-between;gap:0.4in;background:#fafaf9;
  border:1px solid #f0efed;border-radius:16px;padding:0.28in 0.32in;margin-bottom:0.4in}
.dc-info-cliente{border-left:3px solid #6366f1;padding-left:14px}
.dc-etq{font-size:10px;font-weight:700;color:#818cf8;text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:8px}
.dc-cliente-nombre{font-family:'Playfair Display',serif;font-weight:700;font-size:17px;
  color:#1e1b4b;margin-bottom:4px}
.dc-cliente-linea{font-size:12px;color:#78716c;line-height:1.6}
.dc-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.3in;text-align:right;font-size:12.5px}
.dc-meta-etq{font-size:10px;font-weight:700;color:#a8a29e;text-transform:uppercase;letter-spacing:.08em}
.dc-meta-val{font-weight:600;color:#44403c;margin-top:3px}
.dc-badge{display:inline-flex;align-items:center;gap:5px;background:#d1fae5;color:#047857;
  border:1px solid #a7f3d0;border-radius:999px;padding:4px 12px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;margin-top:10px}
.dc-tabla{width:100%;border-collapse:collapse;margin-bottom:0.35in;font-size:12.5px}
.dc-tabla th{text-align:left;font-size:10px;font-weight:700;color:#1e1b4b;
  text-transform:uppercase;letter-spacing:.08em;padding:0 8px 12px 0;border-bottom:2px solid #1e1b4b}
.dc-tabla th.num,.dc-tabla td.num{text-align:right}
.dc-tabla th.cen,.dc-tabla td.cen{text-align:center}
.dc-tabla td{padding:15px 8px 15px 0;border-bottom:1px solid #f0efed;vertical-align:top}
.dc-serv-titulo{font-weight:700;color:#1e1b4b;font-size:13.5px;margin:0}
.dc-serv-detalle{font-size:12px;color:#78716c;margin-top:4px;line-height:1.6}
.dc-fila-final{display:flex;justify-content:space-between;align-items:flex-end;gap:0.4in}
.dc-notas{width:48%;font-size:12px;color:#78716c;line-height:1.7;border-left:2px solid #e7e5e4;
  padding-left:14px;font-style:italic}
.dc-totales{width:44%;background:#1e1b4b;color:#fff;border-radius:22px;padding:0.3in}
.dc-totales div{display:flex;justify-content:space-between;font-size:12.5px;color:#c7d2fe;margin-bottom:11px}
.dc-total-final{border-top:1px solid rgba(199,210,254,.3);padding-top:14px;margin-bottom:0 !important;
  align-items:flex-end}
.dc-total-final span:first-child{font-size:11px !important;font-weight:700;color:#a5b4fc !important;
  text-transform:uppercase;letter-spacing:.08em}
.dc-total-final span:last-child{font-family:'Playfair Display',serif;font-size:21px;
  font-weight:700;color:#fff !important}
.dc-pie{margin-top:0.55in;padding-top:0.26in;border-top:1px solid #f0efed;
  display:flex;justify-content:space-between;font-size:10.5px;color:#a8a29e}

/* ---- PROFESIONAL ---------------------------------------------------------
   Sobria y de toda la vida -- serif del sistema (sin fuente nueva que
   cargar), regla fina, todo centrado o en columnas rectas. Sin logo: solo
   texto, como un membrete impreso. */
.doc-prof-hoja{width:var(--dm-w);margin:0 auto;background:#fff;color:#1a1a1a;
  font-family:Georgia,'Times New Roman',serif;padding:0.85in;box-sizing:border-box;
  print-color-adjust:exact;-webkit-print-color-adjust:exact}
.doc-prof-hoja *{box-sizing:border-box}
.dp-header{text-align:center;border-bottom:2px solid #1a1a1a;padding-bottom:0.26in;margin-bottom:0.3in}
.dp-marca{font-size:22px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.dp-direccion{font-size:11.5px;color:#555;line-height:1.6}
.dp-tipo-fila{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0.3in}
.dp-doctitulo{font-size:17px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.dp-folio{font-size:12.5px;color:#555}
.dp-info{display:flex;justify-content:space-between;border-top:1px solid #ccc;border-bottom:1px solid #ccc;
  padding:0.2in 0;margin-bottom:0.35in;font-size:12.5px}
.dp-etq{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#777;margin-bottom:5px}
.dp-cliente-nombre{font-weight:700;font-size:14.5px;margin-bottom:2px}
.dp-cliente-linea{color:#555;font-size:12px;line-height:1.55}
.dp-info-der{text-align:right}
.dp-tabla{width:100%;border-collapse:collapse;margin-bottom:0.32in;font-size:12.5px}
.dp-tabla th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  border-bottom:1.5px solid #1a1a1a;padding:0 8px 8px 0}
.dp-tabla th.num,.dp-tabla td.num{text-align:right}
.dp-tabla th.cen,.dp-tabla td.cen{text-align:center}
.dp-tabla td{padding:11px 8px 11px 0;border-bottom:1px solid #ddd;vertical-align:top}
.dp-serv-titulo{font-weight:700;margin:0}
.dp-serv-detalle{font-size:11.5px;color:#555;margin-top:3px;font-style:italic}
.dp-fila-final{display:flex;justify-content:space-between;gap:0.4in;margin-bottom:0.45in}
.dp-notas{width:50%;font-size:12px;color:#444;line-height:1.6}
.dp-totales{width:42%;font-size:12.5px}
.dp-totales div{display:flex;justify-content:space-between;padding:5px 0}
.dp-total-final{border-top:1.5px solid #1a1a1a;margin-top:5px;padding-top:9px !important;
  font-size:15px;font-weight:700}
.dp-firma{margin-top:0.55in;display:flex;justify-content:flex-end}
.dp-firma-caja{width:2.6in;text-align:center}
.dp-firma-linea{border-top:1px solid #1a1a1a;padding-top:6px;font-size:13px}
.dp-firma-pie{font-size:10.5px;color:#777;margin-top:3px}
.dp-pie{margin-top:0.5in;padding-top:0.2in;border-top:1px solid #ccc;
  text-align:center;font-size:10.5px;color:#777}

/* Edición directa sobre el papel, EN LAS TRES -- mismo mecanismo, mismo
   guión bajo punteado en placeholder que ya usa el programa de examen. */
.doc-min-hoja [contenteditable],.doc-crea-hoja [contenteditable],.doc-prof-hoja [contenteditable]{
  cursor:text;border-radius:3pt;outline-offset:2px}
.doc-min-hoja [contenteditable]:hover,.doc-crea-hoja [contenteditable]:hover,
.doc-prof-hoja [contenteditable]:hover{background:rgba(99,102,241,.06)}
.doc-min-hoja [contenteditable]:focus{outline:1.5pt solid #4338ca}
.doc-crea-hoja [contenteditable]:focus{outline:1.5pt solid #6366f1}
.doc-prof-hoja [contenteditable]:focus{outline:1.5pt solid #1a1a1a}
.doc-min-hoja [contenteditable]:empty::before,.doc-crea-hoja [contenteditable]:empty::before,
.doc-prof-hoja [contenteditable]:empty::before{content:attr(data-ph);opacity:.45;font-style:italic}
.dm-linea-fila,.dc-linea-fila,.dp-linea-fila{position:relative}
.dm-linea-quitar,.dc-linea-quitar,.dp-linea-quitar{position:absolute;top:10px;right:-22px;
  width:18px;height:18px;border:none;background:none;color:#b91c1c;cursor:pointer;
  font-size:15px;line-height:1;opacity:.55}
.dm-linea-quitar:hover,.dc-linea-quitar:hover,.dp-linea-quitar:hover{opacity:1}
.dm-agregar-linea,.dc-agregar-linea,.dp-agregar-linea{border:1px dashed var(--dm-linea);
  border-radius:8px;padding:9px;text-align:center;font-size:12px;color:var(--dm-gris);
  cursor:pointer;margin-bottom:0.3in;background:none;width:100%;font-family:inherit}
.dm-agregar-linea:hover,.dc-agregar-linea:hover,.dp-agregar-linea:hover{background:var(--dm-panel)}

@media print{
  /* El documento mide un poco menos que el papel, porque Safari se reserva
   * alto para su encabezado y su pie. Para que el verde igual llegue a los
   * bordes, en impresion lo pinta el fondo de la PAGINA: eso cubre la hoja
   * completa aunque el documento sea mas corto. */
  html,body{margin:0;padding:0}
  body{
    background:linear-gradient(to right,
      var(--da-verde-verde, #1E3A32) 0 var(--da-verde-ancho, 2.15in),
      #FFFFFF var(--da-verde-ancho, 2.15in)) !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .doc-artista{width:var(--da-w);margin:0;background:transparent}
  .doc-hoja{height:var(--da-doc, var(--da-h))}
  .da-cot{min-height:var(--da-doc, var(--da-h))}
  .da-cot .da-lateral{background:transparent}   /* el verde ya lo pone la pagina */
  .da-pagina,.da-recibo,.da-doc-simple{min-height:var(--da-doc, var(--da-h))}
  /* El recibo y las paginas de carpeta no llevan barra verde. */
  body:has(.da-recibo), body:has(.da-pagina), body:has(.da-doc-simple){
    background:#FFFFFF !important;
  }
  .da-salto-pagina{break-before:page}
}

/* ---------- comparar dos versiones de lo mismo ---------- */
.par-lados{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){ .par-lados{grid-template-columns:1fr} }
.par-lado{background:var(--panel2);border:1px solid var(--borde);
  border-radius:10px;padding:10px 12px;font-size:13.5px}
.par-rotulo{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--suave);font-weight:700;margin-bottom:4px}

/* Observaciones: texto que se lee completo, no recortado como un renglon de lista */
.obs{font-size:13.5px;line-height:1.5;color:var(--texto);white-space:normal;
  overflow:visible;text-overflow:clip;padding:2px 0}
.obs-alerta{color:var(--ambar);font-weight:560}
.lista li:has(.obs){display:block}

/* ---------- campo de lista abierta ----------
   Se escribe para filtrar, o se toca la flecha y se elige. Reemplaza a
   <datalist>, que en el iPhone no dibuja nada y dejaba el campo mudo. */
.lista-abierta{position:relative}
.lista-abierta > input{width:100%;padding-right:42px}
.la-flecha{position:absolute;top:0;right:0;height:100%;width:40px;
  border:0;background:none;color:var(--suave);font-size:16px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  border-left:1px solid var(--borde);border-radius:0 11px 11px 0}
.la-flecha:active{color:var(--acento)}
.la-ops{position:absolute;z-index:70;left:0;right:0;top:calc(100% + 4px);
  margin:0;padding:4px;list-style:none;max-height:220px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--borde);border-radius:11px;
  box-shadow:0 8px 24px rgba(6,10,20,.28);-webkit-overflow-scrolling:touch}
.la-ops li{padding:10px 12px;border-radius:8px;font-size:14px;cursor:pointer}
.la-ops li:active,.la-ops li:hover{background:var(--panel2)}
.la-ops[hidden]{display:none}

/* ---------- franja de avisos ---------- */
.avisos .lista li{align-items:flex-start;gap:10px;cursor:pointer;padding:10px 0}
.avisos .lista li:active{opacity:.6}
.avisos .obs{flex:1}
.avisos .ir{color:var(--tenue);font-size:20px;line-height:1.2;flex:0 0 auto}

/* ---------- calendario ---------- */
.dia-cal{border-top:1px solid var(--borde);padding:10px 0}
.dia-cal.hoy{background:var(--acento-suave);border-radius:12px;
  padding:10px 12px;border-top:0;margin:6px 0}
.dia-cab{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.dia-cab strong{font-size:19px;font-variant-numeric:tabular-nums}
.dia-cab span{font-size:12px;color:var(--suave);text-transform:capitalize}
.punto{width:9px;height:9px;border-radius:50%;flex:0 0 auto}

/* ---- LA CUADRÍCULA DEL MES ----
   "En vez de que se vea como una lista, que se vea como un calendario en
   forma de calendario, bien grande." Siete columnas, semanas completas
   (con celdas vacías antes del 1 y después del último para que salga
   rectangular), un punto de color por tipo de cosa que trae cada día, y
   CUALQUIER día se puede tocar -- abre la vista del día (dia.js), que ya
   existe y ya hace el trabajo de "la lista de qué hay". */
/* LA TARJETA DEL CALENDARIO -- el mismo tratamiento premium que ya tiene El
 * Artista, aplicado a Vista mensual (pedido el 8 de sep, "mantén el estilo
 * de El Artista"). El grid de días de abajo NO se tocó -- ya estaba bien
 * resuelto (contraste medido, .dia-celda.hoy ya seguro en los dos temas). */
.cal-tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:20px;
  padding:22px 22px 18px;margin-bottom:14px;
  box-shadow:0 2px 4px color-mix(in srgb, var(--texto) 5%, transparent),
    0 14px 30px -18px color-mix(in srgb, var(--texto) 22%, transparent)}
.cal-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-cab h2{font-family:'Italiana',Georgia,serif;font-size:24px;font-weight:400;
  margin:0;text-transform:capitalize}
.cal-nav{width:36px;height:36px;border-radius:50%;border:1px solid var(--borde);
  background:var(--panel2);display:grid;place-items:center;cursor:pointer;color:var(--suave);padding:0}
.cal-nav svg{width:15px;height:15px;display:block}
.cal-leyenda{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:11px;color:var(--suave)}
.cal-leyenda span{display:inline-flex;align-items:center;gap:5px}
.cal-leyenda i{width:6px;height:6px;border-radius:50%;display:inline-block}

.mes-cuadricula{margin-bottom:10px}
.mes-cab, .mes-filas{display:grid; grid-template-columns:repeat(7, 1fr)}
.mes-cab{margin-bottom:6px}
.mes-diasem{text-align:center; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tenue); padding-bottom:4px}
.mes-filas{gap:4px}

.dia-celda{
  aspect-ratio:1; min-height:44px; border:0; border-radius:10px;
  background:var(--panel2); color:var(--texto); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:0; font-family:inherit;
  transition:background .14s ease;
}
.dia-celda.vacia{background:transparent; cursor:default}
.dia-celda:not(.vacia):hover{background:var(--acento-suave)}
.dia-celda:not(.vacia):active{transform:scale(.96)}
.dia-num{font-size:14px; font-variant-numeric:tabular-nums}
/* Los domingos, en rojo -- pedido a propósito, y no en la celda de "hoy":
   esa ya tiene su propio contraste resuelto (letra clara sobre --acento) y
   ponerle rojo encima competía con eso sin necesidad. */
.dia-num.domingo{color:var(--rojo)}
/* Hoy manda sobre "tiene algo" -- las dos cosas no compiten por el mismo
   pixel: el aro dice "estás aquí", los puntos dicen "esto trae". */
.dia-celda.hoy{background:var(--acento); color:var(--fondo)}
/* Medido en el navegador: en claro, --fondo sobre --acento da 4.38:1 --
   pasa el mínimo AAA de "letra grande" (3:1) pero se queda corto para
   texto normal (4.5:1). En vez de forzar un color nuevo que sí cumpla
   pero desentone, el número sube a 18px/700 -- eso lo hace contar como
   "letra grande" de verdad, donde 4.38:1 ya es suficiente, y de paso el
   día de hoy pesa más a la vista, que es justo lo que tiene que hacer. */
.dia-celda.hoy .dia-num{font-size:18px; font-weight:700}
.dia-celda.hoy:hover{background:var(--acento)}
/* FERIADO NACIONAL -- pedido el 9 de sep: "ese día debe ponerse rojo en el
   calendario". Mismo truco que .hoy (fondo y letra son los dos adaptativos
   del tema, así que el contraste se sostiene solo en claro y oscuro sin
   medir un color nuevo) pero con --rojo en vez de --acento, para que se lea
   como "no hay clase", distinto de "hoy" o de un punto más entre otros. El
   nombre completo va en el atributo title -- un tooltip al pasar el mouse,
   no un texto en movimiento: se lee mejor quieto que corriendo. */
.dia-celda.feriado.nacional{background:var(--rojo); color:var(--fondo)}
.dia-celda.feriado.nacional:hover{background:var(--rojo)}
/* Si además es domingo, la regla de abajo (.dia-num.domingo) pintaría el
   número en --rojo sobre un fondo que YA es --rojo -- letra invisible.
   Esta gana por ser más específica (tres clases contra dos). */
.dia-celda.feriado.nacional .dia-num{color:var(--fondo)}
.dia-celda.feriado.nacional .dia-puntos i{box-shadow:0 0 0 1px var(--fondo)}
/* Hoy Y feriado nacional a la vez: sigue siendo hoy, pero el rojo manda --
   es la información más rara y la que de verdad hace falta ver de un
   vistazo. */
.dia-celda.hoy.feriado.nacional{background:var(--rojo)}
/* FERIADO DE INSTITUCIÓN -- pedido el 11 de sep: "esos no tendrían color
   rojo sino otro, pues solo aplicarían parcialmente" -- un receso de una
   sola escuela no es "nadie tiene clase hoy", así que se lee distinto:
   ámbar, mismo tono que ya usa el calendario del Conservatorio para lo
   mismo, no el rojo que reservamos para lo nacional. */
.dia-celda.feriado.institucion{background:var(--ambar-suave); color:var(--ambar)}
.dia-celda.feriado.institucion:hover{background:var(--ambar-suave)}
.dia-celda.feriado.institucion .dia-num{color:var(--ambar)}
.dia-puntos{display:flex; gap:2px}
.dia-puntos i{width:5px; height:5px; border-radius:50%; display:block}
/* En el día de hoy el fondo YA es --acento -- un punto que también use
   --acento (el de "agenda", por ejemplo) se volvería invisible encima de
   su propio color. Un aro del color del texto de esa celda los separa del
   fondo sea cual sea el color del punto. */
.dia-celda.hoy .dia-puntos i{box-shadow:0 0 0 1px var(--fondo)}

/* Menos de 44px de celda en el teléfono más angosto y ya no se puede tocar
   con el dedo sin errar -- se reparte lo que sobra en menos separación,
   nunca en celdas más chicas. */
@media (max-width:400px){
  .mes-filas{gap:2px}
  .dia-celda{min-height:38px}
  .dia-num{font-size:12.5px}
}
.pasos{margin:0;padding-left:20px;font-size:13.5px;line-height:1.6;color:var(--texto)}
.pasos li{margin-bottom:8px}
.pasos code{background:var(--panel2);padding:1px 5px;border-radius:5px;font-size:12.5px}
.ficha .pie{transition:opacity .22s ease}

/* ---------- ayuda plegable y ejemplos ---------- */
.ayuda{background:var(--panel2);border:1px solid var(--borde);border-radius:11px;
  padding:10px 12px}
.ayuda summary{cursor:pointer;font-size:13.5px;font-weight:560}
.ejemplo{white-space:pre-wrap;font-family:ui-monospace,monospace;font-size:11.5px;
  background:var(--panel);border:1px solid var(--borde);border-radius:9px;
  padding:10px;margin:8px 0;overflow-x:auto;line-height:1.45}

/* Diagnóstico: no es una tarea pendiente, es un agujero en la información */
.es-diagnostico{border-left:3px solid var(--ambar);padding-left:10px !important}

/* ==========================================================================
   EL RESUMEN DEL MES
   Una sola respuesta arriba -- cuanto quedo libre y si eso es mucho o poco
   para ti -- y el resto plegado. Antes eran nueve tarjetas del mismo peso.
   ========================================================================== */
.tarjeta.mes{padding:16px 16px 14px}
.mes-nav{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px}
.mes-nav strong{text-transform:capitalize;font-size:15px;letter-spacing:.01em}

.mes-heroe{text-align:center;margin-bottom:16px}
.mes-heroe .rotulo{font-size:11.5px;color:var(--suave);text-transform:uppercase;
  letter-spacing:.06em}
.cifra-grande{font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1.12;
  font-variant-numeric:tabular-nums;margin-top:2px}
.cifra-grande.es-verde{color:var(--verde)}
.cifra-grande.es-rojo{color:var(--rojo)}
.comparacion{font-size:12.5px;margin-top:4px;font-weight:600;
  font-variant-numeric:tabular-nums}
.comparacion span{color:var(--suave);font-weight:400}
.comparacion.sube{color:var(--verde)}
.comparacion.baja{color:var(--ambar)}
.comparacion.neutra{color:var(--suave);font-weight:400}

/* La barra cuenta el mes de un vistazo: lo que se fue en gastos, en cuotas,
   y lo que quedo. El sobregiro se dibuja pasando la raya. */
.flujo{position:relative;display:flex;height:12px;border-radius:999px;
  overflow:hidden;background:var(--panel2);gap:2px}
.flujo i{display:block;transition:width .5s cubic-bezier(.22,1,.36,1)}
.flujo .f-gastos{background:var(--rojo)}
.flujo .f-cuotas{background:var(--ambar)}
.flujo .f-libre{background:var(--verde)}
/* El sobregiro va encima, desde donde se acabo lo cobrado hasta el final:
   si sumara ancho, la barra se desbordaria justo el mes que peor te fue. */
.flujo .f-sobregiro{position:absolute;top:0;bottom:0;right:0;
  border-left:2px solid var(--texto);
  background:repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--rojo) 85%, transparent) 0 3px,
    transparent 3px 7px)}

.flujo-clave{display:flex;gap:6px;list-style:none;margin:10px 0 0;padding:0}
.flujo-clave li{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;
  font-size:11.5px;color:var(--suave);cursor:pointer;padding:6px 8px;
  border-radius:9px;border:1px solid transparent;transition:background .15s,border-color .15s}
.flujo-clave li:active{transform:scale(.98)}
.flujo-clave li.abierta{background:var(--panel2);border-color:var(--borde)}
.flujo-clave li strong{font-size:14px;color:var(--texto);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.flujo-clave b{width:16px;height:3px;border-radius:2px;display:block;margin-bottom:3px}
.flujo-clave .p-cobrado{width:3px;height:11px;border-radius:1px;
  background:var(--texto);margin-bottom:0;margin-top:-4px}
.flujo-clave .p-gastos{background:var(--rojo)}
.flujo-clave .p-cuotas{background:var(--ambar)}
.flujo-detalle{margin-top:10px;padding-top:10px;border-top:1px solid var(--borde)}

/* Seis meses en barritas. Los negativos bajan de la raya en vez de subir:
   un mes en rojo tiene que verse distinto, no solo de otro color. */
.mini-meses{display:flex;gap:5px;align-items:stretch;margin-top:16px}
.mini-mes{flex:1;background:none;border:0;padding:4px 0 0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  border-radius:8px;transition:background .15s}
.mini-mes:active{background:var(--panel2)}
.mini-tallo{position:relative;width:100%;height:46px}
/* La raya del cero, al medio: un mes en rojo baja, no solo cambia de color. */
.mini-tallo::after{content:"";position:absolute;left:0;right:0;top:50%;
  height:1px;background:var(--borde)}
.mini-tallo i{position:absolute;left:0;right:0;border-radius:3px;
  transition:height .45s cubic-bezier(.22,1,.36,1)}
.mini-tallo i.pos{background:var(--verde);bottom:50%;margin-bottom:1px}
.mini-tallo i.neg{background:var(--rojo);top:50%;margin-top:1px}
/* Un mes sin nada registrado no se pinta: se marca con puntos. Un hueco no
   es una perdida, y confundirlos seria mentir con un dibujo. */
.mini-tallo i.nada{top:calc(50% - 5px);height:10px;background:none;
  border-left:2px dotted var(--tenue);left:calc(50% - 1px);right:auto;opacity:.7}
.mini-mes.vacio-mes .mini-etq{opacity:.5}
.mini-mes .mini-etq{font-size:10px;color:var(--tenue);text-transform:capitalize}
.mini-mes.actual{background:var(--panel2)}
.mini-mes.actual .mini-etq{color:var(--texto);font-weight:640}
.mini-pie{text-align:center;margin-top:6px;font-size:11.5px}

/* Avisos: solo el que urge; el resto se despliega. */

/* Tarjetas que se abren. El titular se ve siempre; el detalle, si lo pides. */
.tarjeta.plegable{padding:0}
.tarjeta.plegable summary{display:flex;align-items:center;gap:10px;
  padding:14px 16px;cursor:pointer;list-style:none}
.tarjeta.plegable summary::-webkit-details-marker{display:none}
.tarjeta.plegable summary h2{margin:0;flex:1;font-size:15px}
.dato-plegable{font-size:14px;font-weight:640;color:var(--suave);
  font-variant-numeric:tabular-nums}
.tarjeta.plegable .chevron{color:var(--tenue);font-size:17px;line-height:1;
  transition:transform .2s ease}
.tarjeta.plegable[open] .chevron{transform:rotate(90deg)}
.plegable-cuerpo{padding:0 16px 16px}

@media (prefers-reduced-motion: reduce){
  .flujo i,.mini-tallo i,.tarjeta.plegable .chevron{transition:none}
}

/* ==========================================================================
   EL REGISTRO DE ALUMNOS
   La misma mano que las cotizaciones: verde 1E3A32, bronce en versalitas,
   Italiana en los titulos. Pero la banda va ARRIBA y no al lado, porque una
   rejilla de fechas necesita el ancho de la hoja.
   ========================================================================== */
.reg-hoja{display:flex;flex-direction:column;min-height:var(--da-h);
  page-break-after:always;break-after:page}
.reg-hoja:last-child{page-break-after:auto;break-after:auto}

.reg-banda{background:var(--da-verde);color:var(--da-crema);
  padding:0.42in 0.55in 0.34in;flex:0 0 auto}
.reg-marca{font-family:var(--da-display);font-size:30px;line-height:1;
  letter-spacing:.02em;color:#fff}
.reg-sub{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--da-arena);margin-top:7px}
.reg-titulo{font-size:12.5px;color:var(--da-salvia);margin-top:14px;
  padding-top:10px;border-top:1px solid rgba(214,194,154,.35)}

.reg-cuerpo{flex:1 1 auto;padding:0.34in 0.55in 0.2in}

.reg-alumno h1{font-family:var(--da-display);font-size:27px;line-height:1.15;
  color:var(--da-verde);margin:0 0 12px}
.reg-meta{display:flex;flex-wrap:wrap;gap:8px 26px;
  padding-bottom:14px;border-bottom:1px solid var(--da-linea);margin-bottom:16px}
.reg-dato{font-size:12px;color:var(--da-texto);margin-top:3px}

.reg-tabla{width:100%;border-collapse:collapse;font-size:12px}
.reg-tabla th{font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--da-bronce);font-weight:400;text-align:center;
  padding:0 6px 7px;border-bottom:1px solid var(--da-bronce)}
.reg-tabla td{text-align:center;padding:8px 6px;
  border-bottom:1px solid var(--da-linea);font-variant-numeric:tabular-nums}
.reg-tabla .izq{text-align:left}
.reg-tabla .fuerte{font-weight:500;color:var(--da-verde)}
.reg-nada{font-size:9.5px;color:var(--da-gris)}

.reg-promedio{display:flex;align-items:center;justify-content:space-between;
  gap:20px;margin-top:18px;padding:14px 18px;background:var(--da-crema);
  border-left:3px solid var(--da-bronce)}
.reg-nota-grande{font-family:var(--da-display);font-size:44px;line-height:1;
  color:var(--da-verde);margin-top:2px}
.reg-formula{font-size:10.5px;line-height:1.7;color:var(--da-gris);text-align:right}

/* La rejilla del dia por dia: el numero del dia con su marca debajo. */
.reg-detalle{margin-top:20px}
.reg-mes{display:flex;align-items:flex-start;gap:12px;margin-top:9px}
.reg-mes-et{font-size:10.5px;color:var(--da-gris);width:0.75in;flex:0 0 0.75in;
  padding-top:5px;text-transform:capitalize}
.reg-marcas{display:flex;flex-wrap:wrap;gap:5px}
.reg-casilla{width:26px;height:30px;border:1px solid var(--da-linea);border-radius:3px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:9px;color:var(--da-gris);line-height:1.15}
.reg-casilla i{font-style:normal;font-size:11px;font-weight:500}
.reg-casilla.m-si,.reg-casilla.m-rep{background:#EDF3EE;border-color:var(--da-salvia)}
.reg-casilla.m-si i,.reg-casilla.m-rep i{color:var(--da-verde)}
.reg-casilla.m-just{background:#FAF4E8;border-color:var(--da-arena)}
.reg-casilla.m-just i{color:var(--da-bronce)}
.reg-casilla.m-no i{color:#9d3b32;font-weight:600}
.reg-casilla.m-nada{background:#F6F5F1;border-style:dashed}
.reg-casilla.m-nada i{color:var(--da-gris)}

.reg-obs{margin-top:26px}
.reg-rayas{margin-top:14px}
.reg-rayas i{display:block;border-bottom:1px solid var(--da-linea);height:0.28in}

.reg-pie{flex:0 0 auto;padding:0 0.55in 0.42in;display:flex;
  align-items:flex-end;justify-content:space-between;gap:24px}
.reg-leyenda{font-size:9.5px;color:var(--da-gris);line-height:1.7}
.reg-leyenda b{color:var(--da-verde);font-weight:500}
.reg-firma{text-align:center;font-size:10px;color:var(--da-gris);flex:0 0 2.4in}
.reg-raya{border-top:1px solid var(--da-texto);margin-bottom:6px}

.reg-todos td:first-child{min-width:1.6in}
.reg-previa .reg-hoja + .reg-hoja{margin-top:22px}

@media print{
  /* El registro NO lleva la banda lateral de las cotizaciones: si se dejara,
     el fondo de la pagina pintaria una franja verde a la izquierda de una
     hoja que no la tiene. */
  body.imprime-registro{background:#fff !important}
  .reg-previa{display:none}
}

/* Botones-etiqueta para marcar una clase de un toque. Grandes de verdad:
   esto se usa con el teléfono en una mano, de pie, al terminar la clase. */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.chip{font-family:inherit;font-size:13px;line-height:1.2;padding:8px 13px;
  border-radius:999px;border:1px solid var(--borde);background:var(--panel);
  color:var(--texto);cursor:pointer;transition:background .14s,border-color .14s}
.chip:active{transform:scale(.97)}
.chip-on{background:color-mix(in srgb, var(--chip) 16%, var(--panel));
  border-color:var(--chip);color:var(--chip);font-weight:560}
.chips-razon{max-height:none}
.chips-razon .chip{font-size:12px;padding:6px 11px}
.campo .chips + textarea{margin-top:8px}

/* LA CALIFICACIÓN DE 1 A 5 -- el slider, pedido el 16 de sep: "poder hacer
   scroll en la nota para conseguir la que se quiera poner". Un
   type=range es justo eso -- se arrastra, y con decimales (step .25) no
   hace falta acertar un número exacto para que se vea bien. */
/* Las dos calificaciones, como dos tarjetas PAREJAS -- pedido el 16 de
   sep: "se ve poco estético" cuando una iba centrada y la otra no. Ahora
   las dos comparten la misma tarjeta (fondo, radio, centrado); la de 1 a
   5 manda (ocupa más ancho, trae el slider), la institucional acompaña
   más angosta -- pero con el mismo trato visual, no como un campo suelto
   pegado al lado. */
.campo-calif{background:transparent; padding:0}
.calif-fila{display:flex; gap:12px; align-items:stretch; flex-wrap:wrap}
.calif-tarjeta{flex:1 1 210px; min-width:0; background:var(--panel2);
  border-radius:14px; padding:16px 14px; text-align:center;
  display:flex; flex-direction:column; align-items:center}
.calif-secundaria{flex:0 1 130px}
.calif-etq{font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--tenue); font-weight:600; margin-bottom:8px}
.calif-num{font-size:32px; font-weight:700; color:var(--texto); line-height:1}
.calif-banda{display:inline-block; margin-top:9px; font-size:11px; letter-spacing:.03em;
  font-weight:600; padding:4px 10px; border-radius:999px}
.calif-banda.calif-verde{color:var(--verde); background:var(--verde-suave)}
.calif-banda.calif-ambar{color:var(--ambar); background:var(--ambar-suave)}
.calif-banda.calif-rojo{color:var(--rojo); background:var(--rojo-suave)}
#calif{width:100%; margin-top:14px; accent-color:var(--acento); height:6px; cursor:pointer}
.calif-secundaria input{width:100%; text-align:center; font-size:26px; font-weight:700;
  padding:7px 4px; border-radius:10px}
.calif-secundaria .nota{margin-top:7px; font-size:10.5px}

/* LAS CATEGORÍAS DE OBSERVACIÓN -- rehechas el 16 de sep: antes eran
   cuatro bloques iguales de chips apiñados en vertical, imposibles de
   leer. Ahora cada una tiene su color y su título grande, y sus opciones
   van en un carril que se desliza de lado -- ocupa tres líneas, no doce. */
.campo-cat{--cat:var(--tenue)}
.cat-casa{--cat:var(--ambar)}
.cat-clase{--cat:var(--m-tiempo, #4a7fb5)}
.cat-bien{--cat:var(--verde)}
.cat-plan{--cat:var(--acento)}
/* Gana a `.campo label` (dos clases contra una): el título de cada
   categoría tiene que verse GRANDE y con su color, no como una etiqueta
   gris más -- es lo que separa un bloque de otro de un vistazo. */
.campo .cat-titulo{display:flex; align-items:center; gap:9px;
  font-size:16.5px; font-weight:700; letter-spacing:-.01em; color:var(--cat);
  text-transform:none; margin-bottom:9px}
.campo .cat-titulo::before{content:''; width:4px; height:18px; border-radius:2px;
  background:var(--cat); flex:0 0 4px}
.cat-carril{display:flex; flex-wrap:nowrap; overflow-x:auto; gap:8px;
  padding:2px 2px 10px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch}
.cat-carril .chip{flex:0 0 auto; white-space:nowrap; scroll-snap-align:start}
.cat-carril .chip.chip-on{border-color:var(--cat); color:var(--cat)}
.cat-carril::-webkit-scrollbar{height:5px}
.cat-carril::-webkit-scrollbar-thumb{background:var(--borde); border-radius:3px}
.cat-carril::-webkit-scrollbar-track{background:transparent}
.cat-buscar{margin-top:2px}
.cat-nueva{margin-top:8px}
.cat-nueva[hidden]{display:none}
.cat-espera{background:var(--panel2); border-radius:12px; padding:12px 14px;
  border-left:3px solid var(--tenue)}

/* EL TABLERO DE LA FICHA -- tres lecturas de un vistazo (16 de sep).
   auto-fit: si el alumno es particular y no lleva nota institucional, la
   tarjeta no se dibuja y las otras dos se reparten el ancho solas. */
.tb-tarjeta{margin-top:12px}
.tb-rejilla{display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr))}
.tb-caja{position:relative; background:var(--panel2); border:1px solid var(--borde);
  border-radius:16px; padding:16px; min-height:132px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; text-align:center}
.tb-lbl{font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tenue); font-weight:600; line-height:1.35}
.tb-num{font-size:34px; font-weight:700; color:var(--texto); line-height:1.1;
  margin-top:auto; display:flex; align-items:baseline; justify-content:center; gap:6px}
.tb-num span{font-size:16px; font-weight:600; color:var(--tenue)}
.tb-prom{color:var(--verde)}
.tb-sube{font-size:19px; color:var(--verde)}
.tb-baja{font-size:19px; color:var(--rojo)}
.tb-igual{font-size:19px; color:var(--tenue)}
.tb-pie{font-size:11.5px; color:var(--tenue); line-height:1.5; margin-top:6px}
.tb-curva{display:block; width:100%; height:38px; margin-top:8px; color:var(--verde)}

/* Al día: callada. Con algo por reponer: ámbar y con salida. */
.tb-caja.tb-alerta{background:var(--ambar-suave); border-color:var(--ambar)}
.tb-caja.tb-alerta .tb-lbl{color:var(--ambar)}
.tb-aviso{font-size:19px; font-weight:700; line-height:1.25; margin-top:auto;
  color:var(--ambar)}
.tb-aviso.tb-ok{color:var(--verde); font-size:17px}
.tb-caja.tb-bien .tb-lbl{color:var(--verde)}
.tb-btn{margin-top:10px; align-self:center}

/* Las tarjetas son puertas -- pedido el 16 de sep: acceso directo a donde
   se pone cada dato, igual que ya tienen las filas del informe. */
.tb-caja.tb-clic{cursor:pointer; transition:border-color .15s, transform .1s}
.tb-caja.tb-clic:hover{border-color:var(--acento)}
.tb-caja.tb-clic:active{transform:scale(.98)}

/* La botonera de la ficha: uno manda, los otros acompañan. */
.ficha-acciones{margin-top:16px; display:flex; flex-direction:column; gap:10px}
.ficha-principal{font-size:15px; padding:14px; letter-spacing:.02em}
.ficha-secundarias{display:flex; gap:10px}
.ficha-secundarias .btn{flex:1}
.btn.fantasma{background:transparent; border:1px solid var(--borde); color:var(--texto)}
.btn.fantasma:hover{border-color:var(--acento); color:var(--acento)}

/* LA NOTA DE VOZ -- pedida el 16 de sep, "por si es más rápido que
   escribir". Mismo botón redondeado de siempre; mientras graba, respira
   en rojo para que quede claro que el micrófono está abierto. */
.campo-voz audio{border-radius:10px}
.voz-grabando{background:var(--rojo); color:#fff; animation:cc-latir 1.4s ease-in-out infinite}

/* El informe a los padres -- reemplazado el 16 de sep: el promedio de
   Calificacion (1-5) es el número grande ahora, no un veredicto en
   palabras. Mismas 3 tintas del papel de siempre (verde/bronce/rojo). */
.inf-promedio{margin-top:4px;padding:18px 20px;background:var(--da-crema);
  border-left:3px solid var(--da-verde); text-align:center}
.inf-promedio.inf-ambar{border-left-color:var(--da-bronce)}
.inf-promedio.inf-rojo{border-left-color:#9d3b32}
.inf-prom-num{font-family:var(--da-display);font-size:44px;line-height:1;
  color:var(--da-verde);margin-top:6px}
.inf-promedio.inf-ambar .inf-prom-num{color:var(--da-bronce)}
.inf-promedio.inf-rojo .inf-prom-num{color:#9d3b32}
.inf-prom-num span{font-size:15px;color:var(--da-gris);font-family:var(--da-cuerpo);
  margin-left:4px}
.inf-prom-banda{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--da-gris);margin-top:6px;font-weight:500}

.inf-sintesis{font-size:12.5px;line-height:1.65;color:var(--da-texto);margin-top:8px !important}

.inf-hechos{display:flex;gap:26px;margin-top:20px;padding-bottom:16px;
  border-bottom:1px solid var(--da-linea)}
.inf-hechos > div{flex:1}
.inf-num{font-family:var(--da-display);font-size:31px;line-height:1.05;
  color:var(--da-verde);margin-top:4px}
.inf-num span{font-size:14px;color:var(--da-gris);font-family:var(--da-cuerpo)}
.inf-pie{font-size:10px;color:var(--da-gris);margin-top:3px}

.inf-bloque{margin-top:20px}

/* Clase por clase -- una tarjeta por día, con la nota y sus categorías. */
.inf-clases{margin-top:10px; display:flex; flex-direction:column; gap:12px}
.inf-clase{padding:10px 6px; border-bottom:1px solid var(--da-linea); border-radius:8px}
.inf-clase:last-child{border-bottom:0}
/* Acceso directo -- pedido el 16 de sep: tocar la fila de una clase abre
   la misma ventana donde se pone calificación, asistencia y las 4
   categorías. Solo se ve en pantalla (el PDF/impresión reusa este mismo
   HTML, sin cursor ni con qué tocar). */
.inf-clase-editable{cursor:pointer; transition:background .14s ease}
.inf-clase-editable:hover,.inf-clase-editable:active{
  background:color-mix(in srgb, var(--da-verde) 8%, transparent)}
/* Siempre visible, no solo al pasar el mouse -- en el teléfono no hay
   "hover" que lo avise. */
.inf-clase-ir{margin-left:auto; font-size:10.5px; color:var(--da-gris)}
.inf-clase-cab{display:flex; align-items:center; gap:10px}
.inf-clase-cab b{font-size:12px; color:var(--da-texto)}
.inf-clase-nota{font-family:var(--da-display); font-size:16px; color:var(--da-verde)}
.inf-clase-nota.inf-ambar{color:var(--da-bronce)}
.inf-clase-nota.inf-rojo{color:#9d3b32}
.inf-clase p{font-size:11.5px; line-height:1.6; color:var(--da-texto); margin:4px 0 0}
.inf-clase p i{font-style:normal; color:var(--da-bronce); font-size:9.5px;
  text-transform:uppercase; letter-spacing:.06em; margin-right:5px}

.inf-metas{list-style:none;margin:10px 0 0;padding:0}
.inf-metas li{font-size:12px;line-height:1.6;padding:5px 0;display:flex;gap:9px}
.inf-check{font-weight:600;width:14px;flex:0 0 14px;text-align:center}
.inf-metas .me-cumplida .inf-check{color:var(--da-verde)}
.inf-metas .me-no .inf-check{color:#9d3b32}
.inf-metas .me-pendiente{color:var(--da-gris)}

/* ==========================================================================
   LAS TRES PLANTILLAS NUEVAS DEL INFORME -- pedido el 19 de sep, mismo
   patrón que Programa (4 plantillas) y Registro (5 plantillas): un solo
   dato, varias caras. "Clásico" (arriba, .reg-hoja/.inf-*) sigue siendo el
   que recibe por defecto -- estas tres son las que se eligen desde el chip
   selector en informe.js.

   Cada bloque de aquí es independiente y con su propio prefijo (infed-,
   infpr-, infcp-) a propósito: cambiar una no puede desafinar a las otras
   dos, ni a Clásico.

   Las tres comparten el mismo contrato de tamaño que ya usan Programa y
   Registro: van dentro de <div class="doc-artista …-hoja">, que ya trae el
   ancho A4 (--da-w/--da-h) y el zoom de la vista previa (--da-zoom). Nada
   de eso se repite aquí.

   PAGINACIÓN: break-inside:avoid en cada pieza y cada clase -- mismo
   recurso que .pe-obra en el Programa de examen, para que una obra o una
   clase nunca se corte a la mitad entre dos páginas del PDF.
   ========================================================================== */

/* ---- EDITORIAL: navy y serif, tipo programa de concierto -- rediseñado el
   19 de sep sobre las imágenes de referencia: logo + cita en cursiva,
   tarjetas de métrica y de nivel/síntesis con ícono, "en casa"/"lo que se
   vio" en columnas con viñetas. Georgia (ya es el fallback de --da-display)
   en vez de 'Italiana', que queda exclusiva de Clásico. */
.infed-hoja{--navy:#1B3550; --ink:#1F2933; --muted:#6B7686; --line:#DCE3EA;
  --surface:#EEF3F8; background:#FCFDFE; color:var(--ink);
  font-family:'Jost',sans-serif; font-size:11.5px; line-height:1.5;
  padding:0.85in 0.8in; box-sizing:border-box}
.infed-cab{display:flex; justify-content:space-between; align-items:flex-start; gap:16px}
.infed-marca{display:flex; align-items:center; gap:10px}
.infed-logo{width:30px; height:30px; flex:0 0 auto; background:var(--navy); color:#fff;
  border-radius:5px; padding:5px; box-sizing:border-box}
.infed-logo svg{width:100%; height:100%; display:block}
.infed-inst{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--navy); font-weight:600}
.infed-cita{font-family:'Caveat',cursive; font-size:16px; line-height:1.25; color:var(--navy);
  text-align:right; max-width:2.6in; padding-top:2px}
.infed-raya-top{border-top:1.5pt solid var(--navy); margin:12px 0 16px}
.infed-titular{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:18px}
.infed-titulo{font-family:Georgia,serif; font-weight:700; font-size:15px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--navy); line-height:1.35}
.infed-alumno{font-family:Georgia,serif; font-weight:400; font-size:32px; line-height:1.1;
  color:var(--navy); margin:8px 0 4px}
.infed-profesor{font-size:11.5px; color:var(--muted)}
.infed-horario-caja{display:flex; gap:18px; flex:0 0 auto; padding-top:4px}
.infed-horario-caja div{display:flex; flex-direction:column; gap:2px; text-align:left}
.infed-hlbl{font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600}
.infed-horario-caja div span:last-child{font-size:11.5px; color:var(--navy)}
.infed-metricas{display:flex; gap:0; border:1px solid var(--line); border-radius:8px;
  overflow:hidden; margin-bottom:18px; background:var(--surface)}
.infed-metrica{flex:1; text-align:center; padding:14px 6px; border-right:1px solid var(--line)}
.infed-metrica:last-child{border-right:0}
.infed-metrica b{font-family:Georgia,serif; font-weight:700; font-size:24px; color:var(--navy); line-height:1}
.infed-metrica span{font-size:11px; color:var(--muted)}
.infed-metrica label{display:block; font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-top:4px}
.infed-desarrollo{display:flex; gap:16px; margin-bottom:18px; align-items:stretch}
.infed-nivel{flex:0 0 auto; display:flex; align-items:center; gap:10px; background:var(--surface);
  border-radius:8px; padding:12px 18px}
.infed-nivel svg{width:22px; height:22px; flex:0 0 auto; color:var(--navy)}
.infed-nivel span{display:block; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.infed-nivel b{display:block; font-size:14px; margin-top:2px; color:var(--navy)}
.infed-nivel.infed-ambar svg,.infed-nivel.infed-ambar b{color:#9C6B1E}
.infed-nivel.infed-rojo svg,.infed-nivel.infed-rojo b{color:#9d3b32}
.infed-caja{flex:1; display:flex; gap:10px; background:var(--surface); border-radius:8px; padding:12px 16px}
.infed-caja svg{width:20px; height:20px; flex:0 0 auto; color:var(--navy); margin-top:1px}
.infed-lbl{font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.infed-caja p{margin:0; font-size:11.5px; line-height:1.6}
.infed-seccion{margin-bottom:18px; break-inside:avoid-page}
.infed-h2{font-family:Georgia,serif; font-weight:700; font-size:14px; color:var(--navy);
  border-bottom:1px solid var(--line); padding-bottom:6px; margin:0 0 10px}
.infed-tabla{width:100%; border-collapse:collapse; font-size:11px}
.infed-tabla th{text-align:center; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--line); padding:0 0 6px; font-weight:600}
.infed-tabla th.izq{text-align:left}
.infed-tabla td{padding:7px 0; border-bottom:1px solid var(--line); text-align:center; break-inside:avoid}
.infed-tabla td.izq{text-align:left}
.infed-tabla td.fuerte{color:#9C6B1E; font-weight:600}
.infed-clases{display:flex; flex-direction:column; gap:10px}
.infed-clase{padding:10px 12px; background:var(--surface); border-radius:8px; break-inside:avoid}
.infed-clase-cab{display:flex; align-items:center; gap:10px}
.infed-clase-cab b{font-size:11px; letter-spacing:.04em; color:var(--navy)}
.infed-nota{font-family:Georgia,serif; font-weight:700; font-size:15px; color:var(--navy)}
.infed-nota.infed-ambar{color:#9C6B1E}
.infed-nota.infed-rojo{color:#9d3b32}
.infed-ir{margin-left:auto; font-size:10px; color:var(--muted)}
.infed-clase-obs{display:flex; gap:16px; margin-top:8px}
.infed-obs-col{flex:1}
.infed-obs-col i{display:flex; align-items:center; gap:5px; font-style:normal; color:var(--navy);
  font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; font-weight:600}
.infed-obs-col svg{width:13px; height:13px}
.infed-obs-col p{margin:4px 0 0 18px; font-size:11px; line-height:1.5}
.infed-clase-plan{margin:6px 0 0; font-size:11px; line-height:1.55}
.infed-clase-plan i{font-style:normal; color:var(--navy); font-size:9.5px; text-transform:uppercase; letter-spacing:.03em}
.infed-metas{list-style:none; margin:0; padding:0}
.infed-metas li{font-size:11.5px; line-height:1.6; padding:4px 0; display:flex; gap:9px}
.infed-metas .me-cumplida span{color:#1E7A4C; font-weight:600}
.infed-metas .me-no span{color:#9d3b32; font-weight:600}
.infed-pie{margin-top:20px; border-top:1.5pt solid var(--navy); padding-top:16px}
.infed-objetivo{display:flex; gap:10px; background:var(--surface); border-radius:8px; padding:12px 16px; margin-bottom:14px}
.infed-objetivo svg{width:20px; height:20px; flex:0 0 auto; color:var(--navy); margin-top:1px}
.infed-objetivo p{margin:0; font-size:11.5px; line-height:1.6}
.infed-obs{margin-bottom:14px}
.infed-rayas i{display:block; height:1px; background:var(--line); margin-top:14px}
.infed-leyenda{font-size:9.5px; color:var(--muted); line-height:1.6; margin:0 0 20px}
.infed-firmas{display:flex; gap:40px}
.infed-firma{flex:1; text-align:center; font-size:10.5px; color:var(--muted)}
.infed-raya{border-top:1px solid var(--ink); margin-bottom:6px; padding-top:20px}

/* ---- CREATIVA (antes "Student Progress"): crema y petróleo, con tarjetas
   de color por métrica -- rediseñado el 19 de sep sobre la imagen de
   referencia. Georgia en vez de 'Italiana' (exclusiva de Clásico); 'Caveat'
   (ya cargada para firmas) para la cita manuscrita. */
.infpr-hoja{--petrol:#1F5B57; --cream:#FBF6EC; --sand:#E8E0D2; --accent:#B8CFC7;
  --text:#263238; --muted2:#687579; background:var(--cream); color:var(--text);
  font-family:'Jost',sans-serif; font-size:11.5px; line-height:1.5;
  padding:0.85in 0.8in; box-sizing:border-box}
.infpr-topbar{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px}
.infpr-marca{display:flex; align-items:center; gap:10px}
.infpr-marca svg{width:30px; height:30px; color:var(--petrol)}
.infpr-etiqueta{font-family:Georgia,serif; font-weight:700; font-size:21px; color:var(--petrol); line-height:1.1}
.infpr-mes{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted2); margin-top:2px}
.infpr-cita{font-family:'Caveat',cursive; font-size:17px; line-height:1.2; color:var(--petrol); text-align:right; max-width:2.4in}
.infpr-perfil{display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--sand);
  border-radius:12px; padding:14px 18px; margin-bottom:18px}
.infpr-avatar{width:40px; height:40px; flex:0 0 auto; border-radius:50%; background:var(--accent);
  color:var(--petrol); display:flex; align-items:center; justify-content:center}
.infpr-avatar svg{width:22px; height:22px}
.infpr-perfil-info{flex:1}
.infpr-perfil-info h1{font-family:Georgia,serif; font-weight:700; font-size:19px; margin:0; color:var(--text)}
.infpr-sub{font-size:11px; color:var(--muted2); margin-top:2px}
.infpr-chip{display:flex; align-items:center; gap:7px; padding-left:14px; border-left:1px solid var(--sand)}
.infpr-chip svg{width:16px; height:16px; color:var(--petrol)}
.infpr-chip span{display:block; font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted2)}
.infpr-chip b{display:block; font-size:11px; font-weight:600; color:var(--text)}
.infpr-metricas{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px}
.infpr-tarjeta{display:flex; align-items:center; gap:9px; border-radius:10px; padding:12px 10px}
.infpr-tarjeta svg{width:20px; height:20px; flex:0 0 auto}
.infpr-tarjeta b{display:block; font-family:Georgia,serif; font-weight:700; font-size:19px; line-height:1}
.infpr-tarjeta span{font-size:9.5px; color:var(--muted2)}
.infpr-tarjeta label{display:block; font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted2); margin-top:2px}
.infpr-t-cal{background:#FCEEDC} .infpr-t-cal svg{color:#C97A3D}
.infpr-t-cla{background:#E4F0E9} .infpr-t-cla svg{color:var(--petrol)}
.infpr-t-est{background:#E9F3EC} .infpr-t-est svg{color:#3E8E5B}
.infpr-t-pza{background:#F0E9F3} .infpr-t-pza svg{color:#7C5A96}
.infpr-cols{display:flex; gap:12px; margin-bottom:18px}
.infpr-col{flex:1; display:flex; gap:10px; background:#fff; border-radius:10px; padding:14px 16px; border:1px solid var(--sand)}
.infpr-col svg{width:20px; height:20px; flex:0 0 auto; color:var(--petrol); margin-top:1px}
.infpr-lbl{font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted2); margin-bottom:6px}
.infpr-col p{margin:0; font-size:11.5px; line-height:1.6}
.infpr-ambar{color:#9C6B1E} .infpr-rojo{color:#9d3b32} .infpr-verde{color:#1E7A4C}
.infpr-seccion{margin-bottom:18px}
.infpr-barra{display:flex; align-items:center; gap:8px; background:var(--petrol); color:#fff;
  border-radius:8px; padding:9px 14px; font-size:11.5px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; margin-bottom:10px}
.infpr-barra svg{width:16px; height:16px}
.infpr-piezas{display:flex; flex-direction:column; gap:8px}
.infpr-pieza{background:#fff; border-radius:8px; padding:10px 14px; border:1px solid var(--sand);
  break-inside:avoid}
.infpr-pieza b{display:block; font-size:12.5px}
.infpr-pieza span{font-size:10.5px; color:var(--muted2)}
.infpr-etapa-fila{display:flex; justify-content:space-between; margin-top:4px}
.infpr-etapa{font-size:10px; background:var(--accent); border-radius:4px; padding:1px 8px}
.infpr-semanas{font-size:10px; color:var(--muted2)}
.infpr-semanas.fuerte{color:#9C6B1E; font-weight:600}
.infpr-metas{list-style:none; margin:6px 0 0; padding:0}
.infpr-metas li{font-size:11.5px; line-height:1.6; padding:4px 0; display:flex; gap:9px}
.infpr-metas .me-cumplida span{color:#1E7A4C; font-weight:600}
.infpr-metas .me-no span{color:#9d3b32; font-weight:600}
.infpr-clase{background:#fff; border-radius:8px; border:1px solid var(--sand);
  margin-top:8px; break-inside:avoid; overflow:hidden}
.infpr-clase-cab{display:flex; align-items:center; gap:8px; padding:9px 14px; background:#F3F0E9}
.infpr-clase-cab b{font-size:11px; color:var(--text)}
.infpr-punto{width:8px; height:8px; border-radius:50%; background:var(--muted2); flex:0 0 auto}
.infpr-cc-verde{background:#E9F3EC} .infpr-cc-verde .infpr-punto{background:#1E7A4C}
.infpr-cc-ambar{background:#FCEEDC} .infpr-cc-ambar .infpr-punto{background:#C97A3D}
.infpr-cc-rojo{background:#FBE7E5} .infpr-cc-rojo .infpr-punto{background:#9d3b32}
.infpr-nota{margin-left:auto; font-family:Georgia,serif; font-weight:700; font-size:13px; color:var(--petrol)}
.infpr-ir{font-size:10px; color:var(--muted2)}
.infpr-detalles{display:flex; gap:16px; padding:10px 14px 4px}
.infpr-detalle{flex:1; padding:0 0 10px}
.infpr-detalle-ancho{flex:0 0 100%; padding:0 14px 10px}
.infpr-detalle label{display:flex; align-items:center; gap:5px; font-size:9px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted2); font-weight:600}
.infpr-detalle label svg{width:12px; height:12px}
.infpr-detalle p{margin:4px 0 0 17px; font-size:11px; line-height:1.5}
.infpr-objetivo{display:flex; gap:12px; background:var(--petrol); color:#fff; border-radius:10px; padding:16px 20px; margin-bottom:14px}
.infpr-objetivo svg{width:22px; height:22px; flex:0 0 auto; color:#fff}
.infpr-objetivo .infpr-lbl{color:rgba(255,255,255,.7)}
.infpr-objetivo p{margin:0; font-size:12.5px; line-height:1.6}
.infpr-obs{margin-bottom:14px}
.infpr-rayas i{display:block; height:1px; background:var(--sand); margin-top:14px}
.infpr-pie{border-top:1px solid var(--sand); padding-top:14px}
.infpr-pie p{font-size:9.5px; color:var(--muted2); line-height:1.6; margin:0 0 16px}
.infpr-firmas{display:flex; gap:40px}
.infpr-firma{flex:1; text-align:center; font-size:10.5px; color:var(--muted2)}
.infpr-raya{border-top:1px solid var(--text); margin-bottom:6px; padding-top:20px}

/* ---- CONSERVATORY PREMIUM: negro y oro, editorial -- rediseñado el 19 de
   sep: escudo + cita dorada, teclado ilustrado (en vez de una foto real,
   para no depender de un archivo externo), síntesis/nivel arriba en cajas
   claras, "Observaciones del profesor" como una sola caja oscura que junta
   en-casa/lo-que-se-vio/plan por cada clase (clicable igual que antes),
   esquina dorada decorativa. Georgia en vez de 'Italiana' (exclusiva de
   Clásico); 'Caveat' para la cita. */
.infcp-hoja{--ink2:#111417; --charcoal:#20262B; --ivory:#F5F1E8; --gold:#B89A5A;
  --gray:#788087; background:var(--ivory); color:var(--ink2);
  font-family:'Jost',sans-serif; font-size:11.5px; line-height:1.5;
  padding:0; box-sizing:border-box}
.infcp-marca{background:var(--ink2); color:var(--ivory); display:flex; justify-content:space-between;
  align-items:center; padding:0.55in 0.75in 0.3in}
.infcp-marca-izq{display:flex; align-items:center; gap:10px}
.infcp-marca-izq svg{width:26px; height:26px; color:var(--gold)}
.infcp-inst{font-size:10px; letter-spacing:.16em; text-transform:uppercase}
.infcp-cita{font-family:'Caveat',cursive; font-size:17px; color:var(--gold); text-align:right; line-height:1.15}
.infcp-cab{background:var(--ink2); color:var(--ivory); padding:0 0.75in 0.5in; display:flex;
  justify-content:space-between; align-items:flex-end; gap:16px; overflow:hidden}
.infcp-cab-texto{flex:1 1 auto}
.infcp-titulo{font-family:Georgia,serif; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(245,241,232,.65); line-height:1.4; margin-bottom:14px}
.infcp-fila-nombre{display:flex; align-items:flex-end; gap:24px}
.infcp-alumno{font-family:Georgia,serif; font-weight:400; font-size:34px; line-height:1; margin:0}
.infcp-sub{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-top:4px}
.infcp-profesor{font-size:10.5px; color:var(--ivory); border-left:1px solid rgba(245,241,232,.3); padding-left:20px}
.infcp-profesor span{display:block; font-size:9px; color:var(--gray); text-transform:uppercase; letter-spacing:.06em; margin-top:2px}
.infcp-teclado{flex:0 0 auto; width:1.9in; opacity:.9}
.infcp-teclado svg{width:100%; height:auto; display:block}
.infcp-metricas{display:flex; background:var(--charcoal); color:var(--ivory)}
.infcp-metrica{flex:1; text-align:center; padding:16px 6px; border-right:1px solid rgba(245,241,232,.12)}
.infcp-metrica:last-child{border-right:0}
.infcp-metrica b{display:block; font-family:Georgia,serif; font-weight:700; font-size:24px; color:var(--gold)}
.infcp-metrica label{display:block; font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gray); margin-top:4px}
.infcp-resumen{display:flex; gap:12px; padding:20px 0.75in 0}
.infcp-caja{flex:1; display:flex; gap:10px; background:#fff; border:1px solid #ddd6c8; border-radius:8px; padding:14px 16px}
.infcp-caja svg{width:20px; height:20px; flex:0 0 auto; color:var(--gold); margin-top:1px}
.infcp-lbl{font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gray); margin-bottom:4px}
.infcp-caja p{margin:0; font-size:11.5px; line-height:1.6}
.infcp-ambar{color:#9C6B1E} .infcp-rojo{color:#9d3b32} .infcp-verde{color:#1E7A4C}
.infcp-seccion{padding:20px 0.75in; break-inside:avoid-page}
.infcp-h2{font-family:Georgia,serif; font-weight:700; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink2); border-bottom:1.5pt solid var(--gold);
  padding-bottom:8px; margin:0 0 14px}
.infcp-tabla{width:100%; border-collapse:collapse; font-size:11px; margin-bottom:16px}
.infcp-tabla th{background:var(--ink2); color:var(--ivory); text-align:center; font-size:9.5px;
  letter-spacing:.06em; text-transform:uppercase; padding:8px 10px; font-weight:600}
.infcp-tabla th.izq{text-align:left}
.infcp-tabla td{padding:8px 10px; border-bottom:1px solid #ddd6c8; text-align:center; break-inside:avoid}
.infcp-tabla td.izq{text-align:left}
.infcp-tabla td.fuerte{color:#9d3b32; font-weight:600}
.infcp-tabla-clases{width:100%; border-collapse:collapse; font-size:11px; margin-bottom:16px}
.infcp-tabla-clases th{background:var(--ink2); color:var(--ivory); text-align:center; padding:7px 10px;
  font-size:9.5px; letter-spacing:.06em; text-transform:uppercase}
.infcp-tabla-clases th.izq{text-align:left}
.infcp-tabla-clases td{padding:7px 10px; border-bottom:1px solid #ddd6c8; text-align:center}
.infcp-tabla-clases td.izq{text-align:left}
.infcp-obs-caja{background:var(--charcoal); color:var(--ivory); border-radius:8px; padding:16px 18px}
.infcp-obs-caja h3{font-family:Georgia,serif; font-weight:700; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold); margin:0 0 10px}
.infcp-obs-clase{padding:8px 0; border-top:1px solid rgba(245,241,232,.14); break-inside:avoid}
.infcp-obs-clase:first-of-type{border-top:0}
.infcp-obs-clase>b{display:block; font-size:9.5px; letter-spacing:.06em; color:var(--gold); margin-bottom:4px}
.infcp-obs-clase p{display:flex; gap:7px; align-items:flex-start; margin:3px 0; font-size:11px; line-height:1.5}
.infcp-obs-clase p svg{width:13px; height:13px; flex:0 0 auto; color:var(--gold); margin-top:2px}
.infcp-obs-clase p i{font-style:normal; color:var(--ivory); font-weight:600; margin-right:5px}
.infcp-piezas{display:flex; flex-direction:column; gap:14px}
.infcp-pieza{border-bottom:1px solid #ddd6c8; padding-bottom:10px; break-inside:avoid}
.infcp-pieza b{display:block; font-size:15px; letter-spacing:.03em}
.infcp-compositor{display:block; font-size:11px; color:var(--gray); font-style:italic; margin-top:2px}
.infcp-etapa{display:block; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold); margin-top:4px}
.infcp-etapa.fuerte{color:#9d3b32}
.infcp-clases{display:flex; flex-direction:column; gap:14px}
.infcp-clase{display:flex; gap:20px; border-bottom:1px solid #ddd6c8; padding-bottom:12px; break-inside:avoid}
.infcp-clase-fecha{flex:0 0 90px; text-align:left}
.infcp-clase-fecha b{display:block; font-size:11px; letter-spacing:.04em}
.infcp-clase-fecha span{font-family:Georgia,serif; font-weight:700; font-size:16px; color:var(--gold)}
.infcp-clase-texto{flex:1}
.infcp-clase-texto p{margin:0 0 4px; font-size:11px; line-height:1.55}
.infcp-metas{list-style:none; margin:0; padding:0}
.infcp-metas li{font-size:11.5px; line-height:1.7; padding:3px 0; display:flex; gap:9px}
.infcp-metas .me-cumplida span{color:#1E7A4C; font-weight:600}
.infcp-metas .me-no span{color:#9d3b32; font-weight:600}
.infcp-lotoca{padding:0 0.75in; margin-bottom:10px}
.infcp-rayas i{display:block; height:1px; background:#ddd6c8; margin-top:16px}
.infcp-siguiente{text-align:center; padding:26px 0.75in; break-inside:avoid-page}
.infcp-siguiente-etq{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray)}
.infcp-siguiente-mes{font-family:Georgia,serif; font-weight:700; font-size:26px; color:var(--gold); margin:4px 0 10px}
.infcp-siguiente p{margin:0; font-size:12px; line-height:1.6; max-width:5in; margin:0 auto}
.infcp-pie{padding:20px 0.75in 0.6in; border-top:1px solid #ddd6c8; position:relative; overflow:hidden}
.infcp-pie p{font-size:9.5px; color:var(--gray); line-height:1.6; margin:0 0 20px}
.infcp-firmas{display:flex; gap:40px}
.infcp-firma{flex:1; text-align:center; font-size:10.5px; color:var(--gray)}
.infcp-raya{border-top:1px solid var(--ink2); margin-bottom:6px; padding-top:20px}
.infcp-pie::after{content:''; position:absolute; right:-30px; bottom:-30px; width:140px; height:140px;
  background:
    linear-gradient(135deg, transparent 48%, var(--gold) 49%, var(--gold) 52%, transparent 53%),
    linear-gradient(135deg, transparent 58%, var(--gold) 59%, var(--gold) 61%, transparent 62%);
  opacity:.5; pointer-events:none}

/* ==========================================================================
   COLOR CON OFICIO EN EL PANEL
   Los colores no son adorno: cada uno es un mundo. Un pago de tarjeta en tres
   días no puede verse igual que trece comercios sin clasificar. Se toman de
   la paleta de sus documentos -- verde, bronce, arena -- para que el panel se
   vea suyo y no de cualquier app de finanzas.
   ========================================================================== */
:root{
  --m-dinero:#047857; --m-banco:#b45309; --m-papeles:#8C6A3A;
  --m-alumnos:#1E3A32; --m-carro:#0f766e; --m-tiempo:#3730a3;
  --bronce:#8C6A3A; --arena:#D6C29A;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --m-dinero:#34d399; --m-banco:#fbbf24; --m-papeles:#D6C29A;
    --m-alumnos:#A9C2AE; --m-carro:#5eead4; --m-tiempo:#a5b4fc;
    --bronce:#D6C29A; --arena:#D6C29A;
  }
}
:root[data-tema="oscuro"]{
  --m-dinero:#34d399; --m-banco:#fbbf24; --m-papeles:#D6C29A;
  --m-alumnos:#A9C2AE; --m-carro:#5eead4; --m-tiempo:#a5b4fc;
  --bronce:#D6C29A; --arena:#D6C29A;
}

/* La cabecera: una raya de bronce, como la de los documentos. */
.bienv{position:relative;padding:10px 2px 18px}
.bienv::after{content:"";position:absolute;left:2px;bottom:8px;width:44px;
  height:2px;background:var(--bronce);border-radius:2px;opacity:.85}
/* El bronce entra solo al final, un toque -- antes tenia mas de la mitad
   de la palabra tenida de acento y dejaba de leerse como acento. */
.bienv-saludo{background:linear-gradient(100deg,var(--texto) 82%,var(--bronce));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* Un atajo dentro de un campo: "sacarlo de una foto", por ejemplo. */
.campo-atajo{margin-top:7px;font-size:12.5px;padding:6px 12px;width:auto}

/* ==========================================================================
   EL CARRO, CON COLOR
   El turquesa del mundo "carro" que ya usa el panel. Los kilómetros y el
   costo son lo que se mira: van grandes y en color.
   ========================================================================== */
/* EL MUNDO DEL CARRO, CON COLOR DE VERDAD.
   Antes era una tarjeta gris con una rayita turquesa al lado. Ahora el
   turquesa bana la tarjeta entera y los kilometros -- que son el dato -- se
   ven desde lejos. */
.tarjeta.jor{
  border:1px solid color-mix(in srgb, var(--m-carro) 26%, var(--borde));
  border-left:4px solid var(--m-carro);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--m-carro) 9%, var(--panel)) 0%,
      var(--panel) 62%);
  transition:transform .16s ease, box-shadow .16s ease}
.tarjeta.jor:hover{box-shadow:0 3px 14px color-mix(in srgb, var(--m-carro) 20%, transparent)}
.tarjeta.jor:active{transform:scale(.99)}
.jor-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.jor-fecha{font-size:12px;color:var(--suave);text-transform:capitalize}
.jor-km{font-size:25px;font-weight:700;letter-spacing:-.02em;color:var(--m-carro);
  font-variant-numeric:tabular-nums}
.jor-odo{font-size:12px;color:var(--tenue);font-variant-numeric:tabular-nums;margin-top:2px}
.jor-odo i{font-style:normal;color:var(--m-carro);margin:0 4px}
.jor-costo{margin-top:8px;font-size:15px;font-weight:620;
  font-variant-numeric:tabular-nums}
.jor-costo span{font-size:12px;font-weight:400;color:var(--suave)}
.jor-trabajos{list-style:none;margin:8px 0 0;padding:0;display:flex;
  flex-wrap:wrap;gap:6px}
.jor-trabajos li{font-size:11.5px;padding:4px 10px;border-radius:999px;
  background:color-mix(in srgb, var(--m-carro) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--m-carro) 30%, transparent)}
.jor-trabajos b{font-weight:560}
.jor-trabajos span{color:var(--suave)}
.tarjeta.jor-falta{
  border:1px solid color-mix(in srgb, var(--ambar) 32%, var(--borde));
  border-left:4px solid var(--ambar);
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--ambar) 10%, var(--panel)) 0%, var(--panel) 62%)}

/* El dia medido al que le faltan los trabajos: no es un regano, es la
   puerta para anotarlos. */
.jor-huerfana{margin-top:9px;padding:10px 12px;border-radius:10px;
  background:color-mix(in srgb, var(--ambar) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--ambar) 30%, transparent)}
.jor-huerfana p{margin:0 0 8px;font-size:12.5px;line-height:1.45;color:var(--texto)}
.jor-huerfana b{color:var(--ambar)}
/* "chico" es TAMAÑO, no color -- venía con ámbar fijo sin que dijera
 * advertencia ("Ficha", "Abrir", "Ver el día", "‹ ›" de paginar...), como si
 * cada botón chico del sistema estuviera avisando algo. Ahora es neutro,
 * como cualquier botón secundario, y el color lo sigue poniendo quien de
 * verdad lo necesita combinando con .primario o .entrega -- como ya hace
 * grupos.js con "btn chico primario". */
.btn.chico{padding:7px 14px;font-size:13px;border-radius:9px;width:auto;font-weight:600}

/* Las rutas que mas usa: un toque y estan. */
.ruta-sug{margin-bottom:16px}
.ruta-sug h3{margin:0 0 8px;font-size:13px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--suave);font-weight:600}
.ruta-chips{display:flex;gap:8px;flex-wrap:wrap}
.ruta-chip{flex:1 1 30%;min-width:96px;display:flex;flex-direction:column;gap:2px;
  padding:11px 12px;border-radius:12px;cursor:pointer;text-align:left;
  color:var(--texto);
  border:1px solid color-mix(in srgb, var(--m-carro) 34%, transparent);
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--m-carro) 15%, var(--panel)) 0%, var(--panel) 78%);
  transition:transform .14s ease, box-shadow .14s ease}
.ruta-chip:active{transform:scale(.97)}
.ruta-chip:hover{box-shadow:0 3px 12px color-mix(in srgb, var(--m-carro) 24%, transparent)}
.ruta-chip b{font-size:14px;font-weight:640;letter-spacing:-.01em}
.ruta-chip span{font-size:11px;color:var(--suave)}
.ruta-sug .nota{margin:8px 0 0}
.ruta-lista .monto{color:var(--m-carro);font-weight:640;
  font-variant-numeric:tabular-nums}


/* ---------------------------------------------------------------------------
   ALUMNOS: QUIEN PAGA, CUANTO, Y QUIEN NO PAGA POR QUE.
   Una beca y un olvido se ven igual si los dos son un cero. Aqui cada caso
   tiene su color y dice su razon.
   --------------------------------------------------------------------------- */
.al-cuota{flex-shrink:0;text-align:right;font-size:12px;line-height:1.25}
.al-paga{display:block;font-weight:640;font-variant-numeric:tabular-nums;
  color:var(--m-alumnos)}
.al-paga i{display:block;font-style:normal;font-size:10.5px;font-weight:400;
  color:var(--suave)}
.al-beca,.al-junto,.al-inst{display:inline-block;padding:3px 9px;border-radius:999px;
  font-size:10.5px;font-weight:560;letter-spacing:.02em}
.al-beca{background:color-mix(in srgb, var(--verde) 15%, transparent);color:var(--verde);
  border:1px solid color-mix(in srgb, var(--verde) 32%, transparent)}
.al-junto{background:color-mix(in srgb, var(--m-alumnos) 15%, transparent);
  color:var(--m-alumnos);
  border:1px solid color-mix(in srgb, var(--m-alumnos) 34%, transparent)}
.al-inst{background:var(--panel2);color:var(--suave);border:1px solid var(--borde)}
/* Un dato que falta no es una beca. Este pide que lo llenen. */
.al-falta{display:inline-block;padding:3px 9px;border-radius:999px;font-size:10.5px;
  font-weight:560;letter-spacing:.02em;
  background:color-mix(in srgb, var(--ambar) 14%, transparent);color:var(--ambar);
  border:1px solid color-mix(in srgb, var(--ambar) 32%, transparent)}

/* El cobro de la clase, visible sin abrir la casilla. */
/* Esto lo va a leer el alumno por encima del hombro mientras marca la clase.
   El dato es el mismo; la palabra, no. "Debe" acusa, "pendiente" no. Y el
   tamano tambien habla: se lee sin gritar. */
.cl-cobro{border-top:1px solid var(--borde);padding-top:12px;margin-top:4px}
.cl-cobro input{margin-top:8px}

/* ---------------------------------------------------------------------------
   TRAER LA AGENDA: cada evento con sus tres salidas.
   --------------------------------------------------------------------------- */
.lista.ics{display:block}
/* La lista de siempre pone cada fila en flex horizontal; aqui el evento y sus
   tres salidas van uno encima del otro, o los botones se desparraman. */
.lista.ics li.ics-ev{display:block;padding:12px 0;
  border-bottom:1px solid var(--borde);gap:0}
.lista.ics li.ics-ev.elegido{
  background:color-mix(in srgb, var(--acento) 6%, transparent);
  margin:0 -10px;padding:12px 10px;border-radius:10px;border-bottom-color:transparent}
.ics-cab{display:block}
.ics-cab .t1{font-weight:600;font-size:14.5px;line-height:1.3}
.ics-cab .t2{font-size:11.5px;color:var(--suave);margin-top:2px;line-height:1.4}
.ics-monto{font-size:12px;font-weight:620;color:var(--verde);margin-top:4px}
.ics-chips{margin-top:9px;display:flex;gap:7px;flex-wrap:wrap}
.ics-chips .chip{padding:6px 13px;font-size:12.5px;border-radius:999px;cursor:pointer;
  border:1px solid var(--borde);background:var(--panel);color:var(--suave)}
.ics-chips .chip.on{background:var(--acento);border-color:var(--acento);color:#fff;
  font-weight:600}
.ics-chips .chip-libre{border-style:dashed;color:var(--acento)}

/* Los siete días, para marcar los que sean. */
.chips.dias-sem{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.dias-sem .chip{flex:1 1 auto;min-width:52px;padding:9px 6px;font-size:12.5px;
  border-radius:9px;cursor:pointer;text-align:center;
  border:1px solid var(--borde);background:var(--panel);color:var(--suave)}
.dias-sem .chip.on{background:var(--m-alumnos);border-color:var(--m-alumnos);
  color:#fff;font-weight:640}

/* Los lugares donde trabaja, y por donde viaja para llegar. */
.lug-ruta{flex-shrink:0;text-align:right;font-size:11px;max-width:44%}
.lug-si{color:var(--m-carro);font-weight:600}
.lug-casa{display:inline-block;padding:3px 9px;border-radius:999px;font-size:10.5px;
  font-weight:560;background:var(--panel2);color:var(--suave);border:1px solid var(--borde)}
.lug-falta,.lug-no{color:var(--ambar);font-weight:560}

/* Los trabajos sin precio: lo que se repite arriba, porque es donde se gana. */
.pre-tit{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--suave);font-weight:600;margin:18px 0 6px}

/* CARPETAS DE ARCHIVO (Mis programas / Informe y Registro) -- pedido el 13
 * de sep: la lista plana de .lista se sentía "genérica" ahí. Esto es SOLO
 * para esas tres pantallas (carpetas-archivo.js) -- el menú de casillas
 * compartido por el resto de la app (.ficha/.rejilla-menu) no se toca.
 * El color, puesto por fila con --c, no es decoración: dice el tipo de
 * carpeta sin tener que leer -- ver TONO_TIPO en carpetas-archivo.js. */
.carp-lista{display:flex;flex-direction:column;gap:12px;list-style:none;margin:0;padding:0}
.carp-carta{
  position:relative;overflow:hidden;
  background:color-mix(in srgb, var(--c, var(--acento-solido)) 6%, var(--panel));
  border-radius:16px;padding:16px 17px;
  display:flex;align-items:center;gap:14px;cursor:pointer;
}
.carp-carta::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--c, var(--acento-solido));
}
.carp-marco{
  width:38px;height:38px;border-radius:12px;flex:0 0 auto;
  display:grid;place-items:center;background:var(--c, var(--acento-solido));
}
.carp-marco svg{width:17px;height:17px;stroke:#fff}
.carp-txt{flex:1;min-width:0}
.carp-txt .t1{
  font-weight:600;font-size:15px;line-height:1.3;margin:0 0 2px;color:var(--texto);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.carp-txt .t2{margin:0;font-size:12px;line-height:1.4;color:var(--suave)}
.carp-chev{flex:0 0 auto;color:color-mix(in srgb, var(--c, var(--acento-solido)) 55%, var(--tenue))}
/* Dos acciones por documento -- pedido el 15 de sep: "que se reubique y
   no se borre para volverlo a subir". Reubicar va primero y con más peso
   (constructiva); Quitar se queda como estaba (destructiva, discreta). */
.carp-acciones{flex:0 0 auto;display:flex;gap:6px}
.carp-reubicar{
  font-size:12px;font-weight:600;color:#fff;background:var(--c, var(--acento-solido));
  border:0;border-radius:20px;padding:6px 13px;cursor:pointer;
}
.carp-quitar{
  font-size:12px;color:var(--suave);background:none;
  border:1px solid color-mix(in srgb, var(--c, var(--acento-solido)) 35%, var(--borde));
  border-radius:20px;padding:6px 13px;cursor:pointer;
}
.lista.pre-lista li.pre{display:flex;gap:10px;align-items:flex-start}
.pre-n{display:inline-block;margin-left:5px;padding:1px 7px;border-radius:999px;
  font-size:11px;font-weight:640;background:var(--acento-suave);color:var(--acento)}
.pre-paso{font-size:11px;color:var(--ambar);font-weight:560;margin-top:3px}
.pre-monto{flex-shrink:0;text-align:right;font-size:12px}
.pre-sug{display:block;font-weight:640;color:var(--verde)}
.pre-monto i{display:block;font-style:normal;font-size:10px;color:var(--suave)}
.pre-poner{color:var(--acento);font-weight:600}
.pre-lugar{font-size:11px;color:var(--tenue);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pre-agenda li.pre{opacity:.9}
.pre-agenda .pre-poner{color:var(--m-tiempo);font-size:11px}

/* ---------------------------------------------------------------------------
   ALUMNOS CON COLOR
   ---------------------------------------------------------------------------
   Dos colores que no compiten, porque dicen cosas distintas:

     IDENTIDAD  el color de la inicial — sale del nombre y no cambia nunca.
                Sirve para separar nueve nombres parecidos sin leerlos.
     ACCIÓN     el anillo alrededor y la palabra de la derecha — dicen qué
                pasó en esa clase, y cambian cada vez.

   El color lo pone el JS (--tinta para el fondo, --letra para la inicial), y
   sale de SU paleta, alternando oscuro y claro. Por eso el color de la letra
   viaja con el fondo: sobre arena o sobre oro el blanco no se lee.
   --------------------------------------------------------------------------- */
.al-inicial{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:640; letter-spacing:-.01em;
  /* SÓLIDO, NO UN TINTE. La primera versión usaba un fondo pastel y dos
     alumnos salían el mismo rosa pálido. Ahora el peso es lo que los separa:
     uno oscuro, el siguiente claro. */
  background:var(--tinta,#1E3A32);
  color:var(--letra,#F2F1EC);
  /* El aro del panel va SIEMPRE, aunque no haya estado. Sin él, el anillo
     verde de un alumno cuyo color también es verde desaparecía: la identidad
     se comía la acción. */
  box-shadow:0 0 0 2px var(--panel);
  transition:box-shadow .18s ease;
}

/* El anillo de afuera es la ACCIÓN: qué pasó en esa clase. */
.al-inicial.al-asistió,
.al-inicial.al-repuso      { box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--verde) }
.al-inicial.al-justificada { box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--ambar) }
.al-inicial.al-faltó       { box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--rojo) }
.al-inicial.al-no-hubo-clase{ box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--borde);
                              opacity:.45 }

/* La palabra de la derecha, del mismo color que el anillo. */
.al-estado{flex-shrink:0;font-size:12px;font-weight:600;letter-spacing:.01em}
.al-estado.e-asistió, .al-estado.e-repuso { color:var(--verde) }
.al-estado.e-justificada { color:var(--ambar) }
.al-estado.e-faltó       { color:var(--rojo) }
.al-estado.e-no-hubo-clase{ color:var(--tenue) }
.al-estado.e-marcar{
  color:var(--acento); font-weight:560;
  padding:3px 10px; border-radius:999px;
  border:1px dashed color-mix(in srgb, var(--acento) 40%, transparent);
}

/* Cómo vino y si pagó: dos marcas chicas, no dos renglones. */
.al-marcas{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.al-prep,.al-cuo{
  font-size:10.5px; font-weight:560; padding:2px 8px; border-radius:999px;
  border:1px solid transparent;
}
.al-prep.bien { background:color-mix(in srgb, var(--verde) 13%, transparent); color:var(--verde);
                border-color:color-mix(in srgb, var(--verde) 26%, transparent) }
.al-prep.medio{ background:color-mix(in srgb, var(--ambar) 13%, transparent); color:var(--ambar);
                border-color:color-mix(in srgb, var(--ambar) 26%, transparent) }
.al-prep.mal  { background:color-mix(in srgb, var(--rojo) 13%, transparent);  color:var(--rojo);
                border-color:color-mix(in srgb, var(--rojo) 26%, transparent) }
.al-cuo.ok    { background:color-mix(in srgb, var(--verde) 11%, transparent); color:var(--verde) }
.al-cuo.debe  { background:color-mix(in srgb, var(--ambar) 15%, transparent); color:var(--ambar);
                border-color:color-mix(in srgb, var(--ambar) 30%, transparent) }

/* La tabla del mes: quién, y cómo va. */
.al-quien{display:flex;align-items:center;gap:9px}
/* El nombre de la tabla ES una puerta: se toca y se entra al alumno. */
.al-entrar{cursor:pointer;border-radius:9px;margin:-3px -6px;padding:3px 6px;
  transition:background .15s}
.al-entrar:hover,.al-entrar:focus-visible{background:var(--suave);outline:none}
.al-entrar:hover .al-nom{color:var(--acento)}
/* El lazo con el: hijo, sobrino, amigo. Va discreto -- es un dato, no un
   estado -- pero se ve, porque es lo que "Los Mios" va a jalar. */
.al-lazo{flex-shrink:0;font-size:10.5px;padding:2px 9px;border-radius:99px;
  background:var(--suave);color:var(--acento);white-space:nowrap;
  text-transform:lowercase}
.al-quien .al-inicial{width:28px;height:28px;font-size:12.5px}
.al-nom{font-weight:560}
.al-pct,.al-nota{font-variant-numeric:tabular-nums;font-weight:640}
.al-pct.bien,  .al-nota.bien  { color:var(--verde) }
.al-pct.medio, .al-nota.medio { color:var(--ambar) }
.al-pct.mal,   .al-nota.mal   { color:var(--rojo) }

/* La ficha del alumno abre con su color, para saber de quién se habla. */
.al-cab{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.al-cab .al-inicial{width:44px;height:44px;font-size:18px}
/* Días, horario e institución -- se quedaba como una "nota" cualquiera
   (--suave) y en la ficha de verdad costaba leerla. Es información de
   identidad, no un detalle secundario: le sube el contraste. */
.al-cab-info{font-size:12.5px; color:var(--texto); opacity:.82; line-height:1.45}

/* LA FOTO -- pedida el 16 de sep, "que ahí salga en grande". El avatar
   entero es el botón (tocar para subir/cambiar). Al principio sin ícono de
   más -- se pensó que el mismo gesto que ya se conoce de cualquier foto de
   perfil alcanzaba -- pero en la ficha real se veía igual que cualquier
   inicial de solo lectura del resto de la app, y no se notaba que ahí SÍ se
   podía tocar. La insignia (📷) es justo esa señal que faltaba. Con foto, el
   círculo crece y la cabecera se alinea arriba, no al centro: a 76px ya no
   queda parejo con dos líneas de texto. */
.al-avatar{position:relative; flex-shrink:0; padding:0; border:0; background:none;
  cursor:pointer; border-radius:50%; display:block; transition:transform .15s ease, opacity .15s ease}
.al-avatar:hover{opacity:.85}
.al-avatar:active{transform:scale(.96)}
.al-avatar img{display:block; width:44px; height:44px; border-radius:50%;
  object-fit:cover; box-shadow:0 0 0 2px var(--panel)}
.al-avatar-insignia{position:absolute; right:-2px; bottom:-2px; width:19px; height:19px;
  border-radius:50%; background:var(--acento); color:#fff; font-size:10px;
  display:flex; align-items:center; justify-content:center; line-height:1;
  box-shadow:0 0 0 2px var(--panel)}
.al-cab-foto{align-items:flex-start}
.al-cab-foto .al-avatar img{width:76px; height:76px}
.al-cab-foto .al-avatar-insignia{width:23px; height:23px; font-size:12px}

/* Nivel y matrícula -- se ven si están puestos, con un toque para editar;
   si no, un solo botón chico para agregarlos (un particular normalmente
   no los lleva, y aquí no estorban). */
.al-nivelfila{display:flex; align-items:center; gap:6px; margin-top:7px; flex-wrap:wrap}
/* Era background:var(--suave) -- en modo oscuro --suave es un gris claro y
   --acento un dorado claro, letra clara sobre fondo claro: ilegible. El
   par correcto es --acento-suave (el fondo pensado para ir CON --acento),
   el mismo que ya usan las tarjetas de aviso (tb-alerta). */
.al-tag{font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px;
  background:var(--acento-suave); color:var(--acento); white-space:nowrap}
.al-tag-suave{background:transparent; border:1px solid var(--borde); color:var(--tenue); font-weight:500}
.al-tag-editar{border:0; background:none; color:var(--tenue); cursor:pointer;
  font-size:12px; padding:2px 4px; line-height:1}
.al-tag-editar:hover{color:var(--acento)}
.al-tag-agregar{border:1px dashed var(--borde); background:none; color:var(--tenue);
  font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px; cursor:pointer;
  margin-top:7px}
.al-tag-agregar:hover{border-color:var(--acento); color:var(--acento)}

/* Las razones, agrupadas: una lista de veinte no se lee de corrido. */
.chips-razon{gap:5px}

/* Una pestaña por institución -- Conservatorio, cada escuela agregada,
   Particulares -- no dos filtros fijos. Rehecho el 14 de sep como control de
   segmentos de verdad (iOS): en el teléfono reparte el ancho completo entre
   los segmentos (igual que antes -- un segmented control real tampoco flota
   angosto en una pantalla angosta); en la computadora, con sitio de sobra,
   se encoge a su contenido y se centra -- ahí es donde se sentía como una
   barra estirada de borde a borde. Con dos o tres caben en una fila; con
   más, envuelven a una segunda fila en vez de apretarse hasta ilegibles. */
.al-pestanas{display:flex;justify-content:center;flex-wrap:wrap;gap:3px;
  margin:2px 0 16px;padding:4px;
  background:color-mix(in srgb, var(--panel2) 88%, transparent);border-radius:999px;
  border:1px solid color-mix(in srgb, var(--borde) 65%, transparent)}
.al-pes{flex:1 1 auto;min-width:96px;padding:8px 16px;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--suave);font-size:13.5px;font-weight:600;
  font-family:inherit;transition:background .2s cubic-bezier(.4,0,.2,1),color .18s ease,
  box-shadow .2s ease,transform .12s ease}
@media(min-width:700px){
  .al-pestanas{width:fit-content;max-width:100%;margin-inline:auto}
  .al-pes{flex:0 1 auto}
}
.al-pes span{display:inline-block;margin-left:5px;padding:1px 7px;border-radius:999px;
  font-size:11px;font-weight:640;background:var(--borde);color:var(--suave)}
.al-pes.on{background:var(--panel);color:var(--texto);font-weight:650;
  box-shadow:0 2px 8px rgba(16,24,40,.14),0 0 0 1px color-mix(in srgb, var(--borde) 50%, transparent)}
.al-pes.on span{background:var(--m-alumnos);color:#fff}
.al-pes:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .al-pes:not(.on):hover{background:color-mix(in srgb, var(--panel) 60%, transparent);color:var(--texto)}
}

/* Los programas de otras escuelas, para comparar con el suyo. */
.prog-ref{margin-bottom:10px}
.prog-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.prog-tit{font-weight:640;font-size:14.5px;line-height:1.3}
.prog-de{font-size:11.5px;color:var(--tenue);margin-top:2px}
.prog-abrir{flex-shrink:0;background:var(--m-alumnos);border-color:var(--m-alumnos);
  color:#fff;text-decoration:none;display:inline-flex;align-items:center}
.prog-dice{font-size:12.5px;line-height:1.5;margin:9px 0 0;color:var(--texto)}
.prog-porque{font-size:12px;line-height:1.5;margin:6px 0 0;color:var(--suave);
  padding-top:7px;border-top:1px solid var(--borde)}

/* Comparar alumnos: quién necesita algo, y qué. */
.cmp{border-left:4px solid var(--caso);margin-bottom:10px}
.cmp-cab{display:flex;align-items:center;gap:11px}
.cmp-quien{flex:1;min-width:0}
.cmp-nom{font-weight:640;font-size:15px}
.cmp-caso{font-size:11.5px;color:var(--caso);font-weight:600;margin-top:1px}
.cmp-piezas{flex-shrink:0;text-align:right}
.cmp-piezas strong{font-size:19px;font-weight:700;letter-spacing:-.02em}
.cmp-piezas i{display:block;font-style:normal;font-size:10px;color:var(--tenue)}
.cmp-medidas{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:11px}
.cmp-medidas>div{display:flex;align-items:center;gap:7px}
.cmp-medidas span{font-size:11px;color:var(--suave);width:48px;flex-shrink:0}
.cmp-barra{flex:1;height:6px;border-radius:999px;background:var(--panel2);overflow:hidden}
.cmp-barra i{display:block;height:100%;border-radius:999px}
.cmp-barra i.va{background:var(--acento)}
.cmp-barra i.vb{background:var(--m-alumnos)}
.cmp-pct{font-size:11.5px;font-weight:640;font-variant-numeric:tabular-nums;
  width:34px;text-align:right}
.cmp-nada{flex:1;font-size:12px;color:var(--tenue)}
.cmp-atasco{margin-top:10px;padding:7px 10px;border-radius:9px;font-size:11.5px;
  background:color-mix(in srgb, var(--ambar) 12%, transparent);color:var(--ambar)}
.cmp-hacer{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--suave);
  padding-top:9px;border-top:1px solid var(--borde)}

/* El programa de un alumno: bloques con su cuenta, y lo que falta salta. */
.blq{margin-bottom:9px;border-left:3px solid var(--verde)}
.blq.falta{border-left-color:var(--ambar)}

/* El menú de alumnos vive dentro de un panel, no en la pantalla entera: la
   rejilla grande de "Más" no cabe ahí. Tres columnas y el tamaño del teléfono. */
@media(min-width:700px){
  .rejilla-menu.compacta{grid-template-columns:repeat(3, 1fr); gap:12px}
  .rejilla-menu.compacta .ficha{padding:14px 14px 13px; gap:8px; min-height:0}
  .rejilla-menu.compacta .ficha .icono-marco{width:36px; height:36px; border-radius:10px}
  .rejilla-menu.compacta .ficha .icono-marco.familia{border-radius:50%}
  .rejilla-menu.compacta .ficha .icono-marco svg{width:21px; height:21px; stroke-width:1.4}
  /* Nombre largo ("Coro de la Catedral Primada") se trunca con "..." en vez
     de partirse en dos lineas -- la ficha no crece para acomodarlo. */
  .rejilla-menu.compacta .ficha .nombre{font-size:27px; letter-spacing:.015em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .rejilla-menu.compacta .ficha .dato{font-size:19px}
  .rejilla-menu.compacta .ficha .pie{font-size:12px; -webkit-line-clamp:2}
}
/* En pantalla grande la rejilla de "Más" se SALE del contenedor a propósito,
   para llenar el monitor. Dentro de un panel eso la deja colgando por fuera:
   "Conservatorio" salía cortado por la izquierda. Aquí se queda en su sitio. */
@media (min-width:1100px){
  .rejilla-menu.compacta{width:auto; margin-left:0}
  .rejilla-menu.compacta .ficha{min-height:0}
  .rejilla-menu.compacta .ficha .icono-marco{width:36px; height:36px}
  .rejilla-menu.compacta .ficha .icono-marco svg{width:21px; height:21px}
  .rejilla-menu.compacta .ficha .nombre{font-size:27px}
}

/* La flecha de volver: en el marco del panel, siempre en el mismo sitio. */
.modal-atras{
  display:inline-flex; align-items:center; gap:5px;
  margin:-4px 0 12px -6px; padding:5px 10px 5px 6px;
  border:0; border-radius:9px; cursor:pointer; font-family:inherit;
  background:transparent; color:var(--suave); font-size:12.5px; font-weight:560;
  transition:background .14s ease, color .14s ease;
}
.modal-atras span{font-size:17px; line-height:1; margin-top:-1px}
.modal-atras b{font-weight:560}
.modal-atras:hover{background:var(--panel2); color:var(--texto)}

/* ---- LOS PAPELES DEL CONSERVATORIO --------------------------------------
   Deliberadamente FUERA de su linea grafica: estos papeles los recibe el
   Conservatorio, no un cliente suyo. Tienen que parecerse a los de los otros
   maestros, no a su marca. Negro sobre blanco y tabla con bordes, copiado de
   las fotos de su registro. Ver web/js/util/papeles.js. */
/* Ancho fijo de hoja -- lo mismo que ya hace .doc-artista -- para que
   "Ver antes de bajar" pueda achicarla completa con transform:scale() en vez
   de dejar que reacomode su tabla y su texto al ancho angosto del celular. Al
   imprimir no cambia nada: @page{size:auto} sigue mandando lo mismo. */
.cnm-hoja{font-family:Arial,Helvetica,sans-serif;color:#000;background:#fff;
  width:var(--da-w);padding:0.5in 0.55in;font-size:12.5px;line-height:1.45}
.cnm-top{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.cnm-logo{width:74px;height:auto;flex:0 0 auto}
.cnm-tit{font-weight:bold;font-size:15px;font-style:italic;
  border-bottom:1px solid #000;padding-bottom:2px}
.cnm-datos{border-collapse:collapse;margin-bottom:14px;width:78%}
.cnm-datos .et{font-weight:bold;font-style:italic;white-space:nowrap;
  padding:5px 26px 5px 0;vertical-align:bottom}
.cnm-datos .li{border-bottom:1px solid #000;width:100%;font-style:italic;
  padding:5px 0 3px}
.cnm-mes{text-align:right;font-weight:bold;font-style:italic;margin-bottom:3px}

.cnm-tabla{width:100%;border-collapse:collapse;border:2px solid #000}
.cnm-tabla th,.cnm-tabla td{border:1px solid #000;padding:4px 5px;
  text-align:center;height:19px}
.cnm-tabla th{font-weight:bold;font-size:12px;
  /* La app pone los th en versalitas; la hoja del Conservatorio no. Sin esto
     salia "MATRICULA #" donde su papel dice "Matrícula #". */
  text-transform:none;letter-spacing:normal;color:#000}
.cnm-tabla .izq{text-align:left}
.cnm-tabla .w1{width:22px}
.cnm-tabla .w2{width:120px}
.cnm-tabla .w3{width:62px}
.cnm-tabla .dia{width:34px}
/* El feriado se ve en la cabecera: explica por que la columna va en blanco. */
.cnm-tabla .dia.fer{background:#e8e8e8}
.cnm-tabla .mat{font-style:italic;font-size:11.5px}
.cnm-tabla .num{font-size:11px}
.cnm-tabla .marca,.cnm-tabla .nota{font-weight:500}
/* La banda de nivel: fila dentro de la misma tabla, como en su hoja. */
.cnm-banda td{font-weight:bold;font-style:italic;background:#efefef}
.cnm-numeros th{font-weight:normal;font-size:11px}
.cnm-vacia td{height:19px}

.cnm-obs{margin-top:10px}
.obs-cab{display:flex;align-items:flex-end;gap:10px}
.obs-cab .li{flex:1 1 auto;border-bottom:1px solid #000;height:15px}
.cnm-obs > .li{display:block;border-bottom:1px solid #000;height:15px;margin-top:8px}
/* Las notas que se escriben solas -- pedido el 19 de sep: para que quien
   recibe el papel entienda R/F/L sin conocer el código, en letra que imita
   escritura a mano (Caveat), azul, con la fecha original resaltada.
   AJUSTADO el mismo día: flotaba encima de las rayas en vez de apoyarse en
   una -- ahora CADA nota ES una raya más (mismo borde, mismo alto que las
   de al lado), con el texto pegado abajo, como si de verdad se escribiera
   sobre el renglón de un cuaderno. */
.obs-auto{display:block;font-family:'Caveat',cursive;font-weight:600;font-size:16px;
  line-height:1;color:#1D4ED8;margin-top:8px;padding-bottom:2px;
  border-bottom:1px solid #000}
.obs-auto mark{background:#DCE9FF;color:#1D4ED8;padding:0 4px;border-radius:3px}
.cnm-firma{margin-top:46px;width:58%;margin-left:auto;text-align:center}
.cnm-firma .li{display:block;border-bottom:1px solid #000;height:1px;
  margin-bottom:5px}
.cnm-firma div{font-weight:bold;font-style:italic}

/* ---- Los dos programas ------------------------------------------------- */
.cnm-hoja.prog{padding:0.6in 0.9in;font-size:14px;line-height:1.9}
.cnm-logo-grande{display:block;width:200px;height:auto;margin:0 auto 34px}
.cnm-h1{font-size:22px;font-weight:bold;text-align:center;margin:0 0 26px}
.cnm-h2{font-size:19px;font-weight:bold;text-align:center;margin:34px 0 14px}
.cnm-h1.izq,.cnm-h2.izq{text-align:left}
.cnm-campos{margin:0}
.cnm-linea{margin:0 0 4px}
.cnm-fecha{margin-top:52px}
.cnm-rubrica{margin-top:64px;text-align:center;width:60%;margin-left:auto;
  margin-right:auto}
.cnm-raya{border-bottom:1px dashed #000;margin-bottom:4px}
/* El de los particulares: la foto del piano y sus seis objetivos. */
.cnm-piano{display:block;width:230px;height:auto;margin:0 0 22px}
.cnm-obj{margin:0 0 26px;padding-left:20px}
.cnm-obj li{margin-bottom:2px}
.cnm-nombre{font-weight:bold;font-size:16px;margin:26px 0 10px}

/* ---- EL CALENDARIO DEL CONSERVATORIO ------------------------------------
   Solo los días que hay clase: un mes completo son treinta casillas de las
   que le sirven ocho. Ver web/js/vistas/cnm.js. */
.cal-barra{display:flex;align-items:center;justify-content:center;gap:14px;
  margin:6px 0 14px}
.cal-barra b{min-width:150px;text-align:center}
.cal-dias{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:8px;margin-bottom:14px}
.cal-dia{display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:9px 4px 7px;border:1px solid var(--borde);border-radius:12px;
  background:var(--panel);cursor:pointer;font:inherit;color:inherit;
  transition:border-color .15s,background .15s}
.cal-dia:hover{border-color:var(--acento)}
.cal-dia.abierto{border-color:var(--acento);background:var(--suave)}
.cal-dia.hoy{box-shadow:inset 0 0 0 1px var(--acento)}
.cal-dia.fer{opacity:.62}
/* FERIADO NACIONAL (Mercedes, Navidad...) se distingue del de la propia
   institución (un receso, "no hay clase por X razón" marcado a mano): ese
   se queda apagado como ya estaba; el nacional lleva el borde y el número
   en rojo, a toda opacidad -- pedido el 9 de sep. El texto completo va en
   el title (tooltip al pasar el mouse), y en .cal-pie ya sale el motivo
   entero si cabe. */
.cal-dia.fer.nacional{opacity:1;border-color:var(--rojo)}
.cal-dia.fer.nacional .cal-num{color:var(--rojo)}
.cal-dia.fer.nacional .cal-pie{color:var(--rojo)}
.cal-sem{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tenue)}
.cal-num{font-size:21px;line-height:1.1}
.cal-pie{font-size:9.5px;color:var(--tenue);text-align:center;line-height:1.25}
.cal-dia.fer .cal-pie{color:var(--ambar)}

.cal-panel{border:1px solid var(--borde);border-radius:14px;padding:12px 13px;
  background:var(--panel);margin-bottom:12px}
.cal-panel-tit{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.cal-fer-et{font-size:10.5px;padding:2px 8px;border-radius:99px;
  background:var(--suave);color:var(--ambar)}
.cal-alumnos li{cursor:pointer}
/* LA MARCA DEL DIA.
   "marcar" no es un dato apagado, es lo que falta por hacer: iba gris sobre
   gris y el se lo dijo -- "casi no se ve". Lo ya marcado si va discreto: eso
   ya esta hecho y no pide nada. */
.cal-marca{font-size:10.5px;padding:3px 10px;border-radius:99px;
  background:var(--suave);white-space:nowrap;color:var(--tenue)}
.cal-marca.no{color:var(--acento);font-weight:600;background:transparent;
  border:1px solid var(--acento)}
.cal-alumnos li:hover .cal-marca.no{background:var(--acento);color:var(--fondo)}
.cal-ficha{margin-left:6px}

.eq-fondo{border-color:var(--acento)}
.es-lista li{align-items:center}
.es-prot{flex-shrink:0;font-size:10.5px;padding:2px 9px;border-radius:99px;
  background:var(--suave);color:var(--verde);white-space:nowrap}

/* ---- El clima, donde antes iba su nombre ------------------------------- */
.bienv-clima{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.cl-sep{color:var(--tenue)}
.cl-grados{font-size:26px;font-weight:600;letter-spacing:-.02em;
  color:var(--acento);line-height:1}
.cl-detalle{font-size:12.5px;color:var(--suave)}

/* ---- Asistencia del hogar ---------------------------------------------- */
.hg-gente li,.hg-lista li{align-items:center}
/* El oficio al lado del nombre: "Julia" sola no dice nada dentro de seis
   meses; "Julia -- empleada domestica" si. */
.hg-oficio{font-size:10.5px;padding:1px 8px;border-radius:99px;
  background:var(--suave);color:var(--acento);white-space:nowrap;
  font-weight:500;margin-left:4px}

/* ---- Patrimonio -------------------------------------------------------- */
.pat-lista li{align-items:center}
.pat-neto{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;
  line-height:1.15}
.pat-neto b{font-variant-numeric:tabular-nums}
.pat-neto i{font-style:normal;font-size:10.5px;color:var(--tenue)}
.pat-rango{font-size:19px;margin:2px 0 4px;letter-spacing:-.01em}

/* ---- Prestamos: el golpe del interes ----------------------------------- */
.pr-lista li{align-items:center}
.pr-falta{flex-shrink:0;font-size:10.5px;padding:2px 9px;border-radius:99px;
  border:1px solid var(--ambar);color:var(--ambar);white-space:nowrap}
/* La barra que parte la cuota en dos. Es LA imagen de esta pantalla: se ve de
   un golpe cuanto de lo que paga no baja nada. */
.pr-barra{display:flex;height:12px;border-radius:99px;overflow:hidden;
  background:var(--suave);margin:4px 0 8px}
.pr-barra i{display:block;height:100%}
.pr-int{background:var(--rojo)}
.pr-cap{background:var(--verde)}
.pr-leyenda{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:12px;
  color:var(--suave);margin-bottom:8px}
.pr-leyenda b{color:var(--texto)}
.pr-abonos li{align-items:center}
.pr-gana{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;
  line-height:1.15}
.pr-gana b{color:var(--verde);font-variant-numeric:tabular-nums}
.pr-gana i{font-style:normal;font-size:10.5px;color:var(--tenue)}

/* ---- Por cobrar: lo que esta en la calle ------------------------------- */
.pc-lista li{align-items:center}
.pc-monto{flex-shrink:0;font-variant-numeric:tabular-nums}
.pc-fila .pc-entro{flex-shrink:0;margin-left:8px}
/* Lo que pasa del mes se marca: no es lo mismo deber de hace tres dias que
   de hace tres meses, y a la vista hoy se veian igual. */
.pc-vieja .pc-monto{color:var(--ambar)}

/* ---- La vista diaria: la trinchera ------------------------------------- */
.dia-lista li{align-items:flex-start}
.dia-hora{flex-shrink:0;width:62px;font-size:11.5px;color:var(--tenue);
  font-variant-numeric:tabular-nums;padding-top:2px}
.dia-ico{flex-shrink:0;width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--suave);color:var(--acento);font-size:12px;line-height:1}
.dia-linea.es-clase .dia-ico{background:var(--acento);color:var(--fondo)}
.dia-pend{flex-shrink:0;font-size:10.5px;padding:2px 9px;border-radius:99px;
  border:1px solid var(--acento);color:var(--acento);white-space:nowrap}
.dia-monto{flex-shrink:0;font-variant-numeric:tabular-nums}
.dia-ruta{margin:8px 0 0;padding-left:20px}
.dia-ruta li{margin-bottom:5px;font-size:13px;line-height:1.35}
.dia-ruta li .nota{display:block;font-size:11.5px}

/* LA LÍNEA DE TIEMPO -- Fase 2. Un espinazo vertical que atraviesa el centro
   de cada ícono: no es adorno, es lo que convierte una lista en una línea de
   tiempo. El margen entre líneas (puesto en JS, según el hueco real de cada
   una) es lo que hace que un tramo cargado del día SE VEA apretado. */
.dia-lista{position:relative}
.dia-lista::before{content:"";position:absolute;left:74px;top:12px;bottom:12px;
  width:1px;background:var(--borde)}
.dia-lista .dia-ico{position:relative;z-index:1}

/* HUÉRFANO -- sin hora, en un día que ya tiene 2+ cosas puestas. Aviso
   suave (ámbar), nunca bloqueante: se puede guardar así igual. */
.dia-linea.es-huerfano{border-left:2px solid var(--ambar);padding-left:8px;margin-left:-10px}
.dia-huerfano-nota{color:var(--ambar)}
.dia-huerfano-nota .chip-libre{color:var(--ambar);text-decoration:underline;
  background:none;border:none;font-size:inherit;padding:0;cursor:pointer}

/* Los chips de "que es esto" dentro de un aviso: la respuesta es un toque. */
.av-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}

/* ---- El rider técnico: una fila por canal ------------------------------ */
.rider-canal{display:flex;gap:6px;align-items:center;padding:6px 0}
.rider-canal input,.rider-canal select{border:1px solid var(--borde);border-radius:8px;
  padding:6px 8px;font-size:13px;background:var(--panel);color:var(--texto)}
.rider-canal .rc-fuente{flex:1;min-width:0}
.rider-canal .rc-notas{flex:1;min-width:0}
.rider-canal .rc-tipo{flex-shrink:0}
.rider-canal .rc-quitar{flex-shrink:0;color:var(--tenue);background:none;border:none;
  font-size:16px;cursor:pointer;padding:2px 6px}
.av-chips .chip{font-size:10.5px;padding:2px 9px}
.av-lista li{align-items:flex-start}

/* ---- La bitacora: lo que ha pasado, por dia ---------------------------- */
.bit-dia{margin-bottom:12px}
.bit-fecha{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tenue);margin:0 0 4px 2px}
.bit-ico{flex-shrink:0;width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--suave);color:var(--acento);font-size:12px;line-height:1}
.bit-hora{flex-shrink:0;font-size:11px;color:var(--tenue);
  font-variant-numeric:tabular-nums}

/* ---- La casilla de examen ---------------------------------------------- */
.ex-lista li{cursor:pointer}
.ex-nums{display:flex;gap:12px;align-items:flex-end}
.ex-n{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.ex-n b{font-size:17px}
.ex-n i{font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tenue);font-style:normal}
.ex-n.final b{color:var(--acento)}
.ex-n.final.bajo b{color:var(--rojo)}
.ex-jurado{display:grid;gap:10px}
.ex-fila-completa{display:grid;gap:5px}
.ex-fila{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ex-fila span{font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex-fila input{width:72px;text-align:center;flex:none}
.ex-fila input:disabled{opacity:.45}
.ex-com-toggle{padding:4px 8px;font-size:13px;flex:none}
.ex-comentario{width:100%;font-size:12.5px;padding:6px 8px;resize:vertical}
.ex-resultado{margin-top:12px;padding:11px 13px;border-radius:13px;
  background:var(--suave)}
.ex-tot{display:flex;gap:20px}
.aviso-linea.suave{background:var(--suave);color:var(--texto)}

/* ---- EL MISMO PAPEL, CON SU LINEA GRAFICA -------------------------------
   Solo cambia COMO se ve: la estructura es la misma que la del Conservatorio
   -- mismas columnas, mismo orden, mismas bandas -- porque quien lo recibe
   busca la misma casilla en treinta hojas iguales. Aqui se refina la
   tipografia y el aire, y el logo oficial se queda donde estaba. */
.cnm-hoja.suyo{font-family:var(--da-cuerpo,'Jost',Helvetica,Arial,sans-serif);
  font-weight:300;color:#26332e;padding:0.6in 0.62in}
.cnm-hoja.suyo .cnm-top{gap:22px;align-items:flex-end;
  border-bottom:1px solid #d8b98a;padding-bottom:14px;margin-bottom:26px}
.cnm-hoja.suyo .cnm-logo{width:62px}
.cnm-hoja.suyo .cnm-tit{font-family:var(--da-display,'Italiana',Georgia,serif);
  font-size:27px;font-style:normal;font-weight:400;letter-spacing:.035em;
  border:0;padding:0;color:#1E3A32;line-height:1}

.cnm-hoja.suyo .cnm-datos{width:72%;margin-bottom:20px}
.cnm-hoja.suyo .cnm-datos .et{font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;font-style:normal;font-weight:400;color:#8C6A3A;
  padding:6px 22px 6px 0}
/* Bronce, el mismo de la raya de arriba y de la firma -- antes era un beige
   distinto y las dos rayas tan cerca (una debajo de la otra) se notaban
   como si fueran de dos papeles distintos. */
.cnm-hoja.suyo .cnm-datos .li{border-bottom:1px solid #d8b98a;font-style:normal;
  font-size:13px;color:#26332e}
.cnm-hoja.suyo .cnm-mes{font-style:normal;font-weight:400;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:#8C6A3A;margin-bottom:7px}

/* La tabla: lineas finas en vez del marco negro, y la cabecera separada por
   una raya verde en vez de por un borde en cada casilla.
   "Las rayas no se entienden": la fila se leia, pero la COLUMNA no -- sin
   ninguna raya vertical, un P o un A quedaba flotando y había que contar
   casillas para saber de qué día era. Se le agregó una raya fina entre cada
   día (y antes de "Nota", que es la que cierra la fila) -- discreta, del
   mismo tono que ya usaba el resto del papel, no una cuadrícula pesada. */
.cnm-hoja.suyo .cnm-tabla{border:0;border-top:1.5px solid #1E3A32;
  border-bottom:1.5px solid #1E3A32}
.cnm-hoja.suyo .cnm-tabla th,
.cnm-hoja.suyo .cnm-tabla td{border:0;border-bottom:1px solid #ddd6c2;
  padding:6px 5px;height:22px}
.cnm-hoja.suyo .cnm-tabla th{font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:400;color:#8C6A3A}
.cnm-hoja.suyo .cnm-tabla .dia,
.cnm-hoja.suyo .cnm-tabla .w3{border-left:1px solid #e3ded2}
.cnm-hoja.suyo .cnm-numeros th{font-size:10px;letter-spacing:.06em;
  text-transform:none;color:#6b6559;padding-top:0}
.cnm-hoja.suyo .cnm-tabla .mat{font-style:normal;font-size:9.5px;
  letter-spacing:.07em;color:#6b6559}
.cnm-hoja.suyo .cnm-tabla .num{color:#a8a294;font-size:10px}
.cnm-hoja.suyo .cnm-tabla .marca{color:#1E3A32;font-weight:600}
.cnm-hoja.suyo .cnm-tabla .nota{font-weight:600;color:#1E3A32;font-size:14px}
/* La banda de nivel: un lavado de verde apenas perceptible, además de la
   raya de bronce que ya tenía -- así el grupo se distingue de un vistazo,
   sin que la fila pese más que las de datos. */
.cnm-hoja.suyo .cnm-banda td{background:rgba(30,58,50,.035);color:#1E3A32;
  font-style:normal;font-weight:400;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;border-bottom:0;border-top:1px solid #d8b98a;
  padding-top:15px;padding-bottom:3px}
/* La primera banda va pegada a la cabecera: ahi la raya sobra. */
.cnm-hoja.suyo .cnm-numeros + .cnm-banda td{border-top:0;padding-top:11px}
.cnm-hoja.suyo .cnm-tabla .dia.fer{background:#faf6ee;color:#8C6A3A}
/* Las filas en blanco son sitio para escribir a mano, no datos que faltan
   -- se quedan más tenues que las de arriba para que no parezcan casillas
   rotas. */
.cnm-hoja.suyo .cnm-vacia td{border-bottom-color:#ece8de}

.cnm-hoja.suyo .cnm-obs{margin-top:16px;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:#8C6A3A}
.cnm-hoja.suyo .cnm-obs .li{border-bottom:1px solid #d8b98a}
/* "Aprovecha el espacio que deja el último alumno": antes eran 3 filas
   vacías en la tabla (que no dejaban nada legible) más una sola rayita de
   observaciones -- ahora la tabla no deja NINGUNA fila de sobra y ESE
   espacio se lo lleva Observaciones entera: la palabra sigue con su
   primer renglón al lado, como antes, y abajo tres renglones más de
   verdad para escribir -- cuatro en total. */
.cnm-hoja.suyo .cnm-obs.amplia{display:block;margin-top:18px}
.cnm-hoja.suyo .cnm-obs.amplia .obs-cab{display:flex;align-items:flex-end;gap:10px}
.cnm-hoja.suyo .cnm-obs.amplia .obs-cab .li{flex:1 1 auto}
.cnm-hoja.suyo .cnm-obs.amplia > .li{display:block;height:22px;
  border-bottom:1px solid #d8b98a;margin-top:6px}
.cnm-hoja.suyo .cnm-obs.amplia > .obs-auto{min-height:22px;border-bottom-color:#d8b98a;
  margin-top:6px;font-size:15px;letter-spacing:normal;text-transform:none}
/* La firma: para lo suyo no hace falta la raya en blanco para firmar --
   siempre es él. Se imprime el nombre directo, como en el pie del programa.
   width:100% y margin-left:0 -- SIN esto hereda el 58%+margin-left:auto de
   la firma "a la derecha" del papel calcado del CNM, y el texto quedaba
   centrado dentro de esa caja angosta y corrida, no en la hoja completa. */
.cnm-hoja.suyo .cnm-firma{width:100%;margin-left:0;margin-top:40px;
  padding-top:10px;border-top:.5px solid #d8b98a;text-align:center}
.cnm-hoja.suyo .cnm-firma .li{display:none}
.cnm-hoja.suyo .cnm-firma div{font-style:normal;font-weight:600;font-size:11px;
  letter-spacing:.06em;text-transform:none;color:#1E3A32}

/* ---- EL MISMO PAPEL, PARA UNA ESCUELA QUE NO ES NI EL CNM NI SU MARCA --
   Misma estructura de siempre (columnas, orden, bandas) -- lo que cambia es
   el color. Ni el marrón calcado del Conservatorio ni el verde/bronce que
   es SU sello personal: un grafito propio, para que cualquier escuela lo
   sienta neutral y no prestado. Arial/Helvetica en vez de Jost/Italiana,
   por la misma razón -- esa tipografía ya es su firma. */
.cnm-hoja.neutro{font-family:Arial,Helvetica,sans-serif;color:#293136;
  padding:0.6in 0.62in}
.cnm-hoja.neutro .cnm-top{gap:20px;align-items:flex-end;
  border-bottom:1px solid #C7CDD3;padding-bottom:14px;margin-bottom:26px}
.cnm-hoja.neutro .cnm-logo{width:56px}
.cnm-hoja.neutro .cnm-tit{font-size:16px;font-style:normal;font-weight:700;
  border:0;padding:0;color:#293136;line-height:1.3}

.cnm-hoja.neutro .cnm-datos{width:72%;margin-bottom:20px}
.cnm-hoja.neutro .cnm-datos .et{font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;font-style:normal;font-weight:700;color:#5C6773;
  padding:6px 22px 6px 0}
.cnm-hoja.neutro .cnm-datos .li{border-bottom:1px solid #C7CDD3;
  font-style:normal;font-size:13px;color:#293136}
.cnm-hoja.neutro .cnm-mes{font-style:normal;font-weight:700;font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:#5C6773;margin-bottom:7px}

.cnm-hoja.neutro .cnm-tabla{border:0;border-top:1.5px solid #293136;
  border-bottom:1.5px solid #293136}
.cnm-hoja.neutro .cnm-tabla th,
.cnm-hoja.neutro .cnm-tabla td{border:0;border-bottom:1px solid #DEE2E6;
  padding:6px 5px;height:22px}
.cnm-hoja.neutro .cnm-tabla th{font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:#5C6773}
.cnm-hoja.neutro .cnm-tabla .dia,
.cnm-hoja.neutro .cnm-tabla .w3{border-left:1px solid #E7EAED}
.cnm-hoja.neutro .cnm-numeros th{font-size:10px;letter-spacing:.04em;
  text-transform:none;color:#7C8791;padding-top:0}
.cnm-hoja.neutro .cnm-tabla .mat{font-style:normal;font-size:9.5px;
  letter-spacing:.04em;color:#7C8791}
.cnm-hoja.neutro .cnm-tabla .num{color:#ADB4BA;font-size:10px}
.cnm-hoja.neutro .cnm-tabla .marca{color:#293136;font-weight:600}
.cnm-hoja.neutro .cnm-tabla .nota{font-weight:700;color:#293136;font-size:14px}
.cnm-hoja.neutro .cnm-banda td{background:rgba(41,49,54,.04);color:#293136;
  font-style:normal;font-weight:700;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;border-bottom:0;border-top:1px solid #C7CDD3;
  padding-top:15px;padding-bottom:3px}
.cnm-hoja.neutro .cnm-numeros + .cnm-banda td{border-top:0;padding-top:11px}
.cnm-hoja.neutro .cnm-tabla .dia.fer{background:#F4F5F6;color:#7C8791}
.cnm-hoja.neutro .cnm-vacia td{border-bottom-color:#EDEFF1}

.cnm-hoja.neutro .cnm-obs{margin-top:16px;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:#5C6773}
.cnm-hoja.neutro .cnm-obs .li{border-bottom:1px solid #C7CDD3}
.cnm-hoja.neutro .cnm-obs .obs-auto{border-bottom-color:#C7CDD3;
  letter-spacing:normal;text-transform:none;font-size:15px}
.cnm-hoja.neutro .cnm-firma{width:58%;margin-left:auto;text-align:center}
.cnm-hoja.neutro .cnm-firma .li{display:block;border-bottom:1px solid #293136;
  height:1px;margin-bottom:5px}
.cnm-hoja.neutro .cnm-firma div{font-style:normal;font-weight:700;font-size:11px;
  color:#293136}

/* ---- Académica: otra tabla institucional, azul marino y crema, pedida el
   18 de sep para sumar variedad sin salir del formato de siempre. ------- */
.cnm-hoja.academica{border-top:6px solid #1e3a8a}
.cnm-hoja.academica .cnm-top{align-items:flex-end;border-bottom:2px solid #1e3a8a;
  padding-bottom:12px;margin-bottom:16px}
.cnm-hoja.academica .cnm-tit{font-style:normal;font-weight:700;color:#1e3a8a;
  text-transform:uppercase;letter-spacing:.5px;border-bottom:none;padding-bottom:0}
.cnm-hoja.academica .cnm-datos .et{font-style:normal;font-weight:700;color:#6b7280;
  font-size:11px}
.cnm-hoja.academica .cnm-datos .li{font-style:normal;border-bottom:1px solid #d1d5db}
.cnm-hoja.academica .cnm-mes{font-style:normal;font-weight:700;color:#1e3a8a}
.cnm-hoja.academica .cnm-tabla{border:1px solid #d1d5db}
.cnm-hoja.academica .cnm-tabla th,
.cnm-hoja.academica .cnm-tabla td{border:1px solid #d1d5db}
.cnm-hoja.academica .cnm-tabla th{background:#f3f4f6;color:#1e3a8a;font-style:normal}
.cnm-hoja.academica .cnm-tabla .marca{color:#059669;font-weight:700}
.cnm-hoja.academica .cnm-banda td{background:#e0e7ff;color:#1e3a8a;font-style:normal;
  font-weight:700;font-size:11px;letter-spacing:.3px;text-transform:uppercase}
.cnm-hoja.academica .cnm-obs{border:1px solid #d1d5db;border-radius:4px;padding:10px;
  min-height:60px;align-items:flex-start}
.cnm-hoja.academica .cnm-firma div{font-style:normal}

/* Las 5 letras, el mismo color en las 4 tablas -- pedido el 19 de sep.
   Van después de los 4 estilos de arriba a propósito, para ganarles el
   color fijo que cada uno le pone a .marca sin distinguir la letra. */
/* .cnm-hoja calificado a propósito -- .suyo/.neutro/.academica pintan
   .marca con 4 clases de especificidad (.cnm-hoja.X .cnm-tabla .marca);
   con solo 3 (.cnm-tabla .marca.m-e) esta regla perdía siempre, sin
   importar el orden en el archivo. */
.cnm-hoja .cnm-tabla .marca.m-e{color:#9A6B22}
.cnm-hoja .cnm-tabla .marca.m-a{color:#A63D2F}
.cnm-hoja .cnm-tabla .marca.m-r{color:#1D4ED8}
.cnm-hoja .cnm-tabla .marca.m-f,.cnm-hoja .cnm-tabla .marca.m-l{color:#8A8F98}
/* Académica ya es azul marino de marca -- pedido el 19 de sep: la R y la
   nota de Observaciones en el mismo azul se perdían contra su propio
   color. Terracota en vez de azul, para que SÍ se distinga. */
.cnm-hoja.academica .cnm-tabla .marca.m-r{color:#9A3412}
.cnm-hoja.academica .obs-auto{color:#9A3412}
.cnm-hoja.academica .obs-auto mark{background:#FBE4D5;color:#9A3412}

/* -----------------------------------------------------------------------
   DASHBOARD -- oscuro, en tarjetas. Mismos datos que las tablas de arriba,
   pero cada alumno es un renglón de verdad, no una fila apretada en una
   celda. El ancho de cada columna de día es elástico (flex), no fijo --
   funciona igual con 4 días de clase que con 10.
   ----------------------------------------------------------------------- */
.rd-hoja{width:var(--da-w);min-height:11in;padding:.5in .55in;margin:0 auto;
  box-sizing:border-box;background:#111827;color:#f3f4f6;
  font-family:'Segoe UI',Roboto,Arial,sans-serif;font-size:12.5px;line-height:1.45;
  position:relative;overflow:hidden}
.rd-panel{position:absolute;right:-1in;top:.6in;width:4in;height:1.6in;
  background:linear-gradient(145deg,transparent,#3b82f633);transform:skewY(-16deg);
  pointer-events:none}
.rd-cab{position:relative;z-index:1;background:#1f2937;border:1px solid #374151;
  border-radius:12px;padding:16px 20px;margin-bottom:16px;display:flex;
  justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.rd-marca{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600}
.rd-marca img{height:22px;border-radius:3px}
.rd-cab p{margin:5px 0 0;color:#9ca3af;font-size:12px}
.rd-badges{display:flex;gap:8px;flex-wrap:wrap}
.rd-badge{background:rgba(59,130,246,.12);color:#3b82f6;padding:5px 11px;
  border-radius:20px;font-size:11px;font-weight:600;border:1px solid rgba(59,130,246,.25)}
.rd-tarjeta{position:relative;z-index:1;background:#1f2937;border:1px solid #374151;
  border-radius:12px;overflow:hidden}
.rd-fila{display:flex;align-items:center;gap:10px;padding:11px 16px;
  border-bottom:1px solid #374151}
.rd-fila:last-child{border-bottom:none}
.rd-fila-cab{background:rgba(0,0,0,.18);padding:9px 16px}
.rd-etq{flex:2;font-size:10px;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em}
.rd-nivel{background:#273346;padding:8px 16px;font-size:11px;font-weight:700;
  color:#3b82f6;text-transform:uppercase;letter-spacing:.06em;
  border-top:1px solid #374151;border-bottom:1px solid #374151}
.rd-quien{flex:2;min-width:0;display:flex;flex-direction:column;gap:2px}
.rd-nombre{font-weight:600;font-size:12.5px}
.rd-mat{font-size:10.5px;color:#9ca3af;font-family:monospace}
.rd-dia{flex:1;text-align:center;min-width:0}
.rd-diaetq{font-size:9.5px;color:#9ca3af}
.rd-chip{display:inline-flex;justify-content:center;align-items:center;width:24px;
  height:24px;border-radius:6px;font-size:11px;font-weight:700}
.rd-chip.p{background:rgba(16,185,129,.15);color:#10b981}
.rd-chip.a{background:rgba(239,68,68,.15);color:#ef4444}
.rd-chip.e{background:rgba(245,158,11,.15);color:#f59e0b}
/* Violeta, no azul -- pedido el 19 de sep: el acento de Dashboard YA es
   azul (badges, círculo de nota), y la R se perdía contra su propio color. */
.rd-chip.r{background:rgba(192,132,252,.15);color:#c084fc}
.rd-chip.f{background:rgba(148,163,184,.15);color:#94a3b8}
.rd-chip.vacio{background:rgba(255,255,255,.05);color:transparent}
.rd-nota{flex:0 0 auto;width:44px;text-align:right}
.rd-circ{display:inline-flex;justify-content:center;align-items:center;width:32px;
  height:32px;border-radius:50%;border:2px solid #3b82f6;font-weight:700;
  color:#3b82f6;font-size:12px}
.rd-pie{position:relative;z-index:1;margin-top:14px;display:flex;gap:20px;align-items:flex-end}
.rd-obs{flex:1;min-width:0}
.rd-obs-tit{display:block;font-size:9px;color:#9ca3af;text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:4px}
.rd-obs .obs-auto{color:#c084fc;font-size:14px}
.rd-obs .obs-auto mark{background:rgba(192,132,252,.18);color:#c084fc}
.rd-obs-linea{border-bottom:1px solid #374151;height:14px;margin-top:6px}

/* -----------------------------------------------------------------------
   MINIMALISTA -- blanco, sin bordes gruesos, mucho aire. Igual que
   Dashboard, columnas de día elásticas -- no una tabla de ancho fijo.
   ----------------------------------------------------------------------- */
.rm-hoja{width:var(--da-w);min-height:11in;padding:.6in .7in;margin:0 auto;
  box-sizing:border-box;background:#fff;color:#111;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:12.5px;line-height:1.5}
.rm-cab{display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:34px;gap:20px}
.rm-izq h1{font-size:17px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;
  margin:0 0 8px;display:flex;align-items:center;gap:9px}
.rm-logo{height:20px}
.rm-izq p{margin:0;color:#555;font-size:12px}
.rm-der{text-align:right;font-size:11px;color:#555}
.rm-der div{margin-bottom:3px}
.rm-val{color:#111;font-weight:500;margin-left:6px}
.rm-grupo{margin-bottom:26px}
.rm-tit{font-size:10px;font-weight:600;letter-spacing:.08em;color:#999;
  text-transform:uppercase;border-bottom:1px solid #111;padding-bottom:6px;margin-bottom:8px}
.rm-fila{display:flex;align-items:center;gap:16px;padding:9px 0;
  border-bottom:1px solid #e5e5e5}
.rm-quien{flex:1;min-width:0}
.rm-nombre{font-size:12.5px;font-weight:500}
.rm-mat{font-size:10.5px;color:#999;margin-top:1px}
.rm-dias{display:flex;gap:10px}
.rm-bloque{text-align:center;width:28px}
.rm-fecha{font-size:8.5px;color:#999;margin-bottom:3px}
.rm-marca{font-size:11px;font-weight:600}
.rm-marca.vacio{color:#ccc}
.rm-marca.m-e{color:#9A6B22}
.rm-marca.m-a{color:#A63D2F}
.rm-marca.m-r{color:#1D4ED8}
.rm-marca.m-f,.rm-marca.m-l{color:#8A8F98}
.rm-nota{width:42px;text-align:right}
.rm-etq{font-size:8.5px;color:#999;margin-bottom:2px}
.rm-val2{font-size:13px;font-weight:700}
.rm-pie{margin-top:30px;display:flex;gap:24px;align-items:flex-end;
  border-top:1px solid #e5e5e5;padding-top:16px}
.rm-obs{flex:1;min-width:0}
.rm-obs-tit{display:block;font-size:9px;color:#999;text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:5px}
.rm-obs-linea{border-bottom:1px solid #e5e5e5;height:14px;margin-top:6px}

/* ---- Los programas, en su estilo -------------------------------------- */
.cnm-hoja.prog.suyo{padding:0.75in 0.95in;line-height:2}
.cnm-hoja.prog.suyo .cnm-logo-grande{width:132px;margin-bottom:26px}
.cnm-hoja.prog.suyo .cnm-h1{font-family:var(--da-display,'Italiana',Georgia,serif);
  font-weight:400;font-size:33px;letter-spacing:.03em;color:#1E3A32;
  margin:0 0 6px}
/* Un filete fino bajo el titulo: es lo que hace que se vea suyo y no
   generico, sin tocar nada de lo que dice el papel. */
.cnm-hoja.prog.suyo .cnm-h1::after{content:'';display:block;width:54px;
  height:1px;background:#8C6A3A;margin:14px auto 0}
.cnm-hoja.prog.suyo .cnm-h1.izq::after{margin-left:0}
.cnm-hoja.prog.suyo .cnm-h2{font-family:var(--da-display,'Italiana',Georgia,serif);
  font-weight:400;font-size:24px;letter-spacing:.05em;color:#1E3A32;
  margin:40px 0 16px}
.cnm-hoja.prog.suyo .cnm-linea{font-size:13.5px;line-height:2.1;
  display:flex;gap:10px}
.cnm-hoja.prog.suyo .cnm-linea b{font-weight:400;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:#8C6A3A;
  min-width:92px;flex:0 0 92px;padding-top:5px}
.cnm-hoja.prog.suyo .cnm-fecha{margin-top:58px;font-size:13.5px;
  display:flex;gap:10px}
.cnm-hoja.prog.suyo .cnm-fecha b{font-weight:400;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:#8C6A3A;padding-top:4px}
.cnm-hoja.prog.suyo .cnm-raya{border-bottom:1px solid #1E3A32}
.cnm-hoja.prog.suyo .cnm-rubrica div{font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:#8C6A3A;margin-top:6px}
/* El de los particulares cambia la foto del piano por un filete: la foto se
   ve bien en pantalla y barata impresa. */
.cnm-filete{height:2px;width:64px;background:#8C6A3A;margin-bottom:30px}
.cnm-hoja.prog.suyo .cnm-obj{padding-left:0;list-style:none;counter-reset:o}
.cnm-hoja.prog.suyo .cnm-obj li{counter-increment:o;position:relative;
  padding-left:30px;font-size:13px;line-height:1.85;margin-bottom:7px}
.cnm-hoja.prog.suyo .cnm-obj li::before{content:counter(o,decimal-leading-zero);
  position:absolute;left:0;top:1px;font-size:9.5px;letter-spacing:.1em;
  color:#8C6A3A}
.cnm-hoja.prog.suyo .cnm-nombre{font-family:var(--da-display,'Italiana',Georgia,serif);
  font-weight:400;font-size:25px;color:#1E3A32;margin:34px 0 14px}

.cal-estilo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:14px}
.cal-estilo > span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tenue)}

/* ---- Dónde está la plata ----------------------------------------------- */
.cta-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;margin:12px 0}
.cta{border:1px solid var(--borde);border-radius:14px;padding:13px 14px;
  background:var(--panel);cursor:pointer;transition:border-color .15s}
.cta:hover{border-color:var(--acento)}
.cta.efe{border-color:var(--acento)}
.cta-nom{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tenue)}
.cta-saldo{font-size:21px;margin:4px 0 1px}
.cta-pie{font-size:10px;color:var(--tenue)}
.eq-lista li{cursor:pointer}
.eq-venta{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.eq-venta i{font-style:normal;font-size:10.5px}
.eq-venta i.baja{color:var(--rojo)}
.eq-venta i.sube{color:var(--verde)}

/* ==========================================================================
   EL ARMAZÓN: barra lateral en pantalla ancha, barra inferior en el teléfono.
   Las mismas seis puertas en dos formas. NO es un menú hamburguesa: esconder
   la navegación en el móvil -- que es donde él trabaja -- sería peor que la
   barra que ya tenía.
   ========================================================================== */
.lateral{display:none}
.pestanas-ocultas{display:none}

/* La pantalla de la clave: su verde y su logo, quieto.
   El video se mudo de aqui al Inicio -- ver .intro. */
.candado{overflow:hidden;background:var(--da-verde,#1E3A32)}
/* Un velo por encima del video: sin esto el título blanco cae sobre el humo
   dorado y no se lee. El video se ve, pero manda el formulario. */
.candado::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(30,58,50,.55),rgba(15,30,26,.82));
  pointer-events:none}
.candado .candado-caja{position:relative;z-index:2}
.candado .candado-caja h1{color:#F2F1EC;font-family:var(--da-display,inherit);
  font-weight:400;letter-spacing:.02em}
.candado .candado-caja .sub{color:#D6C29A}
.candado .candado-caja input[type=password]{background:rgba(255,255,255,.94);
  color:#26332e;border-color:transparent}
.candado .candado-caja .recordar{color:#D6C29A}
/* LA ENTRADA CON LA IMAGEN DE NACORDE -- 30 de sep. La imagen es vertical
   (1536x2752, la misma proporción que la de Nexus) con el logo al centro: en
   el teléfono la llena entera; en una pantalla ancha queda al centro, a toda
   la altura, y los lados son un degradado del mismo verde noche de sus
   bordes (medido: #1A2526 al centro de los lados, #101A1C en el borde). El formulario va
   abajo, debajo del logo. Solo la pantalla de la clave: "Sin conexión" sigue
   con su verde. */
#candado{align-items:end;padding-bottom:max(28px,7vh);
  background:radial-gradient(ellipse 60% 90% at 50% 45%,#1c2728 0%,#141e20 55%,#0d1415 100%)}
/* La imagen nunca baja del 67 % de su alto ("NACORDE" termina al 66,2 %,
   medido; Nexus terminaba al 63): se
   achica en pantallas bajas para que el formulario (unos 240 px) quepa debajo
   sin taparla. */
#candado::after{--alto-img:min(100vh, calc((100vh - 240px) / .67));
  inset:0 auto auto 50%;height:var(--alto-img);width:min(100%, calc(var(--alto-img) * .558));
  transform:translateX(-50%);
  /* 70 % y no center: el logo NO está centrado en la imagen (va del 17,4 %
     al 90 % del ancho, medido). En un teléfono angosto el recorte se come los
     lados y con center la E de NACORDE quedaba pegada al borde derecho. */
  background:url(../img/entrada-nacorde.jpg) 70% center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
@media (max-aspect-ratio: 558/1000){
  #candado::after{left:0;width:100%;height:100%;transform:none;-webkit-mask-image:none;mask-image:none}
}
#candado .candado-caja .recordar{color:#E8DDC4}
#candado .candado-caja input[type=password]{background:#fff}
.solo-lector{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* LA INTRO DEL INICIO.
   Va sobre el DASHBOARD, no sobre la pantalla entera: el lateral, la cabecera
   y la barra siguen a la vista. A pantalla completa se sentia como si la app
   se hubiera ido. El sitio exacto lo pone el JS, que mide el hueco del
   contenido -- aqui solo va lo que no depende del tamaño. */
.intro{position:fixed;z-index:60;background:#1E3A32;overflow:hidden;
  display:grid;place-items:center;cursor:pointer;
  transition:opacity .5s ease}
.intro.oculto{display:none}
.intro.saliendo{opacity:0;pointer-events:none}
/* LLENA EL HUECO, SIN FRANJAS.
   Antes iba entera con un desenfoque detras rellenando lo que sobraba, y eso
   la hacia parecer un reproductor de video incrustado -- en tema claro, con
   el marco verde sobre la crema, cantaba todavia mas. Ahora recorta y llena:
   el logo va centrado en el cuadro, asi que sobrevive al recorte, y lo que se
   pierde son los remolinos del borde. El video que se elige es el que menos
   haya que recortar, y eso lo decide el JS por la forma del hueco. */
.intro-video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;display:none}
.intro-video.puesto{display:block}
.intro-saltar{position:absolute;bottom:18px;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(242,241,236,.5)}
/* Cual de los dos se usa NO lo decide el CSS: lo decide el JS mirando la
   forma del hueco, que no es la de la ventana. Con el lateral puesto, una
   pantalla ancha deja un hueco casi cuadrado. */
@media (prefers-reduced-motion:reduce){ .intro{display:none !important} }

/* Seis casillas caben, pero justas: la letra baja y el icono manda. */
.pestanas.seis button{font-size:9.5px;letter-spacing:0;padding:6px 2px}
.pestanas.seis button span{font-size:17px}

/* ---- La página de una sección ------------------------------------------ */
/* Con font-display:swap, Italiana entraba DESPUÉS del primer pintado -- se
 * veía la del sistema un instante y luego cambiaba. Confirmado el 15 de
 * sep: prefiere quedarse con la del sistema (la que ya se ve primero), así
 * que aquí se deja "inherit" a secas -- Italiana sigue en los documentos
 * de verdad (recibos, cotizaciones, registros), donde sí es la marca. */
.sec-grupo{margin-bottom:22px}

/* La casilla que todavía no tiene nada detrás LO DICE. Una puerta marcada es
   un plan; una que abre a una pantalla vacía es un fallo. */
.ficha.por-construir{opacity:.5;position:relative}
.ficha.por-construir .icono-marco{filter:grayscale(1)}
.et-construir{position:absolute;top:8px;right:8px;font-size:8.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tenue);
  border:1px solid var(--borde);border-radius:99px;padding:1px 6px}

/* LA PALETA DE LA CASA, con lo que hizo falta añadirle.
   Sus cinco colores son verde, bronce, arena, salvia y crema. Sobre el verde
   oscuro del lateral solo TRES tienen contraste suficiente -- el bronce se
   apaga contra el fondo -- y hacían falta seis. Los tres que faltaban salen
   de los suyos: el oro es SU BRONCE levantado hasta que se lee sobre el verde
   -- mismo tono, más luz --; el humo y la terracota son los dos únicos
   ajenos, elegidos para armonizar con el verde sin pelearse con el dorado.

   El oro empezó en #E6C176 y se corrió a #E0A961: al lado de la arena los dos
   se veían el mismo dorado, y dos casillas del mismo color no distinguen
   nada. Ahora el dinero tira a ámbar y el arte se queda en arena. */
:root{
  --pm-verde:#1E3A32; --pm-bronce:#8C6A3A;
  --pm-arena:#D6C29A; --pm-salvia:#A9C2AE; --pm-crema:#F2F1EC;
  --pm-oro:#E0A961; --pm-humo:#B7ADC9; --pm-terracota:#CE9A86;
}

/* ---------------------------------------------------------------------------
 * LA BARRA DE EL ARTISTA -- migas + chips (subnav-artista.js).
 *
 * Pedido el 8 de sep: entrar a Alumnos o a Perfil de Artista no dejaba
 * ningún rastro de que se seguía dentro de El Artista -- solo la flecha de
 * "atrás", que dice cómo volver un paso, no dónde estás parado. Esta barra
 * va pegada arriba de cada una de las seis puertas: la miga dice dónde
 * estás EN PALABRAS, los chips dejan saltar a cualquier hermana sin volver
 * primero al menú.
 *
 * Colores del tema (--acento/--verde), no los fijos --pm-* del lateral: esta
 * barra vive en el panel principal, que sí se da la vuelta con el tema.
 * ------------------------------------------------------------------------- */
.art-migas{display:inline-flex;align-items:center;gap:8px;background:var(--panel);
  border:1px solid var(--borde);border-radius:999px;padding:7px 14px 7px 7px;
  width:fit-content;margin-bottom:16px;box-shadow:var(--sombra)}
.art-migas-paso1{color:var(--suave);font-size:12.5px;padding:4px 10px;border-radius:999px}
.art-migas-sep{color:var(--tenue);font-size:12px}
.art-migas-paso2{display:flex;align-items:center;gap:6px;color:#fff;background:var(--acento-solido);
  font-size:12.5px;font-weight:500;padding:5px 13px;border-radius:999px}
.art-migas-paso2 svg{width:14px;height:14px}

.art-chips{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.art-chip{all:unset;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--suave);
  border:1px solid var(--borde);padding:8px 14px;border-radius:999px;cursor:pointer;
  background:var(--panel);transition:background .2s ease,color .2s ease,border-color .2s ease,
  box-shadow .2s ease}
.art-chip svg{width:15px;height:15px;transition:transform .2s ease}
.art-chip:not(.activo):hover{border-color:var(--acento);color:var(--texto)}
.art-chip:not(.activo):hover svg{transform:scale(1.08)}
.art-chip.activo{background:var(--acento-solido);border-color:var(--acento-solido);color:#fff;
  font-weight:500;box-shadow:0 4px 12px rgba(140,106,58,.28);cursor:default}

@media (prefers-reduced-motion:reduce){
  .art-chip, .art-chip svg{transition:none}
}

@media (min-width:720px){
  .art-migas{padding:8px 16px 8px 8px}
  .art-migas-paso1, .art-migas-paso2{font-size:13px}
}

@media (min-width:1100px){
  body{padding-left:264px;padding-bottom:0}

  /* Todo el lateral en SU verde, y el logo a todo lo ancho sin márgenes: la
     imagen ya trae ese mismo verde de fondo, así que se funde con el panel
     en vez de verse como una estampa pegada encima. */
  /* EL LATERAL VA SIEMPRE AL REVES DEL CONTENIDO.
     En claro es verde contra crema; en oscuro es crema contra verde casi
     negro. Antes se quedaba verde en los dos temas y en oscuro las dos zonas
     se confundian -- que es lo que el noto. Las variables --lat-* se dan la
     vuelta mas abajo, en el bloque del tema oscuro. */
  .lateral{display:flex;flex-direction:column;position:fixed;left:0;top:0;
    bottom:0;width:264px;background:var(--lat-fondo,var(--pm-verde));
    border-right:0;padding:0;z-index:40;overflow-y:auto}
  .lateral-marca{padding:0;margin-bottom:26px}
  .lateral-marca img{width:100%;height:auto;display:block}
  .lateral-marca .marca-clara{display:none}
  /* El que no sube su propio logo se queda con su nombre en texto -- nunca
     con el logo de otra persona puesto por error. Grande y en dos líneas
     (nombre / lo demás) para pesar en el panel como el logo que reemplaza,
     no como una nota al pie -- eso pasaba antes, a una sola línea y 22px.
     Cada línea se trunca con "..." antes de partirse o desbordar: un
     nombre largo no puede romper el panel. */
  .lateral-marca-texto{padding:34px 18px;text-align:center;
    font-family:'Italiana',serif;color:var(--lat-texto,var(--pm-crema))}
  /* EL TAMAÑO LO PONE EL NOMBRE, NO EL CSS.
     Antes cada linea tenia un tamaño fijo y el que no cabia se cortaba con
     "...". Eso castiga justo a quien mas lo necesita: "Mateo" sobraba de
     espacio a 22px mientras un apellido largo se quedaba a medias.
     Ahora el maximo y el minimo viven aqui y ajustarMarca() en main.js
     elige, entre esos dos, el tamaño mas grande que quepa entero. El
     apellido arranca en 29 -- antes 22, que al lado del nombre se leia como
     una nota al pie.
     El "..." se queda como ultima red: si ni al minimo cabe (un apellido
     absurdo), se corta en vez de desbordar el panel. */
  .lm-nombre{--lm-max:44px;--lm-min:24px;
    font-size:var(--lm-max);line-height:1.1;letter-spacing:.01em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lm-apellido{--lm-max:29px;--lm-min:14px;
    font-size:var(--lm-max);line-height:1.25;margin-top:4px;opacity:.78;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Grande y con aire. Antes ocupaban menos de media pantalla y se leían
     como una lista de ajustes, no como el menú principal de la app. */
  .lateral-menu{display:flex;flex-direction:column;gap:6px;padding:0 14px 26px}
  .lateral-menu button{display:flex;align-items:center;gap:16px;
    background:none;border:0;color:var(--lat-texto,var(--pm-crema));
    font:inherit;font-size:16.5px;
    text-align:left;padding:17px 16px;border-radius:13px;cursor:pointer;
    position:relative;transition:background .16s,color .16s}
  /* Un poco mas grandes: en la Mac se veian pequeños al lado de la letra. */
  .lateral-menu button svg{width:31px;height:31px;flex:0 0 auto;
    color:var(--cl,var(--c,var(--pm-arena)));transition:transform .16s}
  .lateral-menu button:hover{background:var(--lat-hover,rgba(255,255,255,.07))}
  .lateral-menu button:hover svg{transform:scale(1.08)}

  /* La casilla encendida se pinta con SU color, no con uno de sistema: así
     el menú se lee de un vistazo aunque no se mire la letra. */
  .lateral-menu button.activa{background:var(--lat-activa,rgba(255,255,255,.10));
    color:var(--cl,var(--c,var(--pm-arena)));font-weight:500}
  .lateral-menu button.activa::before{content:'';position:absolute;left:0;
    top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;
    background:var(--cl,var(--c,var(--pm-arena)))}

  .pestanas{display:none}
}

/* LA VUELTA DEL LATERAL EN TEMA OSCURO.
   Crema de fondo, verde de letra, el logo sobre blanco, y los iconos en los
   tonos bajos -- los mismos que ya usa la barra de abajo sobre fondo claro,
   porque el problema es identico: sobre crema, el crema no se ve. */
@media (min-width:1100px){
  @media (prefers-color-scheme: dark){
    :root:not([data-tema="claro"]){
      --lat-fondo:#F2F1EC; --lat-texto:#22302B;
      --lat-hover:rgba(30,58,50,.07); --lat-activa:rgba(30,58,50,.11);
    }
    :root:not([data-tema="claro"]) .lateral-marca .marca-clara{display:block}
    :root:not([data-tema="claro"]) .lateral-marca .marca-oscura-fondo{display:none}
    :root:not([data-tema="claro"]) [data-vista="resumen"]{--cl:#1E3A32}
    :root:not([data-tema="claro"]) [data-vista="sec-artista"]{--cl:#8C6A3A}
    :root:not([data-tema="claro"]) [data-vista="sec-agenda"]{--cl:#54785F}
    :root:not([data-tema="claro"]) [data-vista="sec-capitale"]{--cl:#B07D31}
    :root:not([data-tema="claro"]) [data-vista="sec-balance"]{--cl:#6E6389}
    :root:not([data-tema="claro"]) [data-vista="sec-mios"]{--cl:#A25F49}
  }
  :root[data-tema="oscuro"]{
    --lat-fondo:#F2F1EC; --lat-texto:#22302B;
    --lat-hover:rgba(30,58,50,.07); --lat-activa:rgba(30,58,50,.11);
  }
  :root[data-tema="oscuro"] .lateral-marca .marca-clara{display:block}
  :root[data-tema="oscuro"] .lateral-marca .marca-oscura-fondo{display:none}
  :root[data-tema="oscuro"] [data-vista="resumen"]{--cl:#1E3A32}
  :root[data-tema="oscuro"] [data-vista="sec-artista"]{--cl:#8C6A3A}
  :root[data-tema="oscuro"] [data-vista="sec-agenda"]{--cl:#54785F}
  :root[data-tema="oscuro"] [data-vista="sec-capitale"]{--cl:#B07D31}
  :root[data-tema="oscuro"] [data-vista="sec-balance"]{--cl:#6E6389}
  :root[data-tema="oscuro"] [data-vista="sec-mios"]{--cl:#A25F49}
}

/* Aquí vivía la regla del logo de cuando el lateral era claro en los dos
   temas. Ahora el lateral se da la vuelta, así que la que manda es la de
   arriba (busca --lat-fondo). Esta se quedó peleándose con aquella y sacaba
   los DOS logos a la vez, uno encima del otro. */

/* La barra de abajo, con los MISMOS iconos del lateral: una sola línea
   gráfica, mire donde mire. Los símbolos de texto que había antes (■ ♪ ▤) no
   se podían pintar por función.

   PERO NO CON LOS MISMOS TONOS. Los del lateral están hechos para leerse
   sobre el verde oscuro; sobre la barra clara el crema de "Inicio"
   desaparecía por completo. Aquí va la misma familia de colores, bajada de
   luz para el fondo claro -- y en tema oscuro vuelven los del lateral. */
.pestanas.seis button svg{width:21px;height:21px;display:block;margin:0 auto 3px;
  color:var(--cb,var(--suave));opacity:.7;transition:opacity .15s}
.pestanas.seis button.activa svg{opacity:1}
.pestanas.seis button.activa{color:var(--cb,var(--acento))}
.pestanas.seis button[data-vista="resumen"]{--cb:#1E3A32}
.pestanas.seis button[data-vista="sec-artista"]{--cb:#8C6A3A}
.pestanas.seis button[data-vista="sec-agenda"]{--cb:#54785F}
.pestanas.seis button[data-vista="sec-capitale"]{--cb:#B07D31}
.pestanas.seis button[data-vista="sec-balance"]{--cb:#6E6389}
.pestanas.seis button[data-vista="sec-mios"]{--cb:#A25F49}

@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .pestanas.seis button{--cb:var(--c)}
}
:root[data-tema="oscuro"] .pestanas.seis button{--cb:var(--c)}

/* ---- Las carpetas de trabajo ------------------------------------------- */
.gr-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 4px}
.gr-cifras div{border:1px solid var(--borde);border-radius:13px;padding:11px 12px;
  background:var(--panel);display:flex;flex-direction:column;line-height:1.2}
.gr-cifras b{font-size:18px}
.gr-cifras i{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tenue);font-style:normal;margin-top:2px}
.gr-cifras .pend b{color:var(--ambar)}
.rep-carpeta{margin-bottom:14px}
.rep-tit{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--suave);margin-bottom:4px}
.rep-lista li{gap:6px}

/* ==========================================================================
   EL PROGRAMA DE EXAMEN — calcado de verdad del PDF que armó para Albert.
   No a ojo: se le sacaron a ese mismo archivo (con PyMuPDF, leyendo la
   fuente, el tamaño en puntos y el color RGB de cada línea) los números de
   abajo. Por eso todo está en "pt" e "in" -- las mismas unidades del PDF --
   en vez de "px": así el punto de la fuente es EL MISMO punto, sin
   conversión de por medio.
   Los colores son del documento original (maroon/bronce), no el verde de
   tu marca -- a propósito, para que este papel se vea distinto de tus
   cotizaciones y tu EPK.
   ========================================================================== */
/* Carta (8.5in x 11in) con 1in de margen parejo, como el original -- no A4
   (var(--da-w) es el de las cotizaciones). 8.5in son 816px, que es
   justo lo que ya asume ajustarZoomDocumento() en ui.js. */
/* --pe-acento y --pe-linea: el de examen (el que va a la institución) se
   queda con el vino/bronce de siempre; .pe-anio (el que se queda con el
   alumno) usa el verde de su propia identidad -- así se distinguen a
   simple vista sin tocar el formato que se unificó el 1 de sep. Provisional
   -- el "modelo" de verdad (uno por institución, editable) es tarea de
   diseño pendiente, pedida el 11 de sep. */
.pe-hoja{background:#fff;color:#1a1a1a;width:8.5in;min-height:11in;
  padding:1in;margin:0 auto;box-sizing:border-box;
  font-family:Georgia,'Times New Roman',serif;font-size:11pt;line-height:1.42;
  --pe-acento:#7A1F2B; --pe-linea:#B89968}
.pe-hoja.pe-anio{--pe-acento:#1E3A32; --pe-linea:#1E3A32}
.pe-cab{text-align:center;border-top:.5pt solid var(--pe-linea);
  border-bottom:.5pt solid var(--pe-linea);padding:6pt 0 8pt;margin-bottom:15pt}
.pe-logo{display:block;height:30pt;margin:0 auto 6pt}
.pe-inst{font-size:13pt;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:#1a1a1a}
.pe-dep{font-size:10pt;font-style:italic;color:#6b6b6b;margin-top:3pt}
.pe-h1{font-size:18pt;letter-spacing:.09em;text-transform:uppercase;
  text-align:center;font-weight:700;margin:0 0 13pt;color:var(--pe-acento)}
.pe-alumno{text-align:center;margin-bottom:14pt}
.pe-et{display:block;font-size:10pt;font-style:italic;color:#6b6b6b;
  margin-bottom:2pt}
.pe-alumno b{font-size:15pt;font-weight:700;color:#1a1a1a}
.pe-sub{font-size:10pt;color:#6b6b6b;margin-top:2pt}

/* SIN break-inside:avoid aquí -- eso empujaba la SECCIÓN COMPLETA (todas
   sus obras juntas) a la página siguiente en cuanto una no cabía entera,
   dejando media página en blanco. Cada obra ya se cuida sola
   (.pe-obra{break-inside:avoid}) -- la sección puede partirse ENTRE obras,
   solo que el título nunca se queda huérfano al pie de la página. */
.pe-sec{margin-bottom:14pt}
.pe-h2{font-size:12pt;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--pe-acento);text-align:center;margin:0 0 10pt;
  break-after:avoid}
/* Sin negrita en el título de la escala -- pesa igual que el resto, la
   descripción después del guión es la que va gris y en cursiva. */
.pe-vinetas{margin:0;padding-left:18pt;list-style:disc}
.pe-vinetas li{margin-bottom:4pt;font-size:11pt;color:#1a1a1a}
.pe-vinetas .pe-vin-desc{font-style:italic;color:#6b6b6b}
.pe-obra{margin-bottom:12pt;break-inside:avoid}
/* Compositor y años a la izquierda, en su caja crema con la línea de bronce
   -- la caja NO envuelve el título, tal como en el papel real: el fondo y
   el borde son del renglón del compositor solamente. */
.pe-obra-caja{display:grid;grid-template-columns:32% 1fr}
.pe-obra-comp{background:#F7F2E9;border-right:1pt solid var(--pe-linea);
  padding:5pt 10pt}
.pe-obra-tit{padding:5pt 0 5pt 10pt}
.pe-comp{font-size:11pt;font-weight:700;color:#1a1a1a}
.pe-anios{font-size:9pt;font-style:italic;color:#6b6b6b;margin-top:2pt}
.pe-titulo{font-size:11pt;font-weight:700;color:#1a1a1a}
.pe-mov{font-size:10pt;font-style:italic;color:#6b6b6b;margin-top:2pt}
/* Lo que exige la pieza: gris, cursiva, con sangría -- sin la línea de más
   que tenía antes, el original no la lleva. */
.pe-dice{font-size:10pt;font-style:italic;color:#6b6b6b;margin:6pt 0 0 18pt;
  line-height:1.4}

/* Centrado y apilado -- así está en el papel real, no en dos columnas
   (izquierda/derecha) como tenía antes. break-inside:avoid para que, si no
   cabe entera al pie de una página, se vaya COMPLETA a la siguiente en vez
   de dejar una línea sola y huérfana. */
.pe-pie{margin-top:14pt;padding-top:8pt;border-top:.5pt solid #B89968;
  text-align:center;break-inside:avoid}
.pe-firma-nombre{font-size:12pt;font-weight:700;letter-spacing:.04em;
  color:#1a1a1a}
.pe-direccion{font-size:9pt;font-style:italic;color:#6b6b6b;
  line-height:1.3;margin-top:2pt}
.pe-direccion-chica{margin-top:2pt}

/* LA HOJA SE ESCRIBE ENCIMA -- pedido el 17 de sep: en vez de un formulario
   aparte y luego una vista previa de solo mirar, el papel mismo es donde se
   corrige. Cada campo [contenteditable] tiene un guión bajo punteado para
   que se note que ahí se puede tocar, sin que rompa la lectura del resto
   del documento -- desaparece al enfocar (la línea sólida ya lo deja claro)
   y por completo si queda con texto real, salvo el detalle de la pista. */
.pe-hoja [contenteditable]{cursor:text;border-radius:3pt;
  outline:1pt dashed #c9bda3;outline-offset:1pt;transition:outline-color .15s}
.pe-hoja [contenteditable]:focus{outline:1.5pt solid var(--pe-acento)}
.pe-hoja [contenteditable]:empty::before{content:attr(data-ph);color:#b3aca0;font-style:italic}
.pe-obra-ed{position:relative;padding-right:40pt}
.pe-acciones{position:absolute;top:0;right:0;display:flex;gap:3pt}
.pe-quitar, .pe-mas{width:18pt;height:18pt;
  border:none;background:#efe6d6;color:#8a7355;border-radius:50%;
  font-size:13pt;line-height:1;cursor:pointer;display:flex;
  align-items:center;justify-content:center}
.pe-mas{font-size:11pt}
.pe-quitar:hover, .pe-mas:hover{background:#e2d4b8;color:#5a4830}
.pe-agregar{display:block;margin:4pt auto 0;border:1pt dashed #b89968;
  background:transparent;color:#7A1F2B;font-size:9.5pt;padding:4pt 10pt;
  border-radius:4pt;cursor:pointer}
.pe-anio .pe-agregar{color:#1E3A32}
.pe-vinetas-ed li{position:relative;padding-left:34pt;list-style:none;
  display:flex;gap:6pt;align-items:baseline;margin-bottom:6pt}
.pe-acciones-li{left:0;right:auto;top:-1pt}
.pe-vinetas-ed li .pe-quitar, .pe-vinetas-ed li .pe-mas{width:15pt;height:15pt;font-size:11pt}
.pe-vinetas-ed .pe-vin-tit{font-size:11pt;color:#1a1a1a;min-width:40%}
.pe-vinetas-ed .pe-vin-desc{font-style:italic;color:#6b6b6b;flex:1}
.pe-agregar-li{padding-left:20pt}

/* =============================================================================
   LAS PLANTILLAS NUEVAS DE PROGRAMA -- pedidas el 17 de sep: tres diseños
   que trajo (Conservatorio, Piano Studio, Editorial), más la suya (arriba,
   .pe-*) para elegir. Todas a tamaño Carta como la suya -- .pe-hoja ya
   estableció esa convención (8.5in, no A4) y estas la siguen. Los
   selectores genéricos que traían las plantillas originales (*, h1, h3,
   ul...) se escriben aquí SIEMPRE colgados de su clase -hoja -- sin eso,
   una regla como "h1{...}" pintaría CUALQUIER h1 de toda la app mientras
   la vista previa esté abierta, no solo el título del papel.
   ========================================================================= */

/* ---- Genérico entre las tres: quitar, "⋯" y agregar, reutilizados con
   su propio color por plantilla vía variables. "⋯" abre el formulario de
   siempre (Etapa/Notas/¿va al examen?) -- lo que no sale impreso y por
   eso no tiene campo propio aquí en la hoja. ---- */
.doc-acciones{position:absolute;top:0;right:0;display:flex;gap:3pt}
.doc-quitar, .doc-mas{width:16pt;height:16pt;border:none;border-radius:50%;
  font-size:11pt;line-height:1;cursor:pointer;display:flex;align-items:center;
  justify-content:center;background:var(--docq-bg,#0002);color:var(--docq-color,#000)}
.doc-quitar{font-size:13pt}
.doc-quitar:hover, .doc-mas:hover{filter:brightness(1.15)}
.doc-quitar-li{width:15pt;height:15pt;font-size:11pt;flex:none}
.doc-agregar{display:block;margin:6pt auto 0;border:1pt dashed var(--doca-borde,#999);
  background:transparent;color:var(--doca-color,#666);font-size:9pt;
  padding:4pt 10pt;border-radius:4pt;cursor:pointer;font-family:inherit}

/* -----------------------------------------------------------------------
   CONSERVATORIO -- institucional, crema y azul marino, tal cual la trajo.
   El nombre de la institución y el logo son del alumno, nunca fijos a
   "Conservatorio Nacional de Música" -- esa era la promesa que el
   interruptor "Como el del CNM" nunca cumplió; esta plantilla es la que
   por fin lo hace.
   ----------------------------------------------------------------------- */
.doc-cons-hoja{background:#f8f6f0;color:#152b43;width:8.5in;min-height:11in;
  padding:.75in .8in;margin:0 auto;box-sizing:border-box;
  font-family:Georgia,'Times New Roman',serif;font-size:9.5pt;line-height:1.5;
  --docq-bg:#152b4314;--docq-color:#152b43;--doca-borde:#728091;--doca-color:#152b43}
.doc-cons-cab{text-align:center;border-top:.75pt solid #728091;
  border-bottom:.75pt solid #728091;padding:8pt 0}
.doc-cons-emblem{width:32pt;height:32pt;border:1.5pt solid #152b43;border-radius:50%;
  margin:0 auto;display:grid;place-items:center;font-size:16pt;overflow:hidden}
.doc-cons-emblem img{width:100%;height:100%;object-fit:contain}
/* Un logo que NO es casi cuadrado (un horizontal, un vertical) no cabe en el
   circulo de 32pt sin quedar diminuto: se pone suelto, sin circulo ni borde.
   El del CNM no pasa por aqui -- es cuadrado y usa el emblema de siempre. */
.doc-cons-emblem-suelto{width:auto;height:auto;border:0;border-radius:0;overflow:visible;
  display:flex;justify-content:center}
.doc-cons-emblem-suelto img{width:auto;height:auto;object-fit:initial}
.doc-cons-inst{font-size:12pt;letter-spacing:.18em;font-weight:700;margin-top:6pt}
.doc-cons-addr{font-size:6.5pt;margin-top:4pt;letter-spacing:.01em;color:#3a4a5c}
.doc-cons-dep{margin-top:6pt;font-size:8.5pt}
.doc-cons-title{font-size:16pt;letter-spacing:.3em;margin:10pt 0 2pt}
.doc-cons-studentbox{display:grid;grid-template-columns:1fr 1fr;
  border:.75pt solid #d7d5ce;background:#efeee9;padding:7pt 10pt;margin-top:11pt}
.doc-cons-label{font-size:6.5pt;text-transform:uppercase;letter-spacing:.1em;color:#3a4a5c}
.doc-cons-value{font-size:10pt;margin-top:2pt}
.doc-cons-sub{font-size:8pt;color:#3a4a5c;margin-top:1pt}
.doc-cons-sec{margin-top:11pt}
.doc-cons-h2{font-size:8.5pt;letter-spacing:.14em;border-bottom:.75pt solid #8a96a1;
  padding-bottom:4pt;margin:0 0 7pt;font-weight:700}
.doc-cons-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12pt}
.doc-cons-col + .doc-cons-col{border-left:.75pt solid #c7c8c5;padding-left:11pt}
.doc-cons-col h3{font-size:7.5pt;margin:2pt 0 5pt}
.doc-cons-tec-lista{margin:0;padding-left:13pt;list-style:disc;font-size:7pt;line-height:1.5}
.doc-cons-tec-lista.ed{list-style:none;padding-left:0}
.doc-cons-tec-lista li{margin-bottom:3pt}
.doc-cons-recomienda{font-size:6.5pt;font-style:italic;margin-top:6pt;line-height:1.4;color:#3a4a5c}
.doc-cons-work{display:grid;grid-template-columns:30% 1fr;gap:8pt;
  border-bottom:.75pt solid #d0d0cb;padding:6pt 0}
.doc-cons-work-ed{position:relative;padding-right:38pt}
.doc-cons-composer{font-weight:700;font-size:7.5pt}
.doc-cons-dates{font-weight:400;font-size:6pt;display:block;margin-top:2pt;color:#3a4a5c}
.doc-cons-worktitle{font-size:8pt;font-weight:700}
.doc-cons-mov{font-size:7pt;margin-top:2pt}
.doc-cons-workdesc{font-size:6.5pt;line-height:1.4;font-style:italic;margin-top:4pt;color:#3a4a5c}
.doc-cons-footer{margin-top:12pt;padding-top:7pt;border-top:.75pt solid #728091;
  text-align:center;font-size:6.5pt}
.doc-cons-hoja [contenteditable]{cursor:text;border-radius:3pt;
  outline:1pt dashed #9aa7b3;outline-offset:1pt}
.doc-cons-hoja [contenteditable]:focus{outline:1.5pt solid #152b43}
.doc-cons-hoja [contenteditable]:empty::before{content:attr(data-ph);color:#9aa7b3;font-style:italic}

/* -----------------------------------------------------------------------
   PIANO STUDIO -- oscura, moderna, Inter. Las tarjetas por sección
   funcionan igual para cualquier instrumento: el fondo es un degradado
   abstracto, no una foto de piano -- no hace falta esperar por las fotos
   por instrumento para usar esta.
   ----------------------------------------------------------------------- */
.doc-studio-hoja{width:8.5in;min-height:11in;padding:.7in;margin:0 auto;
  box-sizing:border-box;background:radial-gradient(circle at 85% 8%,#24465d 0,#0c1823 25%,#071019 65%);
  color:#e8f1f7;font-family:'Inter',Arial,sans-serif;font-size:8.3pt;line-height:1.5;
  position:relative;overflow:hidden;
  --docq-bg:#c9e8ff22;--docq-color:#c9e8ff;--doca-borde:#44718b;--doca-color:#9fd3ff}
/* El panel de la esquina -- degradado abstracto, calcado del original,
   siempre presente. La foto (cuando aplica) se le pone ENCIMA, en el
   mismo sitio, así que sirve de fondo si la foto no corresponde. */
.doc-studio-panel{position:absolute;right:-1in;top:.7in;width:4.3in;height:1.8in;
  background:linear-gradient(145deg,transparent,#28485a55);transform:skewY(-18deg);
  pointer-events:none;z-index:0}
.doc-studio-foto{position:absolute;right:-.2in;top:-.15in;width:3.1in;height:auto;
  opacity:.4;filter:grayscale(.15) brightness(.75) contrast(1.05);z-index:0;
  -webkit-mask-image:linear-gradient(115deg,transparent 0%,#000 35%);
  mask-image:linear-gradient(115deg,transparent 0%,#000 35%)}
.doc-studio-marca{display:inline-flex;align-items:center;gap:6pt}
.doc-studio-logo{height:20pt;border-radius:2pt}
.doc-studio-top{display:flex;justify-content:space-between;align-items:center;font-size:7pt;
  letter-spacing:.1em;text-transform:uppercase;color:#a8bdca;position:relative;z-index:1}
.doc-studio-eyebrow{color:#72c8ff;letter-spacing:.15em;margin-top:16pt;font-size:8.5pt;position:relative;z-index:1}
.doc-studio-h1{font-family:Georgia,serif;font-weight:400;font-style:italic;
  font-size:29pt;margin:4pt 0 0;position:relative;z-index:1}
.doc-studio-role{letter-spacing:.35em;color:#a9bfcc;font-size:7.5pt;margin-top:3pt;position:relative;z-index:1}
.doc-studio-teacher{margin-top:9pt;font-size:7pt;color:#b7c8d1;position:relative;z-index:1}
.doc-studio-card{position:relative;z-index:1;border:.75pt solid #44718b;border-radius:9pt;
  background:#0c1b27cc;margin-top:9pt;padding:8pt 10pt}
.doc-studio-cardhead{display:flex;align-items:center;gap:7pt;border-bottom:.75pt solid #31566a;
  padding-bottom:5pt;margin-bottom:6pt}
.doc-studio-num{width:18pt;height:18pt;border-radius:50%;background:#c9e8ff;color:#122333;
  display:grid;place-items:center;font-weight:700;font-size:8pt;flex:none}
.doc-studio-sect{font-size:8pt;letter-spacing:.1em}
.doc-studio-tag{margin-left:auto;font-size:5.5pt;color:#71c9ff;text-transform:uppercase;letter-spacing:.06em}
.doc-studio-cols3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9pt}
.doc-studio-label{font-size:5.5pt;letter-spacing:.1em;color:#65b9e8;text-transform:uppercase;margin-bottom:4pt}
.doc-studio-tec-lista{margin:0;padding-left:10pt;font-size:6pt;line-height:1.5;color:#d2dee5}
.doc-studio-tec-lista.ed{list-style:none;padding-left:0}
.doc-studio-tec-lista li{margin-bottom:2pt}
.doc-studio-note{font-size:5.6pt;line-height:1.4;color:#9db5c2;margin-top:6pt}
.doc-studio-work{display:grid;grid-template-columns:22% 48% 30%;gap:8pt;
  font-size:6pt;align-items:start;padding:4pt 0}
.doc-studio-work + .doc-studio-work{border-top:.75pt solid #244657}
.doc-studio-work-ed{position:relative;padding-right:38pt}
.doc-studio-composer{font-weight:700;color:#e6f1f6}
.doc-studio-dates{display:block;color:#91a8b5;font-size:5.5pt;margin-top:2pt}
.doc-studio-worktitle{font-weight:700}
.doc-studio-mov{margin-top:2pt}
.doc-studio-desc{font-size:5.6pt;color:#b8cad4;line-height:1.35;font-style:italic}
.doc-studio-footer{position:relative;z-index:1;margin-top:8pt;border-top:.75pt solid #31566a;
  padding-top:6pt;display:flex;justify-content:space-between;font-size:6.5pt;color:#89a0ad}
.doc-studio-hoja [contenteditable]{cursor:text;border-radius:3pt;
  outline:1pt dashed #3d6b85;outline-offset:1pt}
.doc-studio-hoja [contenteditable]:focus{outline:1.5pt solid #72c8ff}
.doc-studio-hoja [contenteditable]:empty::before{content:attr(data-ph);color:#5c7d8f;font-style:italic}

/* -----------------------------------------------------------------------
   EDITORIAL -- tipo programa de concierto/revista. La textura del hero es
   un degradado en diagonal, no una foto -- funciona igual para cualquier
   instrumento sin esperar por fotos.
   ----------------------------------------------------------------------- */
.doc-edit-hoja{width:8.5in;min-height:11in;margin:0 auto;background:#f3efe6;
  color:#25231f;font-family:Georgia,'Times New Roman',serif;position:relative;overflow:hidden;
  --docq-bg:#25231f14;--docq-color:#25231f;--doca-borde:#888176;--doca-color:#665f54}
.doc-edit-top{padding:.55in .7in .3in;display:flex;justify-content:space-between;
  border-bottom:.75pt solid #6f6a60;font-size:6.5pt;letter-spacing:.09em;text-transform:uppercase}
.doc-edit-hero{min-height:2.7in;padding:.4in .7in;position:relative;
  background:linear-gradient(115deg,#f5f1e8 0 55%,#25221e 55% 100%);overflow:hidden}
.doc-edit-hero:after{content:"";position:absolute;right:-.5in;top:-.5in;width:4.4in;height:4.4in;
  background:repeating-linear-gradient(82deg,#0000 0 7px,#0008 8px 11px);transform:rotate(-5deg);opacity:.5}
.doc-edit-foto{position:absolute;right:-.4in;top:-.3in;width:3.6in;height:auto;z-index:1;
  -webkit-mask-image:linear-gradient(115deg,transparent 0%,#000 40%);
  mask-image:linear-gradient(115deg,transparent 0%,#000 40%)}
.doc-edit-marca{display:inline-flex;align-items:center;gap:5pt}
.doc-edit-logo{height:18pt}
.doc-edit-small{font-size:6pt;letter-spacing:.15em;text-transform:uppercase;position:relative;z-index:2}
.doc-edit-h1{font-size:33pt;line-height:.85;margin:10pt 0 6pt;letter-spacing:-.02em;position:relative;z-index:2}
.doc-edit-subtitle{font-size:8pt;letter-spacing:.18em;position:relative;z-index:2}
/* EN LA ESQUINA DE ABAJO DEL HERO, no debajo del subtítulo -- así estaba
   en el original (.meta con position:absolute;bottom;left) y separa la
   firma del profesor del nombre grande de arriba, en vez de apilarse
   pegado a "ESTUDIANTE". */
.doc-edit-meta{position:absolute;bottom:.4in;left:.7in;font-size:6pt;z-index:2}
.doc-edit-quote{position:absolute;right:.7in;top:.5in;width:1.9in;color:#f4eee2;font-size:8pt;
  line-height:1.5;letter-spacing:.05em;text-transform:uppercase;z-index:3}
.doc-edit-content{padding:.3in .7in .4in}
.doc-edit-sec{margin-bottom:9pt}
.doc-edit-sechead{display:flex;align-items:flex-end;gap:8pt;border-bottom:.75pt solid #888176;
  padding-bottom:3pt;margin-bottom:5pt}
.doc-edit-number{font-size:20.5pt;color:#806b54;line-height:1}
.doc-edit-secname{font-size:8.5pt;letter-spacing:.12em;text-transform:uppercase}
.doc-edit-era{margin-left:auto;font-size:5.5pt;letter-spacing:.09em;text-transform:uppercase;color:#777166}
.doc-edit-two{display:grid;grid-template-columns:1fr 1fr;gap:10pt}
.doc-edit-work{border-top:.75pt solid #c4bdb1;padding-top:5pt;position:relative;min-height:1.05in}
.doc-edit-work-ed{padding-right:38pt}
.doc-edit-composer{font-size:6.5pt;letter-spacing:.06em;text-transform:uppercase;color:#665f54}
.doc-edit-worktitle{font-size:11.5pt;line-height:1.1;margin:3pt 0}
.doc-edit-details{font-size:6pt;line-height:1.45}
.doc-edit-mov{color:#777166}
.doc-edit-desc{font-style:italic;margin-top:3pt}
.doc-edit-tech{display:grid;grid-template-columns:1.15fr .85fr 1fr;gap:9pt;
  border-top:.75pt solid #888176;padding-top:6pt}
.doc-edit-tech h3{font-size:6pt;text-transform:uppercase;letter-spacing:.06em;margin:0 0 5pt}
.doc-edit-tec-lista{margin:0;padding-left:10pt;font-size:5.5pt;line-height:1.5}
.doc-edit-tec-lista.ed{list-style:none;padding-left:0}
.doc-edit-tec-lista li{margin-bottom:2pt}
.doc-edit-footer{margin:0 .7in;border-top:.75pt solid #6f6a60;padding:6pt 0 .3in;
  text-align:right;font-size:6pt;font-style:italic}
.doc-edit-hoja [contenteditable]{cursor:text;border-radius:3pt;
  outline:1pt dashed #a89f8e;outline-offset:1pt}
.doc-edit-hoja [contenteditable]:focus{outline:1.5pt solid #806b54}
.doc-edit-hoja [contenteditable]:empty::before{content:attr(data-ph);color:#a89f8e;font-style:italic}

/* ---- Selector de diseño, en la pantalla del alumno ---------------------- */
.prog-disenos{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.prog-diseno-chip{border:1.5pt solid var(--borde);background:var(--panel);
  color:var(--texto);padding:8px 12px;border-radius:10px;cursor:pointer;
  font-size:12.5px;text-align:left;flex:1;min-width:120px}
.prog-diseno-chip.on{border-color:var(--acento);background:var(--acento-suave)}
.prog-diseno-chip b{display:block;font-size:13px}
.prog-diseno-chip span{display:block;font-size:11px;opacity:.75;margin-top:2px}

/* ---- Diseño del registro: una fila por institución, un chip por cada
   una de las 5 plantillas -- pedido el 18 de sep, una sola pestaña en vez
   del interruptor guardado en el teléfono. --------------------------- */
.reg-diseno-fila{padding:12px 0;border-bottom:1px solid var(--borde)}
.reg-diseno-fila:last-child{border-bottom:none}
.reg-diseno-nombre{font-weight:600;font-size:13.5px;margin-bottom:8px}
.reg-diseno-chips{display:flex;gap:6px;flex-wrap:wrap}
.reg-diseno-chip{border:1.5px solid var(--borde);background:var(--panel);
  color:var(--suave);padding:6px 11px;border-radius:20px;cursor:pointer;
  font-size:11.5px;font-weight:600}
.reg-diseno-chip.on{border-color:var(--acento);background:var(--acento-suave);
  color:var(--acento-solido)}

/* ---- El menú "Informe y registro" -- pedido el 19 de sep, con el ícono
   en su caja de color y el dato a la derecha, como en la muestra que se
   armó para elegir el diseño. ---------------------------------------- */
.io-icono{width:38px;height:38px;border-radius:11px;flex:none;
  display:grid;place-items:center;background:var(--c)}
.io-icono svg{width:19px;height:19px;stroke:#fff}
.io-num{flex:none;text-align:right}
.io-num b{display:block;font-size:18px;font-weight:700;color:var(--c)}
.io-num span{display:block;font-size:9.5px;color:var(--suave);
  text-transform:uppercase;letter-spacing:.04em;margin-top:1px}

/* ---- Ver antes de bajar ------------------------------------------------- */
.pv-barra{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--borde)}
/* La hoja se enseña dentro de un marco con fondo, para que se lea como un
   papel y no como parte de la app. */

/* La obra que sube al examen se marca en la lista del año: es la misma lista,
   y hay que ver de un golpe cual de las doce va a tocar ese dia. */

/* ---- El horario: cada dia con SU hora al lado ------------------------- */
.horario-sem{display:flex;flex-direction:column;gap:5px}
.hs-fila{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hs-fila .chip{flex:0 0 62px;text-align:center}
.hs-hora{flex:1;max-width:84px;min-width:64px;padding:5px 9px;font-size:13px}
.hs-hora:disabled{opacity:.35}
.hs-fila:not(.on) .hs-hora{border-style:dashed}

/* AM/PM se elige, no se escribe -- del 11 de sep: escribir "4:00" a mano y
   olvidar el PM dejaba una clase de la tarde marcada como de la madrugada.
   Chips chicos, uno de los dos siempre encendido mientras el día esté
   activo. La regla de 3 clases pesa más que ".hs-fila .chip" de arriba,
   que si no le impondría el ancho fijo del botón del día. */
.hs-fila .hs-ampm{flex:0 0 auto;gap:4px}
.hs-fila .hs-ampm .chip{flex:0 0 auto;padding:5px 9px;font-size:11px;min-width:0}
.hs-fila .hs-ampm .chip.on{background:var(--m-alumnos);border-color:var(--m-alumnos);color:#fff;font-weight:640}
.hs-fila .hs-ampm .chip:disabled{opacity:.35;pointer-events:none}

/* ---- Un campo de hora suelto (sin días) -- mismo AM/PM, más compacto -- */
.hora-sel{display:flex;align-items:center;gap:8px}
.hr-num{flex:0 0 84px;padding:9px 11px}
.hr-ampm{flex:0 0 auto;gap:4px}
.hr-ampm .chip{flex:0 0 auto;padding:8px 12px}
.hr-ampm .chip.on{background:var(--acento);border-color:var(--acento);color:#fff;font-weight:640}

/* ==========================================================================
   EL CONCIERGE Y EL SALUDO -- las clases propias del panel de Inicio.
   ==========================================================================

   Esto vivió antes detrás de un interruptor de piel ([data-piel="nueva"]),
   probándose sin arriesgar el dashboard de siempre. Ya se decidió: "el
   dashboard nuevo, con el Concierge... elimina el viejo definitivamente".
   Con resumen.js fusionado, esta hoja deja de necesitar el gate -- es
   simplemente el estilo de esa pantalla, activo siempre.

   LOS COLORES DE LA CASA NO CAMBIAN AQUÍ. La versión de prueba traía su
   propio bloque de :root que redefinía --fondo/--acento/--texto en un
   verde pizarra -- y como son variables de :root, eso se colaba a TODA la
   app mientras el interruptor estaba encendido: la pestaña activa de abajo,
   botones en otras pantallas, la isla dinámica de arriba, todo lo que
   usara var(--acento) se ponía verde, no solo Inicio -- de ahí la queja de
   "ya es mucho verde" en el ticker de mercado. Ese bloque se quita entero:
   el Concierge usa el mismo dorado y la misma crema del resto de la app.
   Si más adelante se decide una paleta propia solo para esta pantalla,
   será una decisión aparte y bien escogida, no una fuga de variables
   globales por accidente. ========================================================================== */

/* ---- El saludo. La rayita de bronce, ampliada "por lo menos veinte veces"
   y con degradado -- eso sí se pidió a propósito, y no toca ningún color de
   marca (usa --bronce/--arena, que ya existían para los dos temas, no
   --acento). ---- */
/* PROBÉ centrarlo con el mismo max-width que el Concierge -- no le gustó:
   "no me parece buena idea centrarlo". Lo que de verdad pedía era más
   puntual: el texto se queda A LA IZQUIERDA, igual que siempre, pero un
   poco más adentro -- porque la rayita de bronce empieza transparente (el
   0% del degradado) y solo se hace visible pasado como un 14% de su ancho;
   con el texto pegado al mismo borde donde la raya todavía no se ve, la
   raya parecía nacer de la nada debajo de él. Este padding-left no mueve
   la raya -- ella sigue anclada en su propio left:2px, absoluta dentro de
   .bienv -- así que el texto se corre un poco a la derecha y queda
   arrancando justo sobre el tramo donde el bronce ya se nota. */
.bienv{padding:14px 2px 20px 30px}
.bienv-saludo{font-size:36px; letter-spacing:-.005em}
.bienv-fecha{font-size:13.5px; color:var(--tenue); margin-top:7px}

/* LA RAYITA DE BRONCE -- pidió que se ampliara "por lo menos veinte veces"
   y que llevara degradado, "que le dé un tono bien interesante". La de
   siempre (.bienv::after, en la base del archivo) es de 44px y de un solo
   color -- un toque discreto pensado para cuando abajo había seis bloques
   compitiendo por la vista. Aquí abajo ya no compite con nada, así que
   puede ser la firma de la pantalla: un listón ancho con un brillo que
   viaja por dentro del bronce, no un cambio de color plano. */
.bienv::after{
  width:min(560px, 88%); height:3px; border-radius:3px; opacity:1;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--bronce) 14%,
    var(--arena) 42%,
    var(--bronce) 68%,
    transparent 100%);
}

/* ---- EL CONCIERGE ---------------------------------------------------- */

/* Sin nada más en la pantalla, puede ocupar más sitio y respirar solo. Un
   `max-width` + `margin:auto` lo separa del ancho de columna completo; en
   pantallas angostas ocupa todo el ancho disponible, que ya es bastante
   angosto de por sí. La sombra usa --texto en vez de negro fijo, para que
   se vea igual de bien en los dos temas sin un token aparte. */
.cc-centro{
  position:relative;
  max-width:640px; margin:78px auto 24px;
  background:var(--panel);
  border-radius:calc(var(--r) + 6px);
  box-shadow:0 2px 4px color-mix(in srgb, var(--texto) 5%, transparent),
             0 12px 28px -12px color-mix(in srgb, var(--texto) 20%, transparent);
  padding:28px 26px 32px;
  overflow:hidden;
  isolation:isolate;
}

/* La onda del dinero, detrás. Se sangra hasta los bordes y se corta con el
   radio del bloque: así es una textura del panel, no una gráfica pegada
   encima. Va debajo de todo (z-index 0) y no recibe eventos salvo el clic
   que la abre completa. */
.cc-onda{
  position:absolute; inset:auto -1px -1px -1px;
  width:calc(100% + 2px); height:86px;
  z-index:0; display:block;
}

.cc-caja{position:relative; z-index:1}

/* El campo. Alto, con letra grande y sin caja marcada -- lo que lo delimita
   es una línea inferior, que pesa mucho menos que un rectángulo y basta para
   saber dónde se escribe. */
.cc-fila{
  display:flex; align-items:center; gap:8px;
  border-bottom:1.5px solid var(--borde);
  padding-bottom:10px;
  transition:border-color .18s ease;
}
.cc-centro:focus-within .cc-fila{border-bottom-color:var(--acento)}

#cc-q{
  flex:1; min-width:0;
  border:0; background:transparent; padding:7px 2px;
  font-size:21px; line-height:1.3; color:var(--texto);
  font-family:inherit; letter-spacing:-.008em;
}
#cc-q:focus{outline:none; box-shadow:none}
#cc-q::placeholder{color:var(--tenue); opacity:1}
/* En el teléfono, con los dos botones al lado, el tamaño de escritorio
   cortaba el texto de ejemplo a media palabra. Un poco más chico entra
   entero y sigue siendo cómodo -- pero más grande que antes, como el resto. */
@media (max-width:430px){
  #cc-q{font-size:17px}
  .cc-centro{padding:24px 18px 26px; margin-top:56px}
}

.cc-btn{
  flex:0 0 auto; width:42px; height:42px; padding:0;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:var(--panel2); color:var(--texto);
  font-size:17px; line-height:1; cursor:pointer;
  transition:background .16s ease, color .16s ease, transform .16s ease;
}
.cc-btn:hover{background:var(--acento-suave); color:var(--acento)}
/* La flecha iba en --fondo (el crema de la pagina) sobre --acento: en tema
   claro eso da 4.38, por debajo del 4.5. Blanco puro sobre el mismo bronce da
   4.96 y no cambia nada de como se ve. En oscuro ya daba 9.87 y se queda. */
.cc-ir{background:var(--acento); color:var(--sobre-acento,#fff); font-size:19px}
.cc-ir:hover{background:var(--acento); color:var(--sobre-acento,#fff); transform:translateX(2px)}

/* Oyendo: el botón late. Es la única manera de saber que el micrófono está
   abierto sin poner un cartel. */
.cc-voz.oyendo{
  background:var(--acento); color:var(--fondo);
  animation:cc-latir 1.4s ease-in-out infinite;
}
@keyframes cc-latir{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--acento) 55%, transparent)}
  50%    {box-shadow:0 0 0 7px color-mix(in srgb, var(--acento) 0%, transparent)}
}

/* ---- LO QUE ENTENDIÓ, antes de hacer nada ----
   Aparece mientras escribe. La barra de color de la izquierda dice por qué
   carril va a ir: verde es una acción directa, azul es un dato que la app ya
   tiene, ámbar es lo único que llama a la IA. No hay que explicárselo a
   nadie -- después de tres usos se sabe solo. */
/* El [hidden] va PRIMERO y con la misma especificidad que la regla de
   abajo: `display:flex` en un selector de dos partes le gana al
   `[hidden]{display:none}` del reset, y la caja de la lectura se quedaba
   visible y vacía debajo del campo desde que cargaba la pantalla. */
.cc-lectura[hidden]{display:none}
/* LOS TRES EJEMPLOS DEBAJO DEL CAMPO.
   Pastillas discretas, no botones: tienen que leerse como "se puede escribir
   algo asi", no como "aprieta aqui". Por eso el borde es del oro apagado y
   el fondo no existe hasta que se tocan. Area de toque de 44 de alto como
   todo lo demas desde el 29 de septiembre, aunque la pastilla se vea mas
   fina -- el relleno vertical la levanta sin engordarla. */
.cc-ejemplos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px auto 0;
  max-width:560px}
.cc-ejemplos[hidden]{display:none}
/* La LETRA va en --oro-texto, no en --art-oro: el segundo esta hecho para
   dibujar sobre madera y de color de letra sobre el panel claro daba 3.65.
   El BORDE si puede seguir en --art-oroS -- un borde no es texto. */
.cc-ej{font:inherit;font-size:13px;line-height:1;color:var(--oro-texto);cursor:pointer;
  min-height:44px;padding:0 14px;border-radius:999px;background:none;
  border:1px solid var(--art-oroS);transition:background .18s,border-color .18s}
.cc-ej:hover,.cc-ej:focus-visible{background:color-mix(in srgb,var(--art-oro) 12%,transparent);
  border-color:var(--art-oro)}
.cc-ej:focus-visible{outline:2px solid var(--art-oro);outline-offset:2px}

.cc-lectura{
  display:flex; align-items:center; gap:10px;
  margin-top:12px; padding:10px 12px;
  background:var(--panel2); border-radius:11px;
  border-left:3px solid var(--tenue);
  font-size:13.5px; color:var(--texto);
  animation:cc-entrar .18s ease both;
}
@keyframes cc-entrar{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
.cc-lectura.carril-rapido  {border-left-color:var(--acento)}
.cc-lectura.carril-dato    {border-left-color:var(--m-tiempo, #4a7fb5)}
.cc-lectura.carril-criterio{border-left-color:var(--ambar)}
.cc-lectura.carril-buscar  {border-left-color:var(--tenue)}
.cc-lec-txt{flex:1; min-width:0}
.cc-lec-etq{
  flex:0 0 auto; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tenue); font-weight:600;
}
.cc-lectura.pensando .cc-lec-etq{
  animation:cc-respirar 1.5s ease-in-out infinite;
}
@keyframes cc-respirar{0%,100%{opacity:.45} 50%{opacity:1}}

/* El contador rojo de asistencia sin marcar, en la carpeta de un alumno --
   mismo pedido del 16 de sep. Redondo y chico: es un acceso directo, no
   una etiqueta que compita con el nombre. */
.al-pend{
  flex:0 0 auto; min-width:22px; height:22px; padding:0 6px;
  display:grid; place-items:center; border-radius:11px;
  background:var(--rojo); color:#fff; font-size:12px; font-weight:700;
  cursor:pointer;
}

/* ---- PENDIENTES -- el cartel debajo del Concierge, pedido el 16 de sep.
   Ámbar y con espacio de sobra a propósito: es una alerta, no un dato más
   -- tiene que sentirse distinto al resto de la pantalla. */
.cc-pendientes[hidden]{display:none}
.cc-pendientes{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:14px;
  margin-top:18px; padding:16px 18px;
  background:var(--ambar-suave); border-radius:14px;
  border:1.5px solid color-mix(in srgb, var(--ambar) 45%, transparent);
  cursor:pointer;
  animation:cc-entrar .18s ease both;
}
.cc-pendientes:hover{border-color:var(--ambar)}
.cc-pend-icono{flex:0 0 auto; font-size:22px; line-height:1; color:var(--ambar)}
.cc-pend-cuerpo{flex:1; min-width:0}
.cc-pend-titulo{
  font-weight:700; font-size:13.5px; color:var(--ambar);
  text-transform:uppercase; letter-spacing:.03em;
}
.cc-pend-detalle{font-size:13.5px; color:var(--texto); margin-top:3px}
.cc-pend-flecha{flex:0 0 auto; font-size:18px; color:var(--ambar)}

/* La respuesta de la IA, en el mismo sitio donde estaba la lectura: no se
   abre una ventana -- se contesta donde se preguntó. */
.cc-respuesta{
  display:block; position:relative;
  border-left-color:var(--ambar);
  padding:14px 34px 14px 14px;
  line-height:1.6;
}
.cc-resp-txt{white-space:pre-wrap}
.cc-resp-x{
  position:absolute; top:8px; right:8px;
  width:24px; height:24px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--tenue); font-size:17px;
  line-height:1; cursor:pointer;
}
.cc-resp-x:hover{background:var(--fondo); color:var(--texto)}

/* ---- LA ZONA DE ESTADO YA NO EXISTE. ----
   Tuvo dos vueltas: primero bajó de cinco bloques a cifras+meta, después
   -- "es mejor que quede todo limpio" -- se fue entera. Lo que ahí se leía
   (te quedó libre, te deben, lo que viene, la meta) ahora se pregunta: el
   Concierge contesta exactamente lo mismo por texto o por voz. No queda
   ni una clase (.est, .cifra-linea, .meta-linea) ni un estilo de esto --
   se borraron con la pantalla, no se dejaron "por si acaso". ---- */

/* ---- LA GRÁFICA COMPLETA ---------------------------------------------- */

.gf-rango{display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap}
.gf-rango .gf-r{
  padding:7px 14px; border:1px solid var(--borde); border-radius:999px;
  background:transparent; color:var(--suave); font-size:12.5px;
  font-family:inherit; cursor:pointer;
}
.gf-rango .gf-r.on{
  background:var(--acento); border-color:var(--acento); color:var(--fondo);
  font-weight:600;
}

.gf-cifras{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:14px; margin-bottom:18px;
}
.gf-cifras > div{display:grid; gap:2px}
.gf-cifras strong{font-size:23px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.gf-cifras .gf-bien{color:var(--verde)}
.gf-cifras .gf-mal{color:var(--rojo)}
.gf-cifras .nota{font-size:11.5px}

/* Altura fija: el canvas necesita un alto real para medirse, y "lo que
   ocupe" sería cero. */
.gf-lienzo{height:210px; margin:0 -4px}
.gf-lienzo canvas{width:100%; height:100%; display:block; touch-action:pan-y}

.gf-leyenda{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.gf-leyenda .gf-l{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border:0; border-radius:999px;
  background:var(--panel2); color:var(--tenue);
  font-size:12px; font-family:inherit; cursor:pointer;
}
.gf-leyenda .gf-l::before{
  content:''; width:9px; height:9px; border-radius:50%;
  background:currentColor; opacity:.3;
}
.gf-leyenda .gf-l.on{color:var(--texto)}
/* La marca de "libre" es una barra y no un punto: en el dibujo esa línea es
   la gruesa, y la leyenda tiene que decir lo mismo que el dibujo. */
.gf-leyenda .gf-l.libre::before{width:17px; height:4px; border-radius:2px}
.gf-leyenda .gf-l.libre.on::before  {background:var(--acento); opacity:1}
.gf-leyenda .gf-l.cobrado.on::before{background:var(--verde);  opacity:1}
.gf-leyenda .gf-l.gastado.on::before{background:var(--rojo);   opacity:1}
.gf-pie{margin-top:8px; min-height:1.3em; font-variant-numeric:tabular-nums}

/* ---- Sin movimiento, para quien lo pidió en el sistema. ----
   La ola y el pulso de la onda NO están aquí: vivirOnda() (onda.js) ya
   pregunta window.matchMedia('(prefers-reduced-motion: reduce)') ANTES de
   arrancar el bucle, y si está encendido pinta un solo cuadro quieto -- un
   canvas no se puede "apagar" por CSS, la animación se decide en JS. */
@media (prefers-reduced-motion: reduce){
  .cc-lectura,
  .cc-voz.oyendo,
  .cc-lectura.pensando .cc-lec-etq{animation:none}
  .cc-ir:hover{transform:none}
}

/* ===========================================================================
   EL ECO DEL LUGAR -- 21 de septiembre de 2026.

   Lo que aparece debajo del campo Lugar mientras se escribe: la ruta que le
   toca, los kilómetros que da el mapa, o la pregunta de por dónde queda.
   Ver web/js/util/eco-lugar.js.

   Usa las variables de siempre, así que el modo oscuro sale solo -- no hay
   un solo color escrito a mano aquí.
   =========================================================================== */
.campo-pie:empty{display:none}
.campo-pie{margin-top:6px}

.eco-lugar{font-size:12.5px;line-height:1.45;color:var(--suave);
  padding:8px 11px;border-radius:9px;background:var(--panel2);
  border-left:3px solid var(--borde)}
.eco-lugar b{color:var(--tinta);font-weight:600}
/* Verde cuando sabe de qué sitio se trata; arena cuando hay que decidir. */
.eco-lugar.sabe{border-left-color:var(--verde);background:var(--verde-suave)}
.eco-lugar.no-sabe{border-left-color:var(--acento);background:var(--acento-suave)}
.eco-como{display:block;margin-top:2px;font-size:11.5px;opacity:.75}

.eco-acciones{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.eco-acciones .btn.chico{padding:6px 11px;font-size:12px}

.eco-cerca{display:flex;gap:6px;margin-top:7px}
.eco-cerca input{flex:1;min-width:0;padding:8px 11px;border-radius:9px;
  border:1px solid var(--borde);background:var(--panel);color:var(--tinta);font-size:13px}

/* ===========================================================================
   JORNADAS YA CALCULADAS -- el día que la app sacó sola, a la espera de que
   él lo corrija si hubo desvíos. Se distingue de una jornada medida con el
   tablero: la medida es un hecho, esta es una cuenta.
   =========================================================================== */
.jor-calc{border-left:3px solid var(--verde)}
.jor-calc .jor-km{color:var(--verde)}
.jor-pendiente{font-size:12px;color:var(--acento);margin-top:5px}

/* ===========================================================================
   LA SEMANA — las plantillas Cinta y Ruta (22 de septiembre de 2026).

   Un solo bloque de estilos para las dos: lo que cambia entre ellas es cómo
   se ordena la semana, no cómo se ve un evento. Ver web/js/vistas/semana.js.

   TODO EN VARIABLES, así que el modo oscuro sale solo -- no hay un solo color
   escrito a mano aquí.
   =========================================================================== */

/* LAS CIFRAS, TABULARES. Italiana es de titular y sus números se deforman;
   en una lista de horas hace falta que 1:30 y 11:00 ocupen lo mismo, o la
   columna baila al cambiar de día. */
.sem .n { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.sem-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.sem-rango{font-size:19px;font-weight:600;letter-spacing:-.01em}
.sem-sub{font-size:12px;color:var(--suave);margin-top:2px}
.sem-nav{display:flex;gap:6px}
.sem-nav .btn-icono{min-width:36px;height:36px;border:1px solid var(--borde);background:var(--panel);
  border-radius:10px;color:var(--suave);font-size:14px;cursor:pointer;font-family:inherit;padding:0 10px}
.sem-nav .btn-icono:hover{background:var(--panel2)}

/* --- La cinta de siete días ---------------------------------------------- */
.sem-cinta{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin-bottom:12px}
.sem-dia{border:none;background:transparent;padding:7px 0 8px;border-radius:12px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;font-family:inherit;min-height:56px}
.sem-dia:hover{background:var(--panel2)}
.sem-dia-l{font-size:10px;color:var(--tenue);letter-spacing:.06em}
.sem-dia-n{font-size:17px;font-weight:500;color:var(--texto)}
.sem-dia.hoy .sem-dia-n{color:var(--acento);font-weight:700}
.sem-dia.sel{background:var(--texto)}
.sem-dia.sel .sem-dia-l{color:var(--panel2);opacity:.75}
.sem-dia.sel .sem-dia-n{color:var(--panel);font-weight:600}
.sem-puntos{display:flex;gap:2px;height:5px}
.sem-puntos i{width:5px;height:5px;border-radius:50%;display:block}
.sem-puntos i.verde{background:var(--verde)}
.sem-puntos i.dorado{background:var(--dorado-solido)}
.sem-puntos i.acento{background:var(--acento)}
.sem-dia.sel .sem-puntos i{background:var(--panel2)}

/* --- La hora de salir: el número más grande de la pantalla --------------- */
.sem-salida{background:var(--texto);border-radius:18px;padding:15px 18px 14px;margin-bottom:11px}
.sem-salida-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sem-salida-et{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--verde);font-weight:600}
.sem-salida-hora{font-size:52px;font-weight:300;line-height:1;color:var(--panel);
  letter-spacing:-.02em;margin-top:3px}
.sem-salida-hora span{font-size:17px;color:var(--acento);font-weight:500;margin-left:6px}
.sem-salida-nota{font-size:12px;color:var(--suave);margin-top:7px;line-height:1.45}
.sem-salida .btn.chico{background:var(--panel2);color:var(--texto);border:none;flex-shrink:0}
/* Sin hora que dar, la caja no grita: se dice y ya. */
.sem-salida.sin{background:var(--panel2);padding:12px 16px}
.sem-salida.sin .sem-salida-et{color:var(--suave);font-size:12px;letter-spacing:0;text-transform:none;
  font-weight:600}
.sem-salida.sin .sem-salida-nota{color:var(--suave);margin-top:3px}

/* --- Un bloque del día ---------------------------------------------------- */
.sem-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.sem-bloque{background:var(--panel);border-radius:14px;border-left:3px solid var(--borde);
  overflow:hidden;cursor:pointer}
.sem-bloque.verde{border-left-color:var(--verde)}
.sem-bloque.dorado{border-left-color:var(--dorado-solido)}
.sem-bloque.acento{border-left-color:var(--acento)}
.sem-bloque-cab{display:flex;gap:11px;padding:12px 14px}
.sem-hora{width:58px;flex-shrink:0;font-size:14.5px;font-weight:600;padding-top:1px}
.sem-hora span{font-size:10px;color:var(--tenue);font-weight:400;margin-left:2px}
.sem-bloque-txt{flex-grow:1;min-width:0}
.sem-t1{font-size:14.5px;font-weight:500}
.sem-t2{font-size:12px;color:var(--suave);margin-top:2px}
.sem-monto{font-size:13px;font-weight:600;color:var(--verde);flex-shrink:0}
.sem-bloque.abierto{box-shadow:var(--sombra)}
.sem-bloque.abierto .sem-t1{font-size:15.5px;font-weight:600}

/* Las herramientas del papel del evento, y las cuatro que van en todo. */
.sem-herr{display:flex;gap:5px;flex-wrap:wrap;padding:0 14px 9px}
/* --acento, NO --acento-solido: ese último es fijo a propósito (es para
   botones de fondo sólido con letras blancas encima, ver el comentario de
   :root) y en modo oscuro queda bronce sobre bronce -- se vio en pantalla,
   las tres píldoras casi no se leían. --acento sí se aclara en oscuro. */
.sem-pill{font-size:11.5px;background:var(--acento-suave);color:var(--acento);border:none;
  padding:7px 12px;border-radius:18px;font-weight:600;cursor:pointer;font-family:inherit}
.sem-pill:hover{filter:brightness(.96)}
/* Crear y "Vista" en una fila, bajo la cabecera de la semana y del día (UX-004/006). */
.sem-acciones{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 12px}
.sem-mandos[hidden]{display:none}
.sem-acciones .btn.sutil{border:1px solid var(--borde);color:inherit}
.sem-pie{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-top:1px solid var(--borde)}
.sem-pie-b{background:none;border:none;border-right:1px solid var(--borde);cursor:pointer;
  padding:10px 0 9px;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--texto);font-family:inherit;min-height:48px}
.sem-pie-b:last-child{border-right:none}
.sem-pie-b:hover{background:var(--panel2)}
.sem-pie-b svg{width:17px;height:17px}
.sem-pie-b span{font-size:9.5px}

.sem-fijos{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.sem-fijos span{font-size:11px;color:var(--suave);background:var(--panel2);padding:4px 10px;
  border-radius:16px}

/* --- RUTA: un día, una tarjeta ------------------------------------------- */
.sem-ruta{display:flex;flex-direction:column;gap:7px}
.sem-tarjeta{background:var(--panel);border-radius:14px;padding:11px 14px;cursor:pointer}
.sem-tarjeta.ida{opacity:.5}
.sem-tarjeta.abierta{border:1px solid var(--acento);padding:13px 15px 15px;box-shadow:var(--sombra)}
.sem-tarjeta-cab{display:flex;gap:13px;align-items:center}
.sem-tarjeta-dia{width:40px;flex-shrink:0;text-align:center}
.sem-tarjeta-dia .sem-dia-l{display:block}
.sem-tarjeta-dia .sem-dia-n{display:block;font-size:19px}
.sem-tarjeta.abierta .sem-tarjeta-dia .sem-dia-n{font-size:22px;font-weight:700}
.sem-tarjeta.abierta .sem-tarjeta-dia .sem-dia-l{color:var(--acento);font-weight:600}
.sem-tarjeta-txt{flex-grow:1;min-width:0}
.sem-tarjeta .ir{color:var(--tenue);font-size:16px}
.sem-tarjeta.abierta .sem-salida{margin-top:12px}
.sem-tarjeta.abierta .sem-lista .sem-bloque{background:var(--panel2)}

/* --- El interruptor de plantilla ----------------------------------------
   Tres segmentos, no una lista dentro de un menú: se elige entre tres cosas
   que solo se distinguen VIÉNDOLAS, así que el botón tiene que estar donde
   la pantalla cambia debajo. (Primero quedó en Más -> La app, que es el menú
   viejo y además se pinta apagado -- ahí no lo encontró nadie.) */
.sem-plantillas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;
  background:var(--panel2);border-radius:12px;padding:3px;margin-bottom:12px}
.sem-plantillas button{border:none;background:transparent;border-radius:9px;cursor:pointer;
  font-family:inherit;font-size:12.5px;color:var(--suave);padding:7px 0;
  transition:background .12s,color .12s}
.sem-plantillas button:hover{color:var(--texto)}
.sem-plantillas button.sel{background:var(--panel);color:var(--texto);font-weight:600;
  box-shadow:var(--sombra)}

/* --- REJILLA: la semana por horas ---------------------------------------
   La malla es una cuadricula de 2 filas (cabecera + cuerpo) y 8 columnas
   (las horas + los siete dias). En el telefono las columnas de dia miden
   fijo, asi que caben tres y la rejilla se corre de lado; la columna de
   horas y la fila de dias se quedan pegadas (sticky) para que al correrla
   no se pierda de vista que hora es cada renglon -- que es el dato que se
   vino a buscar. */
.sem-rej{margin-bottom:11px}
.sem-rej-scroll{overflow:auto;max-height:52vh;border:1px solid var(--borde);
  border-radius:14px;background:var(--panel);-webkit-overflow-scrolling:touch}
.sem-rej-malla{display:grid;grid-template-columns:46px repeat(7,minmax(104px,1fr));
  grid-template-rows:auto var(--alto);min-width:min-content}
.sem-rej-esq{position:sticky;top:0;left:0;z-index:4;background:var(--panel);
  border-right:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.sem-rej-cab{position:sticky;top:0;z-index:3;background:var(--panel);border:none;
  border-bottom:1px solid var(--borde);border-left:1px solid var(--borde);cursor:pointer;
  font-family:inherit;padding:7px 0 6px;display:flex;flex-direction:column;align-items:center;gap:1px}
.sem-rej-cab .sem-dia-n{font-size:15px}
.sem-rej-cab.hoy .sem-dia-n{color:var(--acento);font-weight:700}
.sem-rej-cab.sel{background:var(--panel2)}
.sem-rej-horas{position:sticky;left:0;z-index:2;background:var(--panel);
  border-right:1px solid var(--borde)}
.sem-rej-horas span{position:absolute;left:0;width:44px;text-align:right;padding-right:5px;
  transform:translateY(-6px);font-size:9.5px;color:var(--tenue);white-space:nowrap}
.sem-rej-col{position:relative;border-left:1px solid var(--borde)}
.sem-rej-col.hoy{background:var(--acento-suave)}
.sem-rej-col.ida{opacity:.55}
.sem-rej-raya{position:absolute;left:0;right:0;height:1px;background:var(--borde);opacity:.6}

/* El bloque de SALIR no es un adorno: ocupa su renglon en la columna, igual
   que cualquier otra cosa que hay que hacer a una hora. */
.sem-rej-salir{position:absolute;left:2px;right:2px;height:15px;border-radius:4px;
  background:var(--texto);color:var(--panel);font-size:8.5px;line-height:15px;
  padding:0 5px;white-space:nowrap;overflow:hidden;z-index:1}
.sem-rej-salir span{font-weight:700;margin-right:3px}

.sem-rej-b{position:absolute;border:none;border-left:3px solid var(--borde);
  border-radius:6px;background:var(--panel2);cursor:pointer;font-family:inherit;text-align:left;
  padding:3px 5px;overflow:hidden;display:flex;flex-direction:column;gap:1px;z-index:1}
.sem-rej-b.verde{border-left-color:var(--verde)}
.sem-rej-b.dorado{border-left-color:var(--dorado-solido)}
.sem-rej-b.acento{border-left-color:var(--acento)}
.sem-rej-b.tenue{border-left-color:var(--tenue)}
/* Rayado = la duracion es una estimacion, no un dato. En una rejilla el
   TAMANO es la informacion: un bloque que miente de tamano hace creer que
   hay hueco donde no lo hay, asi que se dice cual esta medido y cual no. */
.sem-rej-b.est{background:repeating-linear-gradient(135deg,var(--panel2),var(--panel2) 5px,
  transparent 5px,transparent 10px)}
.sem-rej-b.sel{outline:2px solid var(--acento);outline-offset:-1px}
.sem-rej-h{font-size:9px;color:var(--suave);font-weight:600}
.sem-rej-t{font-size:10.5px;line-height:1.2;color:var(--texto);overflow:hidden}
.sem-rej-panel{margin-bottom:11px}

/* --- De 700 px para arriba (iPad): la semana al lado del día ------------- */
@media (min-width:700px){
  /* La fila "sel" es para el interruptor de plantilla. Sin ella, .sem-plantillas
     no encajaba en ninguna area nombrada y el navegador lo mandaba a una fila
     IMPLICITA, al final de todo: en el iPad quedaba en y=729 de 768, tapado por
     la barra de abajo. O sea, el mismo problema que lo trajo ("no encontre como
     cambiar entre plantillas"), resuelto en el telefono y vivo en el iPad.
     Rejilla ya tenia su fila; Cinta no. Ruta no la necesita: ahi el .sem no es
     grid y el interruptor cae solo donde va. */
  .sem.es-cinta{display:grid;grid-template-columns:330px minmax(0,1fr);
    grid-template-areas:"top top" "acc acc" "sel sel" "cinta salida" "cinta lista";
    column-gap:22px;align-items:start}
  .sem.es-cinta .sem-top{grid-area:top}
  .sem.es-cinta .sem-acciones, .sem.es-rejilla .sem-acciones{grid-area:acc}
  .sem.es-cinta .sem-mandos{grid-area:sel;max-width:340px}
  .sem.es-cinta .sem-cinta{grid-area:cinta;grid-template-columns:1fr;gap:2px;
    border-right:1px solid var(--borde);padding-right:16px}
  .sem.es-cinta .sem-dia{flex-direction:row;align-items:center;gap:12px;padding:10px 12px;min-height:44px}
  .sem.es-cinta .sem-dia-l{width:26px;text-align:left}
  .sem.es-cinta .sem-dia-n{width:28px;text-align:right}
  .sem.es-cinta .sem-puntos{margin-left:auto}
  .sem.es-cinta .sem-salida{grid-area:salida}
  .sem.es-cinta .sem-lista{grid-area:lista}
  .sem.es-cinta .sem-salida-hora{font-size:60px}

  .sem.es-ruta .sem-ruta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;
    align-items:start}
  .sem.es-ruta .sem-tarjeta.abierta{grid-column:1 / -1;order:-1}

  /* En el iPad caben los siete dias de una: ya no hace falta correrla de
     lado, y el panel de abajo se pone al lado de la rejilla. */
  .sem.es-rejilla{display:grid;grid-template-columns:minmax(0,1fr) 330px;
    grid-template-areas:"top top" "acc acc" "sel sel" "rej panel";column-gap:18px;align-items:start}
  .sem.es-rejilla .sem-top{grid-area:top}
  .sem.es-rejilla .sem-mandos{grid-area:sel;max-width:340px}
  .sem.es-rejilla .sem-rej{grid-area:rej;margin-bottom:0}
  /* El panel y los "sin hora" van en UN solo hijo del grid: dos hermanos con
     la misma `grid-area` se pintan uno ENCIMA del otro, no uno debajo --
     se vio en el iPad, con los chips tapando las herramientas. */
  .sem.es-rejilla .sem-rej-lado{grid-area:panel;display:flex;flex-direction:column;gap:10px}
  .sem.es-rejilla .sem-rej-lado .sem-salida,
  .sem.es-rejilla .sem-rej-lado .sem-rej-panel,
  .sem.es-rejilla .sem-rej-lado .sem-fijos{margin:0}
  .sem.es-rejilla .sem-rej-scroll{max-height:64vh}
  .sem.es-rejilla .sem-rej-malla{grid-template-columns:52px repeat(7,minmax(0,1fr))}
  .sem.es-rejilla .sem-rej-t{font-size:11.5px}
  .sem.es-rejilla .sem-plantillas button{font-size:13px}
}

/* ===========================================================================
   LA MISMA PIEL EN "EL DÍA" Y EN EL MES (22 de septiembre de 2026).

   No son plantillas nuevas: son las MISMAS pantallas de siempre, con todo lo
   que hacían -- el lenguaje natural, los chips de clasificar de un toque, el
   aviso de lo que se pisa, la ruta del día, el cartel de Editar/Ver/Borrar,
   los feriados del mes -- vestidas con el lenguaje de la semana.

   Por eso las dos llevan también la clase `sem`: de ahí sacan las cifras
   tabulares y los mismos tonos, sin repetir una sola regla.
   =========================================================================== */

/* --- EL DÍA -------------------------------------------------------------- */
/* La fecha larga ("Lunes 21 de septiembre de 2026") es mucho más larga que
   el rango de la semana, así que aquí va un punto más chica y con aire
   garantizado frente a los botones: sin eso se pegaba al "‹". */
.dia-piel .sem-rango{font-size:17px;font-weight:600;letter-spacing:-.01em;
  line-height:1.2;padding-right:10px}
.dia-piel .sem-top{gap:12px}
.dia-piel .sem-nav{flex-shrink:0}
.dia-piel .sem-salida{margin-bottom:12px}

/* La caja de escribir en lenguaje natural: sigue siendo la primera cosa de
   la pantalla después de la hora de salir, porque es por donde entra todo. */
.dia-piel .campo label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tenue)}
.dia-piel .campo input{border-radius:12px}
.dia-piel .aviso-linea{border-radius:14px}

/* La lista: tarjetas, no renglones. El "aire por hueco" (el margin-top que
   calcula margenPorHueco en dia.js) SIGUE FUNCIONANDO -- se suma al gap, así
   que un tramo apretado del día se sigue viendo apretado.

   La línea de tiempo vertical que cruzaba los íconos sí se va: cruzaba por
   encima del fondo de cada tarjeta y ahí ya no separaba nada. */
.dia-piel .dia-lista{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:7px}
.dia-piel .dia-lista::before{display:none}
/* `display:block` a propósito: `.lista li` es flex por defecto (estilos.css,
   arriba), y con eso las herramientas y el pie de la tarjeta se colocaban AL
   LADO del renglón en vez de debajo -- quedaban aplastados a cero de ancho y
   no se veían. Se vio en pantalla. */
.dia-piel .dia-linea{display:block;background:var(--panel);border-radius:14px;
  overflow:hidden;border-left:3px solid var(--borde);padding:0;margin-left:0;
  border-bottom:none;align-items:stretch;gap:0}
.dia-piel .dia-linea.verde{border-left-color:var(--verde)}
.dia-piel .dia-linea.dorado{border-left-color:var(--dorado-solido)}
.dia-piel .dia-linea.acento{border-left-color:var(--acento)}
.dia-piel .dia-linea.tenue{border-left-color:var(--tenue)}
.dia-piel .dia-linea.abierto{box-shadow:var(--sombra)}
.dia-piel .dia-linea.abierto .t1{font-size:15.5px;font-weight:600}
/* El huérfano (sin hora, con el día ya ocupado) se sigue distinguiendo, pero
   por el borde de la tarjeta, no por un filete pegado por fuera. */
.dia-piel .dia-linea.es-huerfano{border-left-color:var(--ambar);padding-left:0;margin-left:0}

.dia-piel .dia-fila{display:flex;gap:11px;padding:12px 14px;align-items:flex-start}
.dia-piel .dia-hora{width:56px;flex-shrink:0;font-size:14.5px;font-weight:600;
  color:var(--texto);padding-top:1px}
.dia-piel .dia-hora i{font-style:normal;font-size:10px;color:var(--tenue);
  font-weight:400;margin-left:2px}
.dia-piel .dia-ico{flex-shrink:0;width:22px;height:22px;font-size:12px}
.dia-piel .dia-fila .txt{flex-grow:1;min-width:0}
.dia-piel .dia-fila .t1{font-size:14.5px;font-weight:500}
/* El detalle SE DEJA ENVOLVER. `.t2` viene con nowrap + ellipsis de la lista
   vieja, y en una tarjeta con hora, ícono y monto al lado le quedaban 99px:
   "Sonido · Boda · Casa de Campo, La Romana" se cortaba en "Sonido · Boda
   · …" y el lugar -- que es lo único que hace falta para llegar --
   desaparecía. Dos renglones y se acabó. */
.dia-piel .dia-fila .t2{font-size:12px;color:var(--suave);margin-top:2px;
  white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dia-piel .dia-monto{font-size:13px;font-weight:600;color:var(--verde);flex-shrink:0}
.dia-piel .dia-pend{flex-shrink:0}
.dia-piel .pre-tit{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tenue);margin:16px 0 7px}
.dia-piel .dia-ruta{margin:8px 0 0}

/* --- EL MES -------------------------------------------------------------- */
/* Italiana se queda en el nombre del mes, que es un nombre. El año sale de
   ahí: es un número, y los números de Italiana se deforman. */
.mes-piel .cal-cab h2 span{font-family:'Jost',system-ui,sans-serif;font-size:15px;
  font-weight:400;color:var(--suave);margin-left:9px;letter-spacing:.02em}
.mes-piel .cal-nav{border-radius:10px;background:var(--panel2);border-color:transparent}
.mes-piel .cal-nav:hover{background:var(--borde)}
.mes-piel .mes-diasem{color:var(--tenue);font-size:10px}
.mes-piel .mes-filas{gap:5px}
.mes-piel .dia-celda{border-radius:12px}
.mes-piel .dia-num{font-size:14.5px;font-weight:500}
.mes-piel .dia-celda.hoy{background:var(--acento)}
.mes-piel .dia-celda.hoy .dia-num{font-size:18px}
.mes-piel .cal-leyenda{border-top:1px solid var(--borde);padding-top:12px}

/* ===========================================================================
   EL PROGRAMA: QUE SE PUEDA TOCAR, Y QUE LA FIRMA NO SE MUEVA.
   23 de septiembre de 2026.

   Dos cosas que él reportó el mismo día, y que salieron de MIRAR la pantalla:

   1) "No hay forma de quitar lo que no se va a usar."
      Sí la había -- un × en cada fila -- pero la hoja se dibuja a ESCALA
      (0.38 en un teléfono, ver --da-zoom), y todo lo de dentro se encoge con
      ella: ese botón medía 7.6 x 7.6 píxeles, con las filas a 7 px una de
      otra. No es que no existiera: es que no se le podía dar.

   2) "El programa debe mantener la elegancia... la firma nunca se mueve del
      fondo de la página."
      Con el programa corto de Odette -- sin escalas, sin barroco, sin
      estudios -- el pie subía hasta pegarse a la última sección y dejaba
      media hoja en blanco debajo.
   =========================================================================== */

/* --- 1. LOS BOTONES NO SE ENCOGEN CON EL PAPEL ---------------------------
   Se deshace la escala de la hoja sobre el propio botón, así mide lo mismo
   en pantalla sea cual sea el zoom. 44px es el mínimo con el que un dedo
   acierta; aquí se llega con el área táctil, sin agrandar el dibujo.
   La marca de "hay que tocar esto" solo existe en edición, así que nada de
   esto sale nunca en el PDF. */
.da-marco{--da-anti:calc(1 / var(--da-zoom, .62))}
.doc-acciones .doc-quitar,
.doc-acciones .doc-mas,
.doc-quitar-li,
.pe-quitar,
.doc-quitar-sec{
  transform:scale(var(--da-anti, 1));
  transform-origin:center;
  position:relative;
}
/* El área que responde al dedo, más grande que el círculo que se ve. */
.doc-acciones .doc-quitar::after,
.doc-acciones .doc-mas::after,
.doc-quitar-li::after,
.pe-quitar::after,
.doc-quitar-sec::after{
  content:"";position:absolute;top:50%;left:50%;
  width:26px;height:26px;transform:translate(-50%,-50%);
}
/* Separados entre sí, o al agrandarlos se pisan. */
.doc-acciones{gap:9pt}

/* EL × DE LA SECCIÓN ENTERA -- el que quita "Escalas" o "Barroco" completos,
   no una pieza. Va al lado del título, que es donde se mira, y no en un
   botón escondido en otra pantalla ("Ajustar bloques", donde llevaba
   semanas sin que nadie lo encontrara). Se distingue del de una pieza por
   el color: este es de aviso, porque se lleva todo lo de dentro. */
.doc-quitar-sec{
  width:15pt;height:15pt;border:none;border-radius:50%;cursor:pointer;
  font-size:12pt;line-height:1;display:inline-flex;align-items:center;
  justify-content:center;margin-left:7pt;vertical-align:middle;
  background:var(--docq-bg,#0002);color:var(--docq-color,#000);
  opacity:.75;font-family:inherit;flex:none;
}
.doc-quitar-sec:hover{opacity:1;background:#a63d2f;color:#fff}

/* --- 2. LA FIRMA, PEGADA AL FONDO ---------------------------------------
   La hoja pasa a ser una columna: el cuerpo se estira con lo que haya y el
   pie se va abajo del todo. Un programa de tres secciones y uno de seis
   terminan firmados en el mismo sitio -- que es lo que hace que los dos
   parezcan el mismo papel. `margin-top:auto` en el pie es lo que lo empuja;
   el min-height de 11in ya estaba puesto en las cuatro hojas. */
.doc-cons-hoja, .pe-hoja, .doc-studio-hoja, .doc-edit-hoja{
  display:flex;flex-direction:column;
}
.doc-cons-footer, .pe-pie, .doc-studio-footer, .doc-edit-footer{
  margin-top:auto;
}
/* Un respiro antes del pie cuando el programa es corto, para que no quede
   pegado a la última sección ni bailando en medio de la nada. */
.doc-cons-footer{padding-top:14pt}
.pe-pie{padding-top:12pt}

/* El encabezado editable: la institución y el departamento se escriben
   encima, como todo lo demás del papel. Sin esto, un campo vacío no tiene
   alto y no hay dónde tocar para escribir. */
.doc-cons-inst[contenteditable], .pe-inst[contenteditable],
.doc-cons-dep[contenteditable], .pe-dep[contenteditable],
.doc-studio-instnom[contenteditable], .doc-studio-depnom[contenteditable],
.doc-edit-instnom[contenteditable], .doc-edit-depnom[contenteditable]{
  display:block;min-width:40pt;min-height:1.1em;
}
.doc-studio-instnom, .doc-edit-instnom{display:inline-block}

/* --- 3. EN EDICIÓN, LOS RENGLONES DE TÉCNICA RESPIRAN -------------------
   Medido en el teléfono: los × de escalas/arpegios/ejercicios quedaban a
   6.8 px uno de otro (la hoja se dibuja al 38%, y ahí un renglón de una
   línea mide 7 px de alto). Agrandar el botón sin agrandar el renglón solo
   hace que se pisen entre ellos y se le dé al equivocado.

   Así que en EDICIÓN el renglón crece hasta que quepa el dedo. En el PDF no
   -- `.ed` solo existe mientras se edita, así que el papel que se entrega
   sale igual de apretado y elegante que siempre. */
.doc-cons-tec-lista.ed li,
.doc-studio-tec-lista.ed li,
.doc-edit-tec-lista.ed li,
.pe-vinetas-ed li{
  min-height:46pt;display:flex;align-items:center;flex-wrap:wrap;
  border-bottom:.5pt dashed var(--doca-borde,#999);
  padding-top:3pt;padding-bottom:3pt;
}
.doc-cons-tec-lista.ed li:last-child,
.doc-studio-tec-lista.ed li:last-child,
.doc-edit-tec-lista.ed li:last-child,
.pe-vinetas-ed li:last-child{border-bottom:none}
/* El ⋯ y el × de un renglón de técnica van uno al lado del otro a la
   izquierda; con el renglón alto ya no hace falta que se monten encima. */
.doc-cons-tec-lista.ed li > .doc-acciones,
.doc-studio-tec-lista.ed li > .doc-acciones,
.doc-edit-tec-lista.ed li > .doc-acciones,
.pe-vinetas-ed li > .doc-acciones{top:50%;transform:translateY(-50%)}

/* ==========================================================================
   LA PIEL DE LA AGENDA, SEGUNDA CAPA -- 23 de septiembre de 2026

   Sale de la propuesta que Porfirio trabajo en /design. Al revisarla apareci
   algo que ahorro la mitad del trabajo: los cuatro colores que proponia --
   verde bosque #1E3A32, bronce #8C6A3A, arena #D6C29A, salvia #A9C2AE -- YA
   eran los de la app (ver el bloque "COLOR CON OFICIO EN EL PANEL", arriba:
   --m-alumnos, --bronce, --arena). Hasta el modo oscuro coincidia exacto
   (#141D1A de fondo, #EDEAE1 de texto, #33443C de borde). Los dos habiamos
   salido del mismo sitio: sus documentos.

   Asi que aqui NO hay paleta nueva. Lo que si faltaba era la VOZ: la app se
   pinta con la letra del sistema, y lo que hacia que ese diseno se viera
   distinto era el serif de los titulos y el aire entre las cosas.

   POR QUE EL SERIF NO VA EN TODO. La propuesta usaba Lora tambien para el
   cuerpo. No se tomo, por dos razones que se ven en el telefono: las horas
   van en columna y tienen que alinearse (la letra del sistema trae numeros
   de ancho fijo de verdad, Cormorant no), y a 12-13px un serif se lee peor
   que el system font en una pantalla chica. Entonces: serif para los
   NOMBRES y para la hora grande; sistema para todo lo que sea numero en fila
   o texto chico.

   Alcance: La semana (las tres plantillas), El dia y El mes. Nada de esto
   sale de .sem / .dia-piel / .mes-piel, asi que Balance, Los Mios, El
   Artista, Capitale y los documentos quedan intactos.
   ========================================================================== */
.sem, .dia-piel, .mes-piel{
  --ag-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

/* --- La voz: serif en los nombres y en la hora grande -------------------- */
.sem .sem-rango, .dia-piel .sem-rango,
.sem .sem-dia-n, .mes-piel .dia-num,
.sem .sem-t1, .dia-piel .dia-fila .t1,
.mes-piel .cal-cab h2{
  font-family:var(--ag-display);
}

/* El serif pide mas cuerpo para pesar lo mismo que la letra del sistema:
   a igual tamano se ve mas chico, porque su altura de x es menor. */
/* 22px y no mas: medido en el telefono (207px de ancho util), es el tope
   que deja "21 - 27 de septiembre" en UNA linea. Una semana que cruza de mes
   ("28 de septiembre - 4 de octubre") se parte en dos -- pero ya se partia
   antes, a 19px con la letra del sistema, asi que no se empeoro nada. */
.sem .sem-rango{
  font-size:22px; font-weight:500; letter-spacing:0; line-height:1.12;
  text-wrap:balance;
}
/* El dia lleva su propio tamano: ahi el titulo no es un rango corto sino
   "Miercoles 23 de septiembre de 2026", casi el triple de largo. A 22px se
   partia en dos renglones; 19px de Cormorant pesa como los 17px de la letra
   del sistema que tenia, porque el serif tiene la x mas baja. */
.dia-piel .sem-rango{
  font-size:19px; font-weight:500; letter-spacing:0; line-height:1.18;
  text-wrap:balance;
}
.sem .sem-dia-n{ font-size:21px; font-weight:500; }
.sem .sem-t1{ font-size:17.5px; font-weight:500; line-height:1.25; }
.dia-piel .dia-fila .t1{ font-size:17.5px; font-weight:500; line-height:1.25; }
.mes-piel .cal-cab h2{ font-weight:500; letter-spacing:0; }
.mes-piel .dia-num{ font-size:15.5px; font-weight:500; }

/* La hora de salir es el dato mas mirado de la pantalla, asi que es la que
   mas gana con el serif ligero -- es el mismo peso 300 de la propuesta. */
.sem .sem-salida-hora, .dia-piel .sem-salida-hora{
  font-family:var(--ag-display); font-size:60px; font-weight:300;
  letter-spacing:-.01em;
}
.sem .sem-salida-hora span, .dia-piel .sem-salida-hora span{
  font-family:var(--ag-display); font-size:22px; font-weight:500;
}
.sem .sem-salida.compacta .sem-salida-hora{ font-size:44px; }

/* El rotulo de arriba, en version cintillo: mayuscula chica y espaciada, que
   es como se rotula en una hoja de ruta de produccion. */
.sem .sem-salida-et, .dia-piel .sem-salida-et{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
}

/* --- El aire ------------------------------------------------------------
   Lo que mas separaba a la propuesta de lo que habia no era el color: era
   cuanto respiraba cada cosa. Se sube el interlineado de las tarjetas y se
   separan los dias de la tira. */
.sem .sem-bloque-cab{ padding:14px 15px; gap:12px; }
.sem .sem-bloque{ border-radius:15px; }
.sem .sem-t2, .dia-piel .dia-fila .t2{ margin-top:2px; line-height:1.45; }
.sem .sem-salida{ padding:18px 18px 16px; }
.dia-piel .dia-fila{ gap:12px; }

/* El interruptor de plantilla: se queda segmentado (se elige entre tres
   cosas que solo se distinguen viendolas, y un segmentado dice cual esta
   puesta sin leer), pero con el mismo cintillo en mayuscula del resto. */
.sem .sem-plantillas button{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
}
.sem .sem-plantillas button.sel{ font-weight:600; }

/* --- El salto de letra --------------------------------------------------
   Mientras Cormorant baja, el navegador pinta con Georgia (el respaldo).
   size-adjust hace que Georgia ocupe casi exactamente lo mismo, asi que al
   llegar la buena el texto no se reacomoda: cambia la forma, no el sitio.
   Es lo que se puede hacer sin servir la fuente desde el propio Worker. */
@font-face{
  font-family:'Cormorant respaldo';
  src:local('Georgia'), local('Times New Roman'), local('serif');
  size-adjust:88%; ascent-override:95%; descent-override:26%;
}
.sem, .dia-piel, .mes-piel{
  --ag-display:'Cormorant Garamond', 'Cormorant respaldo', Georgia, serif;
}

/* --- Las cifras -----------------------------------------------------------
   Esto no se ve hasta tener la fuente puesta: Cormorant Garamond trae por
   defecto CIFRAS DE TEXTO (oldstyle) -- el 9 y el 4 bajan de la linea, el 1
   y el 2 miden como una x. En un parrafo de libro es precioso; en una tira
   de fechas es un desastre, porque "21 22 23 24 25 26 27" queda a siete
   alturas distintas, y "9:45" se lee torcido justo en el dato que se mira
   de reojo.

   La fuente SI trae cifras de caja alta (comprobado: el ancho de 0123456789
   pasa de 430 a 459px con lnum), asi que se piden. Va despues de `.sem .n`
   -- misma especificidad, gana la de mas abajo -- para poder sumar la caja
   alta a los numeros de ancho fijo que ya estaban pedidos ahi. */
.sem .sem-rango, .sem .sem-dia-n, .sem .sem-salida-hora,
.dia-piel .sem-rango, .dia-piel .sem-salida-hora,
.mes-piel .dia-num, .mes-piel .cal-cab h2{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1, "tnum" 1;
}

/* ==========================================================================
   LA HOJA DE RUTA DE UN EVENTO  ·  23 de septiembre de 2026

   Segunda mitad de la propuesta de /design. El prefijo es `hdr-` y no `hr-`
   porque `hr-` ya es de "hora" (hr-num, hr-ampm, el selector de hora): un
   prefijo de dos letras se agota rapido, y la ultima vez que dos cosas
   compartieron nombre (.rejilla) la semana entera se partio en dos columnas
   en el telefono sin que nadie entendiera por que.

   Se monta DENTRO de .sem a proposito, para heredar la piel de la agenda
   -- Cormorant en los nombres, cifras de caja alta, los mismos colores --
   sin repetir una sola declaracion. Por eso el interruptor de arriba es
   .sem-plantillas tal cual: es el mismo gesto de la semana, y se ve igual
   porque ES igual.
   ========================================================================== */
.hdr{padding-bottom:4px}
.hdr .hdr-cambio{margin-bottom:14px}
.hdr .hdr-cambio{grid-template-columns:repeat(2,minmax(0,1fr))}

.hdr-cab{margin-bottom:14px}
.hdr-cuando{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acento);margin-bottom:4px}
.hdr-cab .sem-rango{display:block}
.hdr-donde{font-size:13.5px;color:var(--suave);margin-top:3px}
.hdr-ets{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.hdr-et{display:inline-flex;align-items:center;height:27px;padding:0 12px;
  border:1px solid var(--borde);border-radius:999px;font-size:12px;
  color:var(--suave);font-variant-numeric:tabular-nums}
.hdr-et.cobrado{border-color:var(--verde);color:var(--verde)}

/* --- Los apartados ------------------------------------------------------
   Una columna en el telefono; dos cuando hay sitio. Nada de tarjetas con
   sombra: una raya fina debajo del titulo, como una hoja de produccion. */
.hdr-rejilla{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:16px}
.hdr-bloque{min-width:0}
.hdr-bloque-t{display:flex;align-items:center;gap:8px;margin:0 0 8px;
  padding-bottom:7px;border-bottom:1px solid var(--borde);
  font-family:var(--ag-display);font-size:18px;font-weight:500;line-height:1.2}
.hdr-bloque-t svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--acento);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* El contador NO hereda el serif del titulo: es un numero, y un numero en
   Cormorant a 12px se lee como adorno. Va en la letra del sistema, que es
   donde vive todo lo que hay que leer de un vistazo. */
.hdr-cuenta{margin-left:auto;font-style:normal;font-size:12px;font-weight:500;
  color:var(--suave);letter-spacing:.02em;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif}

.hdr-lista{list-style:none;margin:0;padding:0}
.hdr-lista>li{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;padding:9px 0;border-bottom:1px solid var(--borde);font-size:14.5px}
.hdr-lista>li:last-child{border-bottom:0}
.hdr-lista i{font-style:italic;font-size:13px;color:var(--suave)}
.hdr-tel{display:inline-flex;align-items:center;gap:6px;min-height:40px;
  font-size:13.5px;color:var(--acento);text-decoration:none;flex:none}
.hdr-tel svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* --- El cronograma: una linea de tiempo, no una lista -------------------- */
.hdr-linea{list-style:none;margin:0;padding:0 0 0 22px;position:relative}
.hdr-linea::before{content:"";position:absolute;left:4px;top:16px;bottom:16px;
  width:1px;background:var(--arena)}
.hdr-paso{position:relative;display:grid;grid-template-columns:74px minmax(0,1fr);
  gap:10px;align-items:baseline;padding:7px 0}
.hdr-paso::before{content:"";position:absolute;left:-22px;top:13px;width:9px;height:9px;
  box-sizing:border-box;border:1px solid var(--acento);border-radius:50%;
  background:var(--panel)}
.hdr-paso-h{font-size:14px;font-variant-numeric:lining-nums tabular-nums}
.hdr-paso-t{font-size:14px}
/* El paso clave es el evento en si: lo demas del dia existe para llegar a el. */
.hdr-paso.clave::before{background:var(--acento);
  box-shadow:0 0 0 4px color-mix(in oklch, var(--acento) 20%, transparent)}
.hdr-paso.clave .hdr-paso-t{font-family:var(--ag-display);font-size:18px;
  font-weight:500;line-height:1.2}

/* --- Lo que hay que cargar: se marca al meterlo en el carro -------------- */
.hdr-cargar>li{padding:0;border-bottom:0}
.hdr-marca{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;
  border:0;background:none;padding:0;cursor:pointer;font:inherit;text-align:left;
  color:var(--suave);border-bottom:1px solid var(--borde)}
.hdr-cargar>li:last-child .hdr-marca{border-bottom:0}
.hdr-caja{display:grid;place-items:center;width:17px;height:17px;flex:none;
  border:1px solid var(--tenue);border-radius:5px}
.hdr-caja svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:0}
.hdr-marca-t{font-size:14.5px;min-width:0}
.hdr-marca[aria-pressed="true"]{color:var(--texto)}
.hdr-marca[aria-pressed="true"] .hdr-caja{border-color:var(--acento);color:var(--acento)}
.hdr-marca[aria-pressed="true"] .hdr-caja svg{opacity:1}

.hdr-notas{margin-top:18px;padding-top:12px;border-top:1px solid var(--borde)}
.hdr-notas b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.hdr-notas p{margin:5px 0 0;font-size:14px;line-height:1.5;white-space:pre-wrap}

/* De 700px para arriba (iPad): dos apartados por fila. */
@media (min-width:700px){
  .hdr-rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 34px}
  .hdr .hdr-cambio{max-width:340px}
}

/* ==========================================================================
   LAS CUATRO PIELES DE L'AGENDA  ·  24 de septiembre de 2026

   Una PLANTILLA decide QUE se ve (Cinta, Rejilla, Ruta). Una PIEL decide
   COMO se ve. Son ejes distintos y se cruzan: `.sem.es-rejilla.piel-riel` es
   la rejilla con cara de Riel. Por eso la piel nunca toca la maquetacion de
   una plantilla -- solo letra, color, aire y que se enseña de lo que el
   marcado ya trae.

   EL MARCADO ES UNO SOLO Y TRAE DE MAS A PROPOSITO. Cada dia de la cinta
   emite los puntos, la hora de salir y la lista de sus compromisos, con
   `--m` (el minuto del dia) en cada uno. Papel y Consola encienden la lista;
   Riel la coloca sobre un eje usando `--m`; Mosaico la muestra dentro de la
   pieza. Emitir de mas cuesta unos bytes; mantener cuatro marcados costaria
   cada semana -- y ya se vio lo que pasa cuando algo se escribe dos veces
   (el interruptor de plantilla, que quedo con dos opciones en un menu y tres
   en el otro).
   ========================================================================== */

/* --- Lo que trae el marcado nuevo, apagado por defecto ------------------- */
.sem .sem-dia-evs, .sem .sem-dia-sale{display:none}
.sem-total{display:inline-flex;align-items:center;height:26px;padding:0 11px;
  margin-top:7px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;
  background:var(--verde-suave);color:var(--verde)}
.sem-top>div:first-child{min-width:0}
.sem-top .sem-nav{flex:none}
/* LOS DOS INTERRUPTORES VAN EN UN SOLO HIJO DEL GRID. Sueltos, los dos
   casaban con `.sem.es-cinta .sem-plantillas` y los dos recibian
   `grid-area:sel` -- y dos hijos en la MISMA area del grid se pintan uno
   ENCIMA del otro, no uno debajo. En la Mac solo se veia el de pieles:
   Cinta, Rejilla y Ruta quedaban tapadas debajo. Es la misma piedra del
   panel de la rejilla en el iPad, pisada otra vez. */
.sem-mandos{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.sem-mandos .sem-plantillas{margin-bottom:0}
.sem-pieles{margin:0}
.sem-pieles button{font-size:10.5px;letter-spacing:.06em}
.sem .sem-plantillas{grid-template-columns:repeat(3,minmax(0,1fr))}
.sem .sem-pieles{grid-template-columns:repeat(4,minmax(0,1fr))}
.dia-piel .sem-pieles, .mes-piel .sem-pieles{margin:0 0 14px}

/* ==========================================================================
   1 · PAPEL -- la predeterminada. Es la piel que ya estaba (Cormorant,
   cifras de caja alta, aire), mas la tira de dias con los compromisos
   DENTRO de cada columna, que era lo que faltaba del diseño original.
   ========================================================================== */
/* La cinta de Papel NO cabe en siete columnas de 50px: cada dia lleva sus
   compromisos escritos, no un punto. Se corre de lado, como la agenda de
   papel que se desdobla -- y en el iPad, donde si caben, vuelve a ser una
   rejilla de siete (ver el bloque de 700px, abajo). */
.piel-papel.es-cinta .sem-cinta{gap:0;grid-template-columns:none;
  grid-auto-flow:column;grid-auto-columns:134px;overflow-x:auto;
  scroll-snap-type:x proximity;scrollbar-width:none;
  border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.piel-papel.es-cinta .sem-cinta::-webkit-scrollbar{display:none}
.piel-papel.es-cinta .sem-dia{scroll-snap-align:start}
.piel-papel.es-cinta .sem-dia{align-items:flex-start;text-align:left;
  padding:13px 11px 15px;border-right:1px solid var(--borde);border-radius:0;
  background:none;box-shadow:none;min-width:116px}
.piel-papel.es-cinta .sem-dia:last-child{border-right:0}
.piel-papel.es-cinta .sem-dia.sel{background:var(--acento-suave);
  box-shadow:inset 0 2px 0 var(--acento)}
/* La regla base pinta el numero del dia elegido en blanco, porque alli el
   fondo es oscuro. Papel lo pone crema, asi que hay que devolverle la tinta
   -- si no, el dia de hoy queda invisible. Se vio en pantalla. */
.piel-papel.es-cinta .sem-dia.sel .sem-dia-n{color:var(--texto)}
.piel-papel.es-cinta .sem-dia.sel .sem-dia-l{color:var(--acento);opacity:1}
.piel-papel.es-cinta .sem-puntos{display:none}
.piel-papel.es-cinta .sem-dia-evs{display:flex;flex-direction:column;gap:8px;margin-top:11px;width:100%}
.piel-papel .sem-dia-ev{display:grid;grid-template-columns:6px minmax(0,1fr);
  column-gap:7px;align-items:start;text-align:left}
.piel-papel .sem-dia-ev .p{width:6px;height:6px;margin-top:5px;border-radius:50%;background:var(--tenue)}
.piel-papel .sem-dia-ev.verde .p{background:var(--verde)}
.piel-papel .sem-dia-ev.dorado .p{background:var(--dorado-solido)}
.piel-papel .sem-dia-ev.acento .p{background:var(--acento)}
.piel-papel .sem-dia-ev .h{grid-column:2;font-size:11px;color:var(--suave);margin-right:5px}
/* grid-column:2 NO es decorativo: sin el, `.t` se auto-coloca en la columna
   del punto -- 6px -- y el titulo sale a una letra por renglon. Se vio. */
.piel-papel .sem-dia-ev .t{grid-column:2;font-size:11px;line-height:1.3;color:var(--suave);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.piel-papel .sem-dia.sel .sem-dia-ev .t,
.piel-papel .sem-dia.sel .sem-dia-ev .h{color:var(--texto)}
.piel-papel .sem-dia-sale{display:flex;align-items:baseline;gap:5px;
  font-size:11px;font-weight:600;color:var(--texto);padding-bottom:3px;
  border-bottom:1px solid var(--borde);margin-bottom:2px}
.piel-papel .sem-dia-sale i{font-style:normal;font-weight:400;color:var(--suave)}

/* ==========================================================================
   2 · RIEL -- oscura, con el tiempo como eje. Cada dia es un riel de 8 AM a
   10 PM y sus compromisos se colocan por hora, asi que el hueco se VE sin
   leer. La cuenta sale de `--m`, que el marcado ya trae.
   ========================================================================== */
.piel-riel{--riel-desde:480;--riel-span:840;
  background:#141D1A;color:#EDEAE1;border-radius:16px;padding:14px 12px 16px;margin:0 -4px}
.piel-riel .sem-rango, .piel-riel .sem-dia-n, .piel-riel .sem-salida-hora,
.piel-riel .sem-t1, .dia-piel.piel-riel .dia-fila .t1, .mes-piel.piel-riel .dia-num,
.mes-piel.piel-riel .cal-cab h2{font-family:'Space Grotesk',-apple-system,sans-serif;
  font-weight:600;letter-spacing:-.02em}
.piel-riel .sem-rango{font-size:21px}
.piel-riel .sem-sub, .piel-riel .sem-t2{color:#A3B0A7}
.piel-riel .sem-total{background:#2F4038;color:#D6C29A}
.piel-riel .btn-icono{border-color:#33443C;color:#A3B0A7;background:none}
.piel-riel .sem-plantillas{background:#1D2A25}
.piel-riel .sem-plantillas button{color:#748076}
.piel-riel .sem-plantillas button.sel{background:#2F4038;color:#EDEAE1;box-shadow:none}
.piel-riel .sem-bloque, .piel-riel .sem-salida{background:#1D2A25;color:#EDEAE1;border-color:#33443C}
.piel-riel .sem-salida{border:1px solid #D6C29A}
.piel-riel .sem-salida-hora{color:#EDEAE1;font-weight:300}
.piel-riel .sem-hora, .piel-riel .sem-monto{color:#A3B0A7}
.piel-riel .sem-pill{background:#25332D;border-color:#33443C;color:#A3B0A7}

/* `.sem-cinta` es GRID en la base, asi que flex-direction no hacia nada y
   los siete dias seguian en fila, encimados sobre el riel. Se vio. */
.piel-riel.es-cinta .sem-cinta{display:flex;flex-direction:column;gap:2px;
  overflow:visible;grid-template-columns:none}
.piel-riel.es-cinta .sem-dia{display:grid;grid-template-columns:22px 28px minmax(0,1fr);
  align-items:center;gap:8px;padding:8px 10px;border-radius:9px;background:none;
  box-shadow:none;min-width:0;width:100%;text-align:left;min-height:0}
.piel-riel.es-cinta .sem-dia-l{grid-column:1}
.piel-riel.es-cinta .sem-dia-n{grid-column:2}
.piel-riel.es-cinta .sem-dia.sel{background:#1D2A25}
.piel-riel.es-cinta .sem-dia-l{font-size:9px;letter-spacing:.14em;color:#748076}
.piel-riel.es-cinta .sem-dia-n{font-size:17px;color:#EDEAE1}
.piel-riel.es-cinta .sem-puntos{display:none}
/* El riel: una raya fina, y cada compromiso clavado en su minuto. */
.piel-riel.es-cinta .sem-dia-evs{display:block;position:relative;height:34px;grid-column:3}
.piel-riel.es-cinta .sem-dia-evs::before{content:"";position:absolute;left:0;right:0;
  top:50%;height:1px;background:#33443C}
.piel-riel .sem-dia-ev{position:absolute;top:50%;transform:translateY(-50%);
  left:calc((var(--m,480) - var(--riel-desde)) / var(--riel-span) * 100%);
  width:4px;height:16px;border-radius:2px;background:var(--tenue);overflow:hidden}
.piel-riel .sem-dia-ev.verde{background:#8FBF9E}
.piel-riel .sem-dia-ev.dorado{background:#D6C29A}
.piel-riel .sem-dia-ev.acento{background:#A9C2AE}
.piel-riel .sem-dia-ev .p, .piel-riel .sem-dia-ev .h, .piel-riel .sem-dia-ev .t{display:none}
.piel-riel .sem-dia-sale{display:block;position:absolute;top:50%;
  left:calc((var(--m,480) - var(--riel-desde)) / var(--riel-span) * 100%);
  transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;
  background:#EDEAE1;font-size:0;box-shadow:0 0 0 3px #141D1A}
.piel-riel .sem-dia-sale i{display:none}

/* ==========================================================================
   3 · MOSAICO -- piezas de color. El dia pesa lo que se ve: el color sale de
   lo que domina ese dia y el elegido se pone oscuro y grande.
   ========================================================================== */
.piel-mosaico .sem-rango, .piel-mosaico .sem-dia-n, .piel-mosaico .sem-salida-hora,
.piel-mosaico .sem-t1, .dia-piel.piel-mosaico .dia-fila .t1,
.mes-piel.piel-mosaico .dia-num, .mes-piel.piel-mosaico .cal-cab h2{
  font-family:'Fraunces',Georgia,serif;font-weight:400}
.piel-mosaico .sem-rango{font-size:23px;font-weight:300}
.piel-mosaico .sem-total{background:var(--acento-suave);color:var(--acento)}

.piel-mosaico.es-cinta .sem-cinta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;overflow:visible}
.piel-mosaico.es-cinta .sem-dia{display:flex;flex-direction:column;align-items:stretch;
  text-align:left;min-width:0;padding:13px 14px 15px;border-radius:16px;
  background:var(--panel2);box-shadow:none}
.piel-mosaico.es-cinta .sem-dia.sel{background:var(--texto);color:var(--panel)}
.piel-mosaico.es-cinta .sem-dia.sel .sem-dia-l,
.piel-mosaico.es-cinta .sem-dia.sel .sem-dia-ev .h{color:var(--acento-suave)}
.piel-mosaico.es-cinta .sem-dia.sel .sem-dia-ev .t{color:var(--panel)}
.piel-mosaico.es-cinta .sem-dia-l{font-size:9.5px;letter-spacing:.15em}
.piel-mosaico.es-cinta .sem-dia-n{font-size:24px;align-self:flex-end;margin-top:-16px}
.piel-mosaico.es-cinta .sem-puntos{display:none}
.piel-mosaico.es-cinta .sem-dia-evs{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.piel-mosaico .sem-dia-ev{display:flex;gap:7px;align-items:baseline;text-align:left}
.piel-mosaico .sem-dia-ev .p{display:none}
.piel-mosaico .sem-dia-ev .h{font-size:10.5px;color:var(--suave);flex:none}
.piel-mosaico .sem-dia-ev .t{font-size:11.5px;line-height:1.3;min-width:0}
.piel-mosaico .sem-dia-sale{display:inline-flex;align-items:center;gap:4px;
  align-self:flex-start;height:21px;padding:0 8px;border-radius:999px;
  background:rgba(255,255,255,.6);font-size:10px;font-weight:600;margin-bottom:3px}
.piel-mosaico .sem-dia-sale i{font-style:normal;font-weight:400}
.piel-mosaico .sem-bloque{border-radius:16px;border-left-width:0;background:var(--panel)}
.piel-mosaico .sem-salida{border-radius:18px}

/* ==========================================================================
   4 · CONSOLA -- sin adornos, para la tarima. Letra del sistema con numeros
   de ancho fijo (nada de serif: a media luz y con el telefono en la mano es
   lo que mejor se lee), cajas de borde fino y la barra de acciones en cajas.
   ========================================================================== */
.piel-consola{--con-sis:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif}
.piel-consola .sem-rango, .piel-consola .sem-dia-n, .piel-consola .sem-salida-hora,
.piel-consola .sem-t1, .dia-piel.piel-consola .dia-fila .t1,
.mes-piel.piel-consola .dia-num, .mes-piel.piel-consola .cal-cab h2{
  font-family:var(--con-sis);font-variant-numeric:lining-nums tabular-nums}
.piel-consola .sem-rango{font-size:22px;font-weight:700;letter-spacing:-.02em}
.piel-consola .sem-salida-hora{font-weight:300;letter-spacing:-.02em}
.piel-consola .sem-t1{font-size:15px;font-weight:600}
.piel-consola .sem-total{background:var(--verde-suave);color:var(--verde);border-radius:9px}
.piel-consola .btn-icono{border-radius:9px}
.piel-consola .sem-plantillas, .piel-consola .sem-pieles{border-radius:10px}
.piel-consola .sem-plantillas button{border-radius:8px;text-transform:none;letter-spacing:0;font-size:12px}

.piel-consola.es-cinta .sem-cinta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;overflow:visible}
.piel-consola.es-cinta .sem-dia{display:flex;flex-direction:column;align-items:stretch;
  text-align:left;min-width:0;padding:10px 11px 12px;border-radius:11px;
  background:var(--panel);border:1px solid var(--borde);box-shadow:none}
.piel-consola.es-cinta .sem-dia.sel{background:var(--texto);border-color:var(--texto);color:var(--panel)}
.piel-consola.es-cinta .sem-dia.sel .sem-dia-l,
.piel-consola.es-cinta .sem-dia.sel .sem-dia-ev .h{color:var(--acento-suave)}
.piel-consola.es-cinta .sem-dia.sel .sem-dia-ev .t{color:var(--panel)}
.piel-consola.es-cinta .sem-dia-l{font-size:9px;letter-spacing:.13em;font-weight:600}
.piel-consola.es-cinta .sem-dia-n{font-size:19px;font-weight:600;align-self:flex-end;margin-top:-14px}
.piel-consola.es-cinta .sem-puntos{display:none}
.piel-consola.es-cinta .sem-dia-evs{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.piel-consola .sem-dia-ev{display:flex;gap:6px;align-items:center;text-align:left}
.piel-consola .sem-dia-ev .p{width:5px;height:5px;border-radius:50%;background:var(--tenue);flex:none}
.piel-consola .sem-dia-ev.verde .p{background:var(--verde)}
.piel-consola .sem-dia-ev.dorado .p{background:var(--dorado-solido)}
.piel-consola .sem-dia-ev.acento .p{background:var(--acento)}
.piel-consola .sem-dia-ev .h{font-size:10px;color:var(--suave);flex:none}
.piel-consola .sem-dia-ev .t{font-size:10.5px;line-height:1.25;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.piel-consola .sem-dia-sale{display:flex;align-items:baseline;gap:5px;
  font-size:10px;font-weight:700;padding-bottom:4px;margin-bottom:1px;
  border-bottom:1px solid var(--borde)}
.piel-consola .sem-dia-sale i{font-style:normal;font-weight:400;color:var(--suave)}
.piel-consola .sem-bloque{border-radius:11px;border-left-width:3px}
.piel-consola .sem-salida{border-radius:13px}
/* La barra de herramientas del bloque, en cajas: es la firma de esta piel. */
.piel-consola .sem-pie{gap:6px;padding:10px 12px 12px;border-top:1px solid var(--borde)}
.piel-consola .sem-pie-b{border:1px solid var(--borde);border-radius:11px;
  background:var(--panel);padding:10px 4px 9px;gap:6px}

/* --- De 700px para arriba (iPad y escritorio) ---------------------------
   OJO: de 700 para arriba la base NO pone los siete dias en fila -- los pone
   en una COLUMNA de 330px a la izquierda, con el dia elegido al lado. Las
   rejillas de siete y de dos de arriba son para el telefono; aqui aplastaban
   la columna y el texto salia a una letra por renglon. Se vio en el iPad.
   Asi que aqui cada piel vuelve a la columna vertical de la base, y lo unico
   que cambia es como se viste cada renglon. */
@media (min-width:700px){
  .piel-papel.es-cinta .sem-cinta,
  .piel-mosaico.es-cinta .sem-cinta,
  .piel-consola.es-cinta .sem-cinta{display:grid;grid-template-columns:minmax(0,1fr);
    grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible;gap:3px;
    border-top:0;border-bottom:0}

  /* Cada dia: la etiqueta y el numero a la izquierda, sus compromisos al lado. */
  .piel-papel.es-cinta .sem-dia,
  .piel-mosaico.es-cinta .sem-dia,
  .piel-consola.es-cinta .sem-dia{display:grid;
    grid-template-columns:26px 30px minmax(0,1fr);align-items:center;gap:10px;
    min-width:0;padding:9px 11px;text-align:left;min-height:46px}
  .piel-papel.es-cinta .sem-dia-l,
  .piel-mosaico.es-cinta .sem-dia-l,
  .piel-consola.es-cinta .sem-dia-l{grid-column:1;margin:0}
  .piel-papel.es-cinta .sem-dia-n,
  .piel-mosaico.es-cinta .sem-dia-n,
  .piel-consola.es-cinta .sem-dia-n{grid-column:2;margin:0;align-self:center;font-size:20px}
  .piel-papel.es-cinta .sem-dia-evs,
  .piel-mosaico.es-cinta .sem-dia-evs,
  .piel-consola.es-cinta .sem-dia-evs{grid-column:3;margin:0;gap:3px;min-width:0}

  /* En una fila estrecha, cada compromiso es UNA linea: hora y titulo
     seguidos, cortados con puntos suspensivos. Dos renglones por evento
     harian la columna el doble de alta y solo cabrian tres dias. */
  .piel-papel.es-cinta .sem-dia-ev{display:flex;align-items:baseline;gap:6px;
    grid-template-columns:none}
  .piel-papel.es-cinta .sem-dia-ev .p{margin-top:0;align-self:center}
  .piel-papel.es-cinta .sem-dia-ev .h,
  .piel-mosaico.es-cinta .sem-dia-ev .h,
  .piel-consola.es-cinta .sem-dia-ev .h{grid-column:auto;flex:none;margin:0}
  .piel-papel.es-cinta .sem-dia-ev .t,
  .piel-mosaico.es-cinta .sem-dia-ev .t,
  .piel-consola.es-cinta .sem-dia-ev .t{grid-column:auto;display:block;
    -webkit-line-clamp:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .piel-papel.es-cinta .sem-dia-sale,
  .piel-mosaico.es-cinta .sem-dia-sale,
  .piel-consola.es-cinta .sem-dia-sale{border:0;padding:0;margin:0;background:none}
  .piel-mosaico.es-cinta .sem-dia,
  .piel-consola.es-cinta .sem-dia{border-radius:11px}

  .piel-riel.es-cinta .sem-dia-evs{height:40px}
  .piel-riel{margin:0;border-radius:14px}
}

/* ==========================================================================
   LAS PIELES EN "EL DIA" Y EN "EL MES"  ·  24 de septiembre de 2026

   Lo que faltaba, y el numero lo decia solo: de 115 reglas de piel, 112 eran
   de La semana, 3 del dia (y las tres, font-family) y CERO del mes. Por eso
   el mes no cambiaba nada -- no es que cambiara poco, es que no habia nada
   escrito. Aqui se escribe.
   ========================================================================== */

/* --- EL DIA, las cuatro --------------------------------------------------- */

/* 1 · PAPEL: sin tarjetas. Rayas finas y una linea de tiempo a la izquierda,
   como el renglon de una hoja de produccion. */
.dia-piel.piel-papel .dia-lista{padding-left:20px;position:relative}
.dia-piel.piel-papel .dia-lista::after{content:"";position:absolute;left:3px;
  top:14px;bottom:14px;width:1px;background:var(--arena)}
.dia-piel.piel-papel .dia-linea{background:none;border:0;border-left:0;
  border-bottom:1px solid var(--borde);border-radius:0;box-shadow:none;
  padding:12px 0;position:relative}
.dia-piel.piel-papel .dia-linea:last-child{border-bottom:0}
.dia-piel.piel-papel .dia-linea::before{content:"";position:absolute;left:-20px;
  top:19px;width:9px;height:9px;box-sizing:border-box;border-radius:50%;
  border:1px solid var(--acento);background:var(--fondo)}
.dia-piel.piel-papel .dia-linea.verde::before{border-color:var(--verde);background:var(--verde)}
.dia-piel.piel-papel .dia-linea.tenue::before{border-style:dashed;border-color:var(--tenue)}
.dia-piel.piel-papel .dia-ico{display:none}
.dia-piel.piel-papel .dia-hora{color:var(--suave);font-weight:400}
.dia-piel.piel-papel .sem-pill{background:none;border:1px solid var(--borde);
  border-radius:999px;color:var(--suave)}
.dia-piel.piel-papel .sem-pie{border-top:1px solid var(--borde);background:none}
.dia-piel.piel-papel .sem-pie-b{background:none;border:0}

/* 2 · RIEL: oscura. Cada cosa es un bloque con su tapa de color y la hora
   en una columna fija a la izquierda, como un renglon de consola. */
.dia-piel.piel-riel{background:#141D1A;color:#EDEAE1;border-radius:16px;
  padding:14px 12px 18px;margin:0 -4px}
.dia-piel.piel-riel .sem-rango{color:#EDEAE1}
.dia-piel.piel-riel .sem-sub, .dia-piel.piel-riel .dia-fila .t2,
.dia-piel.piel-riel .pre-tit, .dia-piel.piel-riel .dia-hora{color:#A3B0A7}
.dia-piel.piel-riel .btn-icono{border-color:#33443C;color:#A3B0A7;background:none}
.dia-piel.piel-riel .sem-plantillas{background:#1D2A25}
.dia-piel.piel-riel .sem-plantillas button{color:#748076}
.dia-piel.piel-riel .sem-plantillas button.sel{background:#2F4038;color:#EDEAE1;box-shadow:none}
.dia-piel.piel-riel .dia-linea{background:#1D2A25;border-radius:2px 11px 11px 2px;
  border-left:3px solid var(--tenue);margin-bottom:4px}
.dia-piel.piel-riel .dia-linea.verde{border-left-color:#8FBF9E}
.dia-piel.piel-riel .dia-linea.dorado{border-left-color:#D6C29A}
.dia-piel.piel-riel .dia-linea.acento{border-left-color:#A9C2AE}
.dia-piel.piel-riel .dia-fila .t1{color:#EDEAE1}
.dia-piel.piel-riel .dia-ico{background:#25332D;color:#A9C2AE}
.dia-piel.piel-riel .sem-pill{background:#25332D;border-color:#33443C;color:#A3B0A7}
.dia-piel.piel-riel .sem-pie{border-top:1px solid #25332D}
.dia-piel.piel-riel .sem-pie-b{color:#A3B0A7}
.dia-piel.piel-riel .aviso-linea{background:#25332D;color:#EDEAE1;border-color:#33443C}
.dia-piel.piel-riel .campo input{background:#1D2A25;border-color:#33443C;color:#EDEAE1}

/* 3 · MOSAICO: cada cosa es una pieza de color, tenida por lo que es. El
   color no es adorno -- dice de un vistazo si el dia es de clases o de
   trabajos sin leer una palabra. */
.dia-piel.piel-mosaico .dia-linea{border-radius:18px;border-left:0;
  background:var(--panel2);padding:4px 2px;margin-bottom:9px;box-shadow:none}
.dia-piel.piel-mosaico .dia-linea.verde{background:var(--verde-suave)}
.dia-piel.piel-mosaico .dia-linea.dorado{background:var(--acento-suave)}
.dia-piel.piel-mosaico .dia-linea.acento{background:var(--acento-suave)}
.dia-piel.piel-mosaico .dia-linea.tenue{background:var(--panel2)}
.dia-piel.piel-mosaico .dia-linea.abierto{background:var(--texto)}
.dia-piel.piel-mosaico .dia-linea.abierto .t1,
.dia-piel.piel-mosaico .dia-linea.abierto .dia-hora{color:var(--panel)}
.dia-piel.piel-mosaico .dia-linea.abierto .t2{color:var(--acento-suave)}
.dia-piel.piel-mosaico .dia-fila{padding:12px 14px}
.dia-piel.piel-mosaico .dia-ico{background:rgba(255,255,255,.62);color:var(--texto)}
.dia-piel.piel-mosaico .dia-fila .t1{font-size:17px}
.dia-piel.piel-mosaico .sem-pill{background:rgba(255,255,255,.62);border:0;color:var(--texto)}
.dia-piel.piel-mosaico .sem-pie{border-top:1px solid rgba(255,255,255,.55)}
.dia-piel.piel-mosaico .sem-salida{border-radius:20px}

/* 4 · CONSOLA: cajas de borde fino, hora en columna y las herramientas en
   botones cuadrados. Nada de redondeces: es la que se mira de reojo. */
.dia-piel.piel-consola .dia-linea{background:var(--panel);border:1px solid var(--borde);
  border-left:3px solid var(--tenue);border-radius:11px;margin-bottom:7px;box-shadow:none}
.dia-piel.piel-consola .dia-linea.verde{border-left-color:var(--verde)}
.dia-piel.piel-consola .dia-linea.dorado{border-left-color:var(--dorado-solido)}
.dia-piel.piel-consola .dia-linea.acento{border-left-color:var(--acento)}
.dia-piel.piel-consola .dia-linea.abierto{border-color:var(--texto);border-left-color:var(--texto)}
.dia-piel.piel-consola .dia-hora{font-weight:700;font-variant-numeric:lining-nums tabular-nums}
.dia-piel.piel-consola .dia-ico{border-radius:8px}
.dia-piel.piel-consola .sem-pill{border-radius:8px;background:var(--panel2);border:1px solid var(--borde)}
.dia-piel.piel-consola .sem-pie{gap:6px;padding:10px 12px 12px}
.dia-piel.piel-consola .sem-pie-b{border:1px solid var(--borde);border-radius:11px;
  background:var(--panel);padding:10px 4px 9px}

/* --- EL MES, las cuatro --------------------------------------------------- */

/* 1 · PAPEL: el numero manda y debajo una raya fina por cada cosa. Sin
   cajas: una cuadricula de papel, separada por rayas. */
.mes-piel.piel-papel .mes-filas{gap:0}
.mes-piel.piel-papel .dia-celda{background:none;border-radius:0;
  border-right:1px solid var(--borde);border-bottom:1px solid var(--borde);
  justify-content:flex-start;padding-top:7px}
.mes-piel.piel-papel .dia-celda.vacia{border-color:transparent}
.mes-piel.piel-papel .dia-num{font-size:16px}
.mes-piel.piel-papel .dia-celda.hoy{background:var(--acento-suave);
  box-shadow:inset 0 2px 0 var(--acento)}
.mes-piel.piel-papel .dia-celda.hoy .dia-num{color:var(--texto)}
.mes-piel.piel-papel .dia-puntos{gap:2px;margin-top:auto;padding-bottom:5px;width:74%}
.mes-piel.piel-papel .dia-puntos i{width:auto;flex-grow:1;height:2px;border-radius:1px}
.mes-piel.piel-papel .cal-cab h2{font-family:var(--ag-display);font-weight:500}

/* 2 · RIEL: el FONDO de cada celda dice cuanto pesa el dia. Con cuatro
   cosas la celda casi brilla; un dia libre se hunde. El mes se lee de lejos
   sin contar puntos. */
.mes-piel.piel-riel{background:#141D1A;border-color:#25332D}
.mes-piel.piel-riel .cal-cab h2, .mes-piel.piel-riel .dia-num{color:#EDEAE1}
.mes-piel.piel-riel .cal-cab h2 span{color:#748076}
.mes-piel.piel-riel .cal-nav{border-color:#33443C;color:#A3B0A7;background:none}
.mes-piel.piel-riel .mes-diasem{color:#748076}
.mes-piel.piel-riel .cal-leyenda{color:#A3B0A7}
.mes-piel.piel-riel .dia-celda{background:#1A241F;border-radius:8px}
.mes-piel.piel-riel .dia-celda.con-algo{background:#22302A}
.mes-piel.piel-riel .dia-celda:not(.vacia):hover{background:#2C3D35}
.mes-piel.piel-riel .dia-celda.hoy{background:#2F4038;box-shadow:inset 0 0 0 1px #D6C29A}
.mes-piel.piel-riel .dia-celda.hoy .dia-num{color:#D6C29A}
.mes-piel.piel-riel .dia-num.domingo{color:#C98B7A}
.mes-piel.piel-riel .dia-puntos{gap:2px;margin-top:auto;padding-bottom:5px;width:74%}
.mes-piel.piel-riel .dia-puntos i{width:auto;flex-grow:1;height:3px;border-radius:2px}

/* 3 · MOSAICO: piezas suaves y redondas, con el dia de hoy en oscuro. */
.mes-piel.piel-mosaico .mes-filas{gap:5px}
.mes-piel.piel-mosaico .dia-celda{border-radius:13px;background:var(--panel2)}
.mes-piel.piel-mosaico .dia-celda.con-algo{background:var(--acento-suave)}
.mes-piel.piel-mosaico .dia-celda.hoy{background:var(--texto)}
.mes-piel.piel-mosaico .dia-celda.hoy .dia-num{color:var(--panel)}
.mes-piel.piel-mosaico .dia-num{font-size:17px}
.mes-piel.piel-mosaico .dia-puntos i{width:5px;height:5px}
.mes-piel.piel-mosaico .cal-cab h2{font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:26px}

/* 4 · CONSOLA: celdas cuadradas de borde fino, numeros de ancho fijo. La
   cuadricula de una hoja de llamado, no un calendario de pared. */
.mes-piel.piel-consola .mes-filas{gap:4px}
.mes-piel.piel-consola .dia-celda{border-radius:9px;background:var(--panel);
  border:1px solid var(--borde)}
.mes-piel.piel-consola .dia-celda.vacia{background:none;border-color:transparent}
.mes-piel.piel-consola .dia-celda.hoy{background:var(--texto);border-color:var(--texto)}
.mes-piel.piel-consola .dia-celda.hoy .dia-num{color:var(--panel)}
.mes-piel.piel-consola .dia-num{font-size:15px;font-weight:600;
  font-variant-numeric:lining-nums tabular-nums}
.mes-piel.piel-consola .dia-puntos i{width:4px;height:4px}
.mes-piel.piel-consola .cal-cab h2{font-family:var(--con-sis);font-weight:700;
  font-size:21px;letter-spacing:-.02em}
.mes-piel.piel-consola .cal-nav{border-radius:9px}

/* ==========================================================================
   MOSAICO A COLOR  ·  24 de septiembre de 2026

   "Siento a veces que la app se ve muy monocromatica", y tenia razon por dos
   motivos distintos:

   1. En Mosaico se habian mapeado TRABAJO y AGENDA al mismo tono
      (--acento-suave), asi que de cuatro colores solo salian dos.
   2. Y el de fondo: ni la pieza de un dia en la semana ni la celda de un dia
      en el mes sabian de que era ese dia -- solo los compromisos de adentro
      tenian color. No habia con que teñirlas. Por eso el mes se veia igual
      en las cuatro pieles. Eso lo arregla `tonoDelDia()` en piel-agenda.js,
      que pone `dia-de-<tono>` en la pieza y en la celda.

   Los cuatro tintes son los mismos de la maqueta. Salen de sus colores de
   siempre (verde, bronce, arena), solo que muy aclarados: el color aqui no
   es adorno, dice de que es el dia sin leer una palabra.
   ========================================================================== */
.piel-mosaico{
  --mos-verde:#DDE9E0;  --mos-verde-t:#2E5A42;
  --mos-dorado:#F2E6D0; --mos-dorado-t:#7A5A2E;
  --mos-acento:#DFEBEC; --mos-acento-t:#3A6370;
  --mos-tenue:#EAE7DE;  --mos-tenue-t:#6E7A72;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .piel-mosaico{
    --mos-verde:#20352A;  --mos-verde-t:#8FBF9E;
    --mos-dorado:#342D1F; --mos-dorado-t:#D6C29A;
    --mos-acento:#1E3038; --mos-acento-t:#8FB6C2;
    --mos-tenue:#25332D;  --mos-tenue-t:#A3B0A7;
  }
}
:root[data-tema="oscuro"] .piel-mosaico{
  --mos-verde:#20352A;  --mos-verde-t:#8FBF9E;
  --mos-dorado:#342D1F; --mos-dorado-t:#D6C29A;
  --mos-acento:#1E3038; --mos-acento-t:#8FB6C2;
  --mos-tenue:#25332D;  --mos-tenue-t:#A3B0A7;
}

/* --- La semana: cada pieza, del color de su dia ------------------------- */
.piel-mosaico .sem-dia.dia-de-verde{background:var(--mos-verde)}
.piel-mosaico .sem-dia.dia-de-dorado{background:var(--mos-dorado)}
.piel-mosaico .sem-dia.dia-de-acento{background:var(--mos-acento)}
.piel-mosaico .sem-dia.dia-de-tenue{background:var(--mos-tenue)}
.piel-mosaico .sem-dia.dia-de-verde .sem-dia-l,
.piel-mosaico .sem-dia.dia-de-verde .sem-dia-n{color:var(--mos-verde-t)}
.piel-mosaico .sem-dia.dia-de-dorado .sem-dia-l,
.piel-mosaico .sem-dia.dia-de-dorado .sem-dia-n{color:var(--mos-dorado-t)}
.piel-mosaico .sem-dia.dia-de-acento .sem-dia-l,
.piel-mosaico .sem-dia.dia-de-acento .sem-dia-n{color:var(--mos-acento-t)}
.piel-mosaico .sem-dia.dia-de-tenue .sem-dia-l,
.piel-mosaico .sem-dia.dia-de-tenue .sem-dia-n{color:var(--mos-tenue-t)}
/* El elegido se pone oscuro y grande, y gana sobre el tinte de su dia. */
.piel-mosaico.es-cinta .sem-dia.sel{background:var(--texto)}
.piel-mosaico.es-cinta .sem-dia.sel .sem-dia-n{color:var(--panel)}
.piel-mosaico.es-cinta .sem-dia.sel .sem-dia-l{color:var(--acento-suave)}

/* --- El dia: los cuatro tonos, cada uno el suyo ------------------------- */
.dia-piel.piel-mosaico .dia-linea.verde{background:var(--mos-verde)}
.dia-piel.piel-mosaico .dia-linea.dorado{background:var(--mos-dorado)}
.dia-piel.piel-mosaico .dia-linea.acento{background:var(--mos-acento)}
.dia-piel.piel-mosaico .dia-linea.tenue{background:var(--mos-tenue)}
.dia-piel.piel-mosaico .dia-linea.verde .dia-hora{color:var(--mos-verde-t)}
.dia-piel.piel-mosaico .dia-linea.dorado .dia-hora{color:var(--mos-dorado-t)}
.dia-piel.piel-mosaico .dia-linea.acento .dia-hora{color:var(--mos-acento-t)}
.dia-piel.piel-mosaico .dia-linea.tenue .dia-hora{color:var(--mos-tenue-t)}

/* --- El mes: la celda, del color de su dia ------------------------------ */
.mes-piel.piel-mosaico .dia-celda.dia-de-verde{background:var(--mos-verde)}
.mes-piel.piel-mosaico .dia-celda.dia-de-dorado{background:var(--mos-dorado)}
.mes-piel.piel-mosaico .dia-celda.dia-de-acento{background:var(--mos-acento)}
.mes-piel.piel-mosaico .dia-celda.dia-de-tenue{background:var(--mos-tenue)}
.mes-piel.piel-mosaico .dia-celda.dia-de-verde .dia-num{color:var(--mos-verde-t)}
.mes-piel.piel-mosaico .dia-celda.dia-de-dorado .dia-num{color:var(--mos-dorado-t)}
.mes-piel.piel-mosaico .dia-celda.dia-de-acento .dia-num{color:var(--mos-acento-t)}
.mes-piel.piel-mosaico .dia-celda.dia-de-tenue .dia-num{color:var(--mos-tenue-t)}
/* Un dia sin nada no se tiñe: el color tiene que significar algo. */
.mes-piel.piel-mosaico .dia-celda:not(.con-algo){background:var(--panel2)}
.mes-piel.piel-mosaico .dia-celda.vacia{background:none}
.mes-piel.piel-mosaico .dia-celda.hoy{background:var(--texto)}
.mes-piel.piel-mosaico .dia-celda.hoy .dia-num{color:var(--panel)}
/* Con la celda teñida los puntos sobran: dirian lo mismo dos veces. */
.mes-piel.piel-mosaico .dia-puntos{opacity:.5}

/* --- Y en Riel, el mismo dato, pero en la intensidad del fondo ---------- */
.mes-piel.piel-riel .dia-celda.dia-de-verde{background:#1E3229}
.mes-piel.piel-riel .dia-celda.dia-de-dorado{background:#302A1E}
.mes-piel.piel-riel .dia-celda.dia-de-acento{background:#1C2C33}

/* ==========================================================================
   EL ARTISTA v2  ·  24 de septiembre de 2026
   Handoff: docs/design_handoff_el_artista/README.md

   VERDE es el tema OSCURO de la app y CREMA el CLARO, asi que los tokens se
   enganchan al MISMO selector de tema que ya usa este archivo -- no hay un
   sistema de temas nuevo, y el boton #btn-tema de siempre los cambia. El
   prefijo --art- es para que nada choque con lo que ya existe.
   ========================================================================== */
:root{
  --art-suelo:#E9E1CF; --art-tinta:#2B2016; --art-tinta2:#65533F;
  --art-tarj:#3E2C20; --art-tarj2:#56402F; --art-tarjT:#F3EBDB; --art-tarjT2:#DCCDB3;
  --art-oro:#9A7743; --art-oroS:rgba(154,119,67,.42);
  --art-papel:#F7F1E3; --art-papel2:#ECE2CC; --art-papelT:#2B2016;
  --art-papelT2:#5E4D3A; --art-papelB:#B39565;
  --art-cobre:#C68B5F; --art-cobreT:#20150D;
  --art-barra:#3E2C20; --art-barraOp:rgba(214,194,154,.14); --art-barraT:#EADFC8;
  --art-circ:rgba(62,44,32,.07); --art-banda:rgba(20,12,8,.5);
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --art-suelo:#13211C; --art-tinta:#EFE7D4; --art-tinta2:#C7BDA4;
    --art-tarj:#1C322A; --art-tarj2:#264236; --art-tarjT:#EFE7D4; --art-tarjT2:#CFC5AC;
    --art-oro:#BFA06A; --art-oroS:rgba(191,160,106,.38);
    --art-papel:#DCE2CC; --art-papel2:#C9D1B5; --art-papelT:#1E2B22;
    --art-papelT2:#3B473A; --art-papelB:#A99867;
    --art-cobre:#CC9A72; --art-cobreT:#231811;
    --art-barra:#1E3A32; --art-barraOp:rgba(169,194,174,.14); --art-barraT:#EFE7D4;
    --art-circ:rgba(239,231,212,.08); --art-banda:rgba(8,16,13,.55);
  }
}
:root[data-tema="oscuro"]{
  --art-suelo:#13211C; --art-tinta:#EFE7D4; --art-tinta2:#C7BDA4;
  --art-tarj:#1C322A; --art-tarj2:#264236; --art-tarjT:#EFE7D4; --art-tarjT2:#CFC5AC;
  --art-oro:#BFA06A; --art-oroS:rgba(191,160,106,.38);
  --art-papel:#DCE2CC; --art-papel2:#C9D1B5; --art-papelT:#1E2B22;
  --art-papelT2:#3B473A; --art-papelB:#A99867;
  --art-cobre:#CC9A72; --art-cobreT:#231811;
  --art-barra:#1E3A32; --art-barraOp:rgba(169,194,174,.14); --art-barraT:#EFE7D4;
  --art-circ:rgba(239,231,212,.08); --art-banda:rgba(8,16,13,.55);
}

/* --- El suelo: tres luces suaves y un ruido, como papel bajo lampara ----- */
.art2{
  --art-vetas:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 2px,transparent 2px 8px);
  --art-marco:inset 0 0 0 5px var(--art-tarj),inset 0 0 0 6px var(--art-oroS),0 10px 24px rgba(0,0,0,.28);
  position:relative;background:var(--art-suelo);color:var(--art-tinta);
  margin:calc(-1 * var(--pad-seccion,16px));
  padding:calc(env(safe-area-inset-top) + 8px) 18px calc(env(safe-area-inset-bottom) + 108px);
  font-family:'Jost',-apple-system,sans-serif;min-height:100%;
  background-image:
    radial-gradient(60% 40% at 12% 8%,rgba(255,255,255,.055),transparent 70%),
    radial-gradient(50% 36% at 88% 22%,rgba(255,255,255,.035),transparent 72%),
    radial-gradient(70% 50% at 50% 100%,rgba(0,0,0,.10),transparent 70%);
}
.art2::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.10;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23r)'/></svg>")}
.art2 > *{position:relative}
.art2 .n, .art2 .art2-tasas, .art2 .art2-meta{font-variant-numeric:tabular-nums}

/* La cabecera del diseño es la GLOBAL de index.html (#btn-buscar, #btn-tema,
   #btn-recargar), compartida por las seis secciones -- no se dibuja otra
   aqui. Su restilizado va aparte, a pedido: ver el final de este bloque. */

/* --- Titulo, firma y el marco colgado ------------------------------------ */
.art2-tit{display:grid;grid-template-columns:1fr auto;gap:14px;margin-top:18px;align-items:start}
/* 42px es la medida del handoff y esta dibujada a 390px de ancho. A 375
   (iPhone mini/SE) "EL ARTISTA" pide 229px y solo hay 213, asi que se
   partia en dos renglones. 10.4vw es justo el tope que lo deja en UNA
   linea en 375, y de 405px para arriba vuelve a los 42px del diseño. */
.art2-h1{margin:0;font-family:'Italiana',Georgia,serif;font-weight:400;
  font-size:clamp(34px,10.4vw,42px);white-space:nowrap;
  line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--art-tinta)}
.art2-sub{margin:6px 0 0;font-weight:300;font-size:15px;color:var(--art-tinta2)}
.art2-firma{display:flex;align-items:center;gap:12px;margin-top:12px}
.art2-firma-n{font-family:'Great Vibes',cursive;font-size:38px;line-height:1.1;
  color:var(--art-tinta)}
.art2-sello{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--art-oro);
  transform:rotate(-8deg);object-fit:cover;background:var(--art-tarj)}
.art2-colgado{width:112px;flex:none}
.art2-colgado svg{display:block;width:112px;height:30px}
.art2-foto{width:106px;height:106px;border-radius:50%;border:1.5px solid var(--art-oro);
  padding:4px;box-sizing:border-box;background:var(--art-tarj);cursor:pointer}
.art2-foto-aro{width:100%;height:100%;border-radius:50%;border:1px solid var(--art-oroS);
  overflow:hidden;display:grid;place-items:center}
.art2-foto img{width:100%;height:100%;object-fit:cover;display:block}
.art2-iniciales{font-family:'Italiana',Georgia,serif;font-size:32px;color:var(--art-tarjT)}

/* --- La rejilla de tarjetas ---------------------------------------------- */
.art2-rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:30px}
.art2-tarjeta{border:0;font:inherit;text-align:left;cursor:pointer;color:var(--art-tarjT);
  background:var(--art-vetas),linear-gradient(160deg,var(--art-tarj2),var(--art-tarj))}
.art2-tarjeta:focus-visible,.art2-foto:focus-visible,.art2-punto:focus-visible{
  outline:2px solid var(--art-cobre);outline-offset:2px}
.art2-circ{width:44px;height:44px;flex:none;border-radius:50%;background:var(--art-circ);
  border:1px solid var(--art-oroS);display:grid;place-items:center;color:var(--art-oro)}
.art2-circ svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}

/* Portfolio y Herramientas: marco doble y filete */
.art2-marco{position:relative;border:1px solid var(--art-oro);border-radius:18px;
  box-shadow:var(--art-marco)}
.art2-filete{position:absolute;left:50%;transform:translateX(-50%);width:140px;height:20px;
  color:var(--art-oro)}
.art2-filete.arriba{top:-10px}
.art2-filete.abajo{bottom:-10px;transform:translateX(-50%) scaleY(-1)}

.art2-portfolio{grid-column:1/-1;padding:20px 18px 18px}
.art2-portfolio-cab{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.art2-portfolio-cab h2{margin:0;font-family:'Italiana',Georgia,serif;font-weight:400;
  font-size:30px;letter-spacing:.07em;text-transform:uppercase}
.art2-scroller{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 -18px;padding:0 18px;scroll-padding:0 18px;scrollbar-width:none}
.art2-scroller::-webkit-scrollbar{display:none}
.art2-slide{flex:none;width:min(70%,300px);scroll-snap-align:start;border:0;padding:0;
  background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.art2-slide img{width:100%;height:150px;object-fit:contain;display:block;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
/* display:block NO es decorativo: `.art2-banda` es un <span> y en inline el
   fondo se parte por renglon en vez de envolver la franja. Se vio. */
.art2-banda{display:block;margin-top:10px;background:var(--art-banda);
  border:1px solid var(--art-oroS);border-radius:10px;padding:10px 12px}
.art2-slide-t,.art2-h3{display:block;font-family:'Italiana',Georgia,serif;font-weight:400;
  letter-spacing:.04em}
.art2-slide-t{font-size:21px;line-height:1.2}
.art2-meta{display:block;margin-top:3px;font-size:13px;color:var(--art-tarjT2)}
.art2-puntos{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px}
/* Los filetes ceden, los puntos no. Sin esto el flex repartia el apreton
   entre TODOS: medido en el telefono, los puntos quedaban en 16 y 22 px de
   ancho aunque el CSS dijera 28 -- el area de toque se encogia sola justo
   donde mas falta hace. Ahora se encogen las rayitas, que no se tocan. */
.art2-puntos hr{flex:0 1 64px;min-width:0;height:1px;border:0;background:var(--art-oroS);margin:0}
/* 28x28 ya era mucho mejor que los 6px de L'Agenda, pero sigue por debajo de
   los 44 de Apple. Se sube el alto -- que es gratis, no hay nada arriba ni
   abajo -- y no el ancho, que chocaria con el punto de al lado. El margen
   baja de 16 a 8 para que el punto no se mueva de sitio. */
.art2-punto{width:28px;height:44px;flex:none;display:grid;place-items:center;border:0;
  background:none;cursor:pointer;padding:0}
.art2-punto i{display:block;width:6px;height:6px;border-radius:3px;background:var(--art-oroS);
  transition:width .25s}
.art2-punto[aria-current="true"] i{width:22px;background:var(--art-oro)}

/* Academias: tres hojas apiladas */
.art2-academias{grid-column:1;grid-row:span 2;min-height:330px;position:relative;
  background:none;padding:0}
.art2-hoja{position:absolute;inset:0;background:var(--art-papel2);border:1px solid var(--art-papelB);
  border-radius:6px}
.art2-hoja.a{transform:rotate(-3deg)}
.art2-hoja.b{transform:rotate(1.6deg)}
.art2-hoja-frente{position:relative;height:100%;box-sizing:border-box;border-radius:6px;
  padding:16px 16px 18px;color:var(--art-papelT);display:flex;flex-direction:column;gap:8px;
  background:radial-gradient(70% 50% at 50% 12%,rgba(255,255,255,.65),transparent 70%),var(--art-papel);
  box-shadow:inset 0 0 0 5px var(--art-papel),inset 0 0 0 6px var(--art-papelB)}
.art2-hoja-frente img{width:100%;height:150px;object-fit:contain;display:block}
.art2-hoja-frente .art2-h3{font-size:22px;
  line-height:1.1;letter-spacing:.04em;text-transform:uppercase;text-wrap:balance}
.art2-total{font-weight:500;font-size:16px}
.art2-desglose{font-size:13px;color:var(--art-papelT2)}

/* Biblioteca y Logos: la misma base */
.art2-chica{position:relative;min-height:158px;border:1px solid var(--art-oroS);border-radius:14px;
  overflow:hidden;padding:14px;display:flex;flex-direction:column;justify-content:space-between}
.art2-chica:hover{border-color:var(--art-oro)}
.art2-chica .art2-h3{position:relative;font-size:25px;font-family:'Italiana',Georgia,serif;font-weight:400;
  font-size:25px;letter-spacing:.04em;text-shadow:0 2px 6px rgba(0,0,0,.55)}
.art2-fondo{position:absolute;right:0;top:0;width:74%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 45%);
  mask-image:linear-gradient(to right,transparent,#000 45%)}
.art2-logo-repisa{position:absolute;right:16px;top:20px;width:74px;text-align:center}
/* En el telefono la tarjeta mide 165px de ancho: con la repisa de 74px y el
   titulo en dos renglones, uno se monta sobre el otro por mas que se limite
   el ancho del texto ("Logos y Nombre" no cabe en 58px). Se encoge la
   repisa, que es lo que sobra -- en escritorio vuelve a su medida. */
/* Medido: la tarjeta mide 162px. El titulo a 25px pide 131px de ancho y
   arranca en y=337; la repisa terminaba en 343. Seis pixeles de choque.
   A 20px cae en dos renglones cortos que arrancan por debajo de la repisa,
   y "Logos y Nombre" se sigue leyendo entero. En escritorio hay sitio de
   sobra y vuelve a los 25px del handoff. */
.art2-logos .art2-h3{font-size:20px;line-height:1.25}
.art2-logos .art2-logo-repisa{width:54px;right:12px;top:14px}
.art2-logos .art2-logo-repisa img{width:48px;height:48px}
.art2-logos .art2-logo-repisa i{width:54px}
@media (min-width:1024px){
  .art2-logos .art2-h3{font-size:25px}
  .art2-logos .art2-logo-repisa{width:74px;right:16px;top:20px}
  .art2-logos .art2-logo-repisa img{width:66px;height:66px}
  .art2-logos .art2-logo-repisa i{width:74px}
}
.art2-logo-repisa img{width:66px;height:66px;border-radius:6px;border:1px solid var(--art-oro);
  object-fit:cover;display:block;margin:0 auto}
.art2-logo-repisa i{display:block;width:74px;height:5px;border-radius:2px;margin-top:6px;
  background:linear-gradient(180deg,var(--art-tarj2),var(--art-tarj));border:1px solid var(--art-oroS)}

/* Herramientas: cartela sobre el borde */
.art2-herr{grid-column:1/-1;margin-top:26px;padding:30px 18px 18px;
  display:flex;align-items:center;gap:14px}
.art2-cartela{position:absolute;left:50%;top:-19px;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;padding:7px 22px;border-radius:999px;
  border:1px solid var(--art-oro);background:linear-gradient(180deg,#EDE3C8,#CDB98B);
  color:#2A2116;font-family:'Italiana',Georgia,serif;font-size:17px;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap}
.art2-cartela svg{width:26px;height:10px;fill:none;stroke:#2A2116;stroke-width:1.2}
.art2-herr-txt{flex:1;min-width:0;font-size:14px;color:var(--art-tarjT2)}
.art2-herr img{width:150px;flex:none;object-fit:contain}

/* Inventario de obra (Pintor): misma base que Biblioteca, a todo el ancho */
.art2-obra{grid-column:1/-1}

/* Herramientas es una <section> (lleva ilustracion y cartela, no es una
   etiqueta sola), asi que su zona tactil es un boton transparente encima:
   un <button> no puede contener otro <button>, y anidarlos deja el de
   adentro inalcanzable con el teclado. */
.art2-tapa{position:absolute;inset:0;border:0;background:none;cursor:pointer;
  border-radius:18px;padding:0}
.art2-tapa:focus-visible{outline:2px solid var(--art-cobre);outline-offset:2px}
.art2-herr > :not(.art2-tapa):not(.art2-cartela){position:relative;z-index:1;pointer-events:none}
/* La cartela SIGUE siendo absolute: va montada sobre el borde de arriba.
   Ponerla en relative la metia en el flujo flex y empujaba el texto y la
   ilustracion fuera de la tarjeta. Se vio en pantalla. */
.art2-cartela{z-index:2;pointer-events:none}

/* --- 1024 o mas: barra lateral ------------------------------------------- */
@media (min-width:1024px){
  .art2{padding:20px 36px 48px}
  .art2-inner{max-width:1180px;margin-inline:auto}
  .art2-h1{font-size:58px}
  .art2-rejilla{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .art2-portfolio{grid-column:1/3}
  .art2-academias{grid-column:3;grid-row:1/3}
  .art2-biblioteca{grid-column:1}
  .art2-logos{grid-column:2}
  .art2-herr{margin-top:18px}
  .art2-herr img{width:220px}
  .art2-slide{width:calc((100% - 60px)/3)}
  .art2-slide img{height:170px}
  .art2-puntos{display:none}
  .art2-hoja-frente img{height:200px}
  .art2-hoja-frente .art2-h3{font-size:25px}
}

/* ==========================================================================
   NAVEGACION v2 (El Artista)  ·  24 de septiembre de 2026  ·  A PRUEBA

   Esto es lo que el handoff pide para `.pestanas`, `.lateral` y los iconos
   de `.cabecera`, y es lo UNICO que faltaba de ese rediseño. Va en su propio
   bloque y al final del archivo a proposito: se aprueba entero o se quita
   entero, sin tocar nada de lo de arriba.

   POR QUE ESTABA APARTE. Estas tres piezas son globales -- viven en
   index.html y las comparten las seis secciones -- asi que cambiarlas se ve
   en toda la app, no solo en El Artista. Y ya hubo una vez que se tocaron
   dentro de otro trabajo sin pedirlo: "tocaste el sidebar y eso ya estaba
   bien como estaba". Por eso se enseña antes de publicar.
   ========================================================================== */

/* --- La barra inferior: una pastilla flotante, no una franja pegada ------ */
.pestanas{
  left:50%;right:auto;transform:translateX(-50%);
  width:min(100% - 20px,560px);
  bottom:calc(env(safe-area-inset-bottom) + 10px);
  padding:5px;padding-bottom:5px;
  border:1px solid var(--art-oro);border-top:1px solid var(--art-oro);
  border-radius:22px;
  background:var(--art-barra);backdrop-filter:none;
  box-shadow:inset 0 0 0 4px var(--art-oroS),0 10px 26px rgba(0,0,0,.34);
  gap:4px;
}
.pestanas button{
  flex:1;min-height:52px;height:auto;gap:5px;padding:7px 2px;
  border-radius:17px;background:var(--art-barraOp);
  color:var(--c,var(--art-barraT));
  font-family:'Jost',-apple-system,sans-serif;font-size:11px;
}
.pestanas button svg{width:21px;height:21px}
/* El tab encendido: cobre lleno. Es el unico que no lleva su color propio
   -- si cada uno gritara el suyo, ninguno diria "estas aqui". */
.pestanas button.activa{
  background:var(--art-cobre);color:var(--art-cobreT);font-weight:500;
}
.pestanas button.activa svg{color:var(--art-cobreT)}

/* En crema, los seis colores de tab se apagarian contra el marron, asi que
   ahi todos van en el mismo marfil. En verde cada uno conserva el suyo. */
:root:not([data-tema="oscuro"]) .pestanas button{color:var(--art-barraT)}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .pestanas button{color:var(--c,var(--art-barraT))}
}
:root[data-tema="oscuro"] .pestanas button{color:var(--c,var(--art-barraT))}

/* --- La cabecera: los dos botones, en caja de oro ------------------------ */
.cabecera{border-bottom:1px solid var(--art-oroS)}
.cabecera .icono{
  width:44px;height:44px;border-radius:12px;
  border:1px solid var(--art-oroS);background:var(--art-circ);
  display:grid;place-items:center;
}
.cabecera .icono svg{width:20px;height:20px}

/* --- 1100 o mas: el lateral ---------------------------------------------
   EL PUNTO DE CORTE ES 1100, NO 1024. El lateral de esta app nace a 1100px
   (arriba: `.lateral{display:none}` y su `display:flex` dentro de
   @media min-width:1100px). Con 1024 aqui, entre 1024 y 1099 el `body` se
   comia 248px de margen izquierdo para un panel que todavia no existe: una
   franja vacia al lado del contenido. Se vio midiendo, no suponiendo.

   EL COLOR NO SE TOCA. El lateral sigue dandose la vuelta como siempre:
   verde en claro, crema en oscuro. Eso lo resuelven las variables --lat-*
   de mas arriba y el cambio de logo va con ellas. Aqui solo se cambia la
   GEOMETRIA (ancho, tamaño de las casillas) y como se marca la encendida.
   Una version anterior forzaba verde en los dos temas y ademas se comia el
   cambio de logo; se quito. */
@media (min-width:1100px){
  body{padding-left:248px}
  /* SE QUEDA `fixed`, no `sticky`. El handoff dice sticky, pero el `body`
     de esta app lleva `padding-left` para dejarle sitio al lateral -- y eso
     solo cuadra si el lateral esta FUERA del flujo. En sticky el padding lo
     empujaba 248px hacia adentro y el menu aparecia flotando en medio de la
     pantalla, con el contenido detras. Fijo se ve igual (ocupa el alto
     entero y siempre esta arriba) y no pelea con el padding. */
  .lateral{width:248px}
  /* AQUI NO SE TOCA EL TAMAÑO. Habia cuatro reglas que achicaban la letra a
     15px, el icono a 22 y el aire entre casillas a 4 -- y eso deshacia un
     arreglo viejo a proposito ("Grande y con aire", mas arriba): el menu
     volvia a leerse como una lista de ajustes en vez del menu principal.
     El se dio cuenta en el iPad y en la Mac: "eso ya lo vivimos antes".
     El tamaño y el espacio son los de siempre; lo unico nuevo aqui es como
     se marca la casilla encendida. */
  /* La casilla encendida: cobre lleno en vez de un velo casi invisible.
     La raya de la izquierda sobraba -- con el cobre lleno, marcar dos veces
     lo mismo solo ensucia. */
  .lateral-menu button.activa{background:var(--art-cobre);color:var(--art-cobreT);
    font-weight:500}
  .lateral-menu button.activa svg{color:var(--art-cobreT)}
  .lateral-menu button.activa::before{display:none}
}

/* Y en oscuro, donde el lateral es CREMA, el cobre claro se apagaria contra
   el: ahi la casilla encendida va en el bronce de la app, que es el mismo
   color pero con fuerza para pisar un fondo claro. */
@media (min-width:1100px){
  @media (prefers-color-scheme:dark){
    :root:not([data-tema="claro"]) .lateral-menu button.activa{
      background:var(--pm-bronce);color:var(--pm-crema)}
    :root:not([data-tema="claro"]) .lateral-menu button.activa svg{
      color:var(--pm-crema)}
  }
  :root[data-tema="oscuro"] .lateral-menu button.activa{
    background:var(--pm-bronce);color:var(--pm-crema)}
  :root[data-tema="oscuro"] .lateral-menu button.activa svg{color:var(--pm-crema)}
}

/* ==========================================================================
   ALUMNOS v2  ·  24 de septiembre de 2026
   Handoff: docs/design_handoff_alumnos/README.md

   Segunda pantalla de la linea El Artista. Reusa sus tokens --art-*, su
   tipografia y su fondo; lo que se agrega aqui son los MATERIALES: madera,
   pergamino, laton y medallon.

   DOS NOMBRES CAMBIADOS respecto al handoff, y por una razon: pedia
   `.art2-marco` y ya existe uno con otro significado (el marco fino y
   redondo de las tarjetas de El Artista), y pedia `.art2-papel` que se
   confunde con el token --art-papel. Aqui son `.art2-marcoM` (marco de
   madera) y `.art2-papelc` (papel con cuerpo). Todo lo demas se llama como
   pide el handoff.

   ESTA PANTALLA VIVE EN UN MODAL, no en una seccion. Por eso .art2-alu
   tiene sus propios margenes negativos: los de .art2 estan calculados para
   el relleno de #contenido (16px) y aqui el relleno es el de .modal-caja
   (20/18 en telefono, 24/26 en pantalla ancha). Con los de .art2 quedaba
   una franja del color del modal a los lados.
   ========================================================================== */
:root{
  --art-oroM:rgba(154,119,67,.75); --art-oroT:#6E5427; --art-papelN:#6B4A2E;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --art-oroM:rgba(191,160,106,.6); --art-oroT:#D6C29A; --art-papelN:#3E5A3F;
  }
}
:root[data-tema="oscuro"]{
  --art-oroM:rgba(191,160,106,.6); --art-oroT:#D6C29A; --art-papelN:#3E5A3F;
}

/* --- Los materiales ------------------------------------------------------
   Las vetas son dos tramas casi verticales cruzadas a 178 y 181 grados: a
   ojo no se ven como rayas, se ven como madera. */
.art2-madera{
  background-color:var(--art-tarj);
  background-image:
    repeating-linear-gradient(178deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(181deg,rgba(0,0,0,.12) 0 2px,transparent 2px 13px),
    linear-gradient(180deg,var(--art-tarj2),var(--art-tarj));
}
.art2-marcoM{
  border:1px solid var(--art-oroM);
  box-shadow:inset 0 0 0 4px rgba(0,0,0,.18),inset 0 0 0 5px var(--art-oroS),
             0 10px 24px rgba(0,0,0,.35);
  transition:border-color .16s;
}
.art2-marcoM:hover{border-color:var(--art-oro)}
.art2-papelc{
  background-color:var(--art-papel);
  background-image:
    radial-gradient(ellipse at 30% 20%,rgba(255,255,240,.55),transparent 60%),
    radial-gradient(ellipse at 80% 90%,rgba(150,160,110,.35),transparent 60%);
  border:1px solid var(--art-papelB);border-radius:6px;
  box-shadow:inset 0 0 0 5px var(--art-papel),inset 0 0 0 6px var(--art-papelB);
  color:var(--art-papelT);
}
/* Laton y medallon son IGUALES en los dos temas: siempre van sobre madera
   oscura, nunca sobre el fondo. Un laton que cambiara con el tema dejaria
   de parecer metal. */
.art2-laton{
  background:linear-gradient(180deg,#EBD8A8 0%,#C9A86A 45%,#9C7A40 100%);
  color:#2B2212;border:1px solid #6E5427;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 8px rgba(0,0,0,.35);
}
.art2-medallon{
  background:radial-gradient(circle at 35% 30%,#F2E4BC,#C9A86A 55%,#9C7A40);
  border:1px solid #6E5427;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 4px rgba(255,255,255,.1),
             0 4px 10px rgba(0,0,0,.45);
}
/* Solo hay DOS colores de estado en esta pantalla: laton (normal) y cobre
   (algo que atender). Ni rojos ni verdes chillones -- una cuota sin cobrar
   no es una emergencia, es un recordatorio. */
.art2-alerta{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:14px;
  background:rgba(204,154,114,.18);border:1px solid rgba(204,154,114,.5);
  color:#F0C894;font-size:13px;line-height:1.25;
}
.art2-alerta::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:#E0A060}
.art2-alerta.desnudo{background:none;border:0;padding:0;border-radius:0}

/* --- El separador: raya, rombo, rotulo, rombo, raya ---------------------- */
.art2-sep{display:flex;align-items:center;gap:10px;
  font-family:'Italiana',Georgia,serif;font-size:15px;letter-spacing:.18em;
  color:var(--art-oroT);text-transform:uppercase;white-space:nowrap}
.art2-sep hr{flex:1;min-width:14px;height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--art-oroS))}
.art2-sep hr+hr,.art2-sep hr:last-child{background:linear-gradient(90deg,var(--art-oroS),transparent)}
.art2-sep i{flex:none;width:8px;height:12px;background:var(--art-oro);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}

/* --- El cartucho de GESTION --------------------------------------------- */
.art2-cartucho-fila{display:flex;align-items:center;justify-content:center;gap:10px}
.art2-cartucho-fila hr{width:40px;height:1px;border:0;margin:0;background:var(--art-oroS)}
.art2-cartucho-fila svg{width:26px;height:10px;flex:none;fill:none;
  stroke:var(--art-oro);stroke-width:1.2}
.art2-cartucho-fila svg.espejo{transform:scaleX(-1)}
.art2-cartucho{padding:8px 26px;border-radius:10px;
  background:linear-gradient(180deg,#3C5A44,#233B2C);border:1px solid var(--art-oro);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.2),inset 0 0 0 3px var(--art-oroS);
  font-family:'Italiana',Georgia,serif;font-size:17px;letter-spacing:.16em;
  color:#EBE1C8;text-transform:uppercase;white-space:nowrap}

/* ==========================================================================
   LA PANTALLA
   ========================================================================== */
.art2-modal{
  margin:-20px -18px calc(-28px - env(safe-area-inset-bottom));
  padding:18px 16px calc(28px + env(safe-area-inset-bottom));
  border-radius:20px 20px 0 0;
}
@media(min-width:700px){
  .art2-modal{margin:-24px -26px;padding:24px 28px 30px;border-radius:20px}
}

/* --- Encabezado: titulo, placa colgada, subtitulo y firma ---------------- */
.art2-modal .art2-h1{font-size:40px;line-height:1;letter-spacing:.06em;text-transform:uppercase}
.art2-modal .art2-tit{margin-top:20px;align-items:start}
.art2-modal .art2-firma{margin-top:10px}
.art2-modal .art2-sello{transform:rotate(-8deg)}
.art2-placa-col{width:auto;flex:none;text-align:center}
.art2-placa-col svg{display:block;width:70px;height:16px;margin:0 auto}
.art2-placa{display:inline-block;padding:8px 16px;border-radius:14px;
  font-family:'Italiana',Georgia,serif;font-size:15px;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap}

/* --- Las sub-pestañas ----------------------------------------------------
   El 24 de sep este traje se puso SOLO dentro de Alumnos, a proposito: las
   otras cinco puertas todavia tenian su diseño viejo. El 25 les toco a las
   cinco, asi que ya vale para .art2 entero -- que es exactamente lo que el
   dijo: "voy por parte pero la idea es rediseñar todo". */
.art2 .art-chips{display:flex;flex-wrap:wrap;gap:0 8px;margin-top:16px}
/* 44px de alto para el dedo, pero la pastilla que se VE mide 36: el resto
   es zona tactil invisible (margin), que es como se cumplen las dos cosas
   sin que la fila se vea gorda. */
.art2 .art-chip{height:36px;margin:4px 0;padding:0 16px;border-radius:18px;
  display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  font-family:'Jost',-apple-system,sans-serif;font-size:15px;font-weight:300;
  color:var(--art-tinta);background:var(--art-circ);
  box-shadow:inset 0 0 0 1px var(--art-oroS)}
.art2 .art-chip svg{width:17px;height:17px;flex:none}
.art2 .art-chip.activo{
  background:linear-gradient(180deg,#EBD8A8 0%,#C9A86A 45%,#9C7A40 100%);
  color:#2B2212;font-weight:500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px #6E5427,
             0 3px 8px rgba(0,0,0,.35);
  cursor:default}

/* --- El reparto de la pantalla ------------------------------------------ */
.alu-grid{display:grid;gap:30px;margin-top:22px;
  grid-template-areas:"a" "g" "e" "x"}
.alu-a{grid-area:a}.alu-g{grid-area:g}.alu-e{grid-area:e}.alu-x{grid-area:x}

/* --- a · ACADEMIAS -------------------------------------------------------
   grid-auto-rows, no un alto fijo de dos casillas: quien tenga tres o
   cuatro instituciones (EEMEN, la UASD, las suyas) saca otra fila IGUAL de
   alta en vez de perder la puerta. El handoff dibuja dos porque son las dos
   de el; la pantalla no puede asumirlas. */
.alu-academias{display:flex;gap:12px;margin-top:16px;padding-bottom:10px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  scroll-padding-left:0}
.alu-academias::-webkit-scrollbar{display:none}
.alu-academias > *{flex:none;width:calc((100% - 12px)/2);height:290px;
  scroll-snap-align:start}
@media(min-width:700px){.alu-academias > *{height:360px}}
@media(min-width:1024px){.alu-academias > *{height:320px}}

/* La de pergamino: tres hojas, las dos de atras giradas desde su esquina de
   abajo a la izquierda, como un taco de papeles mal cuadrado. */
/* LAS TRES HOJAS CABEN DENTRO DE LA CASILLA. Antes el taco se salia 6px
   por la derecha y por abajo con un margen; en una reja eso no molestaba,
   pero en un carrusel ese margen se suma al ancho y las dos casillas
   dejaban de cuadrar con el paso del deslizamiento. Ahora la hoja de
   delante mide 6px menos y las de atras giran hacia ese hueco: se ve igual
   y el carrusel para donde tiene que parar. */
.alu-hojas{position:relative;margin:0;border:0;background:none;padding:0;
  cursor:pointer;font:inherit;text-align:left}
.alu-hojas .alu-h{position:absolute;left:0;top:0;width:calc(100% - 6px);
  height:calc(100% - 6px);background:var(--art-papel2);
  border:1px solid var(--art-papelB);border-radius:6px;transform-origin:bottom left}
.alu-hojas .alu-h.a{transform:rotate(2.2deg);opacity:.55;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.alu-hojas .alu-h.b{transform:rotate(1deg);opacity:.8}
.alu-papelf{position:relative;width:calc(100% - 6px);height:calc(100% - 6px);
  box-sizing:border-box;padding:14px;display:flex;flex-direction:column}
.alu-papelf img{flex:1;min-height:0;width:100%;object-fit:contain}
.alu-papelf .alu-t{font-family:'Italiana',Georgia,serif;font-size:17px;line-height:1.08;
  letter-spacing:.04em;text-transform:uppercase;text-wrap:balance;margin-top:8px}
.alu-papelf .alu-s{font-size:13px;line-height:1.35;color:var(--art-papelT2);margin-top:3px}
.alu-papelf .alu-cifra-fila{display:flex;align-items:baseline;gap:8px;margin-top:8px;
  padding-top:6px;border-top:1px solid var(--art-papelB)}
.alu-papelf .alu-n{font-family:'Italiana',Georgia,serif;font-size:34px;line-height:1;
  color:var(--art-papelN)}
.alu-papelf .alu-n-et{font-size:13px;color:var(--art-papelT2)}

/* La de madera */
.alu-mad{border:0;font:inherit;text-align:left;cursor:pointer;color:var(--art-tarjT);
  border-radius:16px;padding:14px;display:flex;flex-direction:column;overflow:hidden;
  box-sizing:border-box;height:calc(100% - 6px)}
.alu-mad img{flex:1;min-height:0;width:100%;object-fit:contain;margin:6px 0}
.alu-mad .alu-t{font-family:'Italiana',Georgia,serif;font-size:17px;line-height:1.08;
  letter-spacing:.04em;text-transform:uppercase;text-wrap:balance}
.alu-mad .alu-cifra-fila{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.alu-mad .alu-n{font-family:'Italiana',Georgia,serif;font-size:36px;line-height:1;color:#E3C98E}
.alu-mad .alu-n-et{font-size:13px;color:var(--art-tarjT2)}
.alu-mad .art2-alerta{margin-top:10px;align-self:flex-start}
.alu-circ{width:44px;height:44px;flex:none;border-radius:50%;background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px var(--art-oroS);display:grid;place-items:center;color:#D9BC82}
.alu-circ svg{width:20px;height:20px}

/* --- g · GESTION --------------------------------------------------------- */
.alu-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
@media(min-width:700px) and (max-width:1023px){
  .alu-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.art2-tile{border:0;font:inherit;text-align:left;cursor:pointer;color:var(--art-tarjT);
  height:168px;border-radius:14px;padding:16px;position:relative;
  display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.art2-tile .alu-ico{width:34px;height:34px;color:#D9BC82;fill:none;stroke:currentColor;
  stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.art2-tile .alu-t{font-family:'Italiana',Georgia,serif;font-size:19px;line-height:1.1;
  letter-spacing:.05em;text-transform:uppercase}
.art2-tile .alu-s{font-size:13px;line-height:1.35;color:var(--art-tarjT2);margin-top:4px}
/* La cifra de Programas, arriba a la derecha, a la altura del icono. */
.art2-tile .alu-n-esq{position:absolute;right:16px;top:14px;
  font-family:'Italiana',Georgia,serif;font-size:34px;line-height:1;color:#E3C98E}

/* --- e · EVALUACION ------------------------------------------------------ */
.alu-estantes{display:grid;gap:12px;margin-top:16px}
@media(min-width:700px) and (max-width:1023px){
  .alu-estantes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.art2-estante{border:0;font:inherit;text-align:left;cursor:pointer;color:var(--art-tarjT);
  height:104px;border-radius:16px;padding:0 16px;display:flex;align-items:center;gap:14px}
.art2-estante .alu-med{width:58px;height:58px;flex:none;border-radius:50%;
  display:grid;place-items:center;color:#2B2212}
.art2-estante .alu-med svg{width:26px;height:26px;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.art2-estante .alu-txt{flex:1;min-width:0}
.art2-estante .alu-t{font-family:'Italiana',Georgia,serif;font-size:24px;line-height:1.05;
  letter-spacing:.08em;text-transform:uppercase}
.art2-estante .alu-s{font-size:14px;line-height:1.35;color:var(--art-tarjT2);margin-top:3px}
.art2-estante .alu-chev{width:22px;height:22px;flex:none;color:#D9BC82;fill:none;
  stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* --- x · las acciones ---------------------------------------------------- */
.alu-acciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.alu-btn{height:52px;border-radius:26px;cursor:pointer;font-family:'Italiana',Georgia,serif;
  font-size:16px;letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--art-oro);background:var(--art-circ);color:var(--art-tinta);
  transition:background .14s,filter .14s}
.alu-btn:hover{background:rgba(191,160,106,.14)}
/* El laton tiene que ganarle al fondo de .alu-btn, que se declara despues
   en el archivo: por eso repite el degradado en vez de fiarse de
   .art2-laton. Sin esto "Agregar alumno" salia igual que los otros tres y
   dejaba de ser la accion principal -- que es lo que el pidio el 14 de sep. */
.alu-btn.laton{border-color:#6E5427;color:#2B2212;
  background:linear-gradient(180deg,#EBD8A8 0%,#C9A86A 45%,#9C7A40 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 8px rgba(0,0,0,.35)}
.alu-btn.laton:hover{filter:brightness(1.06);
  background:linear-gradient(180deg,#EBD8A8 0%,#C9A86A 45%,#9C7A40 100%)}
.alu-btn.laton:active{filter:brightness(.92)}
.alu-btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round}
/* Salir es la UNICA puerta de vuelta de esta pantalla -- Alumnos es una
   raiz y no lleva flecha arriba. Por eso ocupa una casilla de verdad (la
   que dejo Feriados al mudarse a la Agenda) y no una raya al pie. Va en
   tono bajo para no competir con las tres acciones. */
.alu-btn.salir{border-color:var(--art-oroS);color:var(--art-tinta2)}

.art2-tile:focus-visible,.art2-estante:focus-visible,.alu-hojas:focus-visible,
.alu-mad:focus-visible,.alu-btn:focus-visible,
.art2 .art-chip:focus-visible{outline:2px solid var(--art-cobre);outline-offset:2px}

/* --- 1024 o mas: dos columnas ------------------------------------------- */
@media(min-width:1024px){
  .alu-grid{grid-template-columns:1fr 1fr;gap:30px 28px;
    grid-template-areas:"a a" "g e" "g x"}
  .alu-x{align-self:end}
  .art2-modal .art2-h1{font-size:56px}
  /* El Artista apaga los puntos a este ancho porque ahi caben sus tres
     diapositivas de una vez. Aqui no: caben dos casillas, y quien tenga
     cuatro escuelas necesita saber que hay mas a la derecha. */
  .art2-modal .art2-puntos{display:flex}
  .alu-papelf .alu-t,.alu-mad .alu-t{font-size:22px}
}
@media(min-width:700px) and (max-width:1023px){
  .art2-modal{padding-left:28px;padding-right:28px}
  .art2-modal .art2-h1{font-size:50px}
  .alu-papelf .alu-t,.alu-mad .alu-t{font-size:22px}
}

/* --- Remates ------------------------------------------------------------
   Los iconos son <svg> sueltos dentro de botones; sin esto heredan el
   relleno negro por defecto y se ven como manchas. Y los rotulos van en
   <span> (un <h3> dentro de un <button> es HTML invalido, ya paso), asi
   que hay que devolverles el salto de linea. */
.alu-ico{fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.alu-papelf .alu-t,.alu-papelf .alu-s,.alu-mad .alu-t,
.art2-tile .alu-t,.art2-tile .alu-s,
.art2-estante .alu-t,.art2-estante .alu-s{display:block}
.art2-tile .alu-s{margin-top:4px}
.art2-tile .art2-alerta{margin-top:6px}
.art2-estante .art2-alerta{margin-top:3px}

/* ==========================================================================
   LAS PUERTAS DE EL ARTISTA v2  ·  25 de septiembre de 2026
   Handoff: docs/design_handoff_puertas_artista/README.md

   Biblioteca, Perfil de Artista, Mis Trabajos, Eventos y Herramientas.
   Con esto las SEIS puertas de El Artista hablan el mismo idioma; hasta
   ayer solo lo hablaban El Artista y Alumnos.

   LOS COLORES DE AQUI NO CAMBIAN CON EL TEMA, y es a proposito: son
   MATERIALES. Un archivador de cuero es del mismo color con la luz
   encendida o apagada; si el cuero cambiara de color con el tema dejaria
   de parecer cuero y pasaria a parecer un rectangulo pintado.
   ========================================================================== */

/* --- El boton de volver, arriba del titulo ------------------------------ */
.art2-volver{
  min-height:44px;margin:-8px 0 2px -8px;padding:0 14px 0 6px;border:0;
  border-radius:22px;background:none;color:var(--art-tinta2);cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;
  font-family:'Jost',-apple-system,sans-serif;font-size:14px;letter-spacing:.02em;
  transition:background .14s,color .14s}
.art2-volver svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.art2-volver:hover{background:var(--art-circ);color:var(--art-tinta)}

/* --- Cerrar, al pie y con su raya ---------------------------------------
   Deja de ser un boton gris mas: se separa con una raya de oro para que se
   lea como "aqui se acaba la pantalla", no como una accion mas de la lista. */
.art2-cerrar-zona{margin-top:36px;padding-top:22px;
  border-top:1px solid var(--art-oroS);display:flex;justify-content:center}
.art2-cerrar{min-height:52px;width:100%;max-width:420px;border-radius:26px;
  background:none;border:1px solid var(--art-oroM);color:var(--art-tinta);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Italiana',Georgia,serif;font-size:16px;letter-spacing:.1em;
  text-transform:uppercase;transition:background .14s,border-color .14s}
.art2-cerrar svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round}
.art2-cerrar:hover{background:var(--art-circ);border-color:var(--art-oro)}

/* --- El pie de cada separador ------------------------------------------- */
.art2-sep-pie{margin:8px 0 0;font-size:13px;line-height:1.35;color:var(--art-tinta2);
  text-align:center;text-wrap:balance}
.art2-resumen{margin-top:10px;text-align:center;font-size:13px;color:var(--art-tinta2);
  font-variant-numeric:tabular-nums}

/* --- La rejilla duo: un pergamino alto y dos casillas ------------------- */
.art2-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px;height:348px}
@media(min-width:700px) and (max-width:1023px){.art2-duo{height:372px}}
.art2-duo .alu-hojas{grid-row:span 2}
.art2-duo .art2-tile{height:auto}

/* La etiqueta de "solo lectura" al lado de un titulo. */
.art2-etiqueta-sl{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:10px;
  border:1px solid rgba(217,188,130,.55);color:#D9BC82;vertical-align:middle;
  font-family:'Jost',-apple-system,sans-serif;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase}

/* ==========================================================================
   LOS TONOS DE CARPETA -- cuero, tela y laton
   ========================================================================== */
.tono-cobre{--tono-front:linear-gradient(170deg,#9E5F41 0%,#7E4631 55%,#65361F 100%);
  --tono-back:#4E2918;--tono-txt:#F6E9DA;--tono-txt2:#EAD3BD;--tono-sello:#F3D9B8;
  --tono-perf:rgba(246,233,218,.55)}
.tono-verde{--tono-front:linear-gradient(170deg,#46755C 0%,#355E49 55%,#274B38 100%);
  --tono-back:#1B3427;--tono-txt:#EFE7D4;--tono-txt2:#D8D0B9;--tono-sello:#E8CF95;
  --tono-perf:rgba(239,231,212,.5)}
.tono-laton{--tono-front:linear-gradient(170deg,#D2AB6A 0%,#B38B47 55%,#977231 100%);
  --tono-back:#6F521F;--tono-txt:#2B2212;--tono-txt2:#3A2C14;--tono-sello:#3A2A12;
  --tono-perf:rgba(43,34,18,.5)}
.tono-humo{--tono-front:linear-gradient(170deg,#7A768E 0%,#646078 55%,#504C62 100%);
  --tono-back:#383546;--tono-txt:#F3F0F7;--tono-txt2:#DEDAE8;--tono-sello:#EDE8F5;
  --tono-perf:rgba(243,240,247,.5)}
/* La tela: una trama diagonal finisima encima del degradado. Sin esto el
   frente se ve como plastico. */
.art2-tela{background-image:
  repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px),
  var(--tono-front)}

/* ==========================================================================
   MIS TRABAJOS
   ========================================================================== */
/* --- La bandeja: lo que falta repartir, con su boton al lado ------------
   Antes esto era una frase debajo del titulo del grupo ("N trabajos
   todavia sin carpeta, se reparten abajo") y el boton estaba, en efecto,
   abajo del todo. Decir "abajo" y obligar a buscar es peor que poner la
   accion al lado del aviso. */
.art2-bandeja{border-radius:16px;padding:16px 18px;color:var(--art-tarjT);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px}
.art2-monton{position:relative;width:60px;height:54px;flex:none}
.art2-monton i{position:absolute;width:40px;height:46px;border-radius:2px;
  box-shadow:0 2px 4px rgba(0,0,0,.35)}
.art2-monton i:nth-child(1){left:3px;top:7px;background:#E6DCC4;transform:rotate(-9deg)}
.art2-monton i:nth-child(2){left:13px;top:3px;background:#EFE6D2;transform:rotate(6deg)}
.art2-monton i:nth-child(3){left:8px;top:5px;background:#F7F1E3;
  background-image:repeating-linear-gradient(180deg,transparent 0 7px,rgba(120,100,70,.2) 7px 8px)}
.art2-monton b{position:absolute;right:-4px;top:-6px;min-width:24px;height:24px;
  border-radius:12px;background:#E0A060;color:#231811;display:grid;place-items:center;
  font-family:'Jost',-apple-system,sans-serif;font-size:13px;font-weight:500;
  font-variant-numeric:tabular-nums;padding:0 5px;box-sizing:border-box}
.art2-bandeja-txt{flex:1 1 200px;min-width:0}
.art2-bandeja-t{display:block;font-family:'Italiana',Georgia,serif;font-size:20px;
  line-height:1.15;letter-spacing:.05em}
.art2-bandeja-p{display:block;margin-top:4px;font-size:13px;line-height:1.35;
  color:var(--art-tarjT2)}
.art2-bandeja-btn{flex:1 0 100%;min-height:48px;border-radius:24px;padding:0 20px;
  cursor:pointer;font-family:'Italiana',Georgia,serif;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--art-oro);background:var(--art-circ);
  color:var(--art-tinta);transition:filter .14s}
@media(min-width:700px){.art2-bandeja-btn{flex:0 0 auto}}
.art2-bandeja-btn.laton{border-color:#6E5427;color:#2B2212;
  background:linear-gradient(180deg,#EBD8A8 0%,#C9A86A 45%,#9C7A40 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 8px rgba(0,0,0,.35)}
.art2-bandeja-btn.laton:hover{filter:brightness(1.06)}
.art2-bandeja-btn.laton:active{filter:brightness(.92)}
/* El de contorno vive sobre MADERA, no sobre el fondo: ahi --art-tinta es
   del color del fondo y se perderia. */
.art2-bandeja-btn:not(.laton){color:var(--art-tarjT);background:rgba(255,255,255,.06)}
.art2-bandeja-btn:not(.laton):hover{background:rgba(191,160,106,.18)}

/* --- La rejilla de carpetas --------------------------------------------- */
.art2-carpetas{display:grid;grid-template-columns:minmax(0,1fr);gap:22px 16px;margin-top:22px}
@media(min-width:700px) and (max-width:1023px){
  .art2-carpetas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.art2-carpetas{grid-template-columns:repeat(3,minmax(0,1fr))}}

.art2-carpeta{position:relative;height:190px;border:0;background:none;padding:0;
  font:inherit;text-align:left;cursor:pointer;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.32));transition:transform .18s}
.art2-carpeta:hover{transform:translateY(-3px)}
/* La pestaña se escalona segun la posicion en la lista (1a, 2a, 3a), como
   en un archivador de verdad: si todas salieran en el mismo sitio, la
   rejilla parecerian cajas, no carpetas. */
.art2-carpeta .cp-pes{position:absolute;top:0;width:96px;height:22px;
  border-radius:9px 9px 0 0;background:var(--tono-back)}
.art2-carpeta.pes-0 .cp-pes{left:14px}
.art2-carpeta.pes-1 .cp-pes{left:calc(50% - 48px)}
.art2-carpeta.pes-2 .cp-pes{left:calc(100% - 110px)}
.art2-carpeta .cp-fondo{position:absolute;top:18px;left:0;right:0;bottom:0;
  border-radius:6px 12px 12px 12px;background:var(--tono-back)}
/* Los papeles solo asoman si la carpeta tiene algo dentro. Una carpeta
   vacia que asomara papeles estaria mintiendo. */
.art2-carpeta .cp-hoja{position:absolute;height:46px;border-radius:2px;
  box-shadow:0 1px 2px rgba(0,0,0,.25)}
.art2-carpeta .cp-hoja.a{top:26px;left:14px;right:26px;background:#E9DFC8;
  transform:rotate(-1.6deg)}
.art2-carpeta .cp-hoja.b{top:30px;left:26px;right:14px;background:#F7F1E3;
  background-image:repeating-linear-gradient(180deg,transparent 0 7px,rgba(120,100,70,.2) 7px 8px);
  transform:rotate(1.3deg)}
.art2-carpeta .cp-frente{position:absolute;top:44px;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;justify-content:space-between;gap:10px;
  padding:14px 14px 13px;border-radius:6px 12px 12px 12px;color:var(--tono-txt);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 -3px 8px rgba(0,0,0,.28)}
.art2-carpeta .cp-arriba{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
/* La etiqueta de papel pegada al frente: es lo unico claro sobre el tono,
   y por eso es lo primero que se lee. */
.art2-etiqueta{max-width:70%;padding:6px 10px 7px;border-radius:3px;
  background:#F3EBDB;color:#2B2016;
  box-shadow:inset 0 0 0 1px rgba(110,84,39,.35),0 1px 3px rgba(0,0,0,.3)}
.art2-etiqueta .et-clase{display:block;font-family:'Jost',-apple-system,sans-serif;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#6E5427}
.art2-etiqueta .et-nom{display:block;font-family:'Italiana',Georgia,serif;font-size:19px;
  line-height:1.08;letter-spacing:.04em;text-wrap:balance}
.art2-sello2{flex:none;margin-top:2px;padding:5px 9px 6px;border-radius:6px;
  border:1.5px solid var(--tono-sello);color:var(--tono-sello);
  transform:rotate(-6deg);text-align:center}
.art2-sello2 .se-n{display:block;font-family:'Italiana',Georgia,serif;line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.art2-sello2 .se-n.dinero{font-size:20px}
.art2-sello2 .se-n.cuenta{font-size:30px}
.art2-sello2 .se-et{display:block;margin-top:3px;font-family:'Jost',-apple-system,sans-serif;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.art2-carpeta .cp-meta{font-size:13px;line-height:1.35;color:var(--tono-txt2)}

.art2-carpeta-nueva{position:relative;height:190px;border:0;background:none;padding:0;
  font:inherit;cursor:pointer;color:var(--art-tinta2);transition:color .14s}
.art2-carpeta-nueva:hover{color:var(--art-tinta)}
.art2-carpeta-nueva .cp-pes{position:absolute;top:0;left:14px;width:96px;height:22px;
  border:1.5px dashed var(--art-oroM);border-bottom:0;border-radius:9px 9px 0 0}
.art2-carpeta-nueva .cp-cuerpo{position:absolute;top:20px;left:0;right:0;bottom:0;
  border:1.5px dashed var(--art-oroM);border-radius:6px 12px 12px 12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.art2-carpeta-nueva svg{width:28px;height:28px;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round}
.art2-carpeta-nueva span{font-family:'Italiana',Georgia,serif;font-size:17px;letter-spacing:.1em;
  text-transform:uppercase}

/* ==========================================================================
   EVENTOS
   ========================================================================== */
.art2-escenario{position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  align-items:center;gap:16px 22px;padding:18px 20px 34px;border-radius:18px;
  color:var(--art-tarjT);overflow:hidden}
@media(min-width:700px){
  .art2-escenario{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.art2-escenario img{width:100%;height:150px;object-fit:contain;display:block}
@media(min-width:700px) and (max-width:1023px){.art2-escenario img{height:190px}}
@media(min-width:1024px){.art2-escenario img{height:210px}}
.art2-esc-rot{display:block;font-family:'Jost',-apple-system,sans-serif;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:#D9BC82}
.art2-esc-n{display:block;font-family:'Italiana',Georgia,serif;font-size:48px;line-height:1;
  color:#E3C98E;font-variant-numeric:tabular-nums}
.art2-esc-pie{display:block;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--art-oroS);font-size:14px;color:var(--art-tarjT2);
  font-variant-numeric:tabular-nums}
/* Las candilejas del borde del escenario. Decorativas: aria-hidden. */
.art2-candilejas{position:absolute;left:26px;right:26px;bottom:13px;
  display:flex;justify-content:space-between}
.art2-candilejas i{width:6px;height:6px;border-radius:50%;background:#F2E4BC;
  box-shadow:0 0 8px 2px rgba(242,228,188,.4)}

.art2-entradas{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:22px}
@media(min-width:700px) and (max-width:1023px){
  .art2-entradas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.art2-entradas{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* La entrada de concierto, con su troquel. LA SOMBRA VA EN EL <button> (un
   drop-shadow del filtro) y no en el cuerpo: la mascara que hace las dos
   muescas recorta cualquier box-shadow, asi que ahi la sombra desaparecia. */
.art2-entrada{height:132px;border:0;background:none;padding:0;font:inherit;text-align:left;
  cursor:pointer;filter:drop-shadow(0 10px 12px rgba(0,0,0,.32));transition:transform .18s}
.art2-entrada:hover{transform:translateY(-3px) rotate(-.4deg)}
.art2-entrada .en-cuerpo{height:100%;display:flex;border-radius:12px;color:var(--tono-txt);
  -webkit-mask-image:
    radial-gradient(circle 10px at calc(100% - 112px) 0,transparent 9.5px,#000 10px),
    radial-gradient(circle 10px at calc(100% - 112px) 100%,transparent 9.5px,#000 10px);
  -webkit-mask-size:100% 51%;-webkit-mask-position:top,bottom;-webkit-mask-repeat:no-repeat;
  mask-image:
    radial-gradient(circle 10px at calc(100% - 112px) 0,transparent 9.5px,#000 10px),
    radial-gradient(circle 10px at calc(100% - 112px) 100%,transparent 9.5px,#000 10px);
  mask-size:100% 51%;mask-position:top,bottom;mask-repeat:no-repeat}
.art2-entrada .en-main{flex:1;min-width:0;display:flex;flex-direction:column;
  justify-content:space-between;padding:14px 14px 14px 18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.art2-entrada .en-rot{display:flex;align-items:center;gap:6px;
  font-family:'Jost',-apple-system,sans-serif;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tono-txt2)}
.art2-entrada .en-rot svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.5}
.art2-entrada .en-nom{font-family:'Italiana',Georgia,serif;font-size:28px;line-height:1.05;
  letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.art2-entrada .en-meta{font-size:13px;line-height:1.35;color:var(--tono-txt2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.art2-entrada .en-talon{flex:none;width:112px;border-left:1.5px dashed var(--tono-perf);
  margin:16px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:10px 8px;box-sizing:border-box}
.art2-entrada .en-talon .se-n{font-family:'Italiana',Georgia,serif;line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.art2-entrada .en-talon .se-n.dinero{font-size:21px}
.art2-entrada .en-talon .se-n.cuenta{font-size:36px}
.art2-entrada .en-talon .se-et{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tono-txt2);text-align:center}
.art2-entrada .en-talon .se-vacia{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tono-txt2)}
.art2-entrada-nueva{height:132px;border:1.5px dashed var(--art-oroM);border-radius:12px;
  background:none;cursor:pointer;color:var(--art-tinta2);
  display:flex;align-items:center;justify-content:center;gap:10px;transition:color .14s}
.art2-entrada-nueva:hover{color:var(--art-tinta)}
.art2-entrada-nueva svg{width:24px;height:24px;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round}
.art2-entrada-nueva span{font-family:'Italiana',Georgia,serif;font-size:17px;letter-spacing:.1em;
  text-transform:uppercase}

/* ==========================================================================
   HERRAMIENTAS
   ========================================================================== */
.art2-carrusel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;
  margin:8px -16px 0;padding:14px 16px 12px;scroll-padding:0 16px}
.art2-carrusel::-webkit-scrollbar{display:none}
@media(min-width:700px) and (max-width:1023px){
  .art2-carrusel{margin:8px -28px 0;padding:14px 28px 12px;scroll-padding:0 28px}}
@media(min-width:1024px){.art2-carrusel{margin:8px 0 0;padding:14px 0 12px}}
/* El padding de arriba NO se puede quitar: el filete sobresale 10px por
   encima de la pieza y sin ese hueco el carril lo recorta. */
.art2-herr-slide{flex:none;width:84%;scroll-snap-align:start;position:relative;
  min-height:388px;border-radius:18px;padding:30px 20px 22px;cursor:pointer;
  border:1px solid var(--art-oro);color:var(--art-tarjT);font:inherit;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  box-shadow:var(--art-marco);transition:border-color .16s}
@media(min-width:700px) and (max-width:1023px){.art2-herr-slide{width:min(44%,340px)}}
@media(min-width:1024px){.art2-herr-slide{width:calc((100% - 28px)/3)}}
.art2-herr-slide:hover{border-color:#D9BC82}
.art2-herr-slide .art2-filete{color:var(--art-oro)}
.art2-herr-num{font-family:'Italiana',Georgia,serif;font-size:15px;letter-spacing:.3em;
  color:#D9BC82}
.art2-herr-med{width:112px;height:112px;flex:none;border-radius:50%;display:grid;
  place-items:center;color:#2B2212;
  background:radial-gradient(circle at 35% 30%,#F2E4BC,#C9A86A 55%,#9C7A40);
  border:1px solid #6E5427;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 7px rgba(255,255,255,.1),
             inset 0 0 0 8px rgba(110,84,39,.35),0 8px 18px rgba(0,0,0,.45)}
.art2-herr-med svg{width:50px;height:50px;fill:none;stroke:currentColor;stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round}
/* La muestra es DECORATIVA y ESTATICA: no dice el tempo ni la nota de
   verdad. Un numero que parece en vivo y no lo esta miente peor que no
   poner nada. */
.art2-herr-muestra{height:34px;display:flex;align-items:flex-end;justify-content:center;gap:12px}
.art2-herr-muestra .mt{width:10px;height:10px;border-radius:50%;
  border:1.5px solid #D9BC82;box-sizing:border-box}
.art2-herr-muestra .mt.ac{width:14px;height:14px;border:0;background:#E3C98E;
  box-shadow:0 0 10px 2px rgba(227,201,142,.45)}
.art2-herr-muestra.barras{gap:3px}
.art2-herr-muestra.barras i{width:4px;border-radius:2px;background:#D9BC82}
.art2-herr-muestra.barras i.pico{background:#E0A060}
.art2-herr-t{font-family:'Italiana',Georgia,serif;font-size:28px;line-height:1.05;
  letter-spacing:.08em;text-align:center}
.art2-herr-p{font-size:14px;line-height:1.4;color:var(--art-tarjT2);max-width:260px;
  text-align:center;text-wrap:balance}
.art2-herr-abrir{margin-top:auto;height:40px;padding:0 22px;border-radius:20px;
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,#EBD8A8 0%,#C9A86A 45%,#9C7A40 100%);
  color:#2B2212;border:1px solid #6E5427;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 8px rgba(0,0,0,.35);
  font-family:'Italiana',Georgia,serif;font-size:15px;letter-spacing:.12em;
  text-transform:uppercase}
.art2-herr-abrir svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.art2-respaldo{margin-top:24px;display:flex;justify-content:center}
.art2-respaldo button{min-height:52px;width:100%;max-width:340px;border-radius:26px;
  border:1px solid var(--art-oro);background:var(--art-circ);color:var(--art-tinta);
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Italiana',Georgia,serif;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;transition:background .14s}
.art2-respaldo button:hover{background:rgba(191,160,106,.14)}
.art2-respaldo button svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.art2-carpeta:focus-visible,.art2-entrada:focus-visible,.art2-herr-slide:focus-visible,
.art2-carpeta-nueva:focus-visible,.art2-entrada-nueva:focus-visible,
.art2-volver:focus-visible,.art2-cerrar:focus-visible,.art2-bandeja-btn:focus-visible,
.art2-respaldo button:focus-visible{outline:2px solid var(--art-cobre);outline-offset:2px}

/* Dos zonas, una al lado de otra solo cuando hay sitio de verdad. */
.art2-2col{display:grid;gap:30px;margin-top:22px;grid-template-areas:"t" "d"}
.art2-2col > .zona-t{grid-area:t}
.art2-2col > .zona-d{grid-area:d}
@media(min-width:1024px){
  .art2-2col{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 28px;
    grid-template-areas:"t d"}
}
/* Perfil de Artista lleva sus tres estantes en una sola columna en todos
   los tamaños: son tres documentos en fila, no una rejilla. */
.alu-estantes.una-col{grid-template-columns:minmax(0,1fr)}

/* Los puntos del carril de Herramientas solo hacen falta donde NO caben
   las tres piezas. En la Mac se ven las tres de una vez y un indicador de
   "hay mas a la derecha" seria mentira. (En Academias es al contrario: ahi
   caben dos de cuatro, por eso alli si se quedan.) */
@media(min-width:1024px){
  .art2-modal .art2-puntos.solo-chico{display:none}
}
/* Con Cerrar mudado al pie quedan TRES acciones en una reja de dos: la
   ultima se estiraba a media fila y dejaba un hueco al lado. Si el numero
   es impar, la ultima toma la fila entera. */
.alu-acciones > :last-child:nth-child(odd){grid-column:1/-1}

/* EL TITULO Y LA PLACA SON UNA FILA QUE SE PARTE, no dos columnas fijas.
   Con `grid-template-columns:1fr auto` la columna de la placa no puede
   encogerse, asi que con un titulo largo ("BIBLIOTECA", "HERRAMIENTAS") la
   placa se salia de la pantalla en el telefono -- se vio. En flex con wrap,
   cuando no caben lado a lado la placa baja a su propia linea y se queda
   pegada a la derecha, colgando igual. */
.art2-modal .art2-tit{display:block}
/* La placa viaja DENTRO de la fila de la firma y pegada a la derecha. En
   una columna aparte a la altura del titulo pasaban dos cosas en el
   telefono: con un titulo largo la columna no podia encogerse y la placa se
   salia por la derecha, y al partirse la fila quedaba a la IZQUIERDA del
   titulo -- que es justo lo que el reporto. Aqui no tiene con quien pelear.
   Y de paso queda donde la pidio: a la altura del nombre, no del titulo. */
.art2-modal .art2-firma{flex-wrap:wrap;align-items:center;row-gap:8px}
.art2-modal .art2-placa-col{margin-left:auto;text-align:center}
/* El medallon redondo tambien dentro de una casilla, no solo en un estante:
   su radio estaba declarado en `.art2-estante .alu-med` y en "Subir un
   archivo" salia cuadrado. */
.art2-tile .alu-med{border-radius:50%;display:grid;place-items:center;color:#2B2212;flex:none}
/* Dentro del medallon el trazo va OSCURO. `.art2-tile .alu-ico` lo pinta
   #D9BC82 (laton sobre madera) y ahi quedaba laton sobre laton: el icono
   de "Subir un archivo" desaparecia dentro de su propia moneda. */
.art2-tile .alu-med .alu-ico{color:inherit}
/* EL TITULO DE UNA PUERTA SI SE PARTE EN DOS LINEAS. `.art2-h1` lleva
   `white-space:nowrap` porque en la pantalla madre dice "El Artista" y ahi
   cabe siempre; aqui hay titulos de dos y tres palabras ("Perfil de
   Artista", "Mis Trabajos") y en el telefono se salian por la derecha --
   "PERFIL DE ARTIST" cortado a la mitad. `balance` reparte las palabras
   entre las lineas en vez de dejar una huerfana. */
.art2-modal .art2-h1{white-space:normal;text-wrap:balance}

/* ==========================================================================
   LA VOZ DE LOS TITULOS  ·  25 de septiembre de 2026

   Italiana sale de los NOMBRES y se queda solo en los ROTULOS.

   Pedido suyo: "el tipo de letra que se usa en el titulo L'agenda es que
   quiero que uses para todos los titulos de las carpetas, porque se lee
   mejor". Esa letra es la del sistema -- `.sec-cab h1` hereda de `body`.
   Y tiene razon medible: Italiana tiene la altura de x muy baja, asi que a
   17-19px un nombre propio ("Conservatorio Nacional") se lee con esfuerzo,
   y en mayusculas peor todavia.

   Asi que los nombres pasan a la letra del sistema, en caja mixta y con
   algo mas de peso. Italiana SE QUEDA donde de verdad es marca y el texto
   es corto y conocido: la placa, los separadores (ACADEMIAS, GESTION), los
   rotulos de los sellos, los numerales y los botones.

   Los cuerpos bajan un punto o dos: a igual tamano la letra del sistema se
   ve mas grande que Italiana, justamente por esa altura de x.
   ========================================================================== */
.art2{--art-nombre:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif}

/* El titulo de cada puerta, y el de El Artista. */
.art2 .art2-h1{font-family:var(--art-nombre);font-weight:500;
  text-transform:none;letter-spacing:-.01em}
.art2-modal .art2-h1{font-size:34px}
@media(min-width:700px) and (max-width:1023px){.art2-modal .art2-h1{font-size:42px}}
@media(min-width:1024px){.art2-modal .art2-h1{font-size:46px}}

/* Los nombres de las casillas, carpetas, entradas y estantes. */
.art2 .alu-t,.art2 .art2-h3,.art2 .art2-slide-t,.art2 .art2-bandeja-t,
.art2 .art2-etiqueta .et-nom,.art2 .art2-entrada .en-nom,.art2 .art2-herr-t,
.art2 .alu-papelf .alu-t,.art2 .alu-mad .alu-t{
  font-family:var(--art-nombre);font-weight:500;text-transform:none;
  letter-spacing:-.005em}
.art2 .art2-tile .alu-t{font-size:16px;line-height:1.2}
.art2 .art2-estante .alu-t{font-size:18px;line-height:1.2}
.art2 .alu-papelf .alu-t,.art2 .alu-mad .alu-t{font-size:16px;line-height:1.2}
.art2 .art2-etiqueta .et-nom{font-size:16px;line-height:1.15}
.art2 .art2-entrada .en-nom{font-size:21px;line-height:1.15}
.art2 .art2-herr-t{font-size:21px;line-height:1.2}
.art2 .art2-bandeja-t{font-size:17px;line-height:1.25}
.art2 .art2-slide-t{font-size:18px;line-height:1.25}
.art2 .art2-h3{font-size:18px;line-height:1.25}
.art2-logos .art2-h3,.art2-hoja-frente .art2-h3{font-size:18px}
@media(min-width:1024px){
  .art2-logos .art2-h3,.art2-hoja-frente .art2-h3{font-size:20px}
  .art2 .art2-estante .alu-t{font-size:19px}
}
/* Aqui habia una regla `.alu-papelf .alu-t[style]` para marcar la cifra del
   pergamino por "tiene un style en linea". Se quito, y no por limpieza:
   ajustarNombres() escribe un font-size en linea en CADA nombre que ajusta,
   asi que esa regla empezo a agarrarlos a todos y los devolvia a Italiana
   en mayusculas -- "MIS PROGRAMAS" salia asi. Ahora la cifra se marca con
   su propia clase, .alu-t-cifra, que es lo que debio ser desde el principio. */

/* EL SELLO DE LA FIRMA: las iniciales de quien firma, no un PNG. */
.art2-sello{width:44px;height:44px;flex:none;border-radius:50%;
  border:1px solid var(--art-oro);background:var(--art-tarj);
  color:var(--art-tarjT);display:grid;place-items:center;
  transform:rotate(-8deg);font-family:'Italiana',Georgia,serif;font-size:19px;
  letter-spacing:.04em}
/* Y en la repisa de "Logos y Nombre", mientras no haya logo subido. */
.art2-logo-hueco{display:grid;place-items:center;width:66px;height:66px;margin:0 auto;
  border-radius:6px;border:1px solid var(--art-oro);background:var(--art-tarj);
  color:var(--art-tarjT);font-family:'Italiana',Georgia,serif;font-size:26px;
  letter-spacing:.04em}
.art2-logos .art2-logo-hueco{width:48px;height:48px;font-size:20px}
@media (min-width:1024px){.art2-logos .art2-logo-hueco{width:66px;height:66px;font-size:26px}}

/* --- El laton tambien pide una letra que se lea ---------------------------
   Reportado el 25 de sep: "en el boton agregar alumno la letra se desajusta"
   y "en la placa lo que esta escrito casi no se aprecia, se lee con
   dificultad". Las dos cosas son el mismo problema.

   Italiana es una romana de trazo finisimo: sobre el degradado del laton
   (que en su parte alta es casi del color del texto) a 15-16px el trazo
   desaparece. Y con .1em de separacion entre letras "AGREGAR ALUMNO" no
   cabia en media fila del telefono, asi que partia en dos renglones y
   quedaba descuadrado al lado del "+".

   Sobre metal grabado lo que se lee es una letra de palo, corta y con peso.
   Y el texto baja a un tono mas oscuro: #241B0C contra el laton medio da
   contraste de sobra. */
.art2 .art2-placa,
.art2 .alu-btn,.art2 .art2-cerrar,.art2 .art2-bandeja-btn,
.art2 .art2-herr-abrir,.art2 .art2-respaldo button,
.art2 .art2-carpeta-nueva span,.art2 .art2-entrada-nueva span{
  font-family:var(--art-nombre);font-weight:600;letter-spacing:.06em}
.art2 .art2-placa{font-size:12.5px;letter-spacing:.1em;color:#241B0C}
.art2 .alu-btn,.art2 .art2-cerrar,.art2 .art2-bandeja-btn,
.art2 .art2-respaldo button{font-size:13.5px}
.art2 .art2-herr-abrir{font-size:13px}
.art2 .art2-carpeta-nueva span,.art2 .art2-entrada-nueva span{font-size:13.5px}
.art2 .alu-btn.laton,.art2 .art2-bandeja-btn.laton,.art2 .art2-herr-abrir{color:#241B0C}
/* Y que nunca parta en dos renglones al lado de su icono. */
.art2 .alu-btn,.art2 .art2-bandeja-btn,.art2 .art2-cerrar,
.art2 .art2-respaldo button{white-space:nowrap}
.art2 .alu-btn{padding:0 10px;gap:6px}

/* ==========================================================================
   LA BARRA DE ABAJO SE LEE  ·  25 de septiembre de 2026

   Medido, no supuesto. Con la funcion de contraste corrida sobre la barra:
   "Inicio" encendido daba 2.2:1, "Míos" 3.77, "Balance" 4.32 y "Capitale"
   4.4 -- el minimo para texto chico es 4.5. Eso es lo que el reporto como
   "los contrastes donde hay colores involucrados estan fallando".

   EL PEOR ERA EL ENCENDIDO, y por una razon concreta: la pastilla de cobre
   la puso el rediseño con `.pestanas button.activa`, pero mas arriba ya
   existia `.pestanas.seis button.activa{color:var(--cb)}` -- una clase mas,
   asi que gana. Resultado: fondo de cobre con la letra del color de su
   seccion (crema en Inicio) = crema sobre cobre. Aqui se gana con el mismo
   peso de selector.
   ========================================================================== */
.pestanas.seis button{font-size:11px;padding:7px 2px}
.pestanas.seis button svg{opacity:.85}
.pestanas.seis button.activa{color:var(--art-cobreT)}
.pestanas.seis button.activa svg{color:var(--art-cobreT);opacity:1}

/* Los cuatro colores que no llegaban, subidos de luz lo justo. Siguen
   siendo el mismo color de cada seccion, con mas claridad para poder vivir
   sobre un fondo oscuro a 11px. */
/* Cada pastilla de la barra lleva ademas su propio velo claro
   (--art-barraOp, un 14% de crema), asi que el fondo real bajo la letra no
   es el verde de la barra sino un verde mas claro -- y ahi es donde estos
   tres se quedaban cortos. Subidos de luz lo justo para pasar de 4.5:1
   sobre ese velo, sin dejar de ser el color de su seccion. */
/* Se corrige el COLOR, no la variable: index.html trae `--c` escrito en el
   atributo style de cada boton, y un estilo en linea le gana a cualquier
   hoja. `:not(.activa)` deja en paz al encendido, que va en el tono oscuro
   del cobre. El icono si lee --cb, que no viene en linea. */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .pestanas.seis button[data-vista="sec-capitale"]:not(.activa){color:#EABB7C;--cb:#EABB7C}
  :root:not([data-tema="claro"]) .pestanas.seis button[data-vista="sec-balance"]:not(.activa){color:#CFC7DC;--cb:#CFC7DC}
  :root:not([data-tema="claro"]) .pestanas.seis button[data-vista="sec-mios"]:not(.activa){color:#DFB4A3;--cb:#DFB4A3}
}
:root[data-tema="oscuro"] .pestanas.seis button[data-vista="sec-capitale"]:not(.activa){color:#EABB7C;--cb:#EABB7C}
:root[data-tema="oscuro"] .pestanas.seis button[data-vista="sec-balance"]:not(.activa){color:#CFC7DC;--cb:#CFC7DC}
:root[data-tema="oscuro"] .pestanas.seis button[data-vista="sec-mios"]:not(.activa){color:#DFB4A3;--cb:#DFB4A3}

/* --- Las sub-pestañas: la misma distribucion en las seis -----------------
   Reportado: "si entro a biblioteca esa organizacion desaparece y se pone
   otra, y asi va cambiando". Medido: la pastilla encendida pesaba 500 y las
   demas 300, asi que la encendida era 4-9px mas ancha y toda la fila se
   corria. Seis pantallas, seis repartos distintos.

   La encendida no necesita el peso: ya es de laton lleno, que es la marca
   mas fuerte que hay en esta piel. Con el mismo peso, las seis filas miden
   exactamente igual y se parten por el mismo sitio. */
.art2 .art-chip.activo{font-weight:300}

/* ==========================================================================
   LOS TITULOS, A SU TAMAÑO  ·  25 de septiembre de 2026

   Ayer los baje demasiado. La correccion no es solo subirlos: es subirlos Y
   dejar que el que no quepa se encoja solo (--t-max / --t-min, los lee
   ajustarNombres() en util/piel-artista.js). Asi "CLN" se ve grande y
   "Coro de la Catedral Primada" cabe entero en la misma casilla, sin que
   haya que elegir un tamaño que le sirva mal a los dos.

   LOS NUMEROS SALEN DE ITALIANA. Ya se hablo al hacer la piel de L'Agenda:
   Italiana no trae numeros de ancho fijo y sus cifras se leen con esfuerzo.
   Pasan a la letra del sistema, tabular y con peso. Solo se quedan en
   Italiana los numerales romanos del carrusel (I, II, III), que en un palo
   seco no se leerian como numeros sino como rayas.
   ========================================================================== */
.art2 .art2-tile .alu-t{--t-max:19;--t-min:14;font-size:19px;line-height:1.18}
.art2 .art2-estante .alu-t{font-size:21px;line-height:1.15}
.art2 .alu-papelf .alu-t,.art2 .alu-mad .alu-t{--t-max:19;--t-min:14;
  font-size:19px;line-height:1.18}
.art2 .art2-etiqueta .et-nom{--t-max:19;--t-min:13.5;font-size:19px;line-height:1.12}
.art2 .art2-entrada .en-nom{--t-max:25;--t-min:16;font-size:25px;line-height:1.1}
.art2 .art2-herr-t{font-size:25px;line-height:1.15}
.art2 .art2-bandeja-t{font-size:20px;line-height:1.2}
.art2 .art2-slide-t{font-size:20px;line-height:1.2}
.art2 .art2-h3{font-size:20px;line-height:1.2}
@media(min-width:1024px){
  .art2 .art2-estante .alu-t{font-size:23px}
  .art2-logos .art2-h3,.art2-hoja-frente .art2-h3{font-size:22px}
}
/* La "CV" del pergamino de Perfil no es un nombre, es un rotulo de dos
   letras: ahi Italiana grande si se lee y es la que da el caracter. */
.art2 .alu-papelf .alu-t-cifra{font-family:'Italiana',Georgia,serif;font-weight:400;
  text-transform:uppercase;font-size:34px;letter-spacing:.06em;line-height:1}

/* --- Las cifras ---------------------------------------------------------- */
.art2 .alu-n,.art2 .alu-n-esq,.art2 .art2-sello2 .se-n,
.art2 .art2-entrada .en-talon .se-n,.art2 .art2-esc-n{
  font-family:var(--art-nombre);font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.art2 .alu-papelf .alu-n{font-size:28px}
.art2 .alu-mad .alu-n{font-size:30px}
.art2 .art2-tile .alu-n-esq{font-size:27px;top:16px}
.art2 .art2-sello2 .se-n.dinero{font-size:16px}
.art2 .art2-sello2 .se-n.cuenta{font-size:25px}
.art2 .art2-entrada .en-talon .se-n.dinero{font-size:17px}
.art2 .art2-entrada .en-talon .se-n.cuenta{font-size:29px}
.art2 .art2-esc-n{font-size:40px}

/* ==========================================================================
   L'AGENDA v2  ·  27 de septiembre de 2026
   Handoff: docs/design_handoff_l_agenda/README.md

   Los colores son los MISMOS --art-* de El Artista: el handoff de L'Agenda
   trae exactamente esa paleta (#13211C, #BFA06A, #CC9A72...) en los dos
   temas, asi que definir otra seria tener dos nombres para un solo color y
   arriesgarse a que un dia se separen. Lo unico propio es el papel de la
   cartela rasgada, que aqui es pergamino calido y en El Artista es verdoso.
   ========================================================================== */
.ag2{
  /* El pergamino de la cartela rasgada. Es lo UNICO que no sale de la paleta
     --art-*: alli el papel es verdoso y aqui el handoff lo quiere calido. Y
     cambia con el tema por necesidad, no por gusto -- el tono oscuro (#E9DCBC)
     sobre el suelo crema del tema claro queda casi del mismo color y la
     cartela desaparece. */
  --ag-papel:#F4EAD2; --ag-papelT:#2B2016; --ag-papelT2:#5E4D3A;
  --ag-tarjT:#F1E3C8; --ag-tarjT2:#E3CFAE; --ag-cifra:#D9BC82;
  /* Medido: el sello "Duplicado" daba 3.88:1 sobre su papel, y 2.68:1 cuando
     el papel (que estaba al 82%) dejaba pasar una foto oscura por detras. El
     minimo es 4.5. Dos cambios, los dos honestos: el papel se vuelve opaco
     --un sello de tinta sobre papel no es translucido-- y el rojo baja lo
     justo. Asi da 4.60 y se sigue viendo del mismo color. */
  --ag-rojo:#A84549;
  /* El grano del cuero: dos tramas de puntos, una que hunde y otra que
     levanta. Va encima del degradado en cada superficie de piel. */
  --ag-grano:
    radial-gradient(rgba(0,0,0,.10) 1px,transparent 1.3px),
    radial-gradient(rgba(255,230,200,.05) 1px,transparent 1.3px);
  --ag-grano-tam:5px 5px,7px 7px;
  --ag-grano-pos:0 0,2px 3px;
  --ag-luz:radial-gradient(ellipse 90% 70% at 25% 15%,rgba(255,200,150,.16),transparent 60%);
  --ag-sombra-tarj:inset 0 1px 0 rgba(255,220,180,.18),0 14px 26px rgba(0,0,0,.42);
  /* El respiro lateral de la pagina. El carril lo necesita con signo
     contrario para poder sangrar de borde a borde. */
  --ag-gutter:18px;
  --ag-diapo:72%;          /* cuanto del carril ocupa la del medio */

  position:relative;background:var(--art-suelo);color:var(--art-tinta);
  margin:calc(-1 * var(--pad-seccion,16px));
  padding:calc(env(safe-area-inset-top) + 8px) var(--ag-gutter)
          calc(env(safe-area-inset-bottom) + 108px);
  /* `clip` y no `hidden`: corta a lo ancho sin convertir esto en un
     contenedor de scroll, asi que las ilustraciones de las carpetas siguen
     asomando por ARRIBA, que es donde tienen que asomar. Hace falta porque
     el halo de la esfera se sale 17px por la derecha (inset -6% de 290px) y
     eso solito le metia barra horizontal a toda la pagina. */
  overflow-x:clip;
  font-family:'Jost',-apple-system,sans-serif;min-height:100%;
  background-image:
    radial-gradient(ellipse 80% 55% at 12% 0%,rgba(255,255,255,.07),transparent 62%),
    radial-gradient(ellipse 70% 45% at 95% 55%,rgba(0,0,0,.22),transparent 60%),
    radial-gradient(ellipse 60% 40% at 10% 90%,rgba(255,255,255,.05),transparent 60%);
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .ag2{
    --ag-papel:#E9DCBC; --ag-papelT:#2A2016; --ag-papelT2:#4A3B2A;
  }
}
:root[data-tema="oscuro"] .ag2{
  --ag-papel:#E9DCBC; --ag-papelT:#2A2016; --ag-papelT2:#4A3B2A;
}

/* El mismo ruido de papel bajo lampara que El Artista, para que las dos
   secciones se sientan del mismo mundo. */
.ag2::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.10;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ag2-inner{position:relative;max-width:none;margin:0 auto}
.ag2 button{font-family:inherit;color:inherit}
.ag2 :focus-visible{outline:2px solid var(--art-cobre);outline-offset:2px}

/* --- El encabezado: el nombre y la esfera armilar ------------------------ */
/* Las dos columnas encogen A LA VEZ. Con la esfera clavada en 138px y el
   nombre en los 58px del diseño, "L'Agenda" pide 206px y en un iPhone de 375
   solo quedan 191: se salia por la derecha, por debajo de la esfera. Bajar
   solo la letra tampoco bastaba -- a 320px no cabe ni encogida --, asi que
   las dos medidas van en vw y se estrechan juntas hasta que en 406px para
   arriba vuelven a ser las del handoff. */
.ag2-hero{display:grid;grid-template-columns:minmax(0,1fr) clamp(100px,36.5vw,138px);
  align-items:center;gap:10px;margin-top:22px}
.ag2-h1{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(38px,13.4vw,58px);line-height:.95;letter-spacing:-.005em;
  color:var(--art-tinta)}
.ag2-sub{margin:14px 0 0;max-width:30ch;font-size:15px;line-height:1.4;
  font-weight:300;color:var(--art-tinta2);text-wrap:pretty}
.ag2-esfera{position:relative;display:grid;place-items:center}
/* El halo de oro detras. Va en ::before para no tocar la imagen, que ya
   lleva su propia sombra proyectada. */
.ag2-esfera::before{content:"";position:absolute;inset:8% -6% 4%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(214,178,110,.22),transparent 72%)}
.ag2-esfera img{position:relative;display:block;width:100%;height:auto;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.45))}

/* --- La cabecera de cada carrusel --------------------------------------- */
.ag2-seccion{margin-top:44px}
.ag2-cab{display:flex;align-items:center;gap:14px}
.ag2-rotulo{margin:0;font-size:13px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--art-oro)}
.ag2-hilo{flex:1;height:1px;background:linear-gradient(90deg,var(--art-oroS),transparent)}
/* Las flechas solo en iPad y escritorio: en el celular el dedo ya arrastra,
   y dos botones de 40px le quitarian ancho al carril sin dar nada. */
.ag2-flechas{display:none;gap:8px}
.ag2-flecha{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--art-oroS);background:var(--art-circ);color:var(--art-oro);
  cursor:pointer;padding:0}
.ag2-flecha:hover{border-color:var(--art-oro)}
.ag2-flecha svg{width:18px;height:18px}

/* --- Los carriles -------------------------------------------------------
   Sangran de borde a borde con un margen negativo igual al respiro de la
   pagina, para que una diapositiva pueda asomar por el canto de la pantalla
   en vez de morir contra el margen. */
.ag2-carril{display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  margin-inline:calc(-1 * var(--ag-gutter));
  scrollbar-width:none;-ms-overflow-style:none}
.ag2-carril::-webkit-scrollbar{display:none}

/* EL CARRIL DE FOCO CENTRAL.
   El hueco de los lados es (ancho del carril - ancho de la diapositiva) / 2:
   sin el, la primera y la ultima nunca podrian quedar centradas, y hacen
   falta las dos.
   VA EN LOS MARGENES DE LA PRIMERA Y LA ULTIMA, no en el padding del carril.
   El motivo no es de gusto: un flex-basis en porcentaje se mide contra la
   caja de contenido, o sea DESCONTANDO ya el relleno, asi que poniendolo
   como padding la cuenta se aplicaba dos veces y en escritorio la
   diapositiva salia de 118px en vez de 425. Un margen porcentual se mide
   contra esa misma caja, asi que las dos medidas hablan del mismo ancho. */
.ag2-coverflow{margin-top:16px}
.ag2-coverflow > :first-child{margin-left:calc((100% - var(--ag-diapo)) / 2)}
.ag2-coverflow > :last-child{margin-right:calc((100% - var(--ag-diapo)) / 2)}
.ag2-diapo{position:relative;flex:0 0 var(--ag-diapo);height:300px;
  scroll-snap-align:center;border:0;background:none;padding:0;cursor:pointer;
  transform:scale(.66);opacity:.42;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s}
.ag2-diapo.activa{transform:scale(1);opacity:1}
.ag2-brillo{position:absolute;inset:4% 0 10%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(214,178,110,.26),
             rgba(214,178,110,.08) 55%,transparent 75%)}
.ag2-piso{position:absolute;bottom:3%;left:14%;right:14%;height:12%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent)}
.ag2-diapo img{position:absolute;bottom:5.5%;left:50%;transform:translateX(-50%);
  max-width:100%;max-height:90%;width:auto;height:auto;display:block;
  filter:drop-shadow(0 22px 18px rgba(0,0,0,.5))}
/* El carrusel de "Organizar" (30 de sep) lleva su nombre debajo: son dos
   puertas distintas y el objeto solo no dice cuál es cuál. */
.ag2-diapo-rot{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;
  align-items:center;gap:2px;text-align:center;color:var(--texto);pointer-events:none}
.ag2-diapo-rot b{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:22px;line-height:1.1}
.ag2-diapo-rot i{font-style:normal;font-size:12.5px;color:var(--suave)}
.ag2-diapo:has(.ag2-diapo-rot) img{bottom:24%;max-height:70%}
.ag2-diapo:has(.ag2-diapo-rot) .ag2-piso{bottom:20%}
/* Lo que viene y los repetidos, como avisos bajo el mes (30 de sep). */
.ag2-avisos{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.ag2-avisos:empty{display:none}
.ag2-lqv{background:var(--panel);border:1px solid var(--borde);border-radius:14px;padding:14px 16px}
.ag2-lqv-cab{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.ag2-lqv-cab h2{font-size:17px;margin:0}
.ag2-lqv li[data-fecha]{cursor:pointer}
.ag2-rep{width:100%;text-align:left;cursor:pointer;border:0;font:inherit;color:inherit}
.cal-tipos{display:flex;justify-content:flex-end;margin-top:6px}
/* Las dos pestañas de Mis Trabajos (Fijos / Eventos sueltos), 30 de sep. */
.art2-pestanas{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
/* "Semana" junto a "+ Agregar" en el mes: toma el color de la piel (clara u
   oscura). Con el .btn de siempre salía blanco sobre blanco en Riel y Consola. */
.cal-tarjeta .fila-btns .btn:not(.primario){background:transparent;color:inherit;
  border:1px solid color-mix(in srgb,currentColor 35%,transparent)}
.cal-tipos .btn.sutil{color:inherit;opacity:.8}

/* Los puntos: pastillas que se estiran al activarse.

   EL BOTON ES EL AREA DE TOQUE; LA PASTILLA ES SOLO LO QUE SE VE. Antes el
   boton media 6x6 px DE VERDAD -- medido en el navegador, no supuesto: el
   mismo tamaño del punto dibujado, sin un pixel de relleno. Eso es la
   cuarta parte de lo minimo que pide WCAG (24px) y la septima parte de lo
   que pide Apple (44). Con el pulgar en el telefono no se acierta, y quien
   no acierta dos veces deja de intentarlo.

   El arreglo no cambia nada de lo que se ve: el boton pasa a 28x44 y la
   pastilla la dibuja ::before. Es el mismo patron que El Artista ya usaba
   con un <i> dentro (ver .art2-punto) -- aqui se hace sin tocar el HTML.
   El margen baja de 18 a 0 porque el boton ya trae su propio alto: asi el
   punto queda donde estaba, no 20px mas abajo. */
.ag2-puntos{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:0}
.ag2-punto{width:28px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center}
.ag2-punto::before{content:"";display:block;width:6px;height:6px;border-radius:3px;
  background:var(--art-oroS);transition:width .25s,background .25s}
.ag2-punto[aria-current="true"]::before{width:22px;background:var(--art-oro)}

/* --- La cartela de papel rasgado ---------------------------------------- */
.ag2-papel{position:relative;margin-top:28px;padding:20px 22px;
  background-color:var(--ag-papel);color:var(--ag-papelT);
  background-image:
    radial-gradient(ellipse 70% 90% at 30% 40%,rgba(255,255,255,.35),transparent 70%),
    radial-gradient(ellipse 60% 80% at 90% 80%,rgba(140,100,50,.14),transparent 70%);
  /* El rasgado es un poligono, no un borde: asi los cuatro cantos quedan
     irregulares de verdad. La sombra tiene que ser drop-shadow -- box-shadow
     se dibujaria sobre el rectangulo, no sobre el papel roto. */
  clip-path:polygon(0 3%,3% 0,12% 2%,24% 0,38% 3%,52% 1%,66% 3%,80% 0,92% 2%,100% 0,
    99% 22%,100% 48%,98.5% 74%,100% 100%,86% 97%,70% 100%,55% 97%,40% 100%,
    26% 97%,12% 100%,0 97%,1.5% 72%,0 46%,1% 20%);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.ag2-papel-k{display:block;font-size:14px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ag-papelT)}
.ag2-papel-t{margin:6px 0 0;font-size:15px;line-height:1.45;
  color:var(--ag-papelT2);text-wrap:pretty}

/* --- Las dos carpetas de cuero ------------------------------------------
   El margen de arriba es grande a proposito: la ilustracion se sale por
   encima de la tarjeta y necesita sitio donde asomar. */
.ag2-carpetas{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:56px}
.ag2-carpetas.sola{grid-template-columns:1fr;max-width:420px}
/* El mes puesto en la portada (UX-004/UX-013): la misma tarjeta del calendario,
   sin ventana alrededor. */
.ag2-mes{margin-top:28px}
.ag2-mes > .cal-tarjeta{margin:0}
.ag2-carpeta,.ag2-ficha{position:relative;border:0;padding:0;cursor:pointer;
  text-align:left;border-radius:18px;box-shadow:var(--ag-sombra-tarj);
  color:var(--ag-tarjT)}
.ag2-carpeta{height:210px;overflow:visible}
.ag2-carpeta:hover,.ag2-ficha:hover{filter:brightness(1.07)}

/* Las tres pieles. El orden importa: primero el grano y la luz, y el
   degradado del color debajo de todo. */
.ag2-marron{background-color:#5A3320;
  background-image:var(--ag-grano),var(--ag-luz),
    linear-gradient(160deg,#7A4A2E,#5A3320 60%,#45271A);
  background-size:var(--ag-grano-tam),auto,auto;
  background-position:var(--ag-grano-pos),0 0,0 0}
.ag2-verde{background-color:#28432F;
  background-image:var(--ag-grano),var(--ag-luz),
    linear-gradient(160deg,#3A5A44,#28432F 60%,#1D3324);
  background-size:var(--ag-grano-tam),auto,auto;
  background-position:var(--ag-grano-pos),0 0,0 0}

/* El pespunte: la costura por dentro del canto. */
.ag2-pespunte{position:absolute;inset:8px;border-radius:12px;pointer-events:none;
  border:1.5px dashed rgba(236,196,148,.5)}
.ag2-verde .ag2-pespunte{border-color:rgba(214,190,130,.45)}

.ag2-carpeta > img{position:absolute;top:-38px;right:-6px;width:84%;height:auto;
  filter:drop-shadow(0 14px 14px rgba(0,0,0,.5));pointer-events:none}
.ag2-carpeta-txt{position:absolute;left:0;bottom:0;padding:18px;
  display:block;max-width:100%}
.ag2-carpeta-t{display:block;font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;font-size:26px;line-height:1.05;color:var(--ag-tarjT)}
.ag2-carpeta-n{display:block;margin-top:8px;font-size:14px;color:var(--ag-tarjT2);
  font-variant-numeric:tabular-nums}

/* --- El carril de los eventos ------------------------------------------- */
.ag2-fila{gap:14px;margin-top:16px;padding-inline:var(--ag-gutter);
  /* Sin esto el iman se pega al canto de la PRIMERA ficha y arrastra el
     carril 18px, dejandola pegada al borde de la pantalla: el respiro de la
     pagina desaparecia en cuanto cargaba. */
  scroll-padding-inline:var(--ag-gutter)}
.ag2-ficha{flex:0 0 92%;height:240px;scroll-snap-align:start;overflow:hidden;
  transform:scale(.96);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.ag2-ficha.activa{transform:scale(1)}
.ag2-ficha-txt{position:absolute;left:0;bottom:0;padding:18px;display:block;max-width:52%}
/* Cada ficha reparte su ancho distinto porque lo que lleva a la derecha
   ocupa distinto: el abanico es ancho, el fichero cabe mas justo y la
   cartela de laton necesita sitio para no partirse. */
.ag2-marron .ag2-ficha-txt{max-width:54%}
.ag2-nogal .ag2-ficha-txt{max-width:62%}
.ag2-fieltro .ag2-ficha-txt{max-width:50%}
.ag2-ficha-t{display:block;font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;font-size:28px;line-height:1.05;color:var(--ag-tarjT)}
.ag2-cifra{display:block;font-family:'Cormorant Garamond',Georgia,serif;
  font-size:34px;line-height:1.05;color:var(--ag-cifra);font-variant-numeric:tabular-nums}
.ag2-cifra:empty{display:none}
.ag2-ficha-n{display:block;margin-top:4px;font-size:14px;color:var(--ag-tarjT2);
  font-variant-numeric:tabular-nums}

/* a · GESTION DE EVENTOS — el abanico de invitaciones.
   Son TRES copias de la misma imagen, cada una girada y apagada distinto:
   es lo que da el volumen de un mazo sin pedir tres ilustraciones. */
.ag2-abanico{position:absolute;right:-8%;top:6%;width:56%;height:74%;pointer-events:none}
.ag2-abanico img{position:absolute;left:4%;top:14%;width:90%;height:auto;
  transform-origin:50% 50%}
.ag2-abanico .atras{transform:rotate(-20deg) translate(-14%,4%);filter:brightness(.72)
  drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.ag2-abanico .medio{transform:rotate(-8deg) translate(-3%,2%);filter:brightness(.86)
  drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.ag2-abanico .frente{transform:rotate(6deg) translate(8%,6%);
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.5))}

/* b · TRAER CALENDARIOS — nogal con su porta-etiquetas de laton. */
.ag2-nogal{background-color:#3A2517;border:1px solid #B8904F;
  background-image:
    repeating-linear-gradient(88deg,rgba(0,0,0,.18) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(92deg,rgba(255,210,160,.05) 0 1px,transparent 1px 15px),
    radial-gradient(ellipse 80% 60% at 30% 12%,rgba(255,200,150,.14),transparent 62%),
    linear-gradient(170deg,#5A3A24,#35211A 70%);
  box-shadow:inset 0 0 0 5px #24160E,inset 0 0 0 6px rgba(191,160,106,.55),
             0 14px 26px rgba(0,0,0,.42)}
.ag2-fichero{position:absolute;right:-3%;top:9%;width:50%;height:auto;
  filter:drop-shadow(0 12px 12px rgba(0,0,0,.5));pointer-events:none}
/* El porta-etiquetas: marco de laton con dos remaches y un pergamino dentro. */
.ag2-cartela{position:relative;display:inline-block;max-width:100%;box-sizing:border-box;
  padding:5px 14px;border-radius:5px;
  background:linear-gradient(140deg,#EDD499,#B8904F 50%,#8A6533);
  box-shadow:0 2px 5px rgba(0,0,0,.45)}
.ag2-cartela::before,.ag2-cartela::after{content:"";position:absolute;top:50%;
  width:5px;height:5px;margin-top:-2.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FBEFC8,#7A5A2C)}
.ag2-cartela::before{left:4px}
.ag2-cartela::after{right:4px}
.ag2-cartela-p{display:block;padding:3px 8px;border-radius:2px;
  background:linear-gradient(180deg,#EFE2C2,#DCC9A0);
  box-shadow:inset 0 1px 3px rgba(80,60,30,.45);
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:21px;
  line-height:1.15;color:#2A2016}
.ag2-nogal .ag2-ficha-n{margin-top:8px}

/* c · REPETIDOS — fieltro verde y dos fichas identicas.
   Esta no lleva foto: el dibujo entero es CSS, porque lo que hay que ver es
   justo que las DOS son la misma, y eso se cuenta duplicando un elemento. */
.ag2-fieltro{background-color:#1F3A2D;border:1px solid var(--art-oroS);
  background-image:
    radial-gradient(rgba(0,0,0,.14) 1px,transparent 1.3px),
    radial-gradient(rgba(220,240,220,.04) 1px,transparent 1.3px),
    radial-gradient(ellipse 80% 70% at 70% 30%,rgba(200,230,200,.10),transparent 65%),
    linear-gradient(160deg,#2C4A3A,#1C3328 70%);
  background-size:4px 4px,6px 6px,auto,auto;
  background-position:0 0,2px 3px,0 0,0 0}
.ag2-copias{position:absolute;right:8%;top:14%;width:44%;aspect-ratio:5/3;
  pointer-events:none}
.ag2-copia{position:absolute;inset:0;border-radius:3px;background:#EFE4CA;
  box-shadow:0 6px 12px rgba(0,0,0,.45);
  background-image:
    linear-gradient(#B5524E,#B5524E),
    repeating-linear-gradient(180deg,transparent 0 13px,rgba(110,130,150,.5) 13px 14px);
  background-size:100% 2px,100% 100%;
  background-position:0 22%,0 30%;
  background-repeat:no-repeat,repeat}
.ag2-copia.atras{transform:rotate(8deg) translate(10%,-8%)}
.ag2-copia.frente{transform:rotate(-3deg)}
/* El agujero troquelado del pie, como el de una ficha de catalogo. */
.ag2-copia::after{content:"";position:absolute;left:50%;bottom:6%;width:9%;
  aspect-ratio:1;margin-left:-4.5%;border-radius:50%;background:#C9BFA2;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
/* Las tres barras de texto fingido de la ficha de delante.
   Van como tres franjas de un degradado repetido y NO como tres sombras del
   mismo bloque: box-shadow no admite porcentajes en sus desplazamientos, asi
   que aquello pintaba una sola barra. */
.ag2-copia.frente::before{content:"";position:absolute;left:12%;right:24%;top:36%;
  height:30%;background-repeat:no-repeat;
  background-image:
    linear-gradient(rgba(60,48,34,.62),rgba(60,48,34,.62)),
    linear-gradient(rgba(60,48,34,.5),rgba(60,48,34,.5)),
    linear-gradient(rgba(60,48,34,.38),rgba(60,48,34,.38));
  background-size:100% 15%,88% 15%,64% 15%;
  background-position:0 0,0 42%,0 84%}
.ag2-clip{position:absolute;right:6%;top:-6%;width:16%;aspect-ratio:1/2;
  border:2.5px solid #C9A86A;border-radius:999px;transform:rotate(12deg)}
.ag2-sello{position:absolute;left:-6%;bottom:2%;padding:3px 8px;border-radius:4px;
  border:2px solid var(--ag-rojo);background:#EFE4CA;
  color:var(--ag-rojo);font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;transform:rotate(-12deg)}

/* --- El remate ----------------------------------------------------------- */
.ag2-remate{display:flex;align-items:center;gap:14px;margin-top:44px;color:var(--art-oro)}
.ag2-remate span{flex:1;height:1px}
.ag2-remate span:first-child{background:linear-gradient(90deg,transparent,var(--art-oroS))}
.ag2-remate span:last-child{background:linear-gradient(270deg,transparent,var(--art-oroS))}
.ag2-remate-fig{width:96px;height:22px;flex:none}

/* --- iPad ---------------------------------------------------------------- */
@media (min-width:700px){
  .ag2{--ag-gutter:32px;--ag-diapo:50%}
  .ag2-inner{max-width:860px}
  .ag2-hero{grid-template-columns:minmax(0,1fr) 250px;gap:24px;margin-top:28px}
  .ag2-h1{font-size:96px}
  .ag2-sub{font-size:18px}
  .ag2-seccion{margin-top:64px}
  .ag2-flechas{display:flex}
  .ag2-diapo{height:380px}
  .ag2-papel{margin-top:36px;padding:24px 32px}
  .ag2-papel-t{font-size:17px}
  .ag2-carpetas{gap:20px;margin-top:72px}
  .ag2-carpeta{height:260px}
  .ag2-carpeta > img{top:-48px;right:-4px;width:74%}
  .ag2-carpeta-txt,.ag2-ficha-txt{padding:24px}
  .ag2-carpeta-t{font-size:36px}
  .ag2-ficha{flex-basis:58%;height:270px}
  .ag2-ficha-txt{max-width:52%}
  .ag2-ficha-t{font-size:32px}
  .ag2-cifra{font-size:42px}
  .ag2-cartela-p{font-size:24px}
  .ag2-remate{margin-top:64px}
}

/* --- Escritorio ----------------------------------------------------------
   Aqui manda el lateral de 248px, asi que la pagina ya no necesita respiro
   propio y el carril deja de sangrar. */
@media (min-width:1024px){
  .ag2{--ag-gutter:0px;--ag-diapo:42%}
  .ag2-inner{max-width:1080px}
  .ag2-hero{grid-template-columns:minmax(0,1fr) 290px;margin-top:24px}
  .ag2-h1{font-size:112px}
  .ag2-sub{font-size:19px}
  .ag2-diapo{height:400px}
  .ag2-carpeta{height:280px}
  .ag2-carpeta > img{top:-56px;width:62%}
  .ag2-carpeta-t{font-size:40px}
  .ag2-ficha{flex-basis:46%;height:280px}
}

/* Quien pidió que nada se mueva, que nada se mueva: el carril sigue siendo
   un carril, pero sin transiciones ni desplazamiento animado. */
@media (prefers-reduced-motion:reduce){
  .ag2-diapo,.ag2-ficha,.ag2-punto,.ag2-punto::before{transition:none}
}

/* ==========================================================================
   UNA SOLA ESCALA PARA EL ARTISTA Y L'AGENDA  ·  28 de septiembre de 2026

   Las dos secciones rediseñadas no se parecian en nada de tamaño. Medido en
   vivo, a los mismos anchos:

                        375     768    1280
     titulo    Artista    39      42      58   (letra del sistema)
               L'Agenda   50      96     112   (Cormorant Garamond)
     tarjeta   Artista    20      20      22
               L'Agenda   26      36      40

   Los dos numeros que explican lo que se veia mal:

   1. EL ARTISTA NO TENIA PASO DE iPAD. Sus nombres se quedaban en el tamaño
      del celular hasta los 1024px, asi que en la tableta las casillas
      crecian y las letras no: "Academias y Alumnos", "Biblioteca", "Logos y
      Nombre" y "Metronomo, afinador y grabadora" quedaban perdidas dentro
      de su propio espacio. Eso es lo que el reporto.
   2. L'AGENDA SE FUE AL OTRO EXTREMO. 96px en iPad se comen un tercio de la
      pantalla antes de que aparezca nada que se pueda tocar.

   Asi que ni una ni otra: una escala nueva que leen las dos, con tres pasos
   de verdad. La letra es la de L'Agenda -- Cormorant Garamond -- porque la
   escogio el viendola puesta, y porque se lee mucho mejor que Italiana, que
   es de lo que veniamos huyendo.

   LOS NUMEROS NO ENTRAN AQUI. Siguen en la letra del sistema, tabular, por
   la misma razon de siempre: una cifra en serif de trazo fino se lee con
   esfuerzo. Ver el bloque "LOS TITULOS, A SU TAMAÑO" mas arriba.

   Cormorant tiene la altura de x pequeña: a igual numero de pixeles se ve
   MAS chica que la del sistema. Por eso los nombres suben mas de lo que
   parece -- 20px del sistema y 20px de Cormorant no son lo mismo.
   ========================================================================== */
:root{
  --tipo-titulo:'Cormorant Garamond',Georgia,serif;
  --t-seccion:50px;   /* el nombre de la seccion: El Artista, L'Agenda */
  --t-puerta:40px;    /* el nombre de una puerta, ya dentro */
  --t-tarjeta:27px;   /* nombre de una tarjeta grande */
  --t-casilla:23px;   /* nombre de una casilla o diapositiva */
  --t-menor:22px;     /* nombres apretados: fichas, etiquetas, estantes */
  --t-sub:15px;       /* el renglon que va bajo el nombre de la seccion */
  --t-nota:14px;      /* las notas al pie de una tarjeta */
}
@media (min-width:700px){
  :root{--t-seccion:64px; --t-puerta:48px; --t-tarjeta:33px; --t-casilla:26px;
        --t-menor:25px; --t-sub:17px; --t-nota:15px}
}
@media (min-width:1024px){
  :root{--t-seccion:78px; --t-puerta:54px; --t-tarjeta:36px; --t-casilla:28px;
        --t-menor:26px}
}

/* --- El nombre de la seccion --------------------------------------------
   Con tope por ancho de pantalla en las dos. No es adorno: el nombre comparte
   renglon con algo a la derecha -- el marco colgado en El Artista, la esfera
   en L'Agenda -- y en un telefono de 375 no caben los 50px enteros. */
.art2 .art2-h1,.ag2 .ag2-h1{
  font-family:var(--tipo-titulo);font-weight:300;
  text-transform:none;letter-spacing:-.005em;line-height:.98}
.art2 .art2-h1{font-size:clamp(34px,11.6vw,var(--t-seccion))}
.ag2 .ag2-h1{font-size:clamp(36px,13.4vw,var(--t-seccion));line-height:.95}
@media (min-width:700px){
  .art2 .art2-h1,.ag2 .ag2-h1{font-size:var(--t-seccion)}
}
.art2 .art2-sub,.ag2 .ag2-sub{font-size:var(--t-sub)}

/* El nombre de una puerta, ya dentro. Se queda en mayusculas y espaciado,
   que es lo que lo distingue de un titulo de tarjeta. */
.art2-modal .art2-h1{font-size:var(--t-puerta);font-weight:400;
  letter-spacing:.04em;text-transform:uppercase}
@media(min-width:700px) and (max-width:1023px){.art2-modal .art2-h1{font-size:var(--t-puerta)}}
@media(min-width:1024px){.art2-modal .art2-h1{font-size:var(--t-puerta)}}

/* --- Los nombres --------------------------------------------------------
   Peso 500 y no 400: van casi siempre sobre cuero o madera, y en un serif de
   trazo fino la diferencia entre leerse y adivinarse es justo esa. */
.art2 .alu-t,.art2 .art2-h3,.art2 .art2-slide-t,.art2 .art2-bandeja-t,
.art2 .art2-etiqueta .et-nom,.art2 .art2-entrada .en-nom,.art2 .art2-herr-t,
.art2 .alu-papelf .alu-t,.art2 .alu-mad .alu-t,
.ag2 .ag2-carpeta-t,.ag2 .ag2-ficha-t,.ag2 .ag2-cartela-p{
  font-family:var(--tipo-titulo);font-weight:500;text-transform:none;
  letter-spacing:0}

/* Las cuatro tarjetas grandes de la portada de El Artista y las dos carpetas
   de L'Agenda: son lo mismo, y ahora miden lo mismo. */
.art2 .art2-h3,.ag2 .ag2-carpeta-t,.ag2 .ag2-ficha-t{
  font-size:var(--t-tarjeta);line-height:1.08}
@media(min-width:1024px){
  .art2-logos .art2-h3,.art2-hoja-frente .art2-h3{font-size:var(--t-tarjeta)}
}

/* Diapositivas y casillas. */
.art2 .art2-slide-t,.art2 .art2-herr-t,.art2 .art2-entrada .en-nom,
.ag2 .ag2-cartela-p{font-size:var(--t-casilla);line-height:1.12}

/* Los nombres apretados. `--t-max` tiene que subir con ellos: es el tamaño
   del que PARTE ajustarNombres() para encogerlos, asi que si se queda atras
   vuelve a bajarlos al primer repintado y el cambio no se ve. */
.art2 .art2-tile .alu-t,.art2 .alu-papelf .alu-t,.art2 .alu-mad .alu-t,
.art2 .art2-etiqueta .et-nom{font-size:var(--t-menor);line-height:1.14}
.art2 .art2-tile .alu-t{--t-max:22;--t-min:15}
.art2 .alu-papelf .alu-t,.art2 .alu-mad .alu-t{--t-max:22;--t-min:15}
.art2 .art2-etiqueta .et-nom{--t-max:22;--t-min:15}
.art2 .art2-entrada .en-nom{--t-max:23;--t-min:16}
.art2 .art2-estante .alu-t,.art2 .art2-bandeja-t{font-size:var(--t-menor);line-height:1.14}
@media(min-width:1024px){.art2 .art2-estante .alu-t{font-size:var(--t-menor)}}

/* --- Las notas y los datos ---------------------------------------------- */
.art2 .art2-meta,.art2 .art2-desglose,.ag2 .ag2-carpeta-n,.ag2 .ag2-ficha-n{
  font-size:var(--t-nota)}
/* "Metronomo, afinador y grabadora" y "Tus alumnos" no son notas al pie: son
   lo unico que se lee en esas dos tarjetas, y eran las dos que el señalo.

   En el telefono el texto de Herramientas no crece tanto, y no por prudencia:
   comparte renglon con la ilustracion, que se llevaba 150 de los 303px de la
   tarjeta y le dejaba 79. A 19px eso salian CUATRO lineas con una "y" sola en
   medio. La ilustracion cede sitio en el telefono y recupera su tamaño en
   cuanto hay pantalla. */
.art2 .art2-herr-txt{font-size:calc(var(--t-nota) + 2px);line-height:1.25}
.art2 .art2-herr img{width:110px}
@media (min-width:700px){
  .art2 .art2-herr-txt{font-size:calc(var(--t-casilla) - 4px)}
  .art2 .art2-herr img{width:150px}
}
.art2 .art2-total{font-size:calc(var(--t-casilla) - 4px);font-weight:500}

/* LA FIRMA SE MIDE SOLA. Venia de antes, no del cambio de escala: "Porfirio
   Mateo" pide 199px en una linea y en el telefono solo tiene 157 al lado del
   sello, asi que se partia en dos con el sello colgado a media altura. Una
   firma partida en dos no es una firma. */
.art2 .art2-firma-n{font-size:clamp(26px,7.6vw,38px);white-space:nowrap}

/* --- La cifra de L'Agenda, a la letra de las cifras ---------------------- */
.ag2 .ag2-cifra{font-family:var(--art-nombre);font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  font-size:calc(var(--t-tarjeta) + 3px);line-height:1.1}

/* La foto del lacre lleva mas detalle que la de la biblioteca justo donde cae
   el titulo, asi que se apaga un poco mas. La sombra del texto sola no basta
   cuando lo que hay debajo es un sello rojo con relieve. */
.art2-logos .art2-fondo{filter:brightness(.62) saturate(.85)}
.art2-biblioteca .art2-fondo{filter:brightness(.82)}

/* ==========================================================================
   IL CAPITALE, BALANCE Y LOS MIOS  ·  28 de septiembre de 2026

   Las tres secciones que se quedaron sin el traje nuevo. Todo lo de aqui
   cuelga de `.sec2`, el envoltorio que pone pintarSeccion() -- `.ficha`,
   `.nombre`, `.dato` y `.pie` siguen significando lo mismo fuera de el, en
   los otros cinco archivos que los usan y que NO entran en este rediseño.

   `.sec2` lleva tambien la clase `.art2`, asi que hereda de un golpe el
   suelo, la tinta, la letra de los titulos y la escala de tamaños. Aqui solo
   va lo que cambia respecto de eso.
   ========================================================================== */

/* El titulo de un submenu (Panorama, Mis Fondos, Logistica). Va como el de
   una puerta de El Artista: mayusculas y espaciado, que es lo que lo
   distingue de un titulo de tarjeta. El de una PORTADA no pasa por aqui --
   ese lo pone encabezado() y es el grande de seccion. */
/* LA CABECERA VA EN UNA COLUMNA, NO EN DOS. `.art2-tit` es una rejilla de
   "1fr auto" porque en El Artista comparte renglon con el marco colgado de la
   foto. Aqui no hay nada a la derecha, asi que el subtitulo se iba a la
   segunda columna y salia por el borde derecho de la pantalla, partido en
   palabras sueltas. En los modales ya estaba resuelto (`.art2-modal
   .art2-tit{display:block}`); estas tres son pestañas, no modales. */
.sec2 .art2-tit{display:block}
.sec2 .art2-sub{max-width:62ch}
.sec2 .sec2-tit-solo{display:block;margin-bottom:6px}
.sec2 .sec2-tit-solo .art2-h1{
  font-size:var(--t-puerta);font-weight:400;
  letter-spacing:.04em;text-transform:uppercase;text-wrap:balance}
.sec2 .sec2-tit-solo .art2-sub{margin-top:4px;max-width:62ch}

.sec2 .sec-grupo{margin:0 0 26px}
.sec2 .art2-sep{margin-top:26px}
.sec2 .sec-grupo:first-of-type .art2-sep{margin-top:18px}

/* --- Las casillas --------------------------------------------------------
   De ficha plana a madera con marco de oro, que es la misma pieza de El
   Artista (`art2-madera` + `art2-marcoM`, puestas desde el JS). Lo de aqui
   es solo apagar lo que traia la ficha vieja y no pega encima de madera:
   el panel, el borde y el filete de bronce de la izquierda. */
.sec2 .rejilla-menu{gap:12px}
/* OJO CON EL FONDO. `.ficha` pinta `var(--panel)` y `.ficha.familia` lo tiñe
   del color de familia; las dos ganan por especificidad a `.art2-madera`, que
   es una sola clase. Un `background:none` aqui parecia resolverlo y en oscuro
   se veia bien -- pero porque el suelo de la seccion ya es verde oscuro y el
   texto crema encima cuela. En CLARO el suelo es #E9E1CF y el mismo texto
   crema quedaba practicamente invisible: la tarjeta no tenia madera, tenia
   nada. Asi que aqui no se apaga el fondo, se vuelve a declarar la madera con
   la especificidad que hace falta. */
/* El `:not()` no es adorno: esta regla existe para ganarle a `.ficha` y a
   `.ficha.familia`, asi que tambien le ganaba a `.art2-papelc`, que es una
   sola clase. Resultado: la tarjeta de pergamino salia de madera con el
   texto oscuro del papel encima -- ilegible. */
.sec2 .ficha:not(.sec2-papel):not(.sec2-verde),
.sec2 .ficha.familia:not(.sec2-papel):not(.sec2-verde){
  background-color:var(--art-tarj);
  background-image:
    repeating-linear-gradient(178deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(181deg,rgba(0,0,0,.12) 0 2px,transparent 2px 13px),
    linear-gradient(180deg,var(--art-tarj2),var(--art-tarj));
  border-radius:16px;
  padding:14px 14px 13px;gap:10px;
  color:var(--art-tarjT);
}
.sec2 .ficha::before{display:none}
/* El color de familia se queda -- es lo que hace que cada seccion tenga su
   acento, que es lo que el pidio -- pero ahora vive en el medallon y en un
   liston abajo, no tiñendo el panel entero: sobre madera un tinte al 7% no
   se ve, y el borde de oro ya da el marco. */
.sec2 .ficha.familia::after{
  content:'';position:absolute;left:14px;right:14px;bottom:0;height:2px;
  background:var(--c);opacity:.75;border-radius:2px}

/* El medallon de laton, el mismo de los estantes de El Artista. */
.sec2 .ficha .icono-marco{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(160deg,var(--art-oro),color-mix(in srgb,var(--art-oro) 55%,#000));
  box-shadow:0 2px 0 rgba(255,255,255,.18) inset,0 6px 14px rgba(0,0,0,.28);
}
.sec2 .ficha .icono-marco svg{width:23px;height:23px}
/* Los iconos de seccion.js traen el color puesto en el atributo stroke de
   cada trazo; una declaracion CSS le gana siempre, aunque este en el propio
   elemento. Sobre el laton van en el tono oscuro de la tarjeta. */
.sec2 .ficha .icono-marco svg path,
.sec2 .ficha .icono-marco svg circle,
.sec2 .ficha .icono-marco svg rect,
.sec2 .ficha .icono-marco svg line,
.sec2 .ficha .icono-marco svg polygon,
.sec2 .ficha .icono-marco svg polyline{stroke:#221A10}
.sec2 .ficha.familia .icono-marco{
  background:linear-gradient(160deg,var(--c),color-mix(in srgb,var(--c) 55%,#000))}
.sec2 .ficha.familia .icono-marco svg path,
.sec2 .ficha.familia .icono-marco svg circle,
.sec2 .ficha.familia .icono-marco svg rect,
.sec2 .ficha.familia .icono-marco svg line,
.sec2 .ficha.familia .icono-marco svg polygon,
.sec2 .ficha.familia .icono-marco svg polyline{stroke:#fff}

.sec2 .sec2-txt{display:flex;flex-direction:column;gap:5px;flex:1;min-height:0}

/* EL NOMBRE SALE DE ITALIANA. Es la misma decision del 25 de septiembre que
   ya se aplico en El Artista y L'Agenda -- "el tipo de letra que se usa en
   el titulo L'agenda es que quiero que uses para todos los titulos de las
   carpetas, porque se lee mejor" -- y estas tres secciones se habian quedado
   fuera: seguian con Italiana a 19px, que es justo el tamaño y la letra de
   los que veniamos huyendo. Ahora leen la escala compartida, igual que las
   casillas de El Artista. */
.sec2 .ficha .nombre{
  font-family:var(--tipo-titulo);font-weight:500;
  font-size:var(--t-menor);line-height:1.12;letter-spacing:0;
  color:var(--art-tarjT);
}
/* EL PIE DEJA DE CORTARSE. Estaba clavado a dos lineas con puntos
   suspensivos, y con nombres largos decia cosas como "buzon, remitentes,
   comercios, papelera y..." -- justo lo que la casilla existe para
   contestar sin entrar. Tres lineas, y lo que pase de ahi se corta, pero a
   estos anchos ya no pasa ninguno. */
.sec2 .ficha .pie{
  font-size:var(--t-nota);line-height:1.32;color:var(--art-tarjT2);
  -webkit-line-clamp:3;
}
.sec2 .ficha .dato{
  font-family:var(--art-nombre);font-weight:600;
  font-size:calc(var(--t-casilla) - 2px);line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  color:var(--art-tarjT);margin-top:-1px;
}
.sec2 .ficha.familia .dato{color:color-mix(in srgb,var(--c) 45%,var(--art-tarjT))}

.sec2 .ficha.por-construir{opacity:.52}
.sec2 .ficha.por-construir .icono-marco{filter:grayscale(1)}
.sec2 .et-construir{
  top:10px;right:10px;color:var(--art-tarjT2);
  border-color:var(--art-oroS);background:rgba(0,0,0,.2)}

@media (hover:hover) and (pointer:fine){
  .sec2 .ficha:hover{transform:translateY(-2px);border-color:transparent;
    box-shadow:var(--art-marco),0 14px 26px rgba(0,0,0,.3)}
  .sec2 .ficha:hover .pie{color:var(--art-tarjT)}
  .sec2 .ficha.familia:hover{border-color:transparent}
}

/* --- Las puertas, las que llevan grabado --------------------------------
   Las cinco de Il Capitale, las tres de Balance y las de Los Mios. Ocupan el
   ancho entero en el telefono: son el indice de la seccion, no una lista. */
.sec2 .sec2-puertas{grid-template-columns:1fr;gap:14px}
@media (min-width:700px){.sec2 .sec2-puertas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.sec2 .sec2-puertas{grid-template-columns:repeat(3,minmax(0,1fr))}}

.sec2 .sec2-puerta{
  flex-direction:row;align-items:center;gap:16px;
  padding:18px 18px 17px;border-radius:20px;min-height:132px}
@media (min-width:700px){
  .sec2 .sec2-puerta{flex-direction:column;align-items:flex-start;gap:12px;
    padding:20px;min-height:0}
}
.sec2 .sec2-grab{flex:0 0 auto;display:grid;place-items:center;
  width:92px;height:92px;
  border-radius:50%;background:radial-gradient(circle at 42% 34%,
    rgba(217,188,130,.14),transparent 68%)}
@media (min-width:700px){.sec2 .sec2-grab{width:118px;height:118px}}
.sec2 .sec2-puerta .nombre{font-size:var(--t-tarjeta);line-height:1.06}
.sec2 .sec2-puerta .pie{-webkit-line-clamp:3}
/* El liston de familia de una puerta va entero, de borde a borde: es el
   mismo recurso que usa El Artista para firmar sus casillas. */
.sec2 .sec2-puerta.familia::after{left:0;right:0;height:3px;border-radius:0;opacity:1}

/* El grabado: la linea la decide aqui, no el tamaño del lienzo, asi que a 92
   y a 118 se ve del mismo grosor de tinta. Es lo que lo hace parecer un
   grabado y no un icono estirado. */
.gr{fill:none;stroke:var(--art-oro);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.gr .gr-f{stroke-width:1.3;opacity:.52}
/* EL LATON NO CAMBIA CON EL TEMA, porque la madera tampoco: la tarjeta es
   marron oscura en claro y en oscuro. `--art-oro` si cambia -- en claro baja
   a #9A7743 para leerse sobre el papel -- y sobre la madera se apagaba hasta
   casi no verse. Es el mismo #D9BC82 que ya usan los iconos de trazo de las
   casillas de El Artista, por la misma razon. */
.sec2 .gr{stroke:#D9BC82}
.sec2 .sec2-puerta.familia .gr{stroke:color-mix(in srgb,var(--c) 35%,#D9BC82)}

/* --- La barra de chips, ya dentro del marco ------------------------------
   Antes se metia con insertAdjacentHTML DESPUES de pintar, asi que quedaba
   fuera del fondo de la seccion, flotando sobre el color viejo de la app.
   Ahora entra por `antes` y vive dentro. */
.sec2 .art-migas{margin:0 0 10px}
.sec2 .art-chips{margin:0 0 18px}

/* El pie de un submenu: el boton de cerrar, en el sitio y con la raya de
   El Artista en vez de un boton azul suelto al final del modal. */
.sec2 .sec2-pie{margin-top:26px}

/* El pie de un grupo cuyo rotulo se quito por repetir el titulo: sin el
   separador encima necesita su propio aire. */
.sec2 .sec2-pie-solo{margin:14px 0 14px}

/* --- Pantalla grande -----------------------------------------------------
   La rejilla vieja se va a CUATRO columnas desde 720px y recorta el nombre
   con "..." para que la ficha no crezca. Con Italiana a 36px eso funcionaba;
   con la escala compartida no, y en la tableta se leia "Avisos del calen..."
   -- justo el fallo que el reporto en El Artista, en un sitio nuevo. Aqui
   son DOS columnas en la tableta y tres en el monitor, con el nombre entero
   en las lineas que haga falta. */
@media (min-width:720px){
  .sec2 .rejilla-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .sec2 .ficha{padding:20px 20px 18px;gap:12px;min-height:0}
  .sec2 .ficha .icono-marco{width:54px;height:54px;border-radius:50%}
  .sec2 .ficha .icono-marco svg{width:28px;height:28px}
  .sec2 .ficha .nombre{
    font-size:var(--t-menor);letter-spacing:0;
    white-space:normal;overflow:visible;text-overflow:clip}
  .sec2 .ficha .dato{font-size:calc(var(--t-casilla) - 2px)}
  .sec2 .ficha .pie{font-size:var(--t-nota)}
}
@media (min-width:1024px){
  .sec2 .rejilla-menu{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* La regla de 1100px saca la rejilla de su columna con un margen negativo
   calculado sobre el ancho de la ventana. Dentro de `.art2-inner`, que ya
   esta centrado y topado a 1180, eso la corre fuera del marco. */
@media (min-width:1100px){
  .sec2 .rejilla-menu{width:auto;margin-left:0}
  .sec2 .ficha{min-height:0}
  .sec2 .ficha .icono-marco{width:56px;height:56px}
  .sec2 .ficha .icono-marco svg{width:29px;height:29px}
  .sec2 .ficha .nombre{font-size:var(--t-menor)}
}

/* ==========================================================================
   LAS FORMAS  ·  28 de septiembre de 2026

   "las carpetas no eran exactamente iguales entre filas, lo que hiciste es
   muy monotono... al ser todo tan igual comparado con el artista y agenda
   queda muy monocromatico."

   Tiene razon y el diagnostico es exacto: la portada de El Artista no repite
   una forma, MEZCLA -- un carrusel con marco y filete, una tarjeta de hojas
   apiladas, dos chicas con foto de fondo y una ancha con cartela. Eso es lo
   que la hace parecer una portada. Una rejilla de cinco casillas identicas
   es una lista, por bonita que sea cada casilla.
   ========================================================================== */

/* --- El carrusel ---------------------------------------------------------
   La vitrina: marco de oro y filete arriba y abajo, como el Portfolio. El
   carril y los puntos son la misma pieza compartida, no una copia. */
/* EL MISMO MARCO QUE EL PORTFOLIO -- 30 de sep ("el de Il Capitale se
   rompe"). La vitrina no tenía relleno a los lados y el carril heredaba de
   .art2-scroller un margen de -18px pensado para un marco que SÍ lo tiene: las
   diapositivas se salían 18 px del borde por cada lado y el filete de arriba
   pisaba el texto. Ahora es la misma cuenta que El Artista: relleno de 18 en
   el marco, el carril lo recupera con -18 y recorta justo en el borde. */
.sec2 .sec2-vitrina{position:relative;padding:22px 18px 18px;margin-top:22px}
.sec2 .sec2-carril{margin:0 -18px;padding:0 18px;scroll-padding:0 18px}
.sec2 .sec2-carril > :first-child{margin-left:0}
.sec2 .sec2-diapo{
  flex:none;width:min(76%,290px);scroll-snap-align:start;
  border:0;padding:0;background:none;text-align:left;cursor:pointer;
  color:var(--art-tarjT);position:relative}
@media (min-width:700px){.sec2 .sec2-diapo{width:calc((100% - 24px)/3)}}
@media (min-width:1024px){.sec2 .sec2-diapo{width:calc((100% - 36px)/4)}}
.sec2 .sec2-diapo-gr{
  display:grid;place-items:center;height:158px;border-radius:14px;
  background:
    radial-gradient(ellipse at 50% 38%,rgba(217,188,130,.14),transparent 64%),
    linear-gradient(180deg,var(--art-tarj2),var(--art-tarj));
  box-shadow:inset 0 0 0 1px var(--art-oroS)}
.sec2 .sec2-diapo.familia .sec2-diapo-gr{
  box-shadow:inset 0 0 0 1px var(--c),inset 0 -3px 0 var(--c)}
.sec2 .sec2-diapo .art2-slide-t{
  font-family:var(--tipo-titulo);font-weight:500;text-transform:none;
  letter-spacing:0;font-size:var(--t-casilla);line-height:1.1}
.sec2 .sec2-diapo-n{
  display:block;margin-top:2px;font-family:var(--art-nombre);font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  font-size:calc(var(--t-casilla) - 3px);line-height:1.1;color:var(--art-tarjT)}
.sec2 .sec2-diapo.familia .sec2-diapo-n{color:color-mix(in srgb,var(--c) 45%,var(--art-tarjT))}
.sec2 .sec2-diapo .art2-meta{font-size:var(--t-nota);line-height:1.3}
.sec2 .sec2-diapo .et-construir{top:12px;right:12px}
.sec2 .sec2-vitrina .art2-puntos{margin-top:14px}
@media (hover:hover) and (pointer:fine){
  .sec2 .sec2-diapo:hover .sec2-diapo-gr{filter:brightness(1.1)}
}

/* --- El mosaico ----------------------------------------------------------
   Una fila donde no todas las piezas miden lo mismo. `alta` ocupa dos filas
   a la izquierda con el grabado grande; las otras se apilan al lado. Es la
   misma idea que `art2-duo` en Alumnos. */
/* EN EL TELEFONO EL MOSAICO ES DE UNA COLUMNA. Con dos, una tarjeta `alta`
   ocupando las dos filas de la izquierda deja a las otras en una columna de
   150px, y "Patrimonio" salia partido en cuatro renglones -- "Pa-tri-mo-nio".
   La variedad en el telefono la dan el tamaño y el material, no el reparto
   de la rejilla, que a ese ancho no cabe. Desde 700px si hay sitio. */
.sec2 .sec2-mosaico{grid-template-columns:1fr;gap:14px}
.sec2 .sec2-alta{flex-direction:column;align-items:flex-start;
  justify-content:flex-start;gap:14px;padding:20px}
.sec2 .sec2-alta .sec2-grab{width:100%;height:150px;
  background:radial-gradient(circle at 46% 40%,rgba(217,188,130,.13),transparent 66%)}
.sec2 .sec2-alta .nombre{font-size:var(--t-tarjeta);line-height:1.05}
.sec2 .sec2-alta .pie{-webkit-line-clamp:4}
/* `ancha` ocupa la fila entera, con el grabado a un lado -- la forma de la
   tarjeta de Herramientas de El Artista. */
.sec2 .sec2-ancha{grid-column:1 / -1;flex-direction:row;align-items:center;
  gap:18px;padding:18px 20px}
.sec2 .sec2-ancha .sec2-grab{width:104px;height:104px;flex:0 0 auto}
.sec2 .sec2-ancha .nombre{font-size:var(--t-tarjeta);line-height:1.05}

/* --- Los materiales ------------------------------------------------------
   Lo de "monocromatico" no era solo la forma: era que TODO era la misma
   madera marron. El Artista tiene madera, pergamino, verde y foto. Aqui
   entran los dos primeros, que son los que ya tienen sus tokens de texto
   propios y por tanto se leen bien en los dos temas sin inventar nada. */
/* Y el pergamino hay que declararlo ENTERO aqui, no basta con la clase
   `art2-papelc`: `.ficha.familia` la tiñe con un color-mix y son dos clases
   contra una, asi que ganaba y el papel salia verde oscuro con letra oscura
   encima. Se vio en Panorama y en Fechas especiales. */
.sec2 .ficha.sec2-papel,.sec2 .ficha.familia.sec2-papel{
  background-color:var(--art-papel);
  background-image:
    radial-gradient(ellipse at 30% 20%,rgba(255,255,240,.55),transparent 60%),
    radial-gradient(ellipse at 80% 90%,rgba(150,160,110,.35),transparent 60%);
  color:var(--art-papelT)}
.sec2 .ficha.sec2-papel .nombre{color:var(--art-papelT)}
.sec2 .ficha.sec2-papel .pie{color:var(--art-papelT2)}
.sec2 .ficha.sec2-papel .dato{color:var(--art-papelN)}
.sec2 .ficha.sec2-papel .gr{stroke:var(--art-papelN)}
.sec2 .ficha.sec2-papel .sec2-grab{
  background:radial-gradient(circle at 46% 38%,rgba(107,74,46,.09),transparent 66%)}
.sec2 .ficha.sec2-papel.familia::after{opacity:.9}

.sec2 .ficha.sec2-verde,.sec2 .ficha.familia.sec2-verde{
  background-color:var(--art-barra);
  background-image:linear-gradient(180deg,rgba(255,255,255,.05),transparent 60%),
    var(--art-vetas);
  color:var(--art-barraT)}
.sec2 .ficha.sec2-verde .nombre{color:var(--art-barraT)}

@media (min-width:700px){
  .sec2 .sec2-mosaico{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .sec2 .sec2-alta{grid-row:span 2}
  .sec2 .sec2-alta .sec2-grab{height:186px}
  .sec2 .sec2-ancha{grid-column:1 / -1}
}
@media (min-width:1024px){
  .sec2 .sec2-mosaico{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Una ilustración de verdad en el sitio del grabado. El grabado se dibuja
   con el tamaño del lienzo; una imagen se mete dentro de la caja sin
   recortarse, que es lo que hace `contain`. Sin halo de fondo: el render ya
   trae su propia luz y el halo dorado le añadía un cerco que se notaba. */
/* NI `height:100%` NI `max-height:100%` SIRVEN AQUI. La caja del grabado es
   una rejilla (`display:grid;place-items:center`), y contra un area de
   rejilla el porcentaje se trata como indefinido: la imagen salia a su alto
   natural -- 321px dentro de una caja de 170 -- y se comia el titulo de la
   tarjeta. Medido en vivo, no deducido.

   Absoluta contra una caja de alto definido si resuelve siempre. */
.sec2 .sec2-conImg{background:none;position:relative;overflow:hidden}
.sec2 .sec2-conImg img{
  position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:contain}
.sec2 .sec2-diapo-gr.sec2-conImg{padding:10px}
.sec2 .sec2-alta .sec2-conImg{height:170px}
@media (min-width:700px){.sec2 .sec2-alta .sec2-conImg{height:200px}}

/* --- LA BANDEJA CLARA ----------------------------------------------------
   Un objeto de madera oscura sobre una tarjeta de madera oscura se funde.
   No es impresion: medido pixel a pixel, el mueble fichero comparte el 37% de
   su superficie con el fondo del carrusel y el maletin el 65% con la madera
   de su casilla. El calendario hacia lo mismo del otro lado -- 62% contra el
   pergamino -- y ESO es lo que el vio y reporto.

   La regla que sale de medirlo: la bandeja lleva el tono CONTRARIO al del
   objeto. Los claros se quedan sobre el fondo oscuro de siempre; los oscuros
   reciben esta bandeja de papel, con su filo de oro, y pasan de fundirse a
   recortarse limpios. */
.sec2 .sec2-plancha{
  background:
    radial-gradient(ellipse at 34% 24%,rgba(255,255,245,.5),transparent 62%),
    linear-gradient(170deg,var(--art-papel),var(--art-papel2));
  box-shadow:inset 0 0 0 1px var(--art-papelB),inset 0 2px 8px rgba(80,60,30,.13);
}
.sec2 .sec2-diapo-gr.sec2-plancha{box-shadow:inset 0 0 0 1px var(--art-papelB)}
.sec2 .sec2-diapo.familia .sec2-diapo-gr.sec2-plancha{
  box-shadow:inset 0 0 0 1px var(--art-papelB),inset 0 -3px 0 var(--c)}
/* Sobre la bandeja el grabado va en tinta oscura, no en laton: el laton sobre
   papel es justo el fallo que esto viene a resolver. */
.sec2 .sec2-plancha .gr{stroke:var(--art-papelN)}

/* Un grupo que se toca poco lo dice atenuandose, no escondiendose. Viene de
   "Mas", donde el cuarto grupo ya lo hacia con `.grupo-menu.apagado`. */
.sec2 .sec2-apagado{opacity:.68}
.sec2 .sec2-apagado:hover,.sec2 .sec2-apagado:focus-within{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .sec2 .sec2-apagado{transition:opacity .2s ease}
}

/* Un grupo con una sola casilla ilustrada: esa ocupa la fila entera y las
   demas se quedan en dos columnas. Sin esto el mosaico se iba a una columna
   por tener UNA ilustracion, y "Mas" quedaba en una tira interminable. */
.sec2 .sec2-mosaico:not(.sec2-puertas){grid-template-columns:repeat(2,minmax(0,1fr))}
.sec2 .sec2-mosaico:not(.sec2-puertas) .sec2-alta{grid-column:1 / -1;grid-row:auto}

/* ==========================================================================
   EL SALUDO DE INICIO, EN LA MISMA VOZ QUE TODO LO DEMAS  ·  29 de sep 2026

   Inicio no es un menu y por eso no entro en el rediseño de las secciones.
   Pero es LA PRIMERA pantalla que se ve, y su saludo era lo unico que seguia
   hablando en la letra del sistema mientras El Artista, L'Agenda, Il
   Capitale, Balance, Los Mios y Mas dicen su nombre en Cormorant. Una app que
   cambia de voz en su portada no parece una app, parece dos.

   Solo cambia la LETRA y el tamaño. El degradado de bronce sobre el texto, la
   rayita y el campo de abajo se quedan exactamente como estaban.
   ========================================================================== */
.bienv-saludo{
  font-family:var(--tipo-titulo);font-weight:300;
  font-size:clamp(40px,12.4vw,var(--t-seccion));line-height:.98;
  letter-spacing:-.005em}
@media (min-width:700px){.bienv-saludo{font-size:var(--t-seccion)}}
.bienv-fecha{font-size:var(--t-sub)}

/* ===========================================================================
   PERFIL INSTITUCIONAL  ·  29 de septiembre de 2026

   La vista previa dibuja las plantillas REALES (registro y programa) a su
   tamaño de papel y las reduce con transform: scale hasta el ancho del marco;
   el marco recorta la franja de arriba, que es donde esta el logo. No es una
   maqueta aparte: si la plantilla cambia, la previa cambia con ella.
   =========================================================================== */
.ip-previa{margin:0 0 14px;padding:10px;border:1px solid var(--borde);border-radius:12px;
  background:var(--panel2)}
.ip-previa-cab{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ip-previa-cab select{flex:1;min-width:0;padding:8px 10px;border-radius:10px;
  border:1px solid var(--borde);background:var(--panel);color:var(--texto)}
.ip-marco{position:relative;overflow:hidden;background:#fff;border-radius:6px;
  box-shadow:0 1px 4px rgba(0,0,0,.18);min-height:60px}
/* La hoja mide lo que mide en papel; el ancho lo pone la propia plantilla. */
.ip-hoja{transform-origin:0 0;width:max-content;pointer-events:none;user-select:none}
.ip-aviso{margin:8px 0 0}
.ip-fila{display:grid;grid-template-columns:86px 1fr auto;align-items:center;gap:8px;margin:6px 0}
.ip-fila > span{font-size:12.5px;color:var(--suave)}
.ip-fila select{grid-column:2 / 4}
.ip-fila output{min-width:42px;text-align:right;font-variant-numeric:tabular-nums;
  font-size:12.5px;color:var(--suave)}
.ip-fila input[type=range]{width:100%;accent-color:var(--acento-solido)}
.ip-check{display:flex;align-items:center;gap:8px;margin-top:8px;font-weight:normal;font-size:13px}
.ip-check[hidden],.ip-aviso[hidden]{display:none}
#ip-color{width:44px;height:32px;padding:0;border:1px solid var(--borde);border-radius:8px;background:none}

/* El formulario en linea de un documento de referencia recien elegido. */
.ipd-nuevo{margin-top:10px;padding:10px;border:1px dashed var(--borde);border-radius:12px;background:var(--panel2)}
.ipd-nuevo[hidden]{display:none}

/* ===========================================================================
   LA FRANJA DE "SIN CONEXION" -- 30 de septiembre. Una pastilla fija encima
   de la barra de abajo: ARRIBA tapaba el mes y los botones de la cabecera
   (comprobado en un movil). Va por DEBAJO de los modales (z 50 < 60) para no
   taparles los botones, y por encima de la zona del aviso. Mismo material que el aviso de abajo (texto
   sobre fondo, el mayor contraste que tiene la app). Ver util/conexion.js.
   =========================================================================== */
.franja-red{position:fixed;bottom:calc(var(--barra) + env(safe-area-inset-bottom,0px) + 72px);left:50%;
  transform:translateX(-50%);z-index:50;width:max-content;max-width:calc(100vw - 32px);
  padding:8px 16px;border-radius:999px;background:var(--texto);color:var(--fondo);
  font-size:13px;font-weight:560;line-height:1.25;text-align:center;
  box-shadow:0 4px 16px rgba(0,0,0,.18)}
.franja-red{display:flex;align-items:center;justify-content:center;gap:10px}
.franja-red[hidden]{display:none}
.franja-red button{flex:none;border:0;border-radius:999px;padding:4px 12px;
  background:var(--acento);color:var(--sobre-acento,#fff);font:inherit;font-weight:600;cursor:pointer}
.franja-red-aviso{background:#7A4E00;color:#fff}
.franja-red-aviso button{background:#fff;color:#4A2F00}

/* EL AVISO DE MUDANZA -- 30 de septiembre de 2026. Solo en la dirección vieja
   (.workers.dev); ver js/util/mudanza.js. Por encima del candado (z 100) para
   que lo vea quien abre el ícono viejo sin entrar, y ARRIBA: abajo tapaba el
   campo de la clave. */
#mudanza{position:fixed;z-index:200;left:16px;right:16px;
  top:max(16px,env(safe-area-inset-top));max-width:520px;margin:0 auto;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px 16px;
  background:var(--panel);color:var(--texto);border:1px solid var(--borde);
  border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.25)}
#mudanza .mud-texto{flex:1 1 240px;display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.4}
#mudanza .mud-texto span{color:var(--suave)}
#mudanza .mud-btns{display:flex;gap:8px;margin-left:auto}
#mudanza .mud-btns .btn{text-decoration:none}