/* Jaime.Lab · estilos propios sobre el kit web JAIME.AI v3 (jaimeai/jaimeai-ui.css).
   Crema de página, navy en el menú y el guion, un solo azul, contenedores cuadrados y acciones en píldora. */

/* titulares en mayúsculas (regla de marca desde 2026-10-07) */
.cab h1, .tarjeta h2, .modal h2 { text-transform: uppercase; }
.tarjeta h2 { font-size: 15px; letter-spacing: -0.005em; }
kbd { font: 600 11px/1 var(--font-mono); background: rgba(0,0,80,.1); color: inherit; padding: 3px 6px; border-radius: 3px; margin-left: 4px; }
.btn.acento kbd, .btn.primario kbd { background: rgba(255,255,255,.22); }
.ic, .btn svg, .btn-i svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic { width: 18px; height: 18px; flex: none; }
.vista[hidden] { display: none; }
.vista { animation: aparece var(--dur-base) var(--ease-standard); }
main.contenido { max-width: 1480px; }
.avisos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.avisos:empty { display: none; }
.p-n { font-size: 30px; font-weight: 700; color: var(--ja-blue-action-dark); letter-spacing: -0.04em; margin-bottom: 8px; }
.estados { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ----------------------------------------------------------- personas */
.personas { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.personas button { appearance: none; cursor: pointer; display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 20px; border-radius: var(--radius-pill);
  border: 1px solid var(--ja-navy-20); background: var(--ja-white); color: var(--ja-navy); font: 700 13.5px var(--font-sans);
  transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); }
.personas button small { font: 500 11.5px var(--font-mono); color: var(--ja-navy-55); }
.personas button:hover:not(:disabled) { border-color: var(--ja-navy); }
.personas button[aria-selected="true"] { background: var(--ja-navy); border-color: var(--ja-navy); color: var(--ja-cream); }
.personas button[aria-selected="true"] small { color: var(--ja-blue-soft); }
.personas button:disabled { opacity: .35; cursor: not-allowed; }

/* ------------------------------------------------------------- grabar */
.grabar-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 410px); gap: 22px; align-items: start; }
.escena-col { min-width: 0; }
.marco { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--ja-navy); border: 1px solid var(--ja-navy-20); overflow: hidden; }
.marco canvas { display: block; width: 100%; height: 100%; }
.superpuesto { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,80,.6); color: var(--ja-cream); font: 900 min(18vw, 190px)/1 var(--font-sans); letter-spacing: -0.04em; }
.indicador-rec { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 8px; background: var(--ja-navy); color: var(--ja-cream); padding: 5px 13px; border-radius: var(--radius-pill); font: 700 12px var(--font-mono); letter-spacing: .06em; }
.indicador-rec i { width: 9px; height: 9px; border-radius: 50%; background: #F87171; animation: parpadeo 1s infinite; }
@keyframes parpadeo { 50% { opacity: .25; } }
.nota-lienzo { margin: 8px 0 14px; font-size: 12.5px; color: var(--ja-navy-55); }

.tira { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.tira button { position: relative; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; width: 108px; line-height: 0; transition: border-color var(--dur-fast); }
.tira button img { width: 100%; aspect-ratio: 16/9; object-fit: contain; background: var(--ja-cream-dim); border: 1px solid var(--ja-cream-line); }
.tira button span { position: absolute; left: 0; bottom: 0; background: var(--ja-navy); color: var(--ja-cream); font: 600 11px/1 var(--font-mono); padding: 3px 7px; }
.tira button:hover { border-color: var(--ja-navy-45); }
.tira button.activa { border-color: var(--ja-blue-action); }
.tira .sin { font-size: 13px; color: var(--ja-navy-55); }

.barra-grabar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.btn.grande { padding: 14px 26px; font-size: 14.5px; }
.btn.grande svg { width: 18px; height: 18px; }
.btn.contorno.grande { padding: 13px 25px; }
.btn.grabando-ya, .btn.grabando-ya:disabled { background: var(--ja-danger); border-color: var(--ja-danger); color: #fff; opacity: 1; cursor: default; }
.toma-num { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font: 700 10.5px var(--font-sans); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ja-navy-70); }
.toma-num .inp { width: 64px; margin: 0; padding: 9px 10px; text-align: center; font-family: var(--font-mono); }

.nivel { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--ja-navy-70); }
.nivel-barra { position: relative; flex: 0 1 260px; height: 8px; background: var(--ja-navy-10); overflow: hidden; }
.nivel-relleno { height: 100%; width: 0; background: var(--ja-success); }
.nivel-pico { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ja-navy); left: 0; }
.nivel-texto { font-size: 13px; }
.nivel[data-est="bien"] .nivel-texto { color: var(--ja-success); font-weight: 700; }
.nivel[data-est="alto"] .nivel-texto, .nivel[data-est="nada"] .nivel-texto, .nivel[data-est="bajo"] .nivel-texto { color: var(--ja-warning); font-weight: 700; }

