/* La Oficina MX — muestra 01. Estilos de la interfaz. */
@font-face{font-family:"Gotham";src:url("fuentes/Gotham-Medium.otf") format("opentype");font-weight:400 500;font-style:normal;font-display:block}
@font-face{font-family:"Gotham";src:url("fuentes/Gotham-Bold.otf") format("opentype");font-weight:600 700;font-style:normal;font-display:block}
@font-face{font-family:"Gotham";src:url("fuentes/Gotham-Black.ttf") format("truetype");font-weight:800 900;font-style:normal;font-display:block}

:root{
  --crema:#EFEBE4; --rosa:#E3CCD5; --magenta:#D43562; --magenta-osc:#B02750;
  --negro:#17141A; --navy:#0A1621; --texto:#2A2530; --gris:#6B6370; --gris-claro:#9A919E;
  --linea:rgba(23,20,26,.09); --papel:#FFFDFB; --verde:#239A68; --ambar:#C98A1B;
  --rojo:#E0323C; --rojo-osc:#C22630;
  --sombra:0 18px 50px -18px rgba(60,30,45,.32), 0 4px 14px -6px rgba(60,30,45,.14);
  --radio:18px; --barra:68px; --panel:440px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:"Gotham",system-ui,sans-serif;font-weight:500;color:var(--texto);
  background:radial-gradient(120% 90% at 50% 38%, #F6F2EC 0%, var(--crema) 46%, #E9D9DE 78%, var(--rosa) 100%);
  overflow:hidden;-webkit-font-smoothing:antialiased;letter-spacing:-.005em;
}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
[hidden]{display:none!important}

/* ===== Barra superior ===== */
.barra-superior{
  position:fixed;inset:0 0 auto 0;height:var(--barra);z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 32px;background:rgba(255,253,251,.80);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
}
.marca{display:flex;align-items:center;gap:16px;min-width:0}
.logo{height:38px;width:auto;display:block}
.separador-v{width:1px;height:30px;background:var(--linea)}
.marca-textos{display:flex;flex-direction:column;line-height:1.15}
.marca-textos strong{font-weight:700;font-size:17px;color:var(--negro);letter-spacing:-.01em}
.marca-textos span{font-size:12px;color:var(--gris)}
.barra-derecha{display:flex;align-items:center;gap:14px}
.chip-muestra{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--gris);
  padding:7px 12px;border-radius:999px;background:rgba(23,20,26,.045);white-space:nowrap}
.punto-gris{width:7px;height:7px;border-radius:50%;background:#B4AAB6}
.entrar-como{display:flex;align-items:center;gap:10px}
.entrar-label{font-size:12px;color:var(--gris);white-space:nowrap}
.segmentos{display:flex;padding:4px;border-radius:14px;background:rgba(23,20,26,.06);gap:4px}
.segmento{display:flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border-radius:11px;transition:background .25s, box-shadow .25s}
.segmento.activo{background:#fff;box-shadow:0 2px 8px -2px rgba(40,20,30,.22)}
.segmento:not(.activo):hover{background:rgba(255,255,255,.55)}
.seg-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.seg-txt b{font-weight:700;font-size:13px}
.seg-txt small{font-size:10.5px;color:var(--gris)}
.mini-av{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-weight:900;font-size:13px;color:#fff}
.av-max{background:var(--negro)}
.av-colab{background:#3B65B9}
.boton-icono{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--texto);background:rgba(23,20,26,.05)}
.boton-icono:hover{background:rgba(23,20,26,.09)}
.perfil-colaborador .solo-max{display:none!important}

.franja-colab{
  position:fixed;top:calc(var(--barra) + 14px);left:50%;transform:translateX(-50%);z-index:25;
  display:flex;align-items:center;gap:10px;max-width:min(920px, calc(100vw - 64px));
  padding:10px 18px;border-radius:14px;font-size:13px;line-height:1.4;color:#24376B;
  background:#E6ECF8;border:1px solid #C9D5EE;box-shadow:0 8px 24px -14px rgba(36,55,107,.5);
}
.franja-colab svg{flex:none;color:#3B65B9}
.panel-abierto .franja-colab{left:calc((100vw - var(--panel)) / 2);max-width:calc(100vw - var(--panel) - 64px)}
.franja-colab b{font-weight:700}

/* ===== Escenario ===== */
.escenario{position:fixed;top:var(--barra);left:0;right:0;bottom:0;transition:right .45s cubic-bezier(.2,.8,.2,1)}
.panel-abierto .escenario{right:var(--panel)}
.panel-ancho.panel-abierto .escenario{right:560px}
.lienzo-scroll{position:absolute;inset:0 0 0 0;padding:44px 40px 104px}
.perfil-colaborador .lienzo-scroll{padding-top:96px}
.oficina{width:100%;height:100%;display:block;overflow:visible}
.resumen{position:absolute;left:32px;top:22px;z-index:5;display:flex;gap:8px;flex-wrap:wrap;max-width:calc(100% - 64px)}
.perfil-colaborador .resumen,.panel-abierto .resumen{display:none}
.solo-movil{display:none!important}
.pista-movil{display:none}
.resumen .pildora{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;padding:7px 12px;border-radius:999px;
  background:rgba(255,255,255,.72);border:1px solid var(--linea);backdrop-filter:blur(6px);color:var(--texto)}
.resumen .pildora b{font-weight:700}
.punto{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.p-trabajando{background:var(--verde)} .p-pausa{background:#B4A79A} .p-esperando{background:var(--magenta)}
.volver-vista{position:absolute;left:32px;bottom:120px;z-index:6;display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;padding:10px 16px;border-radius:999px;background:#fff;box-shadow:var(--sombra)}

/* Oficina: interacciones y animaciones */
.puesto{cursor:pointer}
.puesto .alfombra{transition:filter .25s}
.puesto:hover .alfombra, .puesto.seleccionado .alfombra{filter:brightness(1.04) saturate(1.25)}
.puesto .anillo-sel{opacity:0;transition:opacity .3s}
.puesto:hover .anillo-sel{opacity:.55}
.puesto.seleccionado .anillo-sel{opacity:1}
.puesto.bloqueado{filter:grayscale(.9) brightness(1.13) contrast(.72);transition:filter .3s}
.puesto.bloqueado:hover{filter:grayscale(.6) brightness(1.08) contrast(.85)}
.candado-puesto{display:none}
.etiqueta.bloqueada .candado-puesto{display:inline}
.etiqueta.bloqueada text{fill-opacity:.55}
.etiqueta{pointer-events:none}
.etiqueta text{font-family:"Gotham",sans-serif}
.manos-tecleo .mano-i{animation:tecleo .42s ease-in-out infinite alternate}
.manos-tecleo .mano-d{animation:tecleo .42s ease-in-out infinite alternate-reverse}
@keyframes tecleo{from{transform:translateY(0)}to{transform:translateY(-2.4px)}}
.cabeza-trabajando{animation:asiente 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes asiente{0%,100%{transform:rotate(0)}30%{transform:rotate(-2.5deg)}60%{transform:rotate(1.5deg)}}
.ojos{animation:parpadeo 4.6s infinite;transform-box:fill-box;transform-origin:center}
@keyframes parpadeo{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.brazo-saludo{animation:saludo 1.6s ease-in-out infinite;transform-box:view-box}
@keyframes saludo{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
.burbuja-puntos circle{animation:puntos 1.2s infinite}
.burbuja-puntos circle:nth-child(2){animation-delay:.15s}
.burbuja-puntos circle:nth-child(3){animation-delay:.3s}
@keyframes puntos{0%,60%,100%{opacity:.25}30%{opacity:1}}
.pulso{animation:pulso 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulso{0%{transform:scale(.7);opacity:.75}100%{transform:scale(1.9);opacity:0}}
.barra-actividad{animation:actividad 2.4s ease-in-out infinite}
@keyframes actividad{0%,100%{opacity:.35}50%{opacity:1}}
.flujo{stroke-dasharray:3 9;animation:fluir 1.6s linear infinite}
@keyframes fluir{to{stroke-dashoffset:-24}}
.flujo-quieto{stroke-dasharray:3 9;opacity:.45}
.vapor{animation:vapor 2.6s ease-in-out infinite}
@keyframes vapor{0%{opacity:0;transform:translateY(2px)}40%{opacity:.7}100%{opacity:0;transform:translateY(-8px)}}
.orbita-giro{animation:girar 26s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== Dock inferior ===== */
.dock{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:40;
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:22px;
  background:rgba(255,253,251,.94);backdrop-filter:blur(16px);box-shadow:var(--sombra);border:1px solid rgba(255,255,255,.7);
  transition:left .45s cubic-bezier(.2,.8,.2,1);width:max-content;max-width:calc(100vw - 32px);
}
.panel-abierto .dock{left:calc((100vw - var(--panel)) / 2)}
.panel-ancho.panel-abierto .dock{left:calc((100vw - 560px) / 2)}
.panel-abierto .dock .dock-etq{display:none}
.panel-abierto .dock-boton{padding:0 12px}
.dock-sep{width:1px;height:32px;background:var(--linea);flex:none}
.dock-nuevo{display:flex;align-items:center;gap:8px;height:46px;padding:0 18px 0 14px;border-radius:14px;
  background:var(--magenta);color:#fff;font-weight:700;font-size:14px;box-shadow:0 8px 18px -8px rgba(212,53,98,.8);flex:none}
.dock-nuevo:hover{background:var(--magenta-osc)}
.panel-abierto .dock-nuevo{padding:0 14px}
.dock-avatares{display:flex;gap:6px}
.av-dock{position:relative;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;transition:transform .2s, background .2s;flex:none}
.av-dock:hover{background:rgba(23,20,26,.05);transform:translateY(-3px)}
.av-dock.activo{background:rgba(212,53,98,.12);box-shadow:inset 0 0 0 2px var(--magenta)}
.av-dock svg{width:40px;height:40px;border-radius:12px}
.av-dock .estado-dot{position:absolute;right:3px;bottom:3px;width:11px;height:11px;border-radius:50%;border:2px solid #fff}
.av-dock .aviso{position:absolute;right:-2px;top:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--magenta);
  color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;border:2px solid #fff}
.av-dock .candado-mini{position:absolute;right:0;top:-2px;width:18px;height:18px;border-radius:50%;background:#5E5660;display:grid;place-items:center;border:2px solid #fff}
.av-dock.bloqueado svg{filter:grayscale(.85) opacity(.6)}
.dock-boton{position:relative;display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;border-radius:14px;font-size:13.5px;font-weight:700;flex:none}
.dock-boton:hover{background:rgba(23,20,26,.06)}
.dock-boton.activo{background:rgba(23,20,26,.08)}
.dock-oscuro{background:var(--negro);color:#fff}
.dock-oscuro:hover, .dock-oscuro.activo{background:#000}
.contador{min-width:20px;height:20px;padding:0 6px;border-radius:10px;font-size:11px;font-weight:700;display:grid;place-items:center;background:rgba(23,20,26,.10)}
.contador:empty{display:none}
.contador.alerta{background:var(--magenta);color:#fff}
.dock-oscuro .contador{background:rgba(255,255,255,.18)}
.ico-candado{display:none}
.perfil-colaborador #btn-tetoca{color:var(--gris-claro)}
.perfil-colaborador #btn-tetoca .ico-normal{display:none}
.perfil-colaborador #btn-tetoca .ico-candado{display:block}
.perfil-colaborador #btn-tetoca .contador{display:none}

/* ===== Panel lateral ===== */
.panel{position:fixed;top:var(--barra);right:0;bottom:0;width:var(--panel);z-index:35;
  transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1), width .3s;
  background:var(--papel);border-left:1px solid var(--linea);box-shadow:-24px 0 60px -30px rgba(60,30,45,.35)}
.panel-ancho .panel{width:560px}
.panel-abierto .panel{transform:none}
.panel-interior{height:100%;display:flex;flex-direction:column}
.panel-cabeza{padding:26px 28px 18px;display:flex;gap:16px;align-items:flex-start;border-bottom:1px solid var(--linea)}
.panel-cabeza .av-grande{width:64px;height:64px;border-radius:18px;flex:none}
.panel-cabeza h2{margin:2px 0 4px;font-size:21px;font-weight:700;color:var(--negro);letter-spacing:-.015em}
.panel-cabeza .rol{font-size:13px;color:var(--gris)}
.panel-cabeza .titulo-lista{flex:1}
.panel-cabeza p.sub{margin:4px 0 0;font-size:13px;color:var(--gris);line-height:1.45}
.cerrar{margin-left:auto;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:var(--gris);flex:none}
.cerrar:hover{background:rgba(23,20,26,.06);color:var(--negro)}
.chip-estado{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px}
.chip-estado.e-trabajando{background:#E2F3EB;color:#16744D}
.chip-estado.e-pausa{background:#F1ECE6;color:#7A6D60}
.chip-estado.e-esperando{background:#FBE3EA;color:#A5234A}
.panel-cuerpo{flex:1;overflow-y:auto;padding:20px 28px 28px}
.panel-cuerpo::-webkit-scrollbar{width:10px}
.panel-cuerpo::-webkit-scrollbar-thumb{background:rgba(23,20,26,.12);border-radius:10px;border:3px solid var(--papel)}
.bloque{margin-bottom:20px}
.bloque h3{margin:0 0 8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gris-claro)}
.bloque p{margin:0;font-size:14px;line-height:1.55;color:var(--texto)}
.tarjeta{border:1px solid var(--linea);border-radius:16px;padding:14px 16px;background:#fff}
.tarjeta-aprobacion{border-color:#F0C3D1;background:linear-gradient(180deg,#FFF6F9,#fff)}
.tarjeta-aprobacion .t-titulo{font-weight:700;font-size:14px;color:var(--negro);margin-bottom:4px}
.tarjeta-aprobacion .t-meta{font-size:12.5px;color:var(--gris);line-height:1.5}
.acciones{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px;border-radius:11px;font-size:13px;font-weight:700;white-space:nowrap}
.btn-primario{background:var(--magenta);color:#fff}
.btn-primario:hover{background:var(--magenta-osc)}
.btn-oscuro{background:var(--negro);color:#fff}
.btn-suave{background:rgba(23,20,26,.06)}
.btn-suave:hover{background:rgba(23,20,26,.1)}
.btn-bloqueado{background:#EEEAEF;color:#8E8592;border:1px dashed #C9C0CC}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.hilo{display:flex;flex-direction:column;gap:12px}
.etq-muestra{font-size:11px;color:var(--gris-claro);font-weight:500;text-transform:none;letter-spacing:0}
.msj{max-width:86%;display:flex;flex-direction:column;gap:4px}
.msj .globo{padding:10px 14px;border-radius:16px;font-size:13.5px;line-height:1.5}
.msj .quien{font-size:11px;color:var(--gris-claro)}
.msj.de-agente{align-self:flex-start}
.msj.de-agente .globo{background:#F3EFEA;border-top-left-radius:6px}
.msj.de-max{align-self:flex-end;align-items:flex-end}
.msj.de-max .globo{background:var(--negro);color:#fff;border-top-right-radius:6px}
.msj.de-colaborador{align-self:flex-end;align-items:flex-end}
.msj.de-colaborador .globo{background:#3B65B9;color:#fff;border-top-right-radius:6px}
.escribiendo{display:inline-flex;gap:4px;padding:12px 14px;background:#F3EFEA;border-radius:16px;border-top-left-radius:6px;align-self:flex-start}
.escribiendo i{width:6px;height:6px;border-radius:50%;background:#A79DAA;animation:puntos 1.2s infinite}
.escribiendo i:nth-child(2){animation-delay:.15s}.escribiendo i:nth-child(3){animation-delay:.3s}
.redactor{border-top:1px solid var(--linea);padding:16px 28px 22px;background:var(--papel)}
.redactor textarea{width:100%;resize:none;height:72px;border:1px solid #DCD5DE;border-radius:14px;padding:12px 14px;font:inherit;font-size:14px;line-height:1.45;background:#fff;color:var(--texto);outline:none}
.redactor textarea:focus{border-color:var(--magenta);box-shadow:0 0 0 3px rgba(212,53,98,.12)}
.redactor .fila{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.redactor .nota{font-size:11.5px;color:var(--gris-claro);line-height:1.4}
.redactor .fila{flex-wrap:wrap}
.redactor .nota{flex:1 1 120px;min-width:0}
.acciones-redactor{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}

/* ===== Audios: micrófono, grabación, previa y reproductor ===== */
.btn-mic{width:38px;padding:0;border-radius:11px;background:rgba(212,53,98,.09);color:var(--magenta);box-shadow:inset 0 0 0 1px rgba(212,53,98,.16);transition:background .2s, color .2s, box-shadow .2s, width .25s}
.btn-mic:hover{background:rgba(212,53,98,.16)}
.btn-mic:focus-visible,.repro-play:focus-visible,.aviso-mic-cerrar:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}
.btn-mic.pidiendo{opacity:.6;cursor:progress}
.btn-mic.grabando{width:auto;padding:0 14px 0 12px;gap:8px;background:var(--rojo);color:#fff;box-shadow:0 0 0 0 rgba(224,50,60,.45);animation:latido 1.8s ease-out infinite}
.btn-mic.grabando:hover{background:var(--rojo-osc)}
.btn-mic .crono{font-variant-numeric:tabular-nums;font-weight:500;opacity:.92;min-width:30px;text-align:left}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(224,50,60,.42)}70%{box-shadow:0 0 0 9px rgba(224,50,60,0)}100%{box-shadow:0 0 0 0 rgba(224,50,60,0)}}
.btn-descartar{color:var(--texto)}
.grabadora{height:72px;border-radius:14px;display:flex;align-items:center;gap:12px;padding:0 16px}
.grabadora.en-vivo{background:#FFF5F6;border:1px solid #F5C9CD}
.grabadora.previa{background:#fff;border:1px solid #DCD5DE;justify-content:space-between}
.punto-rec{position:relative;width:12px;height:12px;border-radius:50%;background:var(--rojo);flex:none}
.punto-rec::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--rojo);animation:pulso 1.6s ease-out infinite}
.grab-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.grab-txt b{font-size:13px;font-weight:700;color:var(--negro);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grab-txt small{font-size:11.5px;color:var(--gris);line-height:1.35}
.onda-viva{display:flex;align-items:center;gap:2px;height:28px;flex:none}
.onda-viva i{width:3px;height:3px;border-radius:2px;background:var(--rojo);opacity:.85;transition:height .08s linear}
.previa-etq{font-size:11.5px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.repro{display:flex;align-items:center;gap:10px;min-width:0}
.repro-play{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--magenta);color:#fff;transition:background .2s, transform .15s}
.repro-play:hover{background:var(--magenta-osc)}
.repro-play:active{transform:scale(.94)}
.repro-play svg{margin-left:1px}
.repro.sonando .repro-play svg{margin-left:0}
.repro-onda{display:flex;align-items:center;gap:2px;height:24px}
.repro-onda i{width:3px;border-radius:2px;background:#CFC6D2;transition:background .12s}
.repro-onda i.on{background:var(--magenta)}
.repro-tiempo{font-size:12px;font-weight:500;color:var(--gris);font-variant-numeric:tabular-nums;min-width:30px}
.msj .globo.globo-audio{padding:8px 14px 8px 8px}
.msj.de-max .repro-onda i{background:rgba(255,255,255,.32)}
.msj.de-max .repro-onda i.on{background:#fff}
.msj.de-max .repro-tiempo{color:rgba(255,255,255,.78)}
.msj.de-colaborador .repro-play{background:#fff;color:#3B65B9}
.msj.de-colaborador .repro-play:hover{background:#EEF2FB}
.msj.de-colaborador .repro-onda i{background:rgba(255,255,255,.38)}
.msj.de-colaborador .repro-onda i.on{background:#fff}
.msj.de-colaborador .repro-tiempo{color:rgba(255,255,255,.85)}
.aviso-mic{display:flex;gap:12px;align-items:flex-start;padding:12px 12px 12px 14px;margin-bottom:12px;border-radius:14px;background:#FFF6F9;border:1px solid #F0C3D1;color:var(--texto)}
.aviso-mic > svg{flex:none;color:var(--magenta);margin-top:1px}
.aviso-mic div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:12.5px;line-height:1.45}
.aviso-mic b{font-weight:700;color:var(--negro);font-size:13px}
.aviso-mic span{color:#4C4450}
.aviso-mic-cerrar{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:var(--gris);flex:none;margin:-4px -2px 0 0}
.aviso-mic-cerrar:hover{background:rgba(23,20,26,.06);color:var(--negro)}
.aviso-mic-cerrar svg{width:15px;height:15px}
.aviso-bloqueo{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:#F3F0F4;border:1px solid #E2DCE4;font-size:13px;line-height:1.5;color:#4C4450}
.aviso-bloqueo svg{flex:none;margin-top:1px;color:#6B6370}
.aviso-bloqueo b{font-weight:700;color:var(--negro)}

/* Listas */
.filtros{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.filtro{height:32px;padding:0 13px;border-radius:999px;font-size:12.5px;font-weight:700;background:rgba(23,20,26,.05);color:var(--gris)}
.filtro.activo{background:var(--negro);color:#fff}
.fila-item{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--linea)}
.fila-item:last-child{border-bottom:0}
.fila-item .mini{width:36px;height:36px;border-radius:11px;flex:none}
.fila-item .txt{flex:1;min-width:0}
.fila-item .t1{font-size:14px;font-weight:700;color:var(--negro);line-height:1.35}
.fila-item .t2{font-size:12.5px;color:var(--gris);margin-top:3px;line-height:1.45}
.fila-item .t3{font-size:13px;color:var(--texto);margin-top:6px;line-height:1.5}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;flex:none}
.r-hecho{background:#E2F3EB;color:#16744D}
.r-curso{background:#E6ECF8;color:#2B4C92}
.r-esperando{background:#FBE3EA;color:#A5234A}
.r-bloqueado{background:#2A2530;color:#fff}
.r-aprobado{background:#E2F3EB;color:#16744D}
.r-rechazado{background:#F1ECE6;color:#7A6D60}
.r-pausa{background:#F1ECE6;color:#7A6D60}
.vacio{padding:36px 10px;text-align:center;color:var(--gris);font-size:14px;line-height:1.5}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.stat{border:1px solid var(--linea);border-radius:14px;padding:12px 14px;background:#fff}
.stat b{display:block;font-size:24px;font-weight:900;color:var(--negro);letter-spacing:-.02em}
.stat span{font-size:11.5px;color:var(--gris)}
.stat.s-bloq b{color:var(--negro)} .stat.s-esp b{color:var(--magenta)}
.registro .fila-item{align-items:center}
.reg-hora{width:66px;flex:none;font-size:12px;color:var(--gris);font-variant-numeric:tabular-nums}
.reg-quien{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.reg-quien .mini-av{width:20px;height:20px;border-radius:6px;font-size:10px}
.flecha-txt{color:var(--gris-claro);font-weight:500}
.fila-item.destacada{background:linear-gradient(90deg,rgba(42,37,48,.05),transparent);margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:12px}
.permisos .perm{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--linea)}
.permisos .perm:last-child{border-bottom:0}
.permisos .perm .mini{width:30px;height:30px;border-radius:9px}
.permisos .perm span{flex:1;font-size:13.5px;font-weight:700}
.permisos .perm small{display:block;font-weight:500;color:var(--gris);font-size:11.5px}
.interruptor{position:relative;width:42px;height:24px;border-radius:12px;background:#D9D2DB;transition:background .2s;flex:none}
.interruptor::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.interruptor.on{background:var(--verde)}
.interruptor.on::after{transform:translateX(18px)}
.interruptor.fijo{opacity:.5;cursor:not-allowed}
.reglas-fijas{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.reglas-fijas li{display:flex;gap:10px;font-size:13px;line-height:1.45;color:var(--texto)}
.reglas-fijas li svg{flex:none;margin-top:2px;color:var(--magenta)}

/* ===== Modal y avisos ===== */
.velo{position:fixed;inset:0;background:rgba(23,20,26,.32);backdrop-filter:blur(3px);z-index:60}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:61;width:min(560px, calc(100vw - 40px));max-height:calc(100vh - 60px);overflow:auto;
  background:var(--papel);border-radius:24px;box-shadow:0 40px 100px -30px rgba(23,20,26,.6);padding:30px 32px 28px;animation:entrar .3s cubic-bezier(.2,.8,.2,1)}
@keyframes entrar{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
.modal h2{margin:0 0 6px;font-size:22px;font-weight:700;color:var(--negro);letter-spacing:-.015em}
.modal .sub{margin:0 0 22px;font-size:14px;color:var(--gris);line-height:1.5}
.modal label.etq{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gris-claro);margin:0 0 10px}
.islas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px}
.isla-op{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px 10px;border-radius:14px;border:1.5px solid var(--linea);background:#fff;font-size:12px;font-weight:700;text-align:center;line-height:1.2;min-height:94px}
.isla-op svg.mini{width:38px;height:38px;border-radius:11px}
.isla-op.sel{border-color:var(--magenta);box-shadow:0 0 0 3px rgba(212,53,98,.12)}
.isla-op.no{color:#A59DA8;background:#F7F5F7}
.isla-op.no svg.mini{filter:grayscale(1) opacity(.5)}
.isla-op .cand{position:absolute;top:6px;right:6px;color:#8E8592}
.modal textarea{width:100%;height:96px;resize:none;border:1px solid #DCD5DE;border-radius:14px;padding:12px 14px;font:inherit;font-size:14px;line-height:1.45;outline:none;color:var(--texto)}
.modal textarea:focus{border-color:var(--magenta);box-shadow:0 0 0 3px rgba(212,53,98,.12)}
.modal .fila-final{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px}
.modal .nota{font-size:12px;color:var(--gris);line-height:1.45;max-width:300px}
.error-inline{margin:-8px 0 16px;font-size:12.5px;color:#A5234A;display:flex;gap:8px;align-items:center}
.modal-bloqueo{text-align:center;padding-top:36px}
.modal-bloqueo .icono-grande{width:64px;height:64px;border-radius:20px;margin:0 auto 18px;display:grid;place-items:center;background:var(--negro);color:#fff}
.modal-bloqueo .registro-nota{display:inline-flex;align-items:center;gap:8px;margin:2px 0 22px;font-size:12.5px;color:var(--gris);padding:8px 14px;border-radius:999px;background:rgba(23,20,26,.05)}
.avisos{position:fixed;left:50%;bottom:104px;transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--negro);color:#fff;font-size:13px;padding:11px 18px;border-radius:12px;box-shadow:var(--sombra);animation:toast .35s ease;display:flex;gap:10px;align-items:center;max-width:min(560px,90vw);line-height:1.4}
.toast.t-bloq{background:#2A2530}
@keyframes toast{from{opacity:0;transform:translateY(8px)}}
.selector-fecha{display:flex;gap:6px;flex-wrap:wrap}

/* ===== Tablet y celular ===== */
@media (max-width:1180px){
  .chip-muestra{display:none}
  .entrar-label{display:none}
}
@media (max-width:820px){
  :root{--barra:60px}
  .barra-superior{padding:0 14px;gap:10px}
  .logo{height:30px}
  .separador-v,.marca-textos span{display:none}
  .marca-textos strong{font-size:14px}
  .seg-txt small{display:none}
  .segmento{padding:5px 10px 5px 5px}
  .mini-av{width:24px;height:24px;font-size:11px}
  .boton-icono{display:none}
  .escenario{bottom:0}
  .panel-abierto .escenario,.panel-ancho.panel-abierto .escenario{right:0}
  .lienzo-scroll{overflow:auto;padding:56px 12px 120px;-webkit-overflow-scrolling:touch}
  .perfil-colaborador .lienzo-scroll{padding-top:110px}
  .oficina{width:860px;height:640px}
  .resumen{left:12px;top:12px;max-width:calc(100% - 24px)}
  .resumen .pildora{font-size:11.5px;padding:6px 10px}
  .panel-abierto .franja-colab{display:none}
  .franja-colab{top:calc(var(--barra) + 8px);font-size:12px;padding:8px 12px;max-width:calc(100vw - 24px)}
  .dock{width:auto;left:8px!important;right:8px;transform:none;bottom:10px;overflow-x:auto;justify-content:flex-start;gap:6px;padding:8px;max-width:none}
  .dock .dock-etq{display:none}
  .dock-avatares,.dock-avatares + .dock-sep{display:none}
  .dock{justify-content:space-between}
  .resumen .solo-movil{display:inline-flex!important}
  .pista-movil{display:block;position:absolute;left:50%;transform:translateX(-50%);bottom:84px;z-index:5;font-size:11.5px;color:var(--gris);background:rgba(255,255,255,.8);padding:6px 12px;border-radius:999px;white-space:nowrap}
  .panel-abierto .pista-movil{display:none}
  .marca-textos strong{white-space:nowrap}
  .dock-boton{padding:0 11px}
  .dock-nuevo{padding:0 13px}
  .panel,.panel-ancho .panel{width:100%;top:var(--barra);bottom:0;z-index:45}
  .stats{grid-template-columns:repeat(2,1fr)}
  .islas-grid{grid-template-columns:repeat(3,1fr)}
  .volver-vista{bottom:96px;left:12px}
  .avisos{bottom:88px}
  .panel-cabeza{padding:20px 18px 14px}.panel-cuerpo{padding:16px 18px 24px}.redactor{padding:12px 18px 18px}
}
@media (max-width:480px){
  .marca-textos{display:none}
  .redactor[data-estado="grabando"] .acciones-redactor .btn-primario{display:none}
  .previa-etq{display:none}
}