/* Mi Firma IA. Claro para conversar, noche para el registro que entra en vivo.
   El color es información: el azul es acción y el verde, ámbar y rojo son el semáforo.
   Sello propio: el dato sensible se tacha frente a tus ojos. */
@font-face{font-family:"Texto";src:url(/fuentes/texto-latin.woff2) format("woff2-variations");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Texto";src:url(/fuentes/texto-latin-ext.woff2) format("woff2-variations");font-weight:200 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Maquina";src:url(/fuentes/mono-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --noche:#12163B;--noche-2:#1C2150;--noche-3:#2A3068;--bruma:#AEB3D9;
  --azul:#2B3BE6;--azul-2:#2230C4;--azul-suave:#E9EBFC;
  --fondo:#F5F6FB;--hoja:#FFFFFF;--gris:#5C6184;--linea:#E6E8F2;
  --verde:#0E9F55;--ambar:#D98A00;--rojo:#D93A3F;
  --verde-vivo:#34D986;--ambar-vivo:#FFB627;--rojo-vivo:#FF6066;
  --texto:"Texto",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maquina:"Maquina",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --numeros:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sombra:0 1px 2px rgba(18,22,59,.05),0 6px 22px rgba(18,22,59,.07);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;min-height:100%}
body{background:var(--fondo);color:var(--noche);font:17px/1.45 var(--texto);display:flex;flex-direction:column;min-height:100dvh}
#app{flex:1;display:flex;flex-direction:column;min-height:0}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px;border-radius:6px}
.cargando{padding:4rem 1.5rem;text-align:center;color:var(--gris)}
.icono{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.aviso-prototipo{position:sticky;top:0;z-index:40;background:var(--noche);color:#D5D8F2;text-align:center;font-size:.72rem;font-weight:600;line-height:1.5;padding:.12rem .6rem;letter-spacing:.01em}

/* Controles */
.boton{appearance:none;border:0;background:var(--azul);color:#fff;font-weight:700;padding:.65rem 1.2rem;border-radius:12px;line-height:1.2;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;transition:background .15s,transform .1s;white-space:nowrap}
.boton:hover{background:var(--azul-2)}
.boton:active{transform:scale(.98)}
.boton:disabled{opacity:.35;cursor:default;transform:none}
.boton.suave{background:var(--azul-suave);color:var(--noche)}
.boton.suave:hover{background:#DADDF9}
.boton.fantasma{background:transparent;color:var(--gris);padding:.4rem .6rem}
.boton.fantasma:hover{background:var(--azul-suave);color:var(--noche)}
.boton.mini{padding:.35rem .8rem;font-size:.88rem;border-radius:10px}
.campo{display:block;margin-bottom:.9rem}
.campo>span{display:block;font-weight:600;font-size:.88rem;color:var(--gris);margin-bottom:.25rem}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=date],select,textarea{width:100%;max-width:100%;background:#fff;border:1.5px solid #D5D8E8;border-radius:12px;padding:.65rem .85rem;transition:border-color .15s,background .15s}
input:focus,textarea:focus,select:focus{background:#fff;border-color:var(--azul);outline:none}
textarea{resize:vertical}
.error{background:#FDECEC;color:#8E1E22;padding:.55rem .85rem;border-radius:12px;font-size:.92rem;font-weight:600;margin-bottom:.9rem}
.ayuda{color:var(--gris);font-size:.88rem}
.separado{margin-bottom:.9rem}
/* Los números grandes van sin el cero tachado de la fuente de texto: se leen mejor desde lejos en un proyector. */
.contador b,.numero b,.mini-tarjeta b,.umbral-valor,.barra-fila b,.leyenda b,.fr-pct,.segundos,.escala span{font-family:var(--numeros)}

/* Dato protegido: la barra de censura */
.dato{background:var(--noche);color:#fff;font:700 .74em/1.6 var(--maquina);padding:.12em .5em;border-radius:5px;white-space:nowrap}
.vivo .dato,.usuario .dato{background:#fff;color:var(--noche)}
.dato.tachando{background:linear-gradient(var(--noche),var(--noche)) left/0 100% no-repeat;color:var(--noche);animation:tachar .5s cubic-bezier(.6,0,.2,1) forwards}
@keyframes tachar{to{background-size:100% 100%;color:#fff}}
.pal{opacity:0;animation:aparece .22s ease-out forwards}
@keyframes aparece{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* Semáforo */
.punto{width:.72rem;height:.72rem;border-radius:50%;display:inline-block;flex:none}
.punto.verde{background:var(--verde)}.punto.ambar{background:var(--ambar)}.punto.rojo{background:var(--rojo)}
.estado{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.9rem;white-space:nowrap}
.estado.verde{color:#0A7A41}.estado.ambar{color:#9A6100}.estado.rojo{color:#B42A2F}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:.3rem;background:var(--azul-suave);color:var(--noche);border:0;border-radius:99px;padding:.18rem .6rem;font-size:.8rem;font-weight:600;white-space:nowrap;max-width:100%}
.chip span{overflow:hidden;text-overflow:ellipsis}
button.chip:hover{background:#DADDF9}

/* Entrada */
.entrada{flex:1;display:grid;place-items:center;padding:clamp(1.25rem,5vh,3rem) 1.25rem}
.caja{width:100%;max-width:25rem}
.logo{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;text-decoration:none;font-size:1.02rem;letter-spacing:-.01em}
.logo-marca{width:1.65rem;height:1.65rem;border-radius:.5rem;background:var(--noche);position:relative;display:inline-block;flex:none}
.logo-marca::after{content:"";position:absolute;left:18%;right:18%;top:40%;height:22%;background:#fff;border-radius:2px}
.caja .logo{margin-bottom:1.5rem}
.caja h1{font-size:clamp(2rem,5vw,2.6rem);line-height:1.05;letter-spacing:-.03em;font-weight:800;margin-bottom:1.25rem}
.caja .boton{width:100%;padding:.85rem;font-size:1.05rem;margin-top:.25rem}
.conmutar{display:flex;gap:.25rem;background:#E9EBF5;padding:.25rem;border-radius:12px;margin-bottom:1.1rem}
.conmutar button{flex:1;appearance:none;background:none;border:0;padding:.45rem;font-weight:700;color:var(--gris);border-radius:9px;transition:background .15s}
.conmutar button[aria-selected=true]{background:#fff;color:var(--noche);box-shadow:0 1px 3px rgba(18,22,59,.14)}
.codigo-grande{display:flex;justify-content:center;font:700 clamp(1.15rem,5vw,1.5rem) var(--maquina);background:var(--noche);color:#fff;padding:1rem;border-radius:14px;margin:1rem 0 .75rem;letter-spacing:.03em;overflow-wrap:anywhere;text-align:center}
.botones{display:flex;gap:.5rem}
.caja .botones .boton{width:auto;flex:1;margin:0}

/* Encabezado */
.cabecera{background:var(--hoja);display:flex;align-items:center;gap:.4rem 1.75rem;padding:.6rem clamp(1rem,2.5vw,1.5rem);box-shadow:0 1px 0 var(--linea);z-index:5}
.nav{display:flex;gap:.25rem;flex:1}
.nav a{text-decoration:none;padding:.35rem .8rem;font-weight:600;color:var(--gris);border-radius:10px;white-space:nowrap;font-size:.95rem;transition:background .15s,color .15s}
.nav a:hover{background:var(--azul-suave);color:var(--noche)}
.nav a[aria-current=page]{background:var(--noche);color:#fff}
.quien{display:flex;align-items:center;gap:.5rem;font-size:.92rem;white-space:nowrap}
.inicial{width:1.9rem;height:1.9rem;border-radius:50%;background:var(--azul-suave);color:var(--noche);display:inline-grid;place-items:center;font-weight:800;font-size:.85rem;flex:none}
.quien-nombre{font-weight:600}
.quien-rol{color:var(--gris);font-size:.8rem}

/* Mesa */
.mesa{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,26rem)}
.chat{display:flex;flex-direction:column;min-height:0;background:var(--hoja)}
.chat-cabeza{display:flex;align-items:center;gap:.6rem;padding:.65rem clamp(1rem,2.5vw,1.75rem) 0;flex-wrap:wrap}
.etiqueta-ia{display:inline-flex;align-items:center;gap:.35rem;background:var(--azul-suave);border-radius:99px;padding:.15rem .7rem;font-size:.78rem;font-weight:700}
.etiqueta-ia.real{background:#FFF1D6;color:#7A4D00}
.selector-ia{font-size:.8rem;display:flex;align-items:center}
.selector-ia select{width:auto;padding:.1rem .5rem;font-size:.8rem;border-radius:99px;background:var(--fondo);border-color:transparent}
.mensajes{flex:1;min-height:0;overflow-y:auto;padding:1rem clamp(1rem,2.5vw,1.75rem);display:flex;flex-direction:column;gap:1.4rem;scroll-behavior:smooth}
.vacio{margin:auto;text-align:center;padding:1rem}
.vacio h2{font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.05;letter-spacing:-.035em;font-weight:800}

.mensaje{display:flex;flex-direction:column;gap:.55rem;animation:aparece .25s ease-out}
.burbuja{padding:.65rem 1rem;border-radius:20px;overflow-wrap:anywhere;font-size:1.05rem}
.usuario{align-self:flex-end;max-width:min(78%,36rem);background:var(--azul);color:#fff;border-bottom-right-radius:6px;font-weight:600}
.lado{display:flex;gap:.55rem;align-items:flex-start;max-width:min(92%,44rem)}
.lado .logo-marca{margin-top:.25rem}
.columna{min-width:0;flex:1;display:flex;flex-direction:column;gap:.45rem;align-items:flex-start}
.asistente{background:var(--fondo);border-bottom-left-radius:6px}
.asistente.negada{background:#FDECEC;color:#8E1E22;font-weight:700;display:flex;gap:.5rem;align-items:center}
.asistente.sin-fuente{font-weight:700;display:flex;gap:.5rem;align-items:center}
.respuesta{display:flex;flex-direction:column;gap:.45rem;align-items:flex-start;width:100%}
.respuesta:empty{display:none}
.lineas li+li{margin-top:.28rem}
.trabajando{display:inline-flex;align-items:center;gap:.55rem;color:var(--gris);font-weight:600;background:var(--fondo);padding:.55rem 1rem;border-radius:20px;border-bottom-left-radius:6px}
.trabajando b{font-weight:600;animation:aparece .2s ease-out}
.trabajando.pensando{flex-wrap:wrap;position:relative;overflow:hidden;background:var(--azul-suave);color:var(--noche);padding:.65rem 1.1rem .75rem;row-gap:.1rem}
.trabajando.pensando b{font-weight:800;font-size:1.08rem}
.trabajando.pensando small{flex-basis:100%;font-size:.84rem;font-weight:600;color:var(--gris)}
.segundos{margin-left:auto;font-weight:800;font-size:1.08rem;font-variant-numeric:tabular-nums;color:var(--azul)}
.trabajando.pensando::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,transparent,var(--azul),transparent) no-repeat;background-size:45% 100%;animation:barrido 1.3s infinite linear}
@keyframes barrido{from{background-position:-80% 0}to{background-position:180% 0}}
.puntos{display:inline-flex;gap:.2rem}
.puntos i{width:.42rem;height:.42rem;border-radius:50%;background:var(--azul);animation:salta 1s infinite ease-in-out}
.puntos i:nth-child(2){animation-delay:.14s}.puntos i:nth-child(3){animation-delay:.28s}
@keyframes salta{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.resumen{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;animation:aparece .3s ease-out}
.resumen-pasos{appearance:none;border:0;background:none;padding:0;display:flex;flex-wrap:wrap;gap:.3rem;cursor:pointer;border-radius:99px}
.chip-fuente{background:#fff;box-shadow:inset 0 0 0 1.5px var(--azul);color:var(--azul);cursor:pointer}
button.chip-fuente:hover{background:var(--azul-suave)}
.chip-fuente span{max-width:min(46vw,24rem)}
.pasos{font-size:.88rem;color:var(--gris);padding-left:.2rem;animation:aparece .2s ease-out}
.pasos li{display:flex;gap:.35rem;padding:.08rem 0;align-items:baseline}
.pasos .icono{color:var(--verde);align-self:center;width:.95em;height:.95em}
.pasos li.alerta .icono{color:var(--rojo)}
.pasos b{color:var(--noche);font-weight:600}
.cita-info{font-size:.84rem;color:var(--gris);padding-left:.2rem}
.cita-linea{display:block;color:var(--noche);font-size:.92rem;margin-bottom:.1rem}
.cita-renglon{display:block}
.aviso-ia{background:#FFF1D6;color:#7A4D00;padding:.4rem .75rem;border-radius:12px;font-size:.88rem;font-weight:600}

/* Inventario en el chat */
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;width:100%;max-width:32rem}
.mini-tarjeta{background:var(--fondo);border-radius:16px;padding:.7rem .85rem}
.mini-tarjeta b{display:block;font-size:2.1rem;line-height:1.05;letter-spacing:-.03em;font-weight:800;margin-top:.2rem}
.mini-tarjeta span{display:block;font-size:.76rem;font-weight:700;line-height:1.15}
.mini-tarjeta small{display:block;font-size:.76rem;font-weight:600;color:var(--gris);line-height:1.15}
.entra-tarjeta{animation:emerge .4s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes emerge{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
.pendientes-breves{font-size:.95rem}
.pendientes-breves li{padding:.1rem 0}

/* Compositor */
.sugerencias{display:flex;gap:.4rem;padding:.25rem clamp(1rem,2.5vw,1.75rem) .55rem;overflow-x:auto;scrollbar-width:none}
.sugerencias::-webkit-scrollbar{display:none}
.sugerencia{appearance:none;flex:none;background:var(--azul-suave);border:0;border-radius:99px;padding:.32rem .85rem;font-size:.88rem;font-weight:600;white-space:nowrap;transition:background .15s,transform .1s}
.sugerencia:hover{background:#DADDF9;transform:translateY(-1px)}
.sugerencia:disabled{opacity:.45;cursor:default;transform:none}
.compositor{padding:0 clamp(1rem,2.5vw,1.75rem) .9rem}
.entregable-zona{margin-bottom:.4rem;display:flex;align-items:center}
.chip-entregable{appearance:none;border:0;background:none;color:var(--gris);display:inline-flex;align-items:center;gap:.3rem;font-size:.82rem;font-weight:600;padding:.1rem .4rem;border-radius:8px;max-width:100%}
.chip-entregable:hover{background:var(--azul-suave);color:var(--noche)}
.chip-entregable b{color:var(--noche);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entregable-zona input{max-width:22rem;padding:.25rem .7rem;font-size:.88rem;border-radius:99px;background:#fff;border-color:var(--azul)}
.campo-pregunta{display:flex;align-items:center;gap:.4rem;background:var(--fondo);border-radius:18px;padding:.3rem .3rem .3rem 1rem;border:1.5px solid transparent;transition:border-color .15s,background .15s}
.campo-pregunta:focus-within{border-color:var(--azul);background:#fff}
.campo-pregunta textarea{flex:1;background:none;border:0;border-radius:0;padding:.45rem 0;resize:none;height:2.3rem;min-width:0;font-size:1.05rem}
.campo-pregunta textarea:focus{background:none}
.enviar{appearance:none;width:2.6rem;height:2.6rem;border-radius:14px;border:0;background:var(--azul);color:#fff;display:grid;place-items:center;flex:none;transition:background .15s,transform .1s}
.enviar:hover{background:var(--azul-2)}
.enviar:active{transform:scale(.94)}
.enviar:disabled{opacity:.4;cursor:default}

/* Registro en vivo */
.vivo{background:var(--noche);color:#fff;min-height:0;display:flex;flex-direction:column}
.contadores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;padding:1.1rem 1.25rem .9rem}
.contador b{display:block;font-size:clamp(2.1rem,3.6vw,2.9rem);line-height:1;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.contador span{display:block;font-size:.76rem;font-weight:600;color:var(--bruma);margin-top:.3rem;line-height:1.15}
.linea-tiempo{flex:1;min-height:0;overflow-y:auto;padding:.3rem 1.25rem 1.25rem 1.25rem;position:relative;scrollbar-color:var(--noche-3) transparent}
.linea-tiempo ol{position:relative;display:flex;flex-direction:column;gap:.5rem}
.linea-tiempo ol::before{content:"";position:absolute;left:.33rem;top:.5rem;bottom:.5rem;width:2px;background:var(--noche-3)}
.tarjeta-vivo{position:relative;padding-left:1.35rem}
.tarjeta-vivo .punto{position:absolute;left:0;top:.82rem;box-shadow:0 0 0 3px var(--noche)}
.tarjeta-vivo .punto.verde{background:var(--verde-vivo)}.tarjeta-vivo .punto.ambar{background:var(--ambar-vivo)}.tarjeta-vivo .punto.rojo{background:var(--rojo-vivo)}
.tarjeta-vivo button{appearance:none;border:0;width:100%;text-align:left;background:var(--noche-2);color:#fff;border-radius:14px;padding:.55rem .75rem;display:block;transition:background .15s,transform .15s}
.tarjeta-vivo button:hover{background:var(--noche-3);transform:translateX(2px)}
.tv-pregunta{display:block;font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-pie{display:flex;align-items:center;gap:.3rem;margin-top:.3rem;min-width:0}
.tv-pie .chip{background:var(--noche-3);color:#D5D8F2;font-size:.72rem;padding:.08rem .5rem}
.tv-hora{margin-left:auto;font-size:.72rem;color:var(--bruma);white-space:nowrap;padding-left:.3rem}
.tarjeta-vivo.entra{animation:desliza .55s cubic-bezier(.2,.9,.3,1.15)}
.tarjeta-vivo.entra button{animation:resalta 1.8s ease-out}
.tarjeta-vivo.entra .punto{animation:late .9s ease-out 2}
@keyframes desliza{from{opacity:0;transform:translateY(-24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes resalta{0%,35%{background:var(--azul)}100%{background:var(--noche-2)}}
@keyframes late{50%{transform:scale(1.5)}}
.vivo-vacio{color:var(--bruma);padding:1.5rem 0;text-align:center;font-weight:600}

/* Panel lateral */
dialog.lateral{margin:0 0 0 auto;border:0;padding:0;width:min(32rem,100vw);height:100dvh;max-height:none;max-width:100vw;color:var(--noche);background:var(--hoja);box-shadow:-12px 0 40px rgba(18,22,59,.22)}
dialog.lateral[open]{animation:lateral .28s cubic-bezier(.2,.9,.3,1)}
dialog.lateral::backdrop{background:rgba(18,22,59,.42);animation:velo .25s}
@keyframes lateral{from{transform:translateX(100%)}to{transform:none}}
@keyframes velo{from{opacity:0}to{opacity:1}}
.lateral-marco{display:flex;flex-direction:column;height:100%}
.lateral-cabeza{display:flex;align-items:flex-start;gap:.75rem;padding:1.1rem 1.25rem .7rem}
.lateral-cabeza h2{flex:1;font-size:1.25rem;line-height:1.2;letter-spacing:-.015em;overflow-wrap:anywhere}
.cerrar{appearance:none;border:0;background:var(--fondo);width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;flex:none}
.cerrar:hover{background:var(--azul-suave)}
.lateral-cuerpo{flex:1;overflow-y:auto;padding:.1rem 1.25rem 1rem}
.lateral-seccion{margin-top:1.1rem}
.lateral-seccion>h3{font-size:.82rem;font-weight:700;color:var(--gris);margin-bottom:.35rem}
.ficha{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.25rem .9rem;font-size:.93rem}
.ficha dt{color:var(--gris)}
.ficha dd{overflow-wrap:anywhere;font-weight:500}
.lateral-cuerpo .pasos{font-size:.9rem}
.filas-detalle li{padding:.45rem 0;border-top:1px solid var(--linea);overflow-wrap:anywhere}
.filas-detalle b{display:block;font-weight:600;font-size:.95rem}
.filas-detalle small{display:block;color:var(--gris);font-size:.84rem;line-height:1.35}
.lista-revisiones{font-size:.88rem}
.lista-revisiones li{padding:.3rem 0;border-top:1px solid var(--linea);display:flex;gap:.5rem;align-items:baseline}
.lista-revisiones .punto{align-self:center}
.decision{padding:.9rem 1.25rem 1.1rem;background:var(--fondo)}
.decision h3{font-size:.88rem;font-weight:700;margin-bottom:.4rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.decision h3 small{font-size:.76rem;font-weight:700;background:#FFF1D6;color:#7A4D00;border-radius:99px;padding:.06rem .55rem;white-space:nowrap}
.escala{display:grid;grid-template-columns:repeat(5,1fr);gap:.3rem;margin-bottom:.25rem}
.escala label{position:relative;cursor:pointer}
.escala input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.escala span{display:block;text-align:center;background:#fff;border-radius:11px;padding:.5rem .1rem;font-weight:800;font-size:.95rem;white-space:nowrap;transition:background .15s,color .15s}
.escala label:hover span{background:var(--azul-suave)}
.escala input:checked+span{background:var(--azul);color:#fff}
.escala input:focus-visible+span{outline:3px solid var(--azul);outline-offset:2px}
.escala-detalle{min-height:1.3rem;font-size:.82rem;color:var(--gris);margin-bottom:.55rem}
.decisiones{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.decidir{appearance:none;border:0;color:#fff;font-weight:800;font-size:1.02rem;padding:.85rem .2rem;border-radius:14px;transition:transform .1s,filter .15s,opacity .15s}
.decidir:hover{filter:brightness(1.08);transform:translateY(-1px)}
.decidir:disabled{opacity:.3;cursor:default;transform:none;filter:none}
.decidir.aprobado{background:var(--verde)}.decidir.ajustado{background:#B97500}.decidir.rechazado{background:var(--rojo)}
.decidir.pedir{background:var(--azul);grid-column:1/-1}
.mas-opciones{margin-top:.6rem;font-size:.88rem}
.mas-opciones summary{cursor:pointer;color:var(--gris);font-weight:600}
.mas-opciones .campo{margin:.5rem 0 0}
.mas-opciones input[type=text],.mas-opciones textarea{background:#fff}
.mas-opciones .boton{margin-top:.5rem}

/* Interruptor */
.interruptor{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.92rem;font-weight:600}
.interruptor input{position:absolute;opacity:0;width:0;height:0}
.interruptor i{width:2.5rem;height:1.45rem;border-radius:99px;background:#C9CCE0;position:relative;transition:background .2s;flex:none}
.interruptor i::after{content:"";position:absolute;left:.15rem;top:.15rem;width:1.15rem;height:1.15rem;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(18,22,59,.3);transition:transform .2s cubic-bezier(.3,1.4,.5,1)}
.interruptor input:checked+i{background:var(--azul)}
.interruptor input:checked+i::after{transform:translateX(1.05rem)}
.interruptor input:focus-visible+i{outline:3px solid var(--azul);outline-offset:2px}

/* Páginas */
.pagina{width:100%;max-width:64rem;margin:0 auto;padding:clamp(1.1rem,3vw,2.25rem) clamp(1rem,3vw,2rem) 3rem}
.pagina>h1{font-size:clamp(1.9rem,4.5vw,3rem);letter-spacing:-.035em;line-height:1.05;font-weight:800;margin-bottom:1.1rem}
.pestanas{display:flex;gap:.25rem;margin-bottom:1.25rem;overflow-x:auto;scrollbar-width:none;padding:.15rem}
.pestanas a{text-decoration:none;padding:.42rem .95rem;font-weight:700;color:var(--gris);border-radius:10px;white-space:nowrap}
.pestanas a:hover{background:var(--azul-suave)}
.pestanas a[aria-current=page]{background:var(--azul);color:#fff}
.tarjeta{background:var(--hoja);border-radius:20px;padding:clamp(1rem,2.2vw,1.5rem);margin-bottom:1rem;box-shadow:var(--sombra)}
.barra-acciones{display:flex;gap:.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:.75rem}
.barra-acciones .derecha{display:flex;gap:.4rem}
.filtros{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.6rem;margin-bottom:.9rem;animation:aparece .2s ease-out}
.filtros label{font-size:.8rem;font-weight:600;color:var(--gris);display:block}
.filtros input,.filtros select{padding:.4rem .6rem;margin-top:.15rem;font-size:.92rem;height:2.4rem;color:var(--noche)}
.nada{padding:2rem 0;color:var(--gris);text-align:center;font-weight:600}

/* Registros */
.filas-registro{width:100%}
.fila-registro{display:grid;grid-template-columns:minmax(7rem,1.1fr) minmax(0,3fr) 6.5rem 5rem 6.5rem;align-items:center;gap:.8rem;padding:.65rem .5rem;border-radius:12px;cursor:pointer;transition:background .15s}
.fila-registro:hover{background:var(--fondo)}
.fila-registro.sin-quien{grid-template-columns:minmax(0,3fr) 6.5rem 5rem 6.5rem}
.fila-cabeza{font-size:.78rem;font-weight:700;color:var(--gris);cursor:default;padding-block:.15rem}
.fila-cabeza:hover{background:none}
.fr-quien{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.92rem;min-width:0}
.fr-quien span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-que{min-width:0;font-weight:500}
.fr-que p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-pct{font-weight:800;font-variant-numeric:tabular-nums}
.fr-pct.sin{color:#A4A8C4;font-weight:600}
.fr-accion{text-align:right}

/* Tablero */
.cuatro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1rem}
.numero{background:var(--hoja);border-radius:20px;padding:1.1rem 1.25rem;box-shadow:var(--sombra)}
.numero b{display:block;font-size:clamp(2.2rem,4.2vw,3.4rem);line-height:1;font-weight:800;letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap}
.numero span{display:block;font-weight:600;color:var(--gris);font-size:.9rem;margin-top:.35rem}
.dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:1rem}
.anillo-zona{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;justify-content:center}
.anillo{position:relative;width:11rem;height:11rem;flex:none}
.anillo svg{width:100%;height:100%;transform:rotate(-90deg)}
.anillo circle{fill:none;stroke-width:12;transition:stroke-dasharray .9s cubic-bezier(.3,.8,.3,1),stroke-dashoffset .9s cubic-bezier(.3,.8,.3,1)}
.anillo .fondo-anillo{stroke:var(--linea)}
.anillo .a-verde{stroke:var(--verde)}.anillo .a-ambar{stroke:var(--ambar)}.anillo .a-rojo{stroke:var(--rojo)}
.anillo-centro{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.anillo-centro b{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.anillo-centro.verde b{color:#0A7A41}.anillo-centro.ambar b{color:#9A6100}.anillo-centro.rojo b{color:#B42A2F}
.leyenda{display:grid;gap:.35rem}
.leyenda div{display:flex;align-items:center;gap:.45rem;font-size:.92rem;font-weight:600}
.leyenda b{font-weight:800;min-width:1.3rem;text-align:right;font-variant-numeric:tabular-nums}
.tarjeta h2{font-size:1rem;font-weight:700;margin-bottom:.8rem}
.barras{display:grid;gap:.55rem}
.barra-fila{display:grid;grid-template-columns:4.2rem minmax(0,1fr) 1.6rem;align-items:center;gap:.6rem;font-weight:700;font-size:.92rem}
.barra-fila b{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.barra-fondo{background:var(--fondo);height:1.05rem;border-radius:99px;overflow:hidden}
.barra-fondo i{display:block;height:100%;width:0;background:var(--azul);border-radius:99px;transition:width .9s cubic-bezier(.3,.8,.3,1)}

/* Política */
.umbral-zona{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.umbral-valor{font-size:clamp(3rem,7vw,4.5rem);font-weight:800;letter-spacing:-.05em;line-height:1;min-width:8rem;font-variant-numeric:tabular-nums}
.umbral-zona input[type=range]{flex:1;min-width:13rem;accent-color:var(--azul);height:2rem;cursor:pointer}
.interruptores{display:grid;gap:.75rem}
.interruptores .interruptor{justify-content:space-between;width:100%}
.titulo-control{font-weight:700;font-size:1rem;margin-bottom:.6rem}

/* Filas limpias */
.filas{display:flex;flex-direction:column}
.fila{display:flex;align-items:center;gap:.8rem;padding:.6rem .25rem;min-height:3.2rem}
.fila+.fila{border-top:1px solid var(--linea)}
.fila-texto{flex:1;min-width:0}
.fila-texto b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila-texto small{display:block;color:var(--gris);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila.apagada .fila-texto b{color:#A4A8C4}
.fila select{width:auto;padding:.22rem .55rem;font-size:.82rem;border-radius:99px;font-weight:600;border-color:transparent;background:var(--fondo)}
.fila-archivo{flex-wrap:wrap}
.fila-archivo details{flex-basis:100%;font-size:.88rem;color:var(--gris)}
.fila-ver{appearance:none;background:none;border:0;padding:0;text-align:left;display:block;width:100%;min-width:0}
.vista-previa{flex-basis:100%;white-space:pre-wrap;font-size:.88rem;color:var(--gris);background:var(--fondo);border-radius:12px;padding:.6rem .8rem;overflow-wrap:anywhere;animation:aparece .2s ease-out}

/* De prototipo a producción */
.seis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-bottom:1.25rem}
.tarjeta-falta{background:var(--hoja);border-radius:20px;box-shadow:var(--sombra);padding:1.15rem 1.25rem;transition:transform .15s,box-shadow .15s}
.tarjeta-falta:hover{transform:translateY(-2px)}
.tarjeta-falta summary{cursor:pointer;list-style:none;display:block}
.tarjeta-falta summary::-webkit-details-marker{display:none}
.icono-grande{width:2.6rem;height:2.6rem;border-radius:13px;background:var(--azul-suave);color:var(--azul);display:grid;place-items:center;margin-bottom:.7rem;font-size:1.25rem}
.tarjeta-falta h2{font-size:1.15rem;letter-spacing:-.01em;margin-bottom:.2rem}
.tarjeta-falta p{font-size:.95rem;color:var(--gris);line-height:1.35}
.tarjeta-falta .detalle{margin-top:.6rem;color:var(--noche);font-size:.92rem;animation:aparece .2s ease-out}
.tercero{background:var(--noche);color:#fff;border-radius:20px;padding:1.2rem 1.4rem;margin-bottom:1.25rem}
.tercero summary{cursor:pointer;list-style:none;font-size:clamp(1.25rem,3vw,1.75rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;display:flex;align-items:center;gap:.7rem}
.tercero summary::-webkit-details-marker{display:none}
.tercero p{margin-top:.6rem;color:#D5D8F2;font-size:.95rem}
.subtitulo{font-size:1.15rem;font-weight:800;letter-spacing:-.01em;margin-bottom:.6rem}
.opciones-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.opcion-tarjeta{background:var(--hoja);border-radius:14px;box-shadow:var(--sombra);padding:.7rem 1rem}
.opcion-tarjeta summary{cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:.5rem}
.opcion-tarjeta summary::-webkit-details-marker{display:none}
.opcion-tarjeta summary .icono{margin-left:auto;color:var(--gris);transition:transform .2s}
.opcion-tarjeta[open] summary .icono{transform:rotate(90deg)}
.opcion-tarjeta p{margin-top:.45rem;font-size:.9rem;color:var(--gris)}
.nota-pie{margin-top:.8rem;color:var(--gris);font-size:.85rem}

/* Subir archivo */
.zona-archivo{position:relative;display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center;padding:2.25rem 1rem;border:2px dashed #B9BEDB;border-radius:20px;background:var(--fondo);cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.zona-archivo:hover{border-color:var(--azul)}
.zona-archivo.encima{border-color:var(--azul);background:var(--azul-suave);transform:scale(1.015)}
.zona-archivo input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.zona-archivo:focus-within{border-color:var(--azul);outline:3px solid var(--azul);outline-offset:2px}
.zona-archivo .icono-grande{margin:0;width:3.2rem;height:3.2rem;font-size:1.5rem}
.zona-archivo b{font-size:1.25rem;font-weight:800;letter-spacing:-.015em}
.formatos{display:flex;flex-wrap:wrap;gap:.25rem;justify-content:center}
.pegar{margin-top:1rem}
.pegar summary{cursor:pointer;font-weight:600;color:var(--gris);margin-bottom:.6rem}
.revision-archivo{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;margin-bottom:1rem}
.detectados{display:flex;align-items:baseline;gap:.5rem;color:var(--gris);font-weight:600}
.detectados b{font:800 clamp(3rem,8vw,4rem)/1 var(--numeros);letter-spacing:-.04em;color:var(--noche)}
.detectados.hay b{color:var(--rojo)}
.clasificar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin-bottom:1rem}
.clasif{appearance:none;border:0;background:var(--fondo);border-radius:14px;padding:.8rem .2rem;font-weight:800;min-height:4rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;transition:background .15s,color .15s}
.clasif:hover{background:var(--azul-suave)}
.clasif[aria-pressed=true]{background:var(--azul);color:#fff}
.sugerida{font-size:.72rem;font-weight:700;opacity:.85}
#agregar-cuerpo .botones{display:flex;gap:.5rem}
#agregar-cuerpo .botones .boton{flex:1}

/* Aviso flotante */
.flotante{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);background:var(--noche);color:#fff;font-weight:700;padding:.6rem 1.1rem;border-radius:14px;z-index:60;box-shadow:0 10px 30px rgba(18,22,59,.3);animation:sube .3s cubic-bezier(.2,.9,.3,1.2);max-width:calc(100vw - 2rem);text-align:center}
@keyframes sube{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

@media (min-width:961px){
  body.fija{height:100dvh;overflow:hidden}
}
@media (max-width:960px){
  .mesa{display:block}
  .mensajes{max-height:50dvh;min-height:11rem}
  .linea-tiempo{overflow:visible}
  .seis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dos{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  body{font-size:16px}
  .cabecera{flex-wrap:wrap;justify-content:space-between;padding-block:.45rem .3rem}
  .quien-nombre,.quien-rol{display:none}
  .nav{order:3;flex:none;width:100%;overflow-x:auto;scrollbar-width:none}
  .nav a{font-size:.88rem;padding:.28rem .65rem}
  .usuario{max-width:88%}
  .lado{max-width:100%}
  .lado>.logo-marca{display:none}
  .burbuja{font-size:1rem}
  .cuatro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seis{grid-template-columns:minmax(0,1fr)}
  .opciones-lista{grid-template-columns:minmax(0,1fr)}
  .fila-registro,.fila-registro.sin-quien{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"que accion" "meta accion";gap:.1rem .6rem;padding:.65rem .25rem;border-radius:0;border-top:1px solid var(--linea)}
  .fila-registro{display:grid}
  .fila-cabeza{display:none}
  .fr-que{grid-area:que;font-size:.95rem}
  .fr-accion{grid-area:accion}
  .fr-meta-movil{grid-area:meta;display:flex!important;gap:.6rem;align-items:center;font-size:.82rem;min-width:0}
  .fr-quien,.fr-sem,.fr-pct{display:none}
  .numero{padding:.9rem 1rem}
  .anillo{width:9rem;height:9rem}
  .anillo-centro b{font-size:1.15rem}
  .barra-fila{grid-template-columns:3.6rem minmax(0,1fr) 1.3rem}
  .fila-archivo .fila-texto{flex-basis:100%}
  .fila-archivo .interruptor{margin-left:auto}
  .fila-texto b,.fila-texto small{white-space:normal;overflow-wrap:anywhere}
  .pestanas{gap:0;justify-content:space-between;margin-bottom:.9rem;padding:.1rem 0}
  .pestanas a{font-size:.84rem;padding:.35rem .5rem}
}
.fr-meta-movil{display:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}
}