#panelAjustes, #revision { margin-bottom: 18px; }
#reproductor { display: block; width: 100%; aspect-ratio: 16/9; background: var(--ja-navy); }
#revision .fila-acciones { margin-top: 16px; }

/* ---------------------------------------------------------- teleprompter */
.prompter { --p-fondo: var(--ja-navy); --p-texto: #D8D8EA; --p-pasado: #6C6CA0; --p-actual: #FFFFFF; --p-resalte: rgba(96,165,250,.22); --p-borde: var(--ja-line-on-navy); --p-ctrl: #0A0A5C; --p-marca: var(--ja-blue-light);
  position: sticky; top: 18px; height: min(780px, calc(100dvh - 250px)); min-height: 470px; display: flex; flex-direction: column; background: var(--p-fondo); color: var(--p-texto); overflow: hidden; }
.prompter[data-tema="crema"] { --p-fondo: var(--ja-cream); --p-texto: #2B2B6B; --p-pasado: #A9A9C6; --p-actual: var(--ja-navy); --p-resalte: rgba(37,99,235,.14); --p-borde: var(--ja-cream-line); --p-ctrl: var(--ja-cream-dim); --p-marca: var(--ja-blue-action-dark); border: 1px solid var(--ja-cream-line); }
.p-cab { display: flex; align-items: center; gap: 14px; padding: 11px 20px; border-bottom: 1px solid var(--p-borde); min-height: 44px; }
.p-crono { flex: none; font: 700 17px/1 var(--font-mono); letter-spacing: -0.02em; color: var(--p-actual); }
.p-crono small { font-size: 13px; font-weight: 500; opacity: .6; letter-spacing: 0; margin-left: 6px; }
.p-barra { flex: 1; height: 3px; background: var(--p-borde); overflow: hidden; }
.p-barra i { display: block; height: 100%; width: 0; background: var(--ja-blue); }
.p-estado { flex: none; font-size: 12px; font-weight: 700; min-height: 1em; }
.prompter.cerca .p-crono, .prompter.cerca .p-estado { color: #FBBF24; }
.prompter.cerca .p-barra i { background: #FBBF24; }
.prompter.pasado .p-crono, .prompter.pasado .p-estado { color: #F87171; }
.prompter.pasado .p-barra i { background: #F87171; }
.prompter[data-tema="crema"].cerca .p-crono, .prompter[data-tema="crema"].cerca .p-estado { color: var(--ja-warning); }
.prompter[data-tema="crema"].pasado .p-crono, .prompter[data-tema="crema"].pasado .p-estado { color: var(--ja-danger); }
.lector-caja { position: relative; flex: 1; min-height: 0; }
.lector { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: auto; padding: 0 22px; scrollbar-width: thin; scrollbar-color: var(--p-borde) transparent; }
.lector-texto { font-weight: 600; line-height: 1.38; letter-spacing: -0.01em; }
.lector.espejo .lector-texto { transform: scaleX(-1); }
.lector p { margin: 0 0 .7em; }
.lector .w { color: var(--p-texto); }
.lector .w.pasado { color: var(--p-pasado); }
.lector .w.actual { color: var(--p-actual); background: var(--p-resalte); box-shadow: 0 0 0 .06em var(--p-resalte); }
.lector .marca { display: inline-block; vertical-align: middle; font: 700 .27em/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--p-marca); border: 1.5px solid currentColor; border-radius: var(--radius-pill); padding: .5em .9em; margin: 0 .7em .3em 0; }
.lector .marca.mala { color: #F87171; }
.linea-marca { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--p-borde); pointer-events: none; }
#cuenta { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,80,.7); color: var(--ja-cream); font: 900 190px/1 var(--font-sans); letter-spacing: -0.04em; z-index: 3; }

.p-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 18px 16px; background: var(--p-ctrl); border-top: 1px solid var(--p-borde); }
.prompter .btn.inverso { padding: 11px 20px; }
.prompter[data-tema="crema"] .btn.inverso { background: var(--ja-navy); border-color: var(--ja-navy); color: var(--ja-cream); }
.btn-i { appearance: none; cursor: pointer; width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--p-borde); background: transparent; color: inherit; transition: background var(--dur-base), border-color var(--dur-base); }
.btn-i:hover:not(:disabled) { border-color: currentColor; }
.btn-i:disabled { opacity: .35; cursor: not-allowed; }
.btn-i svg { width: 16px; height: 16px; }
.paso { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .95; }
.paso span { opacity: .75; }
.paso output { min-width: 28px; text-align: center; font: 700 14px var(--font-mono); letter-spacing: 0; }
.paso small { font-size: 11px; opacity: .7; letter-spacing: .06em; }
.prompter .btn.fantasma { color: inherit; padding: 8px 12px; }
.prompter .btn.fantasma:hover:not(:disabled) { color: var(--p-marca); }

/* ------------------------------------------------------------- proyecto */
.zona-subir { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border: 1.5px dashed var(--ja-navy-20); background: transparent; margin-bottom: 20px; transition: border-color var(--dur-base), background var(--dur-base); }
.zona-subir.sobre { border-color: var(--ja-blue-action); background: var(--ja-blue-08); }
.zona-subir b { display: block; font-size: 15px; margin-bottom: 3px; }
.zona-subir span { color: var(--text-muted); font-size: 13px; font-weight: 300; }
.zona-subir .btn { margin-left: auto; }
.cuadricula { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.mini { background: var(--ja-white); border: 1px solid var(--border-subtle); }
.mini img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; background: var(--ja-cream-dim); border-bottom: 1px solid var(--border-subtle); }
.mini .pie { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 12px; }
.mini .pie b { font: 700 13px var(--font-mono); color: var(--ja-blue-action-dark); }
.mini .acc-mini { padding: 0 8px 8px; justify-content: flex-end; }
.mini .pie span { flex: 1; min-width: 0; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 6px; }
.mini .btn-i { width: 28px; height: 28px; color: var(--ja-navy-70); border-color: transparent; }
.mini .btn-i:hover:not(:disabled) { color: var(--ja-navy); border-color: var(--ja-navy-20); }
.mini .btn-i svg { width: 14px; height: 14px; }
.mini .btn-i.mal:hover:not(:disabled) { color: var(--ja-danger); border-color: rgba(179,36,31,.35); }

.editor-partes { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.lista-partes { display: flex; flex-direction: column; gap: 6px; }
.lista-partes button.parte { appearance: none; cursor: pointer; text-align: left; padding: 12px 14px; background: var(--ja-white); border: 1px solid var(--border-subtle); border-left: 3px solid transparent; font: inherit; color: var(--ja-navy); transition: border-color var(--dur-base); }
.lista-partes button.parte b { display: block; font-size: 14px; }
.lista-partes button.parte span { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.lista-partes button.parte:hover { border-color: var(--ja-navy-45); }
.lista-partes button.parte[aria-selected="true"] { border-left-color: var(--ja-blue-action); background: var(--ja-blue-08); }
.selector-diaps { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-top: 7px; }
.selector-diaps label { position: relative; display: block; cursor: pointer; border: 2px solid transparent; line-height: 0; }
.selector-diaps input { position: absolute; opacity: 0; }
.selector-diaps img { width: 100%; aspect-ratio: 16/9; object-fit: contain; background: var(--ja-cream-dim); border: 1px solid var(--ja-cream-line); }
.selector-diaps em { position: absolute; left: 0; bottom: 0; font: 600 11px/1 var(--font-mono); font-style: normal; background: var(--ja-navy); color: var(--ja-cream); padding: 3px 7px; }
.selector-diaps label:has(input:checked) { border-color: var(--ja-blue-action); }
.selector-diaps label:has(input:checked)::after { content: ""; position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--ja-blue-action); box-shadow: 0 0 0 2px #fff; }
.selector-diaps input:focus-visible + img { outline: 2px solid var(--ja-blue); }
.area.guion { min-height: 300px; font-family: var(--font-sans); font-size: 15px; line-height: 1.6; }
.herramientas-guion { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.herramientas-guion .sel { width: auto; margin: 0; padding: 8px 32px 8px 12px; }
.dato-linea { font-size: 12.5px; color: var(--text-muted); margin: 8px 0 0; }
#guionEstadistica { margin: -6px 0 16px; min-height: 1.2em; }
.dato-linea.largo { color: var(--ja-warning); font-weight: 700; }

/* --------------------------------------------------------------- tomas */
.fila-toma { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--border-subtle); }
.fila-toma:first-child { border-top: 0; padding-top: 0; }
.fila-toma b { display: block; font-size: 14px; word-break: break-all; }
.fila-toma em { font-style: normal; font-size: 12.5px; color: var(--text-muted); }
.fila-toma .acc { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.visor-toma { margin-bottom: 20px; }
.visor-toma video { display: block; width: 100%; max-width: 760px; aspect-ratio: 16/9; background: var(--ja-navy); }

#videoCamara { position: fixed; left: -9999px; top: 0; width: 640px; height: 360px; opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------- adaptación */
@media (max-width: 1180px) {
  .grabar-rejilla { grid-template-columns: 1fr; }
  .prompter { position: relative; top: 0; height: 640px; max-height: none; }
}
@media (max-width: 820px) {
  .editor-partes { grid-template-columns: 1fr; }
  .lista-partes { flex-direction: row; flex-wrap: wrap; }
  .toma-num { margin-left: 0; }
  .zona-subir { flex-wrap: wrap; }
  .zona-subir .btn { margin-left: 0; }
}

/* ------------------------------------------------- cursor en negativo (como el del portafolio) */
.cursor-negativo, .cursor-negativo * { cursor: none; }
.cursor-negativo input, .cursor-negativo textarea, .cursor-negativo select, .cursor-negativo video[controls] { cursor: auto; }
.cursor-negativo-punto { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; background: #f0f0f0; border-radius: 4px; mix-blend-mode: difference; will-change: transform; transition: opacity .25s ease, border-radius .25s ease; }
.cab h1 { display: inline-block; }

/* ----------------------------------------------------------------- acceso */
/* Dos mitades: el panel crema con el formulario y la mitad navy con puntos que se mueven suave.
   Al pedir acceso el panel se desliza al lado derecho de lo azul. Lo más sencillo posible. */
.entrada { display: block; position: fixed; inset: 0; z-index: 60; background: var(--ja-navy); overflow: hidden; --w-panel: min(520px, 100vw); }
.entrada[hidden] { display: none; }
.entrada-panel { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w-panel); z-index: 2; background: var(--ja-cream); display: flex; flex-direction: column; justify-content: center; overflow-y: auto;
  padding: 44px clamp(28px, 5vw, 64px); transition: transform .75s cubic-bezier(.65, 0, .25, 1); }
.entrada-arte { position: absolute; top: 0; bottom: 0; left: var(--w-panel); right: 0; background: var(--ja-navy); overflow: hidden; transition: transform .75s cubic-bezier(.65, 0, .25, 1); }
.entrada[data-modo="solicitar"] .entrada-panel { transform: translateX(calc(100vw - var(--w-panel))); }
.entrada[data-modo="solicitar"] .entrada-arte { transform: translateX(calc(-1 * var(--w-panel))); }
.entrada.sin-transicion .entrada-panel, .entrada.sin-transicion .entrada-arte { transition: none; }
.entrada-contenido { width: 100%; max-width: 390px; margin: 0 auto; }
.entrada h1 { margin: 0 0 10px; font-size: clamp(30px, 3.4vw, 40px); }
.entrada h1 i { font-style: normal; color: var(--ja-blue-action-dark); }
.entrada h2 { font-size: 26px; margin: 0 0 12px; text-transform: uppercase; }
.entrada .lead { margin: 0 0 26px; color: var(--text-muted); font-size: 15px; font-weight: 300; line-height: 1.55; }
.entrada form { display: flex; flex-direction: column; gap: 14px; max-width: none; animation: aparece .4s var(--ease-standard); }
.entrada form[hidden], .entrada [hidden] { display: none; }
.entrada .envuelve { position: relative; display: block; }
.entrada .btn.acento { padding: 14px 20px; font-size: 14px; margin-top: 4px; }
.entrada .opcional { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ja-navy-55); }
.entrada .acepto { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--ja-navy-70); cursor: pointer; }
.entrada .acepto input { margin-top: 2px; flex: none; }
.entrada .acepto a { color: var(--ja-blue-action-dark); }
.enlace { appearance: none; background: none; border: 0; padding: 4px 0; cursor: pointer; font: 600 13px var(--font-sans); color: var(--ja-blue-action-dark); text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; }
.enlace:hover { color: var(--ja-navy); }
.cambio-modo { margin: 22px 0 0; font-size: 13.5px; color: var(--text-muted); }
.entrada .pie-e { margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--border-subtle); font-size: 12px; color: var(--ja-navy-55); }
.entrada .pie-e a { color: var(--ja-navy-70); }
.logo-arte { position: absolute; top: 26px; right: 32px; z-index: 2; line-height: 0; }
.logo-arte img { height: 21px; width: auto; display: block; }
#puntos { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.entrada-arte .lema { position: absolute; left: clamp(24px, 4vw, 56px); bottom: clamp(24px, 5vh, 52px); max-width: 440px; color: var(--ja-cream); }
.entrada-arte .lema b { display: block; font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; letter-spacing: var(--ls-heading); line-height: 1.12; }
.entrada-arte .lema span { display: block; margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: var(--ls-caps-wide); text-transform: uppercase; color: var(--ja-cream-70); }
@media (max-width: 900px) {
  .entrada-arte { display: none; }
  .entrada-panel { width: 100%; transform: none !important; }
}

/* ----------------------------------------------------- pasar diapositivas */
.pasar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.pasar .btn { padding: 11px 22px; }
.contador-diap { margin-left: 4px; font-size: 13px; color: var(--ja-navy-70); }

/* ----------------------------------------------------------------- materias */
.materia { display: flex; flex-direction: column; gap: 6px; }
.materia.abierta { border-color: var(--ja-blue-action); }
.materia h2 { font-size: 17px; line-height: 1.2; margin: 0; }
.materia .trabajo { font-size: 13.5px; color: var(--text-muted); margin: 0 0 8px; }
.materia .cifras { display: flex; gap: 18px; margin: 4px 0 6px; font: 600 12px var(--font-mono); color: var(--ja-navy); }
.materia .cifras small { display: block; font: 700 9.5px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ja-navy-55); margin-top: 2px; }
.materia .ultima { font-size: 12px; color: var(--ja-navy-55); margin-bottom: 8px; }
.materia .fila-acciones { margin-top: auto; padding-top: 6px; }
.espacio-b { margin-bottom: 20px; }
.actividad-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border-subtle); font-size: 13.5px; }
.actividad-fila:first-child { border-top: 0; padding-top: 0; }
.actividad-fila em { font-style: normal; color: var(--text-muted); font-size: 12.5px; display: block; }
.actividad-fila time { font: 500 12px var(--font-mono); color: var(--ja-navy-55); white-space: nowrap; }

/* ------------------------------------------------------------------ accesos */
.tabla .mensaje { max-width: 280px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.tabla select.sel { margin: 0; width: auto; padding: 6px 28px 6px 10px; font-size: 12.5px; }
#estadoCarpeta { margin: 0 0 4px; font-size: 14px; }
#estadoCarpeta b { font-weight: 700; }

/* ------------------------------------------------------ enlaces del proyecto */
.enlaces-lateral { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0 4px; margin: 2px 0 0; }
.enlaces-lateral a { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ja-cream-70); text-decoration: none; }
.enlaces-lateral a:hover { color: var(--ja-cream); text-decoration: underline; text-underline-offset: 3px; }
.enlaces-lateral svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.entrada .pie-e a { color: var(--ja-navy); }
a.btn { text-decoration: none; }

/* ------------------------------------------------------------ Jai saluda */
.jai-popup { position: fixed; right: 24px; bottom: 24px; z-index: 120; width: min(400px, calc(100vw - 32px)); background: var(--ja-navy); color: var(--ja-cream); padding: 20px 22px 14px;
  box-shadow: var(--shadow-overlay); opacity: 0; transform: translateY(18px); transition: opacity .45s var(--ease-standard), transform .45s var(--ease-standard); border-top: 3px solid var(--ja-blue); }
.jai-popup.entrando { opacity: 1; transform: none; }
.jai-popup.saliendo { opacity: 0; transform: translateY(18px); }
.jai-fila { display: flex; gap: 14px; align-items: flex-start; }
.jai-cara { flex: none; margin-top: 2px; overflow: visible; }
.jai-flota { animation: jai-flota 3.4s ease-in-out infinite; }
.jai-ojos rect { transform-box: fill-box; transform-origin: center; animation: jai-parpadeo 3.6s infinite; }
@keyframes jai-flota { 50% { transform: translateY(-3px); } }
@keyframes jai-parpadeo { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.jai-texto { position: relative; flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.55; }
.jai-texto p { margin: 0; }
.jai-completo { position: absolute; inset: 0; visibility: hidden; }
.jai-dicho { min-height: 7.3em; }
.jai-popup.dicho .jai-dicho { min-height: 0; }
.jai-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 14px 0 8px; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; pointer-events: none; }
.jai-popup.dicho .jai-acciones { opacity: 1; transform: none; pointer-events: auto; }
.jai-acciones .btn { padding: 8px 15px; }
.btn.contorno-claro { background: transparent; color: var(--ja-cream); border: 1.5px solid var(--ja-cream-70); }
.btn.contorno-claro:hover { background: var(--ja-cream); color: var(--ja-navy); border-color: var(--ja-cream); }
.jai-enlace { flex-basis: 100%; font-size: 12.5px; color: var(--ja-blue-light); text-underline-offset: 3px; }
.jai-enlace:hover { color: var(--ja-cream); }
.jai-cerrar { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; background: none; border: 0; color: var(--ja-cream-70); cursor: pointer; }
.jai-cerrar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.jai-cerrar:hover { color: var(--ja-cream); }
.jai-no { background: none; border: 0; padding: 0; color: var(--ja-cream-70); font: 400 11.5px var(--font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.jai-no:hover { color: var(--ja-cream); }
@media (prefers-reduced-motion: reduce) { .jai-flota, .jai-ojos rect { animation: none; } }

.captcha-caja { margin: 14px 0 0; min-height: 0; }

/* aviso de invitación en «Solicitar acceso» */
.nota-inv { margin: 0; padding: 10px 12px; border-left: 2px solid var(--ja-blue-action); background: var(--ja-blue-action-10, rgba(30, 80, 255, .08)); font-size: 12.5px; line-height: 1.5; color: var(--ja-navy-70); }
.materia .pill svg.i { width: 15px; height: 15px; }

/* celular: sin zoom. iOS acerca la página al tocar un campo con letra menor de 16 px, y el doble toque también acerca */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
@media (max-width: 900px) {
  input, select, textarea, .inp, .sel, .area, .inp.mono, .area.mono { font-size: 16px; }
}

/* proyectos de grupo (nube privada): tarjeta «Compartir con el grupo» en los datos de una materia */
.nube-rej { margin-bottom: 16px; }
.nube-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: 13.5px; color: var(--ja-navy-70); }
.nube-id { font-family: var(--font-mono); font-size: 12.5px; padding: 3px 8px; background: var(--ja-navy-10); color: var(--ja-navy); overflow-wrap: anywhere; }
.nube-barra { height: 8px; background: var(--ja-navy-10); overflow: hidden; }
.nube-barra i { display: block; height: 100%; width: 0; background: var(--ja-blue-action); transition: width .25s; }
.nube-prog { margin-top: 16px; }
.nube-prog-t { margin: 8px 0 0; font-size: 12.5px; color: var(--ja-navy-55); }
@media (prefers-reduced-motion: reduce) { .nube-barra i { transition: none; } }

/* accesos: uso por persona (solo fechas y conteos) */
.uso-linea { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: var(--ja-navy-55); font-weight: 400; }

/* --------------------------------------------------------------- unir tomas */
.unir-grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.unir-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.unir-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-subtle); }
.unir-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--border-subtle); background: var(--ja-white); }
.unir-fila:first-child { border-top: 0; }
.unir-fila:not(.marcada) { background: var(--ja-cream-dim); }
.unir-fila:not(.marcada) .unir-dato b { color: var(--ja-navy-70); font-weight: 600; }
.unir-marca { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.unir-marca input { width: 20px; height: 20px; margin: 0; cursor: pointer; }
.unir-pos { min-width: 22px; font: 700 13px var(--font-mono); color: var(--ja-blue-action-dark); text-align: center; }
.unir-dato { min-width: 0; }
.unir-dato b { display: block; font-size: 14px; word-break: break-all; }
.unir-dato em { display: block; font-style: normal; font-size: 12.5px; color: var(--text-muted); }
.unir-dato .pill { margin-top: 6px; }
.unir-mover { display: flex; gap: 6px; }
.unir-nombre { margin-top: 16px; max-width: 460px; }
#btnUnir { margin-top: 4px; }
.unir-decision, .unir-aviso { margin-top: 16px; }
.unir-decision ul { margin: 8px 0; padding-left: 20px; }
.unir-progreso { margin-top: 16px; padding: 16px; border: 1px solid var(--border-subtle); background: var(--ja-cream-dim); }
#unirEstado { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
#unirEstado:focus-visible { outline: 2px solid var(--ja-blue-action); outline-offset: 4px; }
#unirBarra { display: block; width: 100%; height: 8px; appearance: none; border: 0; background: var(--ja-navy-10); border-radius: 0; overflow: hidden; }
#unirBarra::-webkit-progress-bar { background: var(--ja-navy-10); }
#unirBarra::-webkit-progress-value { background: var(--ja-blue-action); transition: width .2s; }
#unirBarra::-moz-progress-bar { background: var(--ja-blue-action); }
.unir-resultado { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-subtle); }
.unir-resultado h3 { margin: 0 0 12px; font-size: 15px; text-transform: uppercase; letter-spacing: -0.005em; }
.unir-resultado h3:focus-visible { outline: 2px solid var(--ja-blue-action); outline-offset: 4px; }
.unir-resultado video { display: block; width: 100%; max-width: 760px; aspect-ratio: 16/9; background: var(--ja-navy); }
.unir-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 12px; font-size: 13px; color: var(--text-muted); }
.unir-ayuda { margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.unir-ayuda summary { cursor: pointer; font-weight: 700; color: var(--ja-navy); }
.unir-ayuda summary:focus-visible { outline: 2px solid var(--ja-blue-action); outline-offset: 3px; }
.unir-ayuda code { font: 12px var(--font-mono); background: var(--ja-cream-dim); padding: 2px 5px; word-break: break-all; }
@media (max-width: 560px) {
  .unir-fila { grid-template-columns: auto minmax(0, 1fr); }
  .unir-mover { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { #unirBarra::-webkit-progress-value { transition: none; } }

/* acceso: mantener la sesión */
.entrada .recordar small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ja-navy-55); }

/* inicio: las tarjetas se reparten solas (4 o más) y el menú acepta enlaces externos */
#tarjetasInicio { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
a.nav { text-decoration: none; }