@charset "UTF-8";
/* ============================================================
   PALETA

   Dos niveles por color, porque WCAG pide cosas distintas según
   el tamaño: 4,5:1 para texto chico y 3:1 para texto grande.

     --xx    VIVO. Números grandes, barras, bordes, badges.
             Es el que da carácter.
     --xx2   TEXTO. Etiquetas, leyendas, cualquier cosa chica.
             Más apagado a propósito: es el precio de que se lea.

   En modo oscuro los dos niveles pueden ser vivos, porque sobre
   fondo oscuro un color saturado contrasta más, no menos. Ahí el
   segundo nivel es una versión más clara, no más oscura.

   Los matices salen de una familia moderna —jade, aguamarina,
   cobalto, violeta, magenta— en vez de los verdes y salmones
   apagados de antes, que se leían como planilla vieja.
   ============================================================ */
.pl-rich-bar{display:flex;gap:2px;margin-bottom:4px}
.pl-rich-bar span{cursor:pointer;padding:3px 9px;border-radius:6px;font-size:12.5px;
  color:var(--text3);user-select:none;line-height:1.5;transition:background .15s,color .15s}
.pl-rich-bar span:hover{background:var(--bg3);color:var(--text)}
.pl-rich a{color:var(--acc);text-decoration:underline}

.modal-acc{position:relative}
.modal-acc-b{cursor:pointer;color:var(--text3);font-size:18px;line-height:1;padding:4px 9px;
  border-radius:7px;transition:background .15s,color .15s}
.modal-acc-b:hover{background:var(--bg3);color:var(--text)}
.modal-acc-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:172px;
  background:var(--bg2);border:0.5px solid var(--border2);border-radius:9px;overflow:hidden;
  box-shadow:0 6px 22px rgba(0,0,0,.18)}
.modal-acc-menu.on{display:block}
.modal-acc-menu>div{padding:9px 14px;font-size:12.5px;color:var(--text);cursor:pointer}
.modal-acc-menu>div:hover{background:var(--bg3)}
.modal-acc-menu>div.del{color:var(--rd2);border-top:0.5px solid var(--border2)}

/* ── Grilla de días off ───────────────────────────────────
   Personas en filas, días del mes en columnas: la misma forma que
   la planilla que se venía usando, pero entrando en pantalla. */
.lic-scroll{overflow-x:auto}
.lic-head{display:flex;position:sticky;top:0;z-index:4;background:var(--card);border-bottom:1px solid var(--border)}
.py-n{width:62px;background:var(--bg3);border:0.5px solid var(--border2);border-radius:6px;padding:5px 8px;color:var(--text);font-family:var(--m);font-size:12px;outline:none;text-align:right}
.lic-fila{display:flex;border-bottom:0.5px solid var(--border2)}
.lic-fila:hover{background:color-mix(in srgb, var(--acc) 3%, transparent)}
.lic-per{flex:0 0 200px;min-width:0;overflow:hidden;padding:7px 12px;position:sticky;left:0;z-index:2;background:var(--card);border-right:1px solid var(--border)}
.lic-per.head{height:38px}
.lic-nom{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lic-rol{font-size:10.5px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lic-celdas{display:flex}
.lic-d{flex:0 0 26px;text-align:center;padding:5px 0;font-family:var(--m)}
.lic-d .dw{display:block;font-size:8.5px;color:var(--text3)}
.lic-d .dn{display:block;font-size:10.5px;color:var(--text2)}
.lic-d.wk{background:var(--bg3)}
.lic-d.fer .dn{color:var(--acc)}
.lic-d.hoy{background:color-mix(in srgb, var(--acc) 18%, transparent);border-radius:5px 5px 0 0}
.lic-c{flex:0 0 26px;height:34px;display:flex;align-items:center;justify-content:center;font-size:13px;border-right:0.5px solid var(--border2)}
.lic-c.wk{background:var(--bg3)}
.lic-c.fer{opacity:.55}
.lic-c.ocu{background:color-mix(in srgb, var(--acc) 15%, transparent)}
/* Lo pendiente se ve rayado: está pedido pero no aprobado todavía. */
.lic-c.ocu.pend{background:repeating-linear-gradient(45deg, color-mix(in srgb, var(--am) 22%, transparent) 0 4px, transparent 4px 8px)}
.zoom-ctl{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;margin-right:8px;
  background:var(--bg3);border:0.5px solid var(--border2);border-radius:8px;user-select:none}
.zoom-ctl span,.zoom-ctl b{cursor:pointer;color:var(--text3);line-height:1;transition:color .15s}
.zoom-ctl span:first-child{font-size:10px}
.zoom-ctl b{font-size:12.5px;color:var(--text2)}
.zoom-ctl span:hover,.zoom-ctl b:hover{color:var(--acc)}

:root{
  /* Fondos: violeta metido en el gris, nunca negro puro. A partir
     de 15:1 el texto claro sobre fondo muy oscuro produce halo. */
  --bg:#131020;--bg2:#1b1730;--bg3:#252041;--bg4:#312a53;
  --text:#efecf8;--text2:#b6b0cf;--text3:#8a83a8;

  --acc:#a78bfa;--acc2:#d6c9ff;--acc3:#332a63;
  --gr:#2ee6ae;--gr2:#6ee7b7;--gr3:#a7f3d0;
  --rd:#fb7185;--rd2:#fda4af;
  --am:#fbbf24;--am2:#fcd34d;
  --bl:#38bdf8;--bl2:#93c5fd;
  --rs:#f472b6;--rs2:#f9a8d4;

  --border:rgba(255,255,255,0.10);--border2:rgba(255,255,255,0.20);
  --card:#1b1730;--r:12px;
  --f:'Syne',sans-serif;--m:'DM Mono',monospace;
}

body.light{
  --bg:#f7f6fc;--bg2:#ffffff;--bg3:#efedf9;--bg4:#e3e0f2;
  --text:#12101d;--text2:#3d3b54;--text3:#5f5d78;

  /* Nivel VIVO: 3:1 o más. Va en números grandes. */
  --acc:#6d3ff0;--gr:#0d9488;--rd:#e11d48;--am:#ea580c;
  --bl:#0e90c4;--rs:#c4197f;

  /* Nivel TEXTO: 4,5:1 o más. Va en etiquetas y textos chicos. */
  --acc2:#5b21b6;--gr2:#00806a;--gr3:#00695a;--rd2:#b91c34;
  --am2:#8a5a00;--bl2:#0e6f8f;--rs2:#a3115f;

  --acc3:#ece9fb;
  --border:rgba(0,0,0,0.10);--border2:rgba(0,0,0,0.16);--card:#ffffff;
}

/* ------------------------------------------------------------
   COLORES DE LOS GRÁFICOS

   Van aparte y son mucho más vivos que los de texto, porque un
   gráfico no tiene que cumplir contraste de texto: son formas
   grandes que se distinguen entre sí, no palabras que se leen.

   Ese es el motivo por el que el jade #0ec49d puede vivir en una
   barra pero no en un número: sobre blanco da 2,2:1 como texto,
   y como relleno de 40 píxeles de alto se ve perfecto.
   ------------------------------------------------------------ */
:root, body.light{
  --gx1:#0ec49d;   /* jade       — ingresos     */
  --gx2:#f43f5e;   /* coral      — egresos      */
  --gx3:#6d3ff0;   /* violeta    — balance      */
  --gx4:#0e90c4;   /* aguamarina               */
  --gx5:#c4197f;   /* magenta                  */
  --gx6:#f59e0b;   /* ámbar                    */
}

/* Píldora con contorno del mismo color, más saturado que el
   relleno. Se lee de lejos sin gritar, y en modo oscuro el borde
   toma un aire de neón. */
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;
      border-radius:20px;font-size:11.5px;font-weight:700;letter-spacing:.2px;
      border:1px solid currentColor;background:color-mix(in srgb, currentColor 12%, transparent)}
body:not(.light) .pill{background:color-mix(in srgb, currentColor 16%, transparent)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:var(--f);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;transition:background .3s,color .3s}

/* ===== LOGIN ===== */
/* ------------------------------------------------------------
   LA BIENVENIDA VA SIEMPRE EN CLARO

   El tema oscuro se aplica al body entero, así que el login
   heredaba la preferencia de cada uno. Acá se fuerzan las
   variables en claro sólo dentro de esta pantalla: no toca la
   preferencia que la persona tiene adentro de la app.

   Es la primera pantalla que ve alguien —incluido un cliente
   externo— y conviene que sea siempre la misma.
   ------------------------------------------------------------ */
#login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1rem;
  --bg:#f7f6fc;--bg2:#ffffff;--bg3:#efedf9;--bg4:#e3e0f2;
  --text:#12101d;--text2:#3d3b54;--text3:#5f5d78;
  --acc:#6d3ff0;--gr:#0d9488;--rd:#e11d48;--am:#ea580c;
  --bl:#0e90c4;--rs:#c4197f;
  --acc2:#5b21b6;--gr2:#00806a;--gr3:#00695a;--rd2:#b91c34;
  --am2:#8a5a00;--bl2:#0e6f8f;--rs2:#a3115f;--acc3:#ece9fb;
  --border:rgba(0,0,0,0.10);--border2:rgba(0,0,0,0.16);--card:#ffffff;
  background:var(--bg);color:var(--text)}
#login-screen::before{content:'';position:fixed;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:48px 48px;animation:gridmove 25s linear infinite;pointer-events:none}
@keyframes gridmove{0%{background-position:0 0}100%{background-position:48px 48px}}
.orb{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.12;animation:floatorb 10s ease-in-out infinite}
.orb1{width:500px;height:500px;background:var(--acc);top:-150px;right:-150px}
.orb2{width:350px;height:350px;background:var(--gr);bottom:-100px;left:-100px;animation-delay:4s}
.orb3{width:250px;height:250px;background:var(--bl);bottom:20%;right:5%;animation-delay:7s}
@keyframes floatorb{0%,100%{transform:translate(0,0)}50%{transform:translate(15px,-15px)}}
.login-card{position:relative;z-index:10;display:flex;width:860px;max-width:98vw;min-height:520px;border-radius:20px;border:0.5px solid var(--border2);overflow:hidden;animation:cardin .5s cubic-bezier(.22,1,.36,1) both}
@keyframes cardin{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.login-left{width:44%;background:var(--bg2);padding:44px 40px;display:flex;flex-direction:column;justify-content:space-between;border-right:0.5px solid var(--border)}
.login-right{flex:1;background:var(--bg);padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.keni-brand{display:flex;align-items:center;gap:12px;margin-bottom:2.5rem}
.login-left{position:relative;overflow:hidden}
/* Las entidades no muestran más las monedas: no le dicen nada al
   equipo que usa el Planner, y menos a un cliente externo. Con ese
   espacio libre, Dardo puede ser más grande. */
/* Las entidades ya no muestran las monedas: no le dicen nada al
   equipo que usa el Planner, y menos a un cliente externo. Las
   píldoras siguen ocupando todo el ancho y Dardo se apoya encima,
   que es como estaba pensado el diseño. */
.login-dardo{position:absolute;right:-30px;bottom:-10px;width:210px;height:272px;
  background:url('/img/dardo/cuerpo.png') right bottom/contain no-repeat;
  pointer-events:none;z-index:3}
@media(max-width:820px){.login-dardo{display:none}}
.keni-name{font-size:24px;font-weight:800;letter-spacing:-.5px}
.keni-name span{color:var(--acc)}
/* Un poco más grande que antes para llegar al ancho de DARDO, con
   el espaciado parejo entre letras y el interlineado ajustado. */
/* La bajada tiene que medir EXACTAMENTE lo mismo que DARDO.

   No se ajusta a ojo con un letter-spacing: el bloque de la marca
   se dimensiona por el logo, y la bajada se estira hasta llenarlo
   con scaleX. Así queda alineada aunque cambie el cuerpo, la
   tipografía o el texto.

   Misma familia que el logo, en minúsculas y con "Buddy" en
   negrita: se lee como marca, no como etiqueta técnica. */
.keni-brand > div{display:inline-block}
.keni-name{display:block;width:fit-content}
.keni-tagline{font-size:16.5px;color:var(--text2);font-family:var(--f);
  font-weight:400;letter-spacing:.2px;margin-top:3px;line-height:1.1;
  white-space:nowrap;transform-origin:left center}
.keni-tagline b{font-weight:700;color:var(--text)}
.welcome-title{font-size:27px;font-weight:700;line-height:1.2;letter-spacing:-.5px;margin-bottom:.75rem}
.welcome-title span{color:var(--acc2)}
.welcome-sub{font-size:12.5px;color:var(--text2);line-height:1.7;font-family:var(--m);font-weight:400}
.ent-list{display:flex;flex-direction:column;gap:7px;margin-top:1.5rem}
.ent-item{display:flex;align-items:center;gap:9px;padding:8px 13px;border-radius:7px;border:0.5px solid var(--border);background:var(--bg3);font-size:11px;white-space:nowrap;overflow:hidden}
.ent-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ent-label{font-weight:600;color:var(--text);white-space:nowrap}
.vtag{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-family:var(--m);color:var(--text2);border:0.5px solid var(--border);border-radius:20px;padding:3px 9px;margin-bottom:1.5rem}
.vtag-dot{width:5px;height:5px;border-radius:50%;background:var(--gr);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.form-title{font-size:20px;font-weight:700;letter-spacing:-.3px;margin-bottom:5px}
.form-sub{font-size:11.5px;color:var(--text2);font-family:var(--m);margin-bottom:1.75rem}
.fg{display:flex;flex-direction:column;gap:5px;margin-bottom:.875rem}
.fl{font-size:10px;color:var(--text2);letter-spacing:1.3px;font-family:var(--m);font-weight:600}
.fi{background:var(--bg2);border:0.5px solid var(--border2);border-radius:8px;padding:11px 14px;font-size:14px;color:var(--text);font-family:var(--f);outline:none;width:100%;transition:border .2s}
.fi:focus{border-color:var(--acc)}
.fi::placeholder{color:var(--text3)}
.btn-login{width:100%;padding:13px;background:var(--acc);border:none;border-radius:8px;color:#fff;font-size:14px;font-weight:700;font-family:var(--f);cursor:pointer;transition:all .2s;margin-top:.25rem}
.btn-login:hover{background:var(--acc2);transform:translateY(-1px)}
.btn-login:disabled{opacity:.6;cursor:not-allowed;transform:none}
.login-err{background:color-mix(in srgb, var(--rd) 15%, transparent);border:0.5px solid color-mix(in srgb, var(--rd) 35%, transparent);color:var(--rd2);padding:10px 13px;border-radius:7px;font-size:12.5px;margin-top:.75rem;display:none;font-weight:500}
.login-foot{margin-top:1.5rem;padding-top:1.25rem;border-top:0.5px solid var(--border);font-size:10.5px;color:var(--text3);font-family:var(--m);text-align:center}

/* ===== APP SHELL ===== */
#app-screen{display:none;height:100vh;overflow:hidden;flex-direction:column}
#app-screen.visible{display:flex}
.topbar{padding:10px 22px 0;border-bottom:0.5px solid var(--border);display:flex;flex-direction:column;gap:6px;background:var(--bg2);flex-shrink:0;position:relative;z-index:100}
.topbar-row1{display:flex;align-items:center;gap:16px}
.topbar-row2{display:flex;align-items:center;justify-content:space-between;padding-bottom:8px}
.top-brand{display:flex;align-items:center;gap:9px;padding-right:16px;border-right:0.5px solid var(--border)}
.top-icon{width:30px;height:30px;background:var(--acc);border-radius:7px;display:flex;align-items:center;justify-content:center}
.top-name{font-size:15px;font-weight:800;letter-spacing:-.3px}
.top-name span{color:var(--acc)}
/* La misma bajada que en el login, más chica: la marca se lee
   igual en los dos lugares. */
.top-ver{font-size:10.5px;color:var(--text3);font-family:var(--f);font-weight:400;line-height:1.15}
.top-ver b{font-weight:700;color:var(--text2)}
/* Sin overflow: recortaba los desplegables del menú agrupado.
   Ya no hace falta scroll porque son cinco elementos, no catorce. */
.top-nav{display:flex;gap:2px;flex:1;flex-wrap:wrap}
.tnav{padding:6px 12px;border-radius:6px;font-size:12px;color:var(--text2);cursor:pointer;white-space:nowrap;border:0.5px solid transparent;transition:all .15s;font-weight:600}
.tnav:hover{color:var(--text);background:var(--bg3)}
.tnav.on{color:var(--acc2);background:var(--bg3);border-color:var(--border2)}
.top-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.fx-pill{display:flex;align-items:center;gap:5px;background:var(--bg3);border:0.5px solid var(--border2);border-radius:12px;padding:3px 9px;font-size:10px;font-family:var(--m);white-space:nowrap}
.fx-dot{width:4px;height:4px;border-radius:50%;background:var(--gr);animation:pulse 2s infinite}
.fx-val{font-weight:700;color:var(--text)}
body.light .fx-val{color:var(--bl2)}
/* Botones redondeados, con el borde marcado en vez de un relleno
   plano. Al pasar el mouse el borde toma el color de marca: es la
   misma idea que las etiquetas, y hace que toda la interfaz se
   sienta de la misma familia. */
.btn-sm{padding:6px 14px;border-radius:20px;border:1px solid var(--border2);
        background:var(--bg3);color:var(--text);font-family:var(--f);font-size:11px;
        cursor:pointer;transition:all .15s;font-weight:600}
.btn-sm:hover{border-color:var(--acc);color:var(--acc)}
body:not(.light) .btn-sm:hover{color:var(--acc2)}
.btn-sm:hover{background:var(--bg4);border-color:var(--acc)}
.btn-acc{background:var(--acc);border-color:var(--acc);color:#fff}
.btn-acc:hover{background:var(--acc);border-color:var(--acc);color:#fff;filter:brightness(1.12)}
.btn-acc:hover{background:var(--acc2)}
.btn-danger{background:transparent;border-color:color-mix(in srgb, var(--rd) 40%, transparent);color:var(--rd2)}
.btn-danger:hover{background:color-mix(in srgb, var(--rd) 12%, transparent);border-color:var(--rd2)}
.user-chip{font-size:11px;color:var(--text2);font-family:var(--m);cursor:pointer;font-weight:500}
.user-chip:hover{color:var(--rd2)}

/* ===== CONTENT ===== */
.content{flex:1;overflow-y:auto;padding:22px 24px}
.page{display:none}.page.on{display:block}

/* ===== METRICS ===== */
.mg4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.mg3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}
.met{background:var(--bg2);border-radius:10px;padding:15px;transition:background .3s;border:0.5px solid var(--border)}
.ml{font-size:10px;color:var(--text2);letter-spacing:1.2px;margin-bottom:6px;font-family:var(--m);font-weight:600}
.mv{font-size:24px;font-weight:700;letter-spacing:-.8px}
.ms{font-size:11px;color:var(--text2);margin-top:3px;font-family:var(--m)}

/* ===== CARDS ===== */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.g3{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:14px}
.card{background:var(--card);border:0.5px solid var(--border);border-radius:var(--r);padding:18px;transition:background .3s}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.ct{font-size:14px;font-weight:600}
.cs{font-size:11px;color:var(--text2);font-family:var(--m)}
.cw{position:relative}
canvas{width:100%!important;height:100%!important}

/* ===== TABLES ===== */
/* (04/09/2026) Sin scroll vertical interno: la pagina es larga y
   scrollea entera con la barra principal. Solo queda el horizontal
   para tablas anchas en pantallas chicas. */
.tw{overflow-x:auto}
/* Doce filas y nunca más: recortarlas esconde octubre, noviembre y
   diciembre detrás de un scroll que no se ve. */
.tw-completa{max-height:none;overflow-y:visible}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:8px 11px;font-size:10.5px;font-weight:600;color:var(--text2);border-bottom:0.5px solid var(--border);font-family:var(--m);letter-spacing:.5px;position:sticky;top:0;background:var(--card);z-index:1}
th.sortable{cursor:pointer;user-select:none;transition:color .15s;white-space:nowrap}
th.sortable:hover{color:var(--acc2)}
th.sortable .sort-arrow{display:inline-block;margin-left:4px;opacity:.4;font-size:9px}
th.sortable.sort-active .sort-arrow{opacity:1;color:var(--acc2)}

.search-bar{display:flex;align-items:center;gap:8px;background:var(--bg3);border:0.5px solid var(--border2);border-radius:8px;padding:8px 12px;margin-bottom:12px}
.search-bar svg{flex-shrink:0;opacity:.5}
.search-bar input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:var(--f);font-size:13px}
.search-bar input::placeholder{color:var(--text3)}
.search-bar .search-clear{cursor:pointer;color:var(--text3);font-size:14px;padding:2px 6px;border-radius:4px;display:none}
.search-bar .search-clear:hover{color:var(--rd2);background:color-mix(in srgb, var(--rd) 10%, transparent)}
.search-bar.has-value .search-clear{display:block}
.search-count{font-size:10.5px;color:var(--text3);font-family:var(--m);white-space:nowrap}
td{padding:9px 11px;border-bottom:0.5px solid var(--border);color:var(--text)}
tr:last-child td{border-bottom:none}
tr:hover td{background:color-mix(in srgb, var(--acc) 6%, transparent)}
/* Las etiquetas llevan borde del mismo color que el texto, con el
   relleno en una versión muy diluida. Es el recurso que hace que
   se lean de lejos sin gritar, y en modo oscuro el borde toma un
   aire de neón. currentColor evita tener que declarar el color dos
   veces: se hereda del que ya tiene la etiqueta. */
/* Chips de estado (04/09/2026): antes eran globos con radio 20 y
   borde pleno que ademas se partian en dos lineas ("nota de
   credito") y quedaban deformes. Ahora: una sola linea siempre,
   radio chico, borde y fondo suaves. */
.bx{display:inline-block;padding:2px 8px;border-radius:6px;font-size:9.5px;
    font-family:var(--m);font-weight:700;letter-spacing:.4px;white-space:nowrap;
    border:1px solid color-mix(in srgb, currentColor 32%, transparent);
    background:color-mix(in srgb, currentColor 10%, transparent)}
body:not(.light) .bx{background:color-mix(in srgb, currentColor 18%, transparent)}
.bg{background:color-mix(in srgb, var(--gr) 13%, transparent);color:#0a6b4f}
.br{background:color-mix(in srgb, var(--rd) 13%, transparent);color:#a8201f}
.ba{background:color-mix(in srgb, var(--am) 13%, transparent);color:#8a5a0a}
.bp{background:color-mix(in srgb, var(--acc) 13%, transparent);color:#4a3fc4}
.bb{background:color-mix(in srgb, var(--bl) 22%, transparent);color:var(--bl2)}
body:not(.light) .bg{color:#9FF0D6}
body:not(.light) .br{color:#FFB8B7}
body:not(.light) .ba{color:#FFD79A}
body:not(.light) .bp{color:#D4CFF7}
body:not(.light) .bb{color:#AED4F7}

/* ===== MES TABS ===== */
.mes-tabs{display:flex;gap:4px;margin-bottom:16px;overflow-x:auto;padding-bottom:4px}
.mes-tab{padding:8px 16px;border-radius:8px;font-size:12px;cursor:pointer;color:var(--text2);font-weight:600;border:0.5px solid var(--border2);background:var(--bg3);white-space:nowrap;transition:all .15s;font-family:var(--m)}
.mes-tab:hover{color:var(--text);border-color:var(--acc)}
.mes-tab.on{background:var(--acc3);color:var(--acc2);border-color:var(--acc)}
.mes-tab.anual{background:var(--bg4);border-color:var(--am)}
.mes-tab.anual.on{background:color-mix(in srgb, var(--am) 20%, transparent);color:var(--am2);border-color:var(--am)}

/* ===== MODAL ===== */
.modal-wrap{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:200;align-items:center;justify-content:center;padding:1rem;overflow-y:auto}
.modal-wrap.open{display:flex}
.modal{background:var(--bg2);border:0.5px solid var(--border2);border-radius:14px;padding:24px;width:560px;max-width:98vw;max-height:90vh;overflow-y:auto;animation:cardin .25s cubic-bezier(.22,1,.36,1) both}
.modal-title{font-size:16px;font-weight:700}
.modal-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;position:sticky;top:-24px;background:var(--bg2);z-index:5;padding:24px 0 12px;margin-top:-24px}
.modal-close-x{font-size:16px;color:var(--text3);cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .15s;line-height:1}
.modal-close-x:hover{color:var(--rd2);background:color-mix(in srgb, var(--rd) 12%, transparent)}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.ff{display:flex;flex-direction:column;gap:5px}.ff.full{grid-column:1/-1}
.fl2{font-size:10px;color:var(--text2);letter-spacing:.6px;font-family:var(--m);font-weight:600}
.finput{background:var(--bg3);border:0.5px solid var(--border2);border-radius:7px;padding:9px 11px;color:var(--text);font-family:var(--f);font-size:13px;width:100%;transition:border .15s;outline:none}
.finput:focus{border-color:var(--acc)}
select.finput option{background:var(--bg2)}
.modal-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.pb{height:6px;border-radius:3px;background:var(--bg4);overflow:hidden;margin:3px 0}
.pf{height:100%;border-radius:3px;transition:width .5s}
.sr{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:0.5px solid var(--border)}
.sr:last-child{border-bottom:none}
/* ── AVISOS ───────────────────────────────────────────────

   Antes el relleno, el borde y el texto iban los tres teñidos del
   mismo color al 10%. Sobre blanco eso da beige y rosa apagado:
   el color pierde fuerza justamente donde tiene que llamar la
   atención, y el texto queda con poco contraste.

   Ahora el fondo es limpio y el color aparece sólo en dos lugares:
   una barra al costado y un punto. El texto va en el color normal
   de lectura, que se lee mejor y deja que el acento resalte.
   ------------------------------------------------------------ */
.alert{position:relative;padding:12px 15px 12px 34px;border-radius:10px;
  font-size:13px;line-height:1.65;margin-bottom:9px;font-weight:500;
  background:var(--bg2);border:0.5px solid var(--border);color:var(--text);
  border-left:3px solid var(--acc)}
/* El punto: mismo color que la barra, para que se lea como una sola marca. */
.alert::before{content:'';position:absolute;left:15px;top:1.05em;
  width:7px;height:7px;border-radius:50%;background:currentColor}
.alert b,.alert strong{font-weight:700}

.alert-r{border-left-color:var(--rd)}
.alert-r::before{background:var(--rd)}
.alert-a{border-left-color:var(--am)}
.alert-a::before{background:var(--am)}
.alert-g{border-left-color:var(--gr)}
.alert-g::before{background:var(--gr)}
.alert-b{border-left-color:var(--bl)}
.alert-b::before{background:var(--bl)}
.tt{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:11px;color:var(--text2);font-weight:500}
.tk{width:28px;height:15px;border-radius:7px;background:var(--bg4);position:relative;border:0.5px solid var(--border2);flex-shrink:0}
.th{width:10px;height:10px;border-radius:50%;background:var(--text3);position:absolute;top:2px;left:2px;transition:all .2s}
body.light .th{transform:translateX(13px);background:var(--acc)}
.empty-state{text-align:center;padding:44px 20px;color:var(--text2);font-size:13.5px;font-family:var(--m)}

/* Gasto que queda como referencia y no suma al cash flow. */
.eg-ref{font-size:9px;font-weight:700;letter-spacing:.5px;margin-left:6px;padding:1px 6px;
        border-radius:5px;background:color-mix(in srgb, var(--am) 18%, transparent);color:var(--am2);vertical-align:middle}
.eg-nosuma{opacity:.6}

/* ── MI DARDO — la pantalla de entrada (04/09/2026) ──
   Ronda 3: un color por cuadro, entrada escalonada, frase del
   día y banda de clientes con los colores de los gráficos. */
.md-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.md-hero{display:flex;gap:14px;align-items:center}
.md-hola{font-size:24px;font-weight:700;letter-spacing:-.3px}
.md-frase{font-size:12.5px;color:var(--acc2);font-style:italic;margin-top:2px}
.md-sub{font-family:var(--m);font-size:11px;color:var(--text3);margin-top:3px}
.md-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px}
.md-tile{background:var(--card);border:0.5px solid var(--border);border-radius:11px;padding:14px 16px;min-width:0}
.md-tile .l,.md-clientes .l,.md-mini .l{font-family:var(--m);font-size:9.5px;letter-spacing:.12em;color:var(--text3)}
.md-tile .v{font-family:var(--m);font-size:24px;font-weight:600;margin-top:6px}
.md-tile .s{font-size:12px;color:var(--text2);margin-top:4px;line-height:1.6}
/* Un color por cuadro: violeta, celeste, verde, ámbar. El borde
   usa el tono VIVO; la etiqueta, el de TEXTO (contraste 4,5:1). */
.md-t1{border-top:3px solid var(--acc)}.md-t1 .l{color:var(--acc2)}
.md-t2{border-top:3px solid var(--bl)}.md-t2 .l{color:var(--bl2)}
.md-t3{border-top:3px solid var(--gr)}.md-t3 .l{color:var(--gr2)}
.md-t4{border-top:3px solid var(--am)}.md-t4 .l{color:var(--am2)}
.md-grid .md-tile{animation:mdIn .4s ease both}
.md-grid .md-tile:nth-child(2){animation-delay:.07s}
.md-grid .md-tile:nth-child(3){animation-delay:.14s}
.md-grid .md-tile:nth-child(4){animation-delay:.21s}
@keyframes mdIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.md-grid .md-tile{animation:none}}
.md-mejor{color:var(--gr2);font-weight:700}
.md-venc{color:var(--rd2);font-weight:700}
.md-link{color:var(--acc2);cursor:pointer}
.md-link:hover{text-decoration:underline}
.md-clientes{background:var(--card);border:0.5px solid var(--border);border-radius:11px;padding:14px 16px;margin-top:10px}
.md-clibar{display:flex;height:16px;border-radius:8px;overflow:hidden;margin-top:10px}
.md-clibar span{height:100%}
.md-leg{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--m);font-size:10.5px;color:var(--text2);margin-top:8px}
.md-leg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.md-pulso{background:linear-gradient(90deg, color-mix(in srgb, var(--acc) 11%, transparent), color-mix(in srgb, var(--bl) 8%, transparent));
          border-radius:9px;padding:11px 15px;margin:12px 0 4px;font-size:12.5px;color:var(--text2);line-height:1.6}
.md-cols{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-top:14px}
.md-col-ag{flex:2;min-width:300px}
.md-col-minis{flex:1;min-width:230px;display:flex;flex-direction:column;gap:8px}
.md-tabla{font-size:12.5px}
.md-tabla td{padding:6px 9px}
.md-agbar{height:9px;background:var(--bg3);border-radius:5px;overflow:hidden}
.md-agbar span{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--acc) 60%, transparent), color-mix(in srgb, var(--bl) 60%, transparent))}
.md-mini{background:var(--card);border:0.5px solid var(--border);border-radius:9px;padding:10px 13px}
.md-mini .s{font-size:11.5px;color:var(--text2);margin-top:5px;line-height:1.6}
.md-mini select{width:100%;font-size:11px;margin-top:7px}
.md-cumple{font-size:11.5px;color:var(--text2);margin-top:5px;line-height:1.5}
.md-mini-news .md-news{display:block;color:var(--acc2);font-weight:700;text-decoration:none;font-size:12.5px;margin-top:6px}
.md-mini-news .md-news img{width:100%;max-height:150px;object-fit:cover;border-radius:7px;display:block;margin-bottom:6px}
.md-mini-news .md-news:hover span{text-decoration:underline}
.md-iggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:7px;margin-bottom:2px}
.md-iggrid a{display:block;aspect-ratio:1;border-radius:7px;overflow:hidden;background:var(--bg3);
  text-align:center;line-height:2.6;text-decoration:none}
.md-iggrid a img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.md-iggrid a:hover img{transform:scale(1.06)}
.md-ritmo{margin-top:10px;padding:13px 16px}
.md-ritmo .l{font-family:var(--m);font-size:9.5px;letter-spacing:.12em;color:var(--text3)}
.md-ritmo .l span{letter-spacing:0;text-transform:none;font-weight:400}
.md-ritmobars{display:flex;gap:10px;align-items:flex-end;margin-top:12px}
.md-rcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.md-rcol b{font-family:var(--m);font-size:11px;min-height:15px}
.md-rcol span{display:block;width:100%;max-width:46px;border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--acc) 62%, transparent), color-mix(in srgb, var(--bl) 52%, transparent))}
.md-rcol i{font-family:var(--m);font-style:normal;font-size:9.5px;color:var(--text3)}
.md-rcol.hoy span{background:linear-gradient(180deg, var(--acc), color-mix(in srgb, var(--acc) 70%, transparent))}
.md-rcol.hoy i{color:var(--acc2);font-weight:700}
.md-rcol.futuro span{background:var(--bg3)}
.md-igdot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;
  background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%)}
.md-ig{color:var(--acc2);font-weight:700;text-decoration:none}
.md-ig:hover{text-decoration:underline}
.md-tip{display:flex;gap:11px;align-items:flex-start;background:var(--bg3);border-radius:9px;
        padding:12px 14px;font-size:11.5px;color:var(--text2);line-height:1.6}

/* Ausencias en el timeline (04/09/2026): rayado sobre el carril
   los días en que la persona no está. Detrás de las barras. */
.tl-ausbg{position:absolute;top:0;bottom:0;z-index:1;
  background:repeating-linear-gradient(135deg, transparent 0 5px,
             color-mix(in srgb, var(--rd) 18%, transparent) 5px 9px);
  border-left:1px dashed color-mix(in srgb, var(--rd) 45%, transparent);
  border-right:1px dashed color-mix(in srgb, var(--rd) 45%, transparent)}
.tl-track .tl-bar{z-index:2}

/* Desplegable de varios estados del timeline (04/09/2026). */
.tl-multi{position:relative}
.tl-multi-btn{background:var(--bg3);border:0.5px solid var(--border2);border-radius:7px;
              color:var(--text);font-family:var(--f);font-size:12.5px;padding:7px 10px;cursor:pointer}
.tl-multi-menu{display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:60;
               background:var(--card);border:0.5px solid var(--border2);border-radius:9px;
               padding:6px;min-width:180px;box-shadow:0 10px 28px rgba(0,0,0,.25)}
.tl-multi.abierto .tl-multi-menu{display:block}
.tl-multi-it{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:6px;
             font-size:12.5px;cursor:pointer;white-space:nowrap}
.tl-multi-it:hover{background:var(--bg3)}
.tl-multi-it input{accent-color:var(--acc);width:14px;height:14px}
.tl-multi-limpiar{padding:6px 8px;margin-top:3px;border-top:0.5px solid var(--border);
                  color:var(--text3);font-size:11.5px;cursor:pointer;text-align:center}
.tl-multi-limpiar:hover{color:var(--text)}

/* "¿Para quién es?" de cada nivel del tarifario (P4, 02/09/2026). */
.niv-quien-btn{font-size:10.5px;letter-spacing:.4px;color:var(--acc2);cursor:pointer;
               margin-top:6px;text-transform:uppercase;font-weight:700}
.niv-quien-btn:hover{text-decoration:underline}
.niv-quien{font-size:11.5px;line-height:1.55;color:var(--text2);margin-top:5px;
           padding:8px 10px;background:var(--bg3);border-radius:7px}

/* Pago conciliado de un gasto fijo: es plata que salió de verdad.
   La que no suma al cash flow es su estimación mensual, no este. */
.eg-pago{font-size:9px;font-weight:700;letter-spacing:.5px;margin-left:6px;padding:1px 6px;
         border-radius:5px;background:color-mix(in srgb, var(--gr) 18%, transparent);color:var(--gr2);vertical-align:middle}

/* Marca de moneda al lado del importe. Sólo se muestra cuando NO
   son pesos argentinos: marcar el caso habitual sería ruido. */
.eg-mon{font-size:9.5px;font-weight:700;letter-spacing:.5px;margin-left:5px;
        padding:1px 5px;border-radius:5px;background:var(--bg4);color:var(--text2);
        vertical-align:middle}

/* Horas por ejecutor, dentro del chip. */
.pp-hs{width:52px;margin-left:7px;padding:2px 5px;border-radius:6px;border:0.5px solid var(--border2);
       background:var(--bg2);color:var(--text);font:600 11.5px var(--m);text-align:center}
.pp-hs::-webkit-outer-spin-button,.pp-hs::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pp-hs{-moz-appearance:textfield}

/* Estado de carga, para elegir a quién asignarle sin salir del modal. */
.pp-niv{margin-left:8px;font-size:10px;font-weight:700;letter-spacing:.4px;
        padding:2px 7px;border-radius:20px;white-space:nowrap}
.pp-niv.n-desbordado{background:color-mix(in srgb, var(--rd) 18%, transparent);color:var(--rd2)}
.pp-niv.n-cargado{background:color-mix(in srgb, var(--am) 18%, transparent);color:var(--am2)}
.pp-niv.n-normal{background:color-mix(in srgb, var(--acc) 18%, transparent);color:var(--acc2)}
.pp-niv.n-disponible{background:color-mix(in srgb, var(--gr) 16%, transparent);color:var(--gr2)}
.pp-niv.n-libre{background:color-mix(in srgb, var(--gr) 22%, transparent);color:var(--gr3)}
.pp-chip.n-desbordado .av{background:var(--rd)}
.pp-chip.n-cargado .av{background:var(--am)}
.pp-resumen{font-size:11.5px;margin-top:7px;line-height:1.5}

/* Tarea en la que estoy pero que no ejecuto: se ve, no pesa. */
.tl-bar.ajena{opacity:.42;border-style:dashed}
.tl-bar.ajena .tl-bs{opacity:.8}
.tl-verseg{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text2);cursor:pointer;user-select:none}
.tl-verseg input{cursor:pointer}

/* TOGGLE SUELDOS */
.toggle-sueldos{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text2);cursor:pointer;font-weight:500}

/* SECTION DIVIDER */
.sec-divider{font-size:11px;color:var(--text2);letter-spacing:1px;font-family:var(--m);font-weight:700;margin:18px 0 10px;padding-bottom:6px;border-bottom:0.5px solid var(--border)}
/* --- Tarifario --- */
.tarif-grid{display:grid;grid-template-columns:340px 1fr;gap:14px;align-items:start;margin-bottom:8px}
@media(max-width:900px){.tarif-grid{grid-template-columns:1fr}}
.tf-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:0.5px solid var(--border)}
.tf-row:last-child{border-bottom:none}
.tf-lbl{font-size:12px;color:var(--text2);flex:1}
.tf-lbl small{display:block;color:var(--text3);font-size:10px;margin-top:1px}
.tf-in{background:var(--bg3);border:0.5px solid var(--border2);border-radius:6px;color:var(--text);font-family:var(--m);font-size:12.5px;padding:5px 8px;width:120px;text-align:right;outline:none}
.tf-in:focus{border-color:var(--acc)}
select.tf-in{font-family:var(--f);text-align:left}
.tf-total{background:var(--acc3);border-radius:8px;padding:11px 13px;margin-top:12px;display:flex;justify-content:space-between;align-items:center}
.tf-total span:first-child{font-size:10px;letter-spacing:.8px;color:var(--acc2);font-weight:700}
.tf-val{font-family:var(--m);font-size:18px;font-weight:600;color:#fff}
body.light .tf-val{color:#fff}
.tf-note{font-size:10.5px;color:var(--text3);line-height:1.5;margin-top:9px}
.niv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
@media(max-width:700px){.niv-grid{grid-template-columns:repeat(2,1fr)}}
.niv{background:var(--card);border:0.5px solid var(--border);border-radius:10px;padding:12px;position:relative;overflow:hidden}
.niv::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.niv.A::before{background:var(--rd)}.niv.B::before{background:var(--acc)}
.niv.C::before{background:var(--bl)}.niv.D::before{background:var(--gr)}
.niv-tag{font-size:19px;font-weight:800;letter-spacing:-1px;font-family:var(--f)}
.niv.A .niv-tag{color:var(--rd2)}.niv.B .niv-tag{color:var(--acc2)}
.niv.C .niv-tag{color:var(--bl2)}.niv.D .niv-tag{color:var(--gr2)}
.niv-desc{font-size:9.5px;color:var(--text3);line-height:1.35;margin:2px 0 8px;min-height:26px}
.niv-vh{font-family:var(--m);font-size:15px;font-weight:600}
.niv-vh small{display:block;font-family:var(--f);font-size:8.5px;color:var(--text3);letter-spacing:.5px;text-transform:uppercase;margin-bottom:1px;font-weight:700}
.niv-eq{font-size:9.5px;color:var(--text3);font-family:var(--m);margin-top:2px}
.niv-mg{font-size:9.5px;color:var(--text2);margin-top:7px;padding-top:7px;border-top:0.5px solid var(--border)}
.niv-mult{position:absolute;top:10px;right:10px}
.niv-mult input{width:42px;background:var(--bg3);border:0.5px solid var(--border2);border-radius:4px;color:var(--text2);font-family:var(--m);font-size:9.5px;padding:2px 3px;text-align:center;outline:none}
.hs-b{font-family:var(--m);font-size:10.5px;color:var(--text3);background:var(--bg3);padding:2px 7px;border-radius:9px}
.pr-A{color:var(--rd2)}.pr-B{color:var(--acc2);font-weight:600}.pr-C{color:var(--bl2)}.pr-D{color:var(--gr2)}
/* --- Presupuestos --- */
.pr-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.pr-tbl th{text-align:left;font-size:10.5px;letter-spacing:.6px;color:var(--text3);font-weight:700;
  padding:8px 10px;border-bottom:1px solid var(--border2);white-space:nowrap}
.pr-tbl td{padding:9px 10px;border-bottom:0.5px solid var(--border2);vertical-align:middle}
.pr-tbl tbody tr{cursor:pointer}
.pr-tbl tbody tr:hover{background:var(--bg3)}
.pr-tbl .num{font-family:var(--m);color:var(--text2);white-space:nowrap}
.pr-tbl .tot{text-align:right;font-family:var(--m);white-space:nowrap}
.pr-tbl .fec{color:var(--text3);white-space:nowrap}
.pr-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:11px;margin-bottom:8px}
.pr-card{background:var(--card);border:0.5px solid var(--border);border-radius:11px;padding:13px;cursor:pointer;transition:.15s}
.pr-card:hover{border-color:var(--acc);transform:translateY(-1px)}
.pr-card .t{font-weight:700;font-size:13px;margin-bottom:3px;line-height:1.3}
.pr-card .c{font-size:11px;color:var(--text3);margin-bottom:9px}
.pr-card .n{font-family:var(--m);font-size:16px;font-weight:600;color:var(--acc2)}
.pr-card .mt{display:flex;gap:12px;margin-top:7px;padding-top:7px;border-top:0.5px solid var(--border);font-size:10px;color:var(--text3)}
.pr-card .mt b{font-family:var(--m)}
.pr-crumb{font-size:11.5px;color:var(--text3);margin-bottom:12px}
.pr-crumb span:first-child{color:var(--acc);cursor:pointer}
.pr-titulo{background:transparent;border:none;color:var(--text);font-family:var(--f);font-size:21px;font-weight:800;letter-spacing:-.4px;width:100%;padding:0;outline:none}
.pr-titulo:focus{border-bottom:1px solid var(--acc)}
.pr-vtabs{display:flex;gap:3px;background:var(--bg2);border:0.5px solid var(--border);border-radius:9px;padding:3px;margin-bottom:14px;width:fit-content}
.pr-vtab{padding:6px 13px;border-radius:7px;font-size:12px;font-weight:600;color:var(--text2);cursor:pointer}
.pr-vtab.on{background:var(--acc3);color:var(--acc2)}
.pr-cfg{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;padding:11px 13px;background:var(--bg2);border:0.5px solid var(--border);border-radius:10px;margin-bottom:12px}
.pr-f{display:flex;flex-direction:column;gap:3px}
.pr-f label{font-size:8.5px;letter-spacing:.7px;color:var(--text3);font-weight:700;text-transform:uppercase}
.pr-f input,.pr-f select{background:var(--bg3);border:0.5px solid var(--border2);border-radius:6px;color:var(--text);font-family:var(--m);font-size:12px;padding:5px 7px;width:88px;outline:none}
.pr-f select{font-family:var(--f);font-weight:600;width:auto}
.pr-f.w input{width:180px;font-family:var(--f)}
.pr-vh{margin-left:auto;text-align:right}
.pr-vh label{display:block;font-size:8.5px;letter-spacing:.7px;color:var(--text3);text-transform:uppercase;font-weight:700}
.pr-vh .v{font-family:var(--m);font-size:12.5px;font-weight:600;color:var(--acc2)}
.pr-sec{background:var(--bg2);border:0.5px solid var(--border);border-radius:11px;margin-bottom:11px;overflow:hidden}
.pr-sec-h{display:flex;align-items:center;gap:8px;padding:9px 13px;background:var(--bg3);border-bottom:0.5px solid var(--border)}
.pr-sec-h input{background:transparent;border:none;color:var(--acc2);font-family:var(--f);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.3px;width:220px;outline:none}
.pr-sec-t{margin-left:auto;font-family:var(--m);font-size:12px;color:var(--text2);font-weight:600}
.pr-sec-x{color:var(--text3);cursor:pointer;font-size:13px}
.pr-sec-x:hover{color:var(--rd2)}
.pr-tbl{width:100%;border-collapse:collapse}
.pr-tbl th{font-size:8.5px;letter-spacing:.6px;color:var(--text3);font-weight:700;text-transform:uppercase;text-align:left;padding:7px 10px;border-bottom:0.5px solid var(--border)}
.pr-tbl th.r{text-align:right}
.pr-tbl td{padding:8px 10px;border-bottom:0.5px solid var(--border);font-size:12px;vertical-align:top}
.pr-tbl tbody tr:last-child td{border-bottom:none}
.pr-tbl .r{text-align:right;font-family:var(--m)}
.pr-idx{color:var(--text3);font-family:var(--m);font-size:10px;width:22px}
/* El titulo es un textarea y no un input: en una linea de alcance
   el texto ES el contenido —"Cotizamos el diseño y armado de…"— y
   en un input de una sola linea se escribia de corrido, sin poder
   ver lo que ya estaba escrito. Crece con el contenido. */
/* Sin negrita por defecto: la pone quien escribe, donde quiere.
   Antes todo el titulo salia en negrita y un parrafo entero asi se
   lee como un titulo larguisimo. */
.pr-tit{background:transparent;border:none;color:var(--text);font-family:var(--f);
  font-size:12.5px;font-weight:400;width:100%;padding:1px 0;outline:none;
  line-height:1.55;display:block;white-space:pre-wrap;min-height:1.4em}
.pr-tit:empty:before{content:attr(data-ph);color:var(--text3)}

/* La barra aparece solo cuando el campo tiene el foco: si estuviera
   siempre, una tabla con quince lineas seria un muro de botones. */
.pr-tit-bar{display:none;gap:2px;margin:2px 0 4px}
.pr-tit-bar.on{display:flex}
.pr-tit-bar span{cursor:pointer;padding:1px 7px;border-radius:5px;font-size:11.5px;
  color:var(--text3);user-select:none;line-height:1.5}
.pr-tit-bar span:hover{background:var(--bg3);color:var(--text)}
.pr-desc{background:transparent;border:none;color:var(--text3);font-family:var(--f);font-size:11px;width:100%;padding:2px 0 0;resize:vertical;line-height:1.45;outline:none;min-height:16px;white-space:pre-wrap;display:block}
.pr-desc:focus{color:var(--text2)}
.pr-desc b,.pr-desc strong{color:var(--text2);font-weight:600}
.pr-desc:empty{border-bottom:0.5px dotted var(--border2)}
.pr-desc:empty:before{content:attr(data-ph);color:var(--text3);font-style:italic;font-size:10.5px}
.pr-n{background:transparent;border:none;color:var(--text);font-family:var(--m);font-size:12px;width:100%;text-align:right;padding:1px 0;outline:none}
.pr-tg{display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:700;letter-spacing:.3px;padding:1px 5px;border-radius:9px;text-transform:uppercase;margin-bottom:2px}
.pr-tg-alc{background:color-mix(in srgb, var(--bl) 14%, transparent);color:var(--bl2)}
.pr-tg-tar{background:color-mix(in srgb, var(--acc) 14%, transparent);color:var(--acc2)}
.pr-tg-con{background:color-mix(in srgb, var(--am) 14%, transparent);color:var(--am2)}
.pr-tg-int{background:color-mix(in srgb, var(--rd) 12%, transparent);color:var(--rd2)}
/* 16/09: la etiqueta de tipo es un select (servicio ⇄ contratado ⇄ alcance ⇄ interno) */
.pr-tg-srv{background:var(--bg3);color:var(--text3)}
select.pr-tipo{border:none;cursor:pointer;font-family:var(--f);appearance:none;-webkit-appearance:none;padding-right:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4'%3E%3Cpath d='M0 0h6L3 4z' fill='%238a8a9a'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center}
select.pr-tipo:hover{filter:brightness(.95)} select.pr-tipo option{text-transform:none;font-size:12px;color:var(--text);background:var(--bg2)}
/* Título vacío: se ve el placeholder y una línea punteada, así se sabe que ahí se escribe */
.pr-tit:empty{border-bottom:0.5px dotted var(--border2)}
.pr-tit:empty:before{font-size:11px;font-style:italic}
.pr-hs{font-family:var(--m);font-size:9px;color:var(--text3);margin-left:4px}
.pr-com{display:inline-flex;align-items:center;gap:2px;font-size:9px;color:var(--am2);margin-left:4px;font-weight:600}
.pr-com input{background:var(--bg3);border:0.5px solid color-mix(in srgb, var(--am) 35%, transparent);border-radius:3px;color:var(--am2);font-family:var(--m);font-size:9px;width:30px;text-align:center;padding:1px;outline:none}
.pr-chk{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:3px;border:1px solid var(--border2);cursor:pointer;font-size:9px;color:transparent;user-select:none}
.pr-chk.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:700}
.pr-x{color:var(--text3);cursor:pointer;font-size:12px;opacity:0;transition:.15s}
.pr-tbl tr:hover .pr-x{opacity:1}
.pr-mv{display:flex;flex-direction:column;gap:1px;opacity:0;transition:.15s}
.pr-mv span{cursor:pointer;color:var(--text3);font-size:8px;line-height:1}
.pr-mv span:hover{color:var(--acc2)}
.pr-tbl tr:hover .pr-mv{opacity:1}
.pr-x:hover{color:var(--rd2)}
.pr-addbar{padding:8px 13px;border-top:0.5px solid var(--border);display:flex;gap:6px;flex-wrap:wrap}
.pr-addb{background:transparent;border:1px dashed var(--border2);color:var(--text3);border-radius:6px;padding:5px 11px;font-family:var(--f);font-weight:600;font-size:11px;cursor:pointer}
.pr-addb:hover{border-color:var(--acc);color:var(--acc2)}
.pr-trow{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:12.5px}
.pr-trow.sub{border-top:0.5px solid var(--border);margin-top:3px;padding-top:9px;font-weight:600}
.pr-trow.fin{border-top:1px solid var(--border2);margin-top:5px;padding-top:11px}
.pr-trow .lb{color:var(--text2)}
.pr-trow.fin .lb{font-size:14px;font-weight:800;color:var(--text)}
.pr-trow .vl{font-family:var(--m);font-weight:600}
.pr-trow.fin .vl{font-size:19px;color:var(--acc2)}
.pr-trow .eq{display:block;text-align:right;font-family:var(--f);font-size:11.5px;color:var(--text3);margin-top:1px}
.pr-int .vl,.pr-int .lb{color:var(--text3)}
.pr-feepct{background:var(--bg3);border:0.5px solid var(--border2);border-radius:4px;color:var(--text);font-family:var(--m);font-size:12.5px;width:42px;text-align:center;padding:2px;outline:none}
.pr-feetxt{width:100%;max-width:420px;background:transparent;border:none;color:var(--text3);font-family:var(--f);font-size:10.5px;line-height:1.45;resize:none;margin-top:2px;outline:none}
.pr-feescope{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:10px;color:var(--text3)}
.pr-lnk{cursor:pointer;color:var(--acc2);border-bottom:0.5px dotted var(--acc2)}
.pr-share{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:10px 13px;margin-bottom:12px;background:color-mix(in srgb, var(--acc) 7%, transparent);border:0.5px solid color-mix(in srgb, var(--acc) 26%, transparent);border-radius:10px;font-size:11.5px}
.pr-share.off{background:var(--bg2);border-color:var(--border);color:var(--text3)}
.pr-share code{font-family:var(--m);font-size:11.5px;color:var(--acc2);background:var(--bg3);padding:4px 9px;border-radius:5px;border:0.5px solid var(--border)}
.pr-share input[type=date]{background:var(--bg3);border:0.5px solid var(--border2);border-radius:5px;color:var(--text);font-family:var(--m);font-size:11.5px;padding:4px 7px;outline:none}
.pr-notas-lbl{font-size:8.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--text3);font-weight:700;margin-bottom:5px}
.pr-notas{width:100%;background:transparent;border:none;color:var(--text2);font-family:var(--f);font-size:11px;line-height:1.55;resize:vertical;min-height:32px;outline:none}
.pr-notas:focus{color:var(--text)}
.pk-it{display:flex;align-items:center;gap:10px;padding:9px 4px;border-top:0.5px solid var(--border);cursor:pointer}
.pk-it:hover{background:var(--bg3)}
.pr-card{position:relative}
.pr-card-x{position:absolute;top:9px;right:9px;color:var(--text3);font-size:12px;opacity:0;
  transition:.15s;width:19px;height:19px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;border:0.5px solid var(--border)}
.pr-card:hover .pr-card-x{opacity:1}
.pr-card-x:hover{color:var(--rd2);border-color:var(--rd2);background:var(--bg3)}
.pr-estado-sel{background:var(--bg3);border:0.5px solid var(--border2);border-radius:7px;
  color:var(--text);font-family:var(--f);font-weight:600;font-size:12px;padding:6px 9px;outline:none;cursor:pointer}
.pr-estado-sel:focus{border-color:var(--acc)}
.niv-A{background:color-mix(in srgb, var(--rd) 15%, transparent);color:var(--rd2)}
.niv-B{background:color-mix(in srgb, var(--acc) 15%, transparent);color:var(--acc2)}
.niv-C{background:color-mix(in srgb, var(--bl) 15%, transparent);color:var(--bl2)}
.niv-D{background:color-mix(in srgb, var(--gr) 15%, transparent);color:var(--gr2)}
.sec-divider:first-child{margin-top:0}

/* CALC PREVIEW BOX */
.calc-box{background:var(--bg3);border:0.5px solid var(--border2);border-radius:9px;padding:12px 14px;margin-top:8px}
.calc-row{display:flex;justify-content:space-between;font-size:12px;padding:4px 0}
.calc-row.total{border-top:0.5px solid var(--border2);margin-top:4px;padding-top:8px;font-weight:700;font-size:13px}

/* ===== RESPONSIVE / MOBILE NAV ===== */
.hamburger-btn{display:none;flex-direction:column;justify-content:center;gap:4px;width:32px;height:32px;cursor:pointer;margin-left:auto;flex-shrink:0}
.hamburger-btn span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:all .25s}
.hamburger-btn.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger-btn.open span:nth-child(2){opacity:0}
.hamburger-btn.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:150}
.nav-overlay.open{display:block}
.mobile-nav-extra{display:none}
.desktop-only{display:flex}

@media(max-width:900px){
  .mg4{grid-template-columns:repeat(2,1fr)}
  .g2,.g3{grid-template-columns:1fr}
  .fg2{grid-template-columns:1fr}
}

@media(max-width:760px){
  body{font-size:14.5px}
  .topbar{padding:8px 14px 0}
  .top-brand{padding-right:0;border-right:none;width:100%;justify-content:space-between}
  .hamburger-btn{display:flex}
  .desktop-only{display:none !important}

  .top-nav{
    position:fixed;top:0;right:-280px;width:260px;height:100vh;
    background:var(--bg2);border-left:0.5px solid var(--border2);
    flex-direction:column;align-items:stretch;gap:2px;
    padding:70px 10px 20px;z-index:200;
    transition:right .25s ease;overflow-y:auto;
  }
  .top-nav.open{right:0}
  .tnav{padding:13px 16px;font-size:15px;width:100%}
  .mobile-nav-extra{display:block;margin-top:14px;padding-top:14px;border-top:0.5px solid var(--border)}

  .topbar-row2{flex-wrap:wrap;gap:8px;padding-bottom:10px}
  .fx-pill{font-size:10.5px;padding:4px 8px}
  .top-right{gap:6px}
  .btn-sm{padding:9px 14px;font-size:12.5px}

  .content{padding:14px 12px}
  .mg4,.mg3{grid-template-columns:repeat(2,1fr);gap:7px}
  .met{padding:11px}
  .mv{font-size:21px}
  .ml{font-size:9.5px}
  .ms{font-size:11px}
  .card{padding:14px}
  .ct{font-size:14px}
  .cs{font-size:12px}

  /* Modal full-screen en mobile */
  .modal-wrap{padding:0;align-items:flex-end}
  .modal{width:100%;max-width:100%;border-radius:16px 16px 0 0;max-height:92vh;padding:18px 16px}
  .modal-title{font-size:17px}
  .fg2{gap:9px}
  .fl2{font-size:11px}
  .finput{font-size:16px;padding:11px 13px} /* 16px evita zoom automático en iOS */

  /* Tablas: scroll horizontal con indicador */
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{font-size:13px;min-width:560px}
  th{font-size:11px}
  th,td{padding:8px 9px}

  .mes-tabs{gap:3px}
  .mes-tab{padding:7px 12px;font-size:11.5px}
  .bx{font-size:10px;padding:2px 7px}
/* El pin apagado casi no se ve; aparece al pasar el mouse por la
   cuenta. El encendido queda siempre visible: es la senal de que
   esa cuenta esta arriba por decision de quien mira. */
/* La lista que aparece al escribir @. Va pegada al body y no dentro
   del campo: en el modal de tarea el contenedor recorta. */
.mencion{color:var(--acc);font-weight:600;
  background:color-mix(in srgb, var(--acc) 11%, transparent);
  border-radius:4px;padding:0 3px}
.men-caja{margin-top:4px;max-height:210px;overflow-y:auto;
  background:var(--card,#fff);border:1px solid var(--border,#e3e0ee);border-radius:9px;
  box-shadow:0 6px 20px rgba(0,0,0,.12);padding:4px}
.men-op{padding:6px 10px;font-size:13px;cursor:pointer;border-radius:6px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.men-op:hover,.men-op.sel{background:color-mix(in srgb, var(--acc) 14%, transparent)}
.ruta-local{display:inline-block;background:var(--bg2,#f2f0fa);border:0.5px solid var(--border2,#ddd);
  border-radius:5px;padding:1px 7px;font-family:var(--m);font-size:11.5px;cursor:pointer;
  word-break:break-all;line-height:1.5}
.ruta-local:hover{background:var(--bg3,#e8e5f5)}
.pl-pin{opacity:.12;filter:grayscale(1);transition:opacity .12s}
.pl-acc:hover .pl-pin{opacity:.5}
.pl-pin.on,.pl-acc:hover .pl-pin.on{opacity:1;filter:none}
  .alert{font-size:13px;padding:11px 13px}

  .login-card{flex-direction:column;width:94vw;min-height:auto}
  .login-left{width:100%;padding:28px 22px}
  .login-right{padding:28px 22px}
  .welcome-title{font-size:22px}
  .welcome-sub{font-size:13px}
  .ent-list{margin-top:1rem}
  .ent-item{font-size:12px}
  .fi{font-size:16px;padding:12px 14px}
  .form-title{font-size:21px}
  .form-sub{font-size:12.5px}
}

@media(max-width:420px){
  .mg4,.mg3{grid-template-columns:1fr}
  .topbar-row1{flex-wrap:wrap}
}

/* ===== PLANNER (Etapa 2) ===== */
.pl-wrap{display:flex;gap:14px;align-items:flex-start}
/* La columna crece con su contenido en vez de tener alto fijo con
   scroll propio. La página ya scrollea, y una barra interna al lado
   de un tablero mucho más largo quedaba suelta y sin sentido. */
.pl-side{width:250px;flex:0 0 250px;background:var(--card);border:0.5px solid var(--border);border-radius:var(--r);padding:10px;align-self:flex-start}
.pl-arch-tit{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}

/* Reordenar arrastrando. El asa aparece al pasar el mouse para no
   llenar la columna de iconos: el árbol se lee más de lo que se
   reordena. */
.pl-grip{cursor:grab;color:var(--text3);opacity:0;font-size:11px;padding:0 2px;flex-shrink:0}
.pl-acc:hover .pl-grip{opacity:.7}
.pl-grip:active{cursor:grabbing}
.pl-drag{opacity:.4}
.pl-drop{box-shadow:inset 0 2px 0 var(--acc)}
.pl-drop-fin{box-shadow:inset 0 -2px 0 var(--acc)}
.pl-arch-tit:hover{color:var(--text2)}
.pl-main{flex:1;min-width:0}
.pl-sec{font-size:10px;color:var(--text3);letter-spacing:1px;font-family:var(--m);font-weight:700;margin:10px 4px 6px}
.pl-acc{display:flex;align-items:center;gap:6px;padding:6px 7px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600}
.pl-acc:hover{background:var(--bg3)}
.pl-caret{font-size:9px;color:var(--text3);width:10px;flex:0 0 10px;transition:transform .15s}
.pl-caret.open{transform:rotate(90deg)}
/* Semáforo de dificultad. Un punto chico antes del título: se lee
   de reojo sin ocupar lugar. El hueco marca las que nadie estimó,
   que es la mitad del valor de tenerlo. */
.pl-dif{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;
        vertical-align:middle;flex-shrink:0}
.pl-dif.baja{background:var(--gr)}
.pl-dif.media{background:var(--am)}
.pl-dif.alta{background:var(--rd)}
.pl-dif.sin{background:transparent;border:1px solid var(--text3)}

/* En el listado de pendientes las columnas cortas no tienen por qué
   partirse: sobra ancho y un "A validar" en dos renglones se lee
   peor que uno largo. */
/* Datos que vienen de Xubio y no se editan acá: se muestran como
   texto, no como campo, para que quede claro que se corrigen en
   Xubio y no en Dardo. */
.mi-dato{padding:9px 12px;background:var(--bg3);border-radius:8px;font-size:12.5px;
         line-height:1.45;color:var(--text2);border:0.5px solid var(--border)}

.nw{white-space:nowrap}
.tbl-pend td, .tbl-pend th{vertical-align:middle}
.tbl-pend .bx{display:inline-block}

/* Encabezados con fondo y versalitas: separan la tabla del resto y
   dejan claro que se puede hacer clic para ordenar. */
.tbl-pend thead th{background:var(--bg3);position:sticky;top:0;z-index:1;
  font-size:10px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--text3);padding:10px 12px;border-bottom:1px solid var(--border2)}
/* La barra de Pendientes en una sola línea. Los chips de área
   ocupaban cinco filas de alto y la tabla arrancaba al final de la
   pantalla: en un listado, el alto es lo que más se paga. */
.pend-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pend-sel{width:auto;padding:6px 10px;font-size:12px}
.pend-res{font-size:11.5px;color:var(--text3);white-space:nowrap}
.pend-res b{color:var(--text2)}

.th-ord{cursor:pointer;white-space:nowrap;user-select:none;transition:.12s}
.th-ord:hover{color:var(--text2)}
.tbl-pend thead th.th-ord.on{color:var(--acc)}
.tbl-pend tbody tr.sel{background:color-mix(in srgb, var(--acc) 12%, transparent)}
.tbl-pend input[type=checkbox]{cursor:pointer}

.pl-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
/* La sangria era de 12px y la linea apenas se veia: una subcuenta
   como "Calendarios JD" parecia un cliente aparte y no algo que
   cuelga de John Deere. Con mas margen y la linea marcada, la
   jerarquia se lee de un vistazo. */
.pl-kids{margin-left:22px;border-left:1.5px solid var(--border2);padding-left:12px;
  position:relative}
.pl-plan{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12.5px;color:var(--text2)}
.pl-plan:hover{background:var(--bg3);color:var(--text)}
.pl-plan.on{background:var(--acc3);color:var(--acc2);font-weight:600}
.pl-cnt{margin-left:auto;font-family:var(--m);font-size:10px;color:var(--text3)}
.pl-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.pl-title{font-family:var(--f);font-size:19px;font-weight:700}
.pl-crumb{color:var(--text3);font-size:12px;font-family:var(--m)}
.pl-cols{display:flex;gap:11px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}

/* ------------------------------------------------------------
   LA BARRA DE SCROLL FIJA

   El tablero y el timeline se van a la derecha, pero su barra vive
   al final del contenido: con cinco columnas largas hay que bajar
   media pantalla para encontrarla.

   El tirador se dibuja a mano, no es la barra del navegador. En
   Windows se ve siempre, pero en Mac y en Linux las barras se
   desvanecen cuando no las tocas, y una barra que no se ve no
   resuelve nada. Esta se ve igual en todos lados y del mismo color
   que el resto de Dardo. La mueve dardo-app.js.
   ------------------------------------------------------------ */
.scrollfijo{position:fixed;bottom:0;z-index:55;height:17px;
  background:var(--card);border-top:0.5px solid var(--border);
  box-shadow:0 -5px 16px rgba(0,0,0,.10);
  opacity:0;pointer-events:none;transition:opacity .13s}
.scrollfijo.on{opacity:1;pointer-events:auto}

.sf-pista{position:absolute;left:9px;right:9px;top:4px;height:9px;
  background:var(--bg3);border-radius:5px;cursor:pointer}
.sf-tirador{position:absolute;top:0;height:9px;min-width:36px;
  background:var(--border2);border-radius:5px;cursor:grab;
  transition:background .12s}
.sf-tirador:hover{background:var(--text3)}
.scrollfijo.arrastrando .sf-tirador{background:var(--acc);cursor:grabbing}

/* En el celular se arrastra con el dedo: la barra sobra. */
@media(max-width:700px){.scrollfijo{display:none}}

/* CALENDARIO DE CONTENIDOS
   Grilla mensual: siete columnas, una por día de la semana. Cada
   celda tiene alto mínimo y crece con su contenido. */
/* Plataformas: se eligen varias, como etiquetas que se prenden. */
/* Catalogos: una fila por item, color + nombre + quitar. */
.cat-fila{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.cat-color{width:34px;height:32px;padding:2px;border-radius:7px;border:0.5px solid var(--border);background:var(--bg2);cursor:pointer;flex-shrink:0}
.cat-nom{flex:1}
.cat-x{width:20px;text-align:center;color:var(--text3);cursor:pointer;font-size:12px;flex-shrink:0}
.cat-x:hover{color:var(--rd2)}
.cat-fila.nueva{opacity:.75}
.cat-fila.nueva:focus-within{opacity:1}

.tp-plats{display:flex;flex-wrap:wrap;gap:6px}
.tp-plat{padding:5px 12px;border-radius:20px;border:1px solid var(--border2);
         font-size:12px;font-weight:600;cursor:pointer;color:var(--text3);transition:.12s}
.tp-plat:hover{border-color:var(--acc)}
.tp-plat.on{color:#fff}

/* Las dos opciones de "Ayudemos a Dardo" van con estilo propio y
   no con .tp-plat: esa clase pone el texto en blanco esperando que
   el fondo lo pinte el JavaScript, y acá no hay fondo — el texto
   desaparecía al seleccionarlo. */
/* La cabecera de la pantalla: un bloque con el personaje, para que
   se lea como una invitación y no como una instrucción más. */
.ap-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px;
  padding:16px 20px;border-radius:var(--r);border:0.5px solid var(--border);
  background:linear-gradient(100deg, color-mix(in srgb, var(--acc) 10%, transparent), transparent 62%)}
.ap-head::before{content:'';width:52px;height:52px;flex-shrink:0;border-radius:50%;
  background:url('/img/dardo/contento.png') center/contain no-repeat}
.ap-head-txt{flex:1;min-width:240px}
.ap-head-t{font-size:16px;font-weight:700;line-height:1.25}
.ap-head-s{font-size:12.5px;color:var(--text2);line-height:1.55;margin-top:4px;max-width:62ch}

.ap-op{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;
  border:1px solid var(--border2);background:var(--bg3);cursor:pointer;transition:.14s;
  flex:1;min-width:190px}
.ap-op:hover{border-color:var(--acc);background:var(--bg4)}
.ap-op.on{border-color:var(--acc);background:color-mix(in srgb, var(--acc) 12%, transparent);
  box-shadow:0 0 0 1px var(--acc)}
.ap-op .ic{font-size:18px;line-height:1}
.ap-op .tt{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.35;display:block}
.ap-op .ds{font-size:11px;color:var(--text3);line-height:1.5;margin-top:2px;display:block}
.ap-op.on .tt{color:var(--acc)}

/* La lista de lo que ve un invitado, agrupada por cuenta. */
.inv-grupo{border:0.5px solid var(--border);border-radius:10px;padding:11px 13px;margin-bottom:9px}
.inv-cab{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--text3);margin-bottom:7px}
.inv-todo{display:flex;align-items:flex-start;gap:9px;padding-bottom:9px;margin-bottom:8px;
  border-bottom:0.5px solid var(--border);cursor:pointer;font-size:12.5px}
.inv-todo i{display:block;font-style:normal;font-size:11px;color:var(--text3);margin-top:2px}
.inv-item{display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer;
  font-size:12.5px;color:var(--text2)}
.inv-item:hover{color:var(--text)}
.inv-grupo input[type=checkbox]{cursor:pointer;flex-shrink:0}
tr.inactivo{opacity:.5}

/* En modo invitado desaparece todo lo que es de la agencia: los
   botones de gestión, la selección múltiple, el importador. Lo que
   queda es el calendario y sus publicaciones. */
/* Lo que un invitado no ve: quién ejecuta, las horas, el estado,
   los tiempos. Marcado con solo-equipo para no tener que listar
   cada campo en el CSS. */
body.invitado .solo-equipo{display:none !important}

body.invitado .pl-tabs{display:none}
body.invitado #pl-arbol-acciones,
body.invitado .pl-add,
body.invitado .cal-top .btn-sm:not(.cal-nav){display:none}
body.invitado .cal-top .cal-vistas{display:flex}
body.invitado .cal-top .btn-sm.cal-nav{display:inline-block}

.cal-wrap{width:100%}
.cal-top{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.cal-mes{font-size:17px;font-weight:700;text-transform:capitalize}
.cal-selbar{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;
            background:color-mix(in srgb, var(--acc) 12%, transparent);border:0.5px solid var(--acc);
            border-radius:var(--r);padding:9px 13px;font-size:12.5px}
.cal-selfila{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cal-pub.sel{outline:2px solid var(--acc);outline-offset:1px}
.cal-check{float:right;width:15px;height:15px;border-radius:4px;border:1px solid var(--border2);
           font-size:10px;line-height:14px;text-align:center;color:var(--acc2);margin-left:4px}
.cal-pub.sel .cal-check{background:var(--acc);color:#fff;border-color:var(--acc)}
/* El conmutador entre las dos vistas: un par de pestañas chicas,
   no botones, porque no es una acción sino un modo de mirar. */
.cal-vistas{display:flex;background:var(--bg3);border-radius:20px;padding:3px;gap:2px}
.cal-vistas span{padding:5px 13px;border-radius:16px;font-size:11.5px;font-weight:600;
  color:var(--text3);cursor:pointer;transition:.14s;white-space:nowrap}
.cal-vistas span:hover{color:var(--text2)}
.cal-vistas span.on{background:var(--acc);color:#fff}

/* El listado más compacto: con nueve columnas, cada punto de más
   en la tipografía se paga en ancho. Los textos bajan a 11,5 y las
   etiquetas a 9,5, con la cabecera destacada como en Pendientes. */
.cal-lista{font-size:11.5px}
.cal-lista td{vertical-align:middle;padding:7px 9px;line-height:1.35}
.cal-lista .bx{margin:1px 2px 1px 0;font-size:9.5px;padding:2px 7px;letter-spacing:.2px}
.cal-lista thead th{background:var(--bg3);position:sticky;top:0;z-index:1;
  font-size:9.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text3);padding:9px;border-bottom:1px solid var(--border2);white-space:nowrap}
.cal-lista thead th.th-ord{cursor:pointer;user-select:none;transition:.12s}
.cal-lista thead th.th-ord:hover{color:var(--text2)}
.cal-lista thead th.th-ord.on{color:var(--acc)}
.cal-lista tbody tr:hover{background:var(--bg3)}

.cal-filtros{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.cal-sel{width:auto;padding:6px 10px;font-size:12px}
.cal-limpiar{font-size:11.5px;color:var(--text3);cursor:pointer;text-decoration:underline}
.cal-limpiar:hover{color:var(--text2)}
.cal-cab{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.cal-cab>div{font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
             color:var(--text3);text-align:center;padding:4px 0}
.cal-grilla{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dia{min-height:118px;background:var(--card);border:0.5px solid var(--border);
         border-radius:9px;padding:6px;transition:.12s}
.cal-dia:hover{border-color:var(--border2)}
.cal-dia.fuera{opacity:.35}
.cal-dia.hoy{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.cal-num{font-family:var(--m);font-size:11px;color:var(--text3);margin-bottom:5px;text-align:right}
.cal-dia.hoy .cal-num{color:var(--acc2);font-weight:700}

.cal-pub{background:var(--bg3);border-left:3px solid var(--acc);border-radius:0 7px 7px 0;
         padding:6px 7px;margin-bottom:5px;cursor:pointer;transition:.12s}
.cal-pub:hover{transform:translateX(1px);background:var(--bg4)}
.cal-tit{font-size:11.5px;font-weight:600;line-height:1.3;margin-bottom:4px;
         display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cal-camp{display:inline-block;font-size:9px;font-weight:700;padding:1px 6px;
          border-radius:5px;margin-bottom:4px}
.cal-plats{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:4px}
.cal-plat{font-size:8.5px;font-weight:700;padding:1px 5px;border-radius:4px}
.cal-pie{display:flex;align-items:center;gap:4px}
.cal-est{font-size:9.5px;font-weight:600;white-space:nowrap}
.cal-pie .pl-av{width:17px;height:17px;font-size:8px;margin:0}

@media(max-width:900px){
  .cal-grilla,.cal-cab{grid-template-columns:repeat(7,minmax(92px,1fr));overflow-x:auto}
  .cal-dia{min-height:86px}
}
.pl-col{flex:0 0 272px;width:272px;background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--r);padding:9px}
.pl-col.over{border-color:var(--acc);background:var(--bg3)}
.pl-colh{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;margin-bottom:9px;padding:0 2px}
.pl-colh .n{margin-left:auto;font-family:var(--m);font-size:10px;color:var(--text3)}
.pl-card{background:var(--card);border:0.5px solid var(--border2);border-radius:9px;padding:10px;margin-bottom:8px;cursor:grab}
.pl-card:hover{border-color:var(--acc)}
.pl-card.drag{opacity:.4}

/* Las reuniones se ven distintas de un trabajo: rayado diagonal y
   sin relleno pleno. Es tiempo comprometido, no algo que se
   entrega. */
.pl-card.reunion{
  background:repeating-linear-gradient(135deg,
    var(--bg3) 0 7px, transparent 7px 14px), var(--card);
  border-style:dashed;border-color:var(--border2)}
.pl-card.reunion .pl-ct{color:var(--text2)}
.pl-card.reunion:hover{border-color:var(--bl)}

/* Los participantes ya elegidos de una reunión. */
.mr-elegidos{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:11px}
.mr-vos{font-size:12.5px;color:var(--text2);line-height:1.6;width:100%}
.mr-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:20px;
  background:color-mix(in srgb, var(--acc) 14%, transparent);border:1px solid var(--acc);
  color:var(--acc);font-size:12px;font-weight:600;line-height:1.5}
.mr-chip b{cursor:pointer;font-size:15px;line-height:1;opacity:.55}
.mr-chip b:hover{opacity:1}

/* Los modales con muchos campos —reunión, invitar— se leían muy
   apretados: los rótulos pegados a los recuadros y las secciones
   sin respiro entre una y otra. */
#modal-body .ff{gap:7px}
#modal-body .fg2{gap:16px 14px}
#modal-body .fl2{line-height:1.55}
#modal-body .sec-divider{margin-top:24px;margin-bottom:14px}
#modal-body textarea.finput{line-height:1.65;padding:11px 13px}
#modal-body .finput{padding:10px 12px}
.pl-bar{height:3px;border-radius:2px;margin-bottom:8px;width:34px}
.pl-ct{font-size:13px;font-weight:600;line-height:1.3;margin-bottom:7px;word-break:break-word}
.pl-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pl-date{font-family:var(--m);font-size:10px;color:var(--text2);background:var(--bg3);padding:2px 6px;border-radius:4px}
.pl-date.late{color:var(--rd2);background:color-mix(in srgb, var(--rd) 15%, transparent)}
.pl-avs{display:flex;margin-left:auto}

/* Mi carita arriba a la derecha: identifica la sesión y abre el
   selector de avatar. */
.yo{display:flex;align-items:center;cursor:pointer;padding:2px;border-radius:50%;
  border:1.5px solid transparent;transition:.14s}
.yo:hover{border-color:var(--acc)}
.yo-av{width:30px;height:30px;border-radius:50%;background:var(--acc);color:#fff;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
  background-size:cover;background-position:center;font-family:var(--m)}
.yo-av.conimg{color:transparent;font-size:0}

/* La galería: cuadrícula de caritas, la elegida con borde. */
.mav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:9px}
.mav-op{aspect-ratio:1;border-radius:50%;background-size:cover;background-position:center;
  background-color:var(--bg3);cursor:pointer;border:2px solid transparent;transition:.14s}
.mav-op:hover{border-color:var(--border2);transform:scale(1.06)}
.mav-op.on{border-color:var(--acc);box-shadow:0 0 0 2px color-mix(in srgb, var(--acc) 35%, transparent)}
.mav-op.sin{display:flex;align-items:center;justify-content:center;font-family:var(--m);
  font-size:15px;font-weight:700;color:var(--acc2);background:var(--acc3)}

/* Con avatar el círculo muestra la imagen; sin avatar, las
   iniciales sobre el color de siempre. */
.pl-av.conimg,.tl-av.conimg{background-size:cover;background-position:center;
  color:transparent;font-size:0}
.pl-av{width:22px;height:22px;border-radius:50%;background:var(--acc3);color:var(--acc2);font-family:var(--m);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--card);margin-left:-6px}
.pl-av.seg{background:var(--bg4);color:var(--text3)}
.pl-hrs{font-family:var(--m);font-size:10px;color:var(--text3)}
.pl-add{width:100%;text-align:left;background:none;border:0;color:var(--text3);font-family:var(--f);font-size:12px;padding:6px 4px;cursor:pointer;border-radius:6px}
.pl-add:hover{background:var(--bg3);color:var(--acc2)}
.pl-empty{color:var(--text3);font-size:12px;text-align:center;padding:26px 10px}
body.light .pl-av{border-color:#fff}
@media(max-width:900px){.pl-wrap{flex-direction:column}.pl-side{width:100%;flex:none;max-height:230px;overflow-y:auto}}


/* --- Planner: color y calidez (ajuste) --- */
.pl-col{border-top:3px solid var(--acc)}
.pl-colh{font-size:12.5px;padding:2px 2px 8px;border-bottom:0.5px solid var(--border)}
.pl-colh .ic{font-size:14px}
.pl-card{border-left:4px solid var(--acc);position:relative;transition:transform .1s,box-shadow .15s}
.pl-card:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.22)}
.pl-emo{font-size:17px;line-height:1;margin-right:5px;vertical-align:-2px}
.pl-emo-pick{display:flex;flex-wrap:wrap;gap:5px}
.pl-emo-b{width:30px;height:30px;border-radius:7px;border:0.5px solid var(--border2);background:var(--bg3);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center}
.pl-emo-b:hover{border-color:var(--acc)}
.pl-emo-b.on{background:var(--acc3);border-color:var(--acc)}
.pl-mv{display:flex;gap:4px;margin-left:auto}
.pl-mvb{width:22px;height:22px;border-radius:6px;border:0.5px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.pl-mvb:hover{background:var(--acc3);color:var(--acc2);border-color:var(--acc)}
.pl-mvb:disabled{opacity:.25;cursor:default}
.pl-foot{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:7px;border-top:0.5px solid var(--border)}


/* --- Planner: selector de personas, links y acciones del árbol --- */
.pl-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.pl-links a{display:inline-flex;align-items:center;gap:5px;background:var(--bg3);border:0.5px solid var(--border2);border-radius:6px;padding:4px 9px;font-size:11.5px;color:var(--acc2);font-weight:600;text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body:not(.light) .pl-links a{color:var(--acc2);font-weight:500}
.pl-links a:hover{border-color:var(--acc);text-decoration:underline}
.pp-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.pp-chip{display:inline-flex;align-items:center;gap:6px;background:var(--acc3);color:var(--acc2);border-radius:20px;padding:4px 6px 4px 4px;font-size:12px}
.pp-chip .av{width:20px;height:20px;border-radius:50%;background:var(--acc);color:#fff;font-family:var(--m);font-size:8.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pp-chip .x{cursor:pointer;opacity:.6;font-size:13px;line-height:1;padding:0 2px}
.pp-chip .x:hover{opacity:1}
.pp-list{max-height:150px;overflow-y:auto;border:0.5px solid var(--border2);border-radius:7px;margin-top:5px;display:none;background:var(--bg3)}
.pp-list.open{display:block}
.pp-it{padding:7px 10px;cursor:pointer;font-size:12.5px;display:flex;align-items:center;gap:8px}
.pp-it:hover{background:var(--acc3);color:var(--acc2)}
.pp-none{padding:9px 10px;color:var(--text3);font-size:12px}
.pl-acts{margin-left:auto;display:flex;gap:3px;opacity:0;transition:opacity .12s}
.pl-acc:hover .pl-acts,.pl-plan:hover .pl-acts{opacity:1}
.pl-actb{width:19px;height:19px;border-radius:5px;border:0;background:transparent;color:var(--text3);cursor:pointer;font-size:11px;line-height:1;padding:0}
.pl-actb:hover{background:var(--acc3);color:var(--acc2)}


/* --- Planner: reordenar dentro de la columna --- */
.pl-card.ins-top{box-shadow:0 -3px 0 0 var(--acc)}
.pl-card.ins-bot{box-shadow:0 3px 0 0 var(--acc)}
.pl-vacia{color:var(--text3);font-size:11.5px;padding:5px 8px 5px 20px;font-style:italic}


/* --- Planner: áreas vs planes --- */
/* Una subcuenta tiene que VERSE distinta, no solo estar corrida.
   Con el mismo tamaño y el mismo peso, "CALENDARIOS JD" parecia un
   cliente aparte y no algo que cuelga de John Deere —los nombres
   vienen en mayusculas desde la base, asi que la sangria sola no
   alcanzaba para distinguirlos. */
.pl-acc.hija{font-size:11.5px;font-weight:500;color:var(--text2);letter-spacing:.2px}
.pl-acc.hija .pl-dot{width:6px;height:6px}
.pl-acc .pl-nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-plan .pl-nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.pl-pic{font-size:9px;color:var(--text3);width:10px;flex:0 0 10px;text-align:center}
.pl-plan.on .pl-pic{color:var(--acc2)}
.pl-new{display:flex;gap:5px;padding:4px 0 6px 4px}
.pl-newb{background:none;border:0.5px dashed var(--border2);border-radius:6px;color:var(--text3);font-family:var(--f);font-size:11px;padding:3px 9px;cursor:pointer}
.pl-newb:hover{border-color:var(--acc);color:var(--acc2);border-style:solid}
.pl-acts{opacity:.35}
.pl-acc:hover .pl-acts,.pl-plan:hover .pl-acts{opacity:1}


.pl-actb.del:hover{background:color-mix(in srgb, var(--rd) 18%, transparent);color:var(--rd2)}
body.light .pl-actb.del:hover{color:var(--rd2)}


/* --- Cronómetro --- */
.crono-box{display:inline-flex;align-items:center;gap:8px;background:var(--acc3);border:0.5px solid var(--acc);border-radius:20px;padding:4px 6px 4px 11px;max-width:330px}
.cr-dot{width:7px;height:7px;border-radius:50%;background:var(--gr2);flex:0 0 7px;animation:crpulse 1.6s ease-in-out infinite}
@keyframes crpulse{0%,100%{opacity:1}50%{opacity:.25}}
.cr-t{font-family:var(--m);font-size:12.5px;font-weight:700;color:var(--acc2)}
.cr-n{font-size:11.5px;color:var(--acc2);opacity:.8;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-stop{width:22px;height:22px;border-radius:50%;border:0;background:var(--rd);color:#fff;cursor:pointer;font-size:9px;line-height:1;padding:0}
.cr-stop:hover{filter:brightness(1.15)}
.pl-mvb.play{color:var(--gr2);font-size:10px}
.pl-mvb.play:hover{background:color-mix(in srgb, var(--gr) 18%, transparent);color:var(--gr2);border-color:var(--gr2)}
.pl-mvb.play.on{background:var(--rd);color:#fff;border-color:var(--rd)}
.cr-res{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.cr-tot{font-family:var(--m);font-size:19px;font-weight:700;color:var(--acc)}
body:not(.light) .cr-tot{color:var(--acc2)}
.cr-warn{font-size:11px;color:var(--am2);background:color-mix(in srgb, var(--am) 18%, transparent);padding:3px 8px;border-radius:5px}
body:not(.light) .cr-warn{color:var(--am2)}
.cr-add{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.cr-list{border-top:0.5px solid var(--border);max-height:170px;overflow-y:auto}
.cr-it{display:flex;align-items:center;gap:8px;padding:6px 2px;border-bottom:0.5px solid var(--border);font-size:12px}
.cr-it.rev{background:color-mix(in srgb, var(--am) 10%, transparent)}
.cr-min{font-family:var(--m);font-weight:700;min-width:52px}
.cr-fix{margin-left:auto;background:none;border:0.5px solid var(--am);color:var(--am2);border-radius:5px;font-size:10.5px;padding:2px 8px;cursor:pointer;font-family:var(--f)}
body:not(.light) .cr-fix{color:var(--am2)}
.cr-del{background:none;border:0;color:var(--text3);cursor:pointer;font-size:12px;padding:0 4px;margin-left:auto}
.cr-it .cr-fix + .cr-del{margin-left:0}
.cr-del:hover{color:var(--rd)}


/* --- Planner: pestañas y vistas --- */
.pl-tabs{display:flex;gap:5px;margin-bottom:13px}
.pl-tab{padding:6px 15px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;color:var(--text2);border:0.5px solid transparent}
.pl-tab:hover{background:var(--bg3)}
.pl-tab.on{background:var(--acc3);color:var(--acc2);border-color:var(--acc)}
/* Columnas mas anchas y mas separadas: con 270px los nombres
   largos y las rutas de cuenta se cortaban. */
.eq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.eq-sec{font-size:11px;color:var(--text3);letter-spacing:1px;font-family:var(--m);font-weight:700;margin:16px 0 9px}
.eq-card{background:var(--card);border:0.5px solid var(--border);border-radius:var(--r);padding:17px 18px;border-left:4px solid var(--tx3)}
.eq-card.saturado{border-left-color:var(--rd)}
.eq-card.cargado{border-left-color:var(--am)}
.eq-card.normal{border-left-color:var(--gr)}
.eq-card.libre{border-left-color:var(--border2)}
.eq-top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.eq-av{width:33px;height:33px;border-radius:50%;background:var(--acc3);color:var(--acc2);font-family:var(--m);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 33px}
.eq-nom{font-weight:600;font-size:13.5px;line-height:1.2}
.eq-sub{font-size:10.5px;color:var(--text3);font-family:var(--m)}
.eq-badge{margin-left:auto;font-size:10px;font-family:var(--m);font-weight:700;
          padding:3px 10px;border-radius:20px;letter-spacing:.4px;
          border:1px solid currentColor;
          background:color-mix(in srgb, currentColor 12%, transparent)}
body:not(.light) .eq-badge{background:color-mix(in srgb, currentColor 18%, transparent)}
.eq-badge.saturado{color:var(--rd2)}
.eq-badge.cargado{color:var(--am2)}
.eq-badge.normal{color:var(--gr2)}
.eq-badge.libre{background:var(--bg3);color:var(--text3)}
body:not(.light) .eq-badge.saturado{color:var(--rd2)}
body:not(.light) .eq-badge.cargado{color:var(--am2)}
body:not(.light) .eq-badge.normal{color:var(--gr2)}
.eq-nums{display:flex;gap:13px;margin-bottom:9px}
.eq-n{font-family:var(--m);font-size:16px;font-weight:700}
.eq-nl{font-size:9.5px;color:var(--text3);font-family:var(--m);letter-spacing:.4px}
.eq-bar{height:5px;border-radius:3px;background:var(--bg4);overflow:hidden;margin-bottom:9px}
.eq-bar i{display:block;height:100%;border-radius:3px;background:var(--gr)}
.eq-bar i.alto{background:var(--am)}
.eq-bar i.lleno{background:var(--rd)}
.eq-t{display:flex;align-items:center;gap:7px;padding:7px 0;font-size:12px;border-top:0.5px solid var(--border);cursor:pointer}
.eq-t:hover{color:var(--acc2)}
.eq-t .d{width:6px;height:6px;border-radius:50%;flex:0 0 6px}
.eq-t .n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq-t .f{font-family:var(--m);font-size:10px;color:var(--text3)}
.eq-t .f.late{color:var(--rd2)}
body.light .eq-t .f.late{color:var(--rd2)}
.mw-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-bottom:0.5px solid var(--border);cursor:pointer}
.mw-row:hover{background:var(--bg3)}
.mw-t{flex:1;min-width:0}
.mw-tt{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mw-ts{font-size:11px;color:var(--text3);font-family:var(--m)}
.mw-est{font-size:10.5px;font-family:var(--m);font-weight:700;padding:3px 8px;border-radius:5px}
.mw-f{font-family:var(--m);font-size:11px;color:var(--text2);min-width:64px;text-align:right}
.mw-f.late{color:var(--rd2);font-weight:700}
body.light .mw-f.late{color:var(--rd2)}


/* --- Equipo: filtro por grupo --- */
.eq-bar-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.eq-sep{display:flex;align-items:center;justify-content:space-between;
        font-size:9.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
        color:var(--text3);margin:9px 0 4px}
.eq-sep:first-child{margin-top:2px}
.eq-sep span{font-weight:600;letter-spacing:0;opacity:.7}
.eq-t.ajena{opacity:.55}
.eq-mas{color:var(--acc2);cursor:pointer;font-size:11px;justify-content:center}
.eq-mas:hover{color:var(--acc)}
.eq-t.ajena i{font-style:normal;color:var(--acc2);font-size:10px}
.eq-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.eq-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;border:0.5px solid var(--border2);background:var(--card);cursor:pointer;font-size:12px;color:var(--text2)}
.eq-chip:hover{border-color:var(--acc)}
.eq-chip.on{font-weight:700;border-width:1.5px}
.eq-chip-n{font-family:var(--m);font-size:10px;color:var(--text3)}
.eqm-row{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:0.5px solid var(--border)}
.eqm-n{font-size:13px;font-weight:600}
.eqm-c{color:var(--text3);font-size:11px;font-family:var(--m)}


/* --- Timeline --- */
/* El scroll vertical tiene que estar ACA para que la cabecera de
   dias se quede pegada arriba: sticky se agarra del contenedor que
   scrollea, y con overflow-y visible se agarraba de la pagina. */
.tl-scroll{overflow-x:auto}
.tl-head{display:flex;position:sticky;top:0;z-index:4;background:var(--card);border-bottom:0.5px solid var(--border)}
/* La columna de nombres queda fija al desplazarse de costado: sin
   esto uno se pierde de quien es el carril que esta mirando. */
.tl-hora{font-family:var(--m);font-size:9.5px;font-weight:700;color:#fff;
  white-space:nowrap;margin-left:1px}
.tl-per{position:sticky;left:0;z-index:2;background:var(--card)}
.tl-per.head{z-index:5}
.tl-per{width:210px;flex:0 0 210px;display:flex;align-items:center;gap:8px;padding:8px 11px;border-right:0.5px solid var(--border);position:sticky;left:0;background:var(--card);z-index:2}
.tl-per.head{height:44px}
.tl-pn{font-size:12.5px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-pa{font-size:10px;color:var(--text3);font-family:var(--m);font-weight:400}
.tl-pc{margin-left:auto;font-family:var(--m);font-size:10px;color:var(--text3)}
.tl-meses{display:flex;height:20px}
.tl-mes{font-family:var(--m);font-size:9.5px;font-weight:700;color:var(--text3);letter-spacing:.6px;padding-left:5px;border-right:0.5px solid var(--border);display:flex;align-items:center;overflow:hidden}
.tl-dias{display:flex;height:24px}
.tl-d{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--m);border-right:0.5px solid var(--border);flex:0 0 auto}
.tl-d .dw{font-size:8px;color:var(--text3);line-height:1}
.tl-d .dn{font-size:10px;color:var(--text2);line-height:1.2}
.tl-d.wk{background:var(--bg3)}
.tl-d.hoy{background:var(--acc);position:relative}
.tl-d.hoy .dn,.tl-d.hoy .ds{color:#fff}
.tl-d.hoy .dn{font-weight:700}
/* Entre persona y persona va una franja, no una linea: con treinta
   carriles seguidos las barras de uno se confundian con las del
   siguiente. La franja se ve de lado a lado y corta la lectura. */
.tl-fila{display:flex;min-height:66px;border-bottom:9px solid var(--bg)}
.tl-fila:hover .tl-track{background:color-mix(in srgb, var(--acc) 3%, transparent)}
.tl-fila:hover .tl-per{background:var(--bg3)}
.tl-track{position:relative;flex:0 0 auto}
.tl-wkbg{position:absolute;top:0;bottom:0;background:var(--bg3);opacity:.55}
/* La columna de hoy, marcada de arriba abajo. Antes era una franja
   al 45% de opacidad que apenas se distinguía del fin de semana:
   en un timeline de dos semanas, ubicarse en el día actual es lo
   primero que hace cualquiera. Las líneas laterales son las que la
   hacen leer como columna y no como un sombreado. */
.tl-hoybg{position:absolute;top:0;bottom:0;
  background:color-mix(in srgb, var(--acc) 14%, transparent);
  border-left:1px solid color-mix(in srgb, var(--acc) 55%, transparent);
  border-right:1px solid color-mix(in srgb, var(--acc) 55%, transparent);
  pointer-events:none}
body.light .tl-hoybg{background:color-mix(in srgb, var(--acc) 9%, transparent)}



/* ============================================================
   DARDO — identidad
   Las imágenes viven en /img/dardo/. Si todavía no están, el
   avatar cae a un marcador violeta y nada se rompe.
   ============================================================ */
.dardo-av{width:38px;height:38px;border-radius:50%;flex:0 0 auto;position:relative;overflow:hidden}
/* Los filetes blancos que se ven en los bordes vienen de las
   imágenes: el PNG tiene fondo blanco pegado a la silueta, no
   transparencia limpia. Desde el CSS no se puede arreglar —probar
   con cover lo empeora, porque agranda ese borde— hay que rehacer
   el recorte de los archivos en img/dardo/. */
.dardo-av::after{content:'';position:absolute;inset:0;background:url('/img/dardo/cara.png') center/contain no-repeat}
.dardo-av[data-dardo="saludando"]::after{background-image:url('/img/dardo/saludando.png')}
.dardo-av[data-dardo="contento"]::after{background-image:url('/img/dardo/contento.png')}
.dardo-av[data-dardo="pensando"]::after{background-image:url('/img/dardo/pensando.png')}
.dardo-av[data-dardo="sorprendido"]::after{background-image:url('/img/dardo/sorprendido.png')}
.dardo-av[data-dardo="dormido"]::after{background-image:url('/img/dardo/dormido.png')}
.dardo-av.grande{width:62px;height:62px}
.dardo-av.top{width:34px;height:34px;cursor:pointer;transition:transform .15s}
.dardo-av.top:hover{transform:scale(1.08)}
.dardo-av.chico{width:28px;height:28px;border-width:1px}
.dardo-hola{display:flex;align-items:center;gap:14px;margin-bottom:1.4rem}

/* ------------------------------------------------------------
   ESTADO VACÍO

   La cuadrícula de fondo sugiere el tablero que va a aparecer:
   el espacio deja de leerse como un error y pasa a leerse como
   algo por completar. Se desvanece hacia los bordes con una
   máscara radial para que no compita con el personaje.

   text-wrap:balance reparte las líneas parejo en vez de dejar una
   palabra suelta al final, que era lo que pasaba con "tareas."
   ------------------------------------------------------------ */
.dardo-vacio{position:relative;display:flex;flex-direction:column;align-items:center;
             gap:16px;padding:56px 24px;text-align:center;overflow:hidden}
.dardo-vacio::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, var(--border) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 42px);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 78%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 78%)}
.dardo-vacio > *{position:relative}

.dardo-cuerpo{width:168px;height:168px;background:url('/img/dardo/cuerpo.png') center/contain no-repeat;opacity:.95}
.dardo-cuerpo[data-dardo="dormido"]{background-image:url('/img/dardo/dormido-cuerpo.png')}
.dardo-cuerpo[data-dardo="sorprendido"]{background-image:url('/img/dardo/sorprendido-cuerpo.png')}

/* Dos niveles: la frase que orienta, grande, y el detalle abajo. */
.dardo-dice{font-size:19px;font-weight:600;color:var(--text);max-width:30ch;
            line-height:1.35;letter-spacing:-.2px;text-wrap:balance}
.dardo-dice b{color:var(--acc);font-weight:600}
.dardo-sub{font-size:13px;color:var(--text3);max-width:44ch;line-height:1.6;
           text-wrap:balance;margin-top:-6px}

/* Globo de Dardo: se usa en ayudas y confirmaciones */
.dardo-globo{display:flex;align-items:flex-start;gap:11px;background:var(--acc3);border:0.5px solid var(--acc);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.dardo-globo .txt{font-size:12.5px;line-height:1.5;color:var(--acc2)}
body.light .dardo-globo{background:var(--acc3)}
body.light .dardo-globo .txt{color:var(--acc2)}

/* Campanita */
.camp{position:relative;width:34px;height:34px;border-radius:9px;border:0.5px solid var(--border2);background:var(--bg3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px}
.camp:hover{border-color:var(--acc)}
.camp-n{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:9px;background:var(--rd);color:#fff;font-family:var(--m);font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
.camp-panel{position:absolute;top:46px;right:0;width:352px;max-width:92vw;background:var(--card);border:0.5px solid var(--border2);border-radius:14px;box-shadow:0 14px 44px rgba(0,0,0,.32);z-index:200;display:none;overflow:hidden}
.camp-panel.open{display:block}
.camp-h{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:0.5px solid var(--border)}
.camp-ht{font-size:13px;font-weight:700;line-height:1.25}
.camp-hs{font-size:11px;color:var(--text3)}
.camp-list{max-height:370px;overflow-y:auto}
.camp-it{display:flex;gap:10px;padding:11px 15px;border-bottom:0.5px solid var(--border);cursor:pointer;align-items:flex-start}
.camp-it:hover{background:var(--bg3)}
.camp-it.nueva{background:var(--acc3)}
body.light .camp-it.nueva{background:#f4f2fe}
.camp-tx{font-size:12.5px;line-height:1.45;flex:1}
.camp-ru{font-size:10.5px;color:var(--text3);font-family:var(--m);margin-top:3px}
.camp-fe{font-size:10px;color:var(--text3);font-family:var(--m);flex:0 0 auto}
.camp-f{padding:9px 15px;display:flex;gap:8px;justify-content:space-between;align-items:center}
.camp-lnk{background:none;border:0;color:var(--acc2);font-family:var(--f);font-size:11.5px;cursor:pointer;padding:0}
body.light .camp-lnk{color:var(--acc2)}
.camp-lnk:hover{text-decoration:underline}


.dardo-stk{display:inline-block;width:21px;height:21px;background-size:contain;background-position:center;background-repeat:no-repeat;vertical-align:-4px;margin-right:5px}
.dardo-stk.chico{width:13px;height:13px;vertical-align:-2px;margin-right:3px}
.pl-emo-b{position:relative;transition:transform .12s,border-color .12s}
.pl-emo-b:hover{transform:scale(1.12);border-color:var(--acc)}
.pl-emo-b.dardo{width:46px;height:46px;border-radius:10px;background:transparent;border-color:var(--border2)}
.pl-emo-b.dardo.on,.pl-emo-b.on{background:var(--acc3);border-color:var(--acc);border-width:2px}
.pl-emo-b.on::after{content:'✓';position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:50%;background:var(--gr);color:#fff;font-size:8px;line-height:13px;text-align:center;font-weight:700}
body.light .pl-emo-b.dardo.on,body.light .pl-emo-b.on{background:#e6e3fb}
.pl-emo-b.dardo .dardo-stk{margin:0;width:38px;height:38px;vertical-align:middle}
.pl-emo-sep{display:block;width:100%;height:0;border-top:0.5px dashed var(--border);margin:9px 0 5px}

.pl-emo-nom{font-size:11.5px;color:var(--text3);margin-top:7px;display:flex;align-items:center;gap:5px}
.pl-emo-nom b{color:var(--text2);font-weight:600}

.pl-ins{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:7px}
.pl-ins-l{font-size:10px;color:var(--text3);font-family:var(--m);letter-spacing:.5px;margin-right:2px}
.pl-ins-b{width:30px;height:30px;border-radius:7px;border:0.5px solid var(--border2);background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.pl-ins-b:hover{border-color:var(--acc);transform:scale(1.1)}
.pl-ins-b .dardo-stk{margin:0;width:22px;height:22px}
.pl-rich{min-height:92px;max-height:200px;overflow-y:auto;white-space:pre-wrap;line-height:1.6;text-align:left}
.pl-rich:empty::before{content:'Escribí el brief y pegá los links del Drive';color:var(--text3)}
.pl-rich:focus{outline:none;border-color:var(--acc)}
.pl-rich .dardo-stk{vertical-align:-5px;margin:0 2px}


/* --- Centro de ayuda de Dardo --- */
.ayuda-panel{position:fixed;top:0;right:0;bottom:0;width:430px;max-width:96vw;background:var(--card);border-left:0.5px solid var(--border2);z-index:9500;display:flex;flex-direction:column;transform:translateX(102%);transition:transform .26s cubic-bezier(.22,1,.36,1)}
.ayuda-panel.open{transform:translateX(0);box-shadow:-18px 0 48px rgba(0,0,0,.28)}
.ayuda-fondo{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:9400;opacity:0;pointer-events:none;transition:opacity .2s}
.ayuda-panel.open ~ .ayuda-fondo{opacity:1;pointer-events:auto}
.ay-h{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:0.5px solid var(--border)}
.ay-ht{font-size:15px;font-weight:700;line-height:1.25}
.ay-hs{font-size:11.5px;color:var(--text3)}
.ay-close{background:none;border:0;color:var(--text3);font-size:16px;cursor:pointer;padding:4px 6px;border-radius:6px}
.ay-close:hover{background:var(--bg3);color:var(--text)}
.ay-search{padding:12px 18px;border-bottom:0.5px solid var(--border)}
.ay-body{flex:1;overflow-y:auto;padding:6px 18px 18px}
.ay-g{margin-top:16px}
.ay-gt{display:flex;align-items:center;gap:8px;font-size:11px;font-family:var(--m);font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--text3);margin-bottom:7px}
.ay-i{border-bottom:0.5px solid var(--border)}
.ay-p{display:flex;gap:10px;align-items:flex-start;padding:11px 0;cursor:pointer;font-size:13px;font-weight:600;line-height:1.4}
.ay-p:hover{color:var(--acc2)}
body.light .ay-p:hover{color:var(--acc2)}
.ay-x{margin-left:auto;color:var(--text3);font-family:var(--m);font-size:15px;line-height:1}
.ay-r{display:none;font-size:12.5px;line-height:1.65;color:var(--text2);padding:0 0 13px 0}
.ay-i.on .ay-r{display:block}
.ay-r b{color:var(--text);font-weight:600}
.ay-f{padding:12px 18px;border-top:0.5px solid var(--border);font-size:11px;color:var(--text3);text-align:center}
#ayuda-btn{font-family:var(--m);font-weight:700;font-size:15px;color:var(--text2)}
#ayuda-btn:hover{color:var(--acc2);border-color:var(--acc)}
@media(max-width:640px){.ayuda-panel{width:100vw}}

/* --- Stickers más grandes --- */
.dardo-stk{width:30px;height:30px;vertical-align:-8px;margin-right:6px}
.dardo-stk.chico{width:17px;height:17px;vertical-align:-4px;margin-right:4px}
.pl-rich .dardo-stk{width:32px;height:32px;vertical-align:-9px;margin:0 3px}
.pl-ins-b{width:38px;height:38px}
.pl-ins-b .dardo-stk{margin:0;width:30px;height:30px;vertical-align:middle}
.pl-emo-nom .dardo-stk{width:24px;height:24px;vertical-align:-6px}

.ay-tema{margin-top:7px;font-size:10px;font-family:var(--m);color:var(--text3);letter-spacing:.5px;text-transform:uppercase}

/* --- Equipo: tarjetas que aguantan nombres largos --- */
.eq-top{align-items:flex-start;gap:9px}
.eq-id{flex:1;min-width:0}
.eq-nom{font-size:13.5px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq-sub{font-size:10.5px;color:var(--text3);font-family:var(--m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq-av{flex:0 0 30px;width:30px;height:30px;font-size:10px}
.eq-badge{flex:0 0 auto;white-space:nowrap;align-self:flex-start}
.eq-nums{gap:6px}
.eq-nl{font-size:8.5px;letter-spacing:.3px;white-space:nowrap}
.eq-olv{font-size:10.5px;color:var(--text3);font-family:var(--m);background:var(--bg3);border-radius:5px;padding:4px 8px;margin-bottom:8px;cursor:help}
/* Timeline: el nombre tampoco puede empujar la columna */
.tl-pn{max-width:120px}


/* --- Equipo: bloque de tarjetas vencidas para cerrar --- */
.eq-cerrar{margin-top:9px;padding-top:8px;border-top:0.5px dashed var(--border2)}
.eq-cerrar-h{font-size:10.5px;font-family:var(--m);font-weight:700;letter-spacing:.3px;color:var(--rd2);background:color-mix(in srgb, var(--rd) 12%, transparent);border-radius:5px;padding:4px 8px;margin-bottom:5px;cursor:help}
body:not(.light) .eq-cerrar-h{color:var(--rd2)}
.eq-cerrar .eq-t{opacity:.75}
.eq-cerrar .eq-t:hover{opacity:1}


/* --- Mi trabajo: bloque de vencidas --- */
.mw-cerrar-h{font-size:11px;font-family:var(--m);font-weight:700;letter-spacing:.3px;color:var(--rd2);background:color-mix(in srgb, var(--rd) 12%, transparent);border-radius:7px;padding:7px 11px;margin:16px 0 8px;cursor:help;display:inline-block}
body:not(.light) .mw-cerrar-h{color:var(--rd2)}
.mw-vencidas .mw-row{opacity:.72}
.mw-vencidas .mw-row:hover{opacity:1}


/* --- Equipo: vencidas colapsadas --- */
.eq-cerrar-h{display:flex;align-items:center;gap:6px;font-size:10.5px;font-family:var(--m);font-weight:600;letter-spacing:.2px;color:var(--text3);background:var(--bg3);border-radius:5px;padding:5px 9px;margin-bottom:0;cursor:pointer;user-select:none}
.eq-cerrar-h:hover{color:var(--text2)}
.eq-cerrar-h .ca{font-size:8px;transition:transform .15s;display:inline-block}
.eq-cerrar-h.open .ca{transform:rotate(90deg)}
.eq-cerrar-l{display:none;margin-top:4px}
.eq-cerrar-l.open{display:block}
.eq-cerrar .eq-t{opacity:.5}
.eq-cerrar .eq-t:hover{opacity:.9}
.eq-cerrar .eq-t .n{color:var(--text3)}
.eq-cerrar .eq-t .f{color:var(--text3)!important;background:none}
/* En validación (decisión 38): azul tranquilo, no rojo de alarma. */
.eq-val .eq-cerrar-h{color:var(--bl2);background:color-mix(in srgb, var(--bl) 10%, transparent)}
.eq-revisar{margin-top:7px;font-size:11px;font-family:var(--m);color:var(--am2);
  background:color-mix(in srgb, var(--am) 12%, transparent);border-radius:5px;
  padding:5px 9px;cursor:pointer;line-height:1.45}
.eq-revisar:hover{background:color-mix(in srgb, var(--am) 20%, transparent)}
.eq-aus{color:var(--bl2);font-weight:600}
/* Horas visibles en el timeline (decisión 38) */
.fhint{font-size:11px;color:var(--text3);margin-top:4px;line-height:1.5}
.tl-hs{flex:0 0 auto;font-family:var(--m);font-size:9.5px;font-weight:700;
  background:rgba(0,0,0,.22);color:#fff;border-radius:4px;padding:1px 5px;margin-left:4px}
.tl-bar:not(.f-activo) .tl-hs{background:color-mix(in srgb, var(--c) 30%, transparent);color:var(--text2)}
.tl-ritmo{display:inline-block;font-family:var(--m);font-size:9px;font-weight:700;
  border-radius:4px;padding:1px 5px;margin-left:2px;vertical-align:1px}
.tl-ritmo.n-desbordado{background:color-mix(in srgb, var(--rd) 18%, transparent);color:var(--rd2)}
.tl-ritmo.n-cargado{background:color-mix(in srgb, var(--am) 18%, transparent);color:var(--am2)}
.tl-ritmo.n-normal{background:color-mix(in srgb, var(--acc) 18%, transparent);color:var(--acc2)}
.tl-ritmo.n-disponible,.tl-ritmo.n-libre{background:color-mix(in srgb, var(--gr) 16%, transparent);color:var(--gr2)}
/* --- Gestión de personas --- */
.gp-row{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:0.5px solid var(--border)}
.gp-row.baja{opacity:.5}
.gp-n{font-size:13px;font-weight:600;line-height:1.2}
.gp-s{font-size:10.5px;color:var(--text3);font-family:var(--m)}
.gp-list{max-height:390px;overflow-y:auto}


/* --- Gestión de personas: barra de acciones en lote --- */
.gp-acc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:8px;background:var(--bg3);margin-bottom:8px}
.gp-acc.on{background:var(--acc3);border:0.5px solid var(--acc)}
.gp-perfil{font-size:10.5px;font-family:var(--m);color:var(--text3);background:var(--bg3);padding:3px 8px;border-radius:5px;white-space:nowrap;flex:0 0 auto}
.gp-row{gap:9px}


/* --- Tutorial --- */
.tuto-wrap{position:fixed;inset:0;background:rgba(10,8,24,.55);backdrop-filter:blur(3px);z-index:9500;display:none;align-items:center;justify-content:center;padding:20px}
.tuto-wrap.open{display:flex}
.tuto-card{background:var(--card);border:0.5px solid var(--border2);border-radius:18px;padding:30px 30px 22px;max-width:440px;width:100%;text-align:center;box-shadow:0 22px 60px rgba(0,0,0,.4)}
.tuto-cara{width:96px;height:96px;border-radius:50%;margin:0 auto 16px;background:var(--acc3) url('/img/dardo/saludando.png') center/cover no-repeat;border:2px solid var(--acc)}
.tuto-cara[data-dardo="contento"]{background-image:url('/img/dardo/contento.png')}
.tuto-cara[data-dardo="pensando"]{background-image:url('/img/dardo/pensando.png')}
.tuto-cara[data-dardo="sorprendido"]{background-image:url('/img/dardo/sorprendido.png')}
.tuto-t{font-size:20px;font-weight:700;line-height:1.25;margin-bottom:10px}
.tuto-x{font-size:14px;line-height:1.6;color:var(--text2);margin-bottom:20px}
.tuto-x b{color:var(--text)}
.tuto-dots{display:flex;gap:6px;justify-content:center;margin-bottom:18px}
.tuto-dots span{width:7px;height:7px;border-radius:50%;background:var(--border2)}
.tuto-dots span.on{background:var(--acc);width:20px;border-radius:4px}
.tuto-btns{display:flex;align-items:center;justify-content:space-between;gap:10px}


/* --- Equipo: cinco niveles --- */
.eq-card.desbordado{border-left-color:var(--rd)}
.eq-card.cargado{border-left-color:var(--am)}
.eq-card.normal{border-left-color:var(--bl)}
.eq-card.disponible{border-left-color:var(--gr)}
.eq-card.libre{border-left-color:var(--border2)}
.eq-badge.desbordado{color:var(--rd2)}
.eq-badge.cargado{color:var(--am2)}
.eq-badge.normal{color:var(--bl2)}
.eq-badge.disponible{color:var(--gr2)}
.eq-badge.libre{background:var(--bg3);color:var(--text3)}
body:not(.light) .eq-badge.desbordado{color:var(--rd2)}
body:not(.light) .eq-badge.cargado{color:var(--am2)}
body:not(.light) .eq-badge.normal{background:color-mix(in srgb, var(--bl) 22%, transparent);color:#9ecbff}
body:not(.light) .eq-badge.disponible{color:var(--gr2)}
.eq-badge{cursor:help}


/* --- Comentarios --- */
.cm-list{max-height:280px;overflow-y:auto;margin-bottom:12px}
.cm-it{display:flex;gap:9px;padding:9px 0;border-bottom:0.5px solid var(--border)}
.cm-it.resp{margin-left:32px;border-left:2px solid var(--border2);padding-left:11px;border-bottom:0}
.cm-cuerpo{flex:1;min-width:0}
.cm-cab{display:flex;align-items:center;gap:9px;margin-bottom:3px}
.cm-n{font-size:12.5px;font-weight:700}
.cm-f{font-size:10.5px;color:var(--text3);font-family:var(--m)}
.cm-acc{background:none;border:0;color:var(--text3);font-family:var(--f);font-size:11px;cursor:pointer;padding:0}
.cm-acc:hover{color:var(--acc2);text-decoration:underline}
.cm-acc.del:hover{color:var(--rd)}
.cm-tx{font-size:13px;line-height:1.5;color:var(--text2);word-break:break-word}
.cm-tx a{color:var(--acc2);font-weight:600}
body:not(.light) .cm-tx a{color:var(--acc2);font-weight:500}
.cm-nuevo{border-top:0.5px solid var(--border);padding-top:11px}
.cm-resp{align-items:center;justify-content:space-between;gap:10px;background:var(--bg3);border-radius:6px;padding:5px 10px;margin-bottom:7px;font-size:11.5px;color:var(--text2)}


/* --- Tutorial: no volver a mostrar --- */
.tuto-nunca{margin-top:16px;padding-top:13px;border-top:0.5px solid var(--border);text-align:left}
.tuto-nunca label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;color:var(--text2)}
.tuto-nunca input{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}
.tuto-nunca .ay{display:block;font-size:11px;color:var(--text3);margin-top:5px;padding-left:23px;line-height:1.4}


/* --- Cobros --- */
.ag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:9px}
.ag-c{background:var(--card);border:0.5px solid var(--border);border-radius:var(--r);padding:11px 13px;border-top:3px solid var(--gr)}
.ag-c.a1{border-top-color:var(--am)}
.ag-c.a2{border-top-color:#e8863a}
.ag-c.a3{border-top-color:var(--rd)}
.ag-c.a4{border-top-color:#8e1f1f}
.ag-c.tot{border-top-color:var(--acc);background:var(--bg3)}
.ag-n{font-family:var(--m);font-size:16px;font-weight:700;line-height:1.2}
.ag-l{font-size:9.5px;color:var(--text3);font-family:var(--m);letter-spacing:.4px;margin-top:3px}
.cb-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:0.5px solid var(--border);font-size:12.5px;cursor:pointer}
.cb-row:hover{background:var(--bg3)}
/* La fila seleccionada: en modo claro un fondo suave con borde,
   no el violeta oscuro de --acc3, que dejaba el texto ilegible. */
.cb-row.sel{background:var(--acc3);box-shadow:inset 3px 0 0 var(--acc)}
.cb-row.sel,.cb-row.sel b,.cb-row.sel .cb-imp,.cb-row.sel .cb-fal{color:#2a2440}
.cb-row.sel .cb-num,.cb-row.sel .sub{color:var(--text3)}
body:not(.light) .cb-row.sel{background:var(--acc3)}
body:not(.light) .cb-row.sel,
body:not(.light) .cb-row.sel b,
body:not(.light) .cb-row.sel .cb-imp,
body:not(.light) .cb-row.sel .cb-fal{color:var(--text)}
body:not(.light) .cb-row.sel .cb-num,
body:not(.light) .cb-row.sel .sub{color:var(--text3)}
.cb-num{font-family:var(--m);font-size:11px;color:var(--text2);flex:0 0 150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-cli{flex:1;min-width:0}
.cb-cli b{font-weight:600}
.cb-cli .sub{font-size:10.5px;color:var(--text3);font-family:var(--m)}
.cb-imp{font-family:var(--m);text-align:right;flex:0 0 118px;font-weight:600}
.cb-fal{font-family:var(--m);text-align:right;flex:0 0 118px;color:var(--text2)}
.cb-est{flex:0 0 96px;text-align:right}
.cb-bx{display:inline-block;padding:3px 8px;border-radius:4px;font-size:9.5px;font-family:var(--m);font-weight:700;letter-spacing:.3px}
.cb-bx.pendiente{background:var(--bg3);color:var(--text3)}
.cb-bx.parcial{background:color-mix(in srgb, var(--am) 20%, transparent);color:var(--am2)}
.cb-bx.vencida{background:color-mix(in srgb, var(--rd) 18%, transparent);color:var(--rd2)}
.cb-bx.cobrada{background:color-mix(in srgb, var(--gr) 16%, transparent);color:var(--gr2)}
.cb-bx.anulada{background:var(--bg3);color:var(--text3);text-decoration:line-through}
.cb-bx.nc{background:var(--bg3);color:var(--text3);font-style:italic}
body:not(.light) .cb-bx.parcial{color:var(--am2)}
body:not(.light) .cb-bx.vencida{color:var(--rd2)}
body:not(.light) .cb-bx.cobrada{color:var(--gr2)}
.cb-head{display:flex;gap:10px;padding:0 4px 8px;font-size:9.5px;font-family:var(--m);color:var(--text3);letter-spacing:.4px;border-bottom:0.5px solid var(--border)}
.cu-row{display:flex;align-items:center;gap:11px;padding:7px 0;font-size:12.5px}
.cu-n{flex:0 0 140px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cu-bar{flex:1;height:8px;border-radius:4px;background:var(--bg3);overflow:hidden}
.cu-bar i{display:block;height:100%;background:var(--acc);border-radius:4px}
.cu-pct{font-family:var(--m);font-size:11px;flex:0 0 46px;text-align:right}
.cu-mto{font-family:var(--m);font-size:11px;color:var(--text3);flex:0 0 118px;text-align:right}
.cb-sel-bar{position:sticky;bottom:0;background:var(--acc3);border:0.5px solid var(--acc);border-radius:10px;padding:10px 14px;margin-top:10px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#2a2440}
.cb-sel-bar .ag-n{color:var(--acc2)}
body:not(.light) .cb-sel-bar{background:var(--acc3);color:var(--text)}
body:not(.light) .cb-sel-bar .ag-n{color:var(--acc2)}


/* --- Cobros: selector de moneda --- */
.mon-tog{display:inline-flex;border:0.5px solid var(--border2);border-radius:7px;overflow:hidden}
.mon-tog button{background:var(--bg3);border:0;color:var(--text3);font-family:var(--m);font-size:11px;font-weight:700;padding:7px 11px;cursor:pointer}
.mon-tog button.on{background:var(--acc);color:#fff}
.mon-tog button:not(.on):hover{color:var(--text)}


/* --- Cobros registrados --- */
.co-row{display:flex;align-items:center;gap:11px;padding:9px 4px;border-bottom:0.5px solid var(--border)}
.co-row:hover{background:var(--bg3)}
.co-f{flex:0 0 52px;font-family:var(--m);font-size:13px;font-weight:700;line-height:1.1;text-align:center}
.co-a{font-size:9.5px;color:var(--text3);font-weight:400}
.co-i{font-family:var(--m);font-weight:700;text-align:right;flex:0 0 130px}


/* --- Timeline: el color es del cliente, la fase es la intensidad --- */
.tl-bar{position:absolute;display:flex;align-items:center;gap:8px;
        height:46px;border-radius:9px;padding:0 12px;cursor:pointer;
        overflow:hidden;z-index:1;border:1px solid transparent;
        background:var(--c);color:#fff}
.tl-bar .tl-ic{font-size:14px;line-height:1;flex:0 0 auto}
.tl-bar .tl-txt{display:flex;flex-direction:column;justify-content:center;
                overflow:hidden;flex:1;min-width:0;gap:1px}
.tl-bar .tl-bt{font-size:12.5px;font-weight:600;line-height:1.2;color:inherit;
               overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-bar .tl-bs{font-size:9.5px;font-family:var(--m);letter-spacing:.3px;
               line-height:1.2;color:inherit;opacity:.72;
               overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}
.tl-bar.mini{padding:0 6px;justify-content:center;gap:0}
.tl-bar.corta .tl-bs{display:none}
/* Quienes participan, a la derecha de la barra, como en Toggl. La
   barra ya esta en el carril de una persona; los circulitos muestran
   con quien comparte la tarea. */
.tl-bar .tl-avs{display:flex;align-items:center;flex:0 0 auto;padding-left:8px}
.tl-bar .tl-avs .pl-av{width:20px;height:20px;font-size:8px;border-color:rgba(255,255,255,.85)}
.tl-bar.f-esperando .tl-avs .pl-av,.tl-bar.f-cerrado .tl-avs .pl-av{border-color:var(--card)}
.tl-bar.corta .tl-avs{display:none}

/* Activo: está de tu lado. Color pleno. */
.tl-bar.f-activo{background:var(--c);border-color:var(--c);color:#fff}

/* Esperando validación: en manos de otro. Fondo suave, texto oscuro. */
.tl-bar.f-esperando{background:color-mix(in srgb, var(--c) 13%, #fff);
                    border-color:color-mix(in srgb, var(--c) 42%, transparent);color:#2a2440}
.tl-bar.f-esperando .tl-bs{opacity:.6}
body:not(.light) .tl-bar.f-esperando{background:color-mix(in srgb, var(--c) 24%, #14131f);color:var(--text)}

/* Cerrado: terminado. Rayado en diagonal, sin peso visual. */
.tl-bar.f-cerrado{background:repeating-linear-gradient(45deg,
     color-mix(in srgb, var(--c) 15%, #fff) 0 6px, #fff 6px 12px);
   border-color:color-mix(in srgb, var(--c) 24%, transparent);color:var(--text3)}
body:not(.light) .tl-bar.f-cerrado{background:repeating-linear-gradient(45deg,
     color-mix(in srgb, var(--c) 20%, #14131f) 0 6px, #14131f 6px 12px);color:var(--text3)}
.tl-bar.f-cerrado .tl-bt{font-weight:500}
.tl-bar.f-cerrado .tl-ic{opacity:.5}

/* Lo que no esta en To-do ni In progress pierde el relleno de color
   y queda con fondo apagado y borde de su color: se distingue de un
   vistazo lo que sigue vivo, sin perder legibilidad.

   Osvaldo pidio #1b1730, que es el fondo del modo oscuro. Se usa esa
   idea pero tomada del tema, para que en modo claro no aparezca un
   bloque negro. */
.tl-bar:not(.f-activo){
  background:var(--bg2);
  border:1.5px solid var(--c);
  color:var(--text)}
.tl-bar:not(.f-activo) .tl-bs{color:var(--text3)}
.tl-bar:not(.f-activo):hover{background:color-mix(in srgb, var(--c) 14%, var(--bg2))}

.tl-bar.venc{box-shadow:inset 0 0 0 2px var(--rd)}
.tl-bar:hover{filter:brightness(1.05);z-index:5;box-shadow:0 3px 10px rgba(0,0,0,.18)}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .tl-bar.f-esperando{background:var(--bg3);border-color:var(--border2);color:var(--text)}
  .tl-bar.f-cerrado{background:var(--bg3);opacity:.55;color:var(--text3)}
}

/* --- Tablero: íconos de estado más presentes --- */
.pl-colh .ic{font-size:16px;line-height:1}


/* --- Cash flow --- */
.cf-cuentas{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-bottom:14px}
.cf-cta{background:var(--card);border:0.5px solid var(--border);border-radius:var(--r);padding:13px 15px;cursor:pointer;border-left:3px solid var(--acc);transition:.12s}
.cf-cta:hover{border-color:var(--acc);transform:translateY(-1px)}
.cf-cta.on{border-color:var(--acc);background:var(--acc3)}

/* Estos usan --acc3 como fondo sin fijar color de texto propio, así
   que heredan --text. Con --acc3 ahora claro en modo claro y oscuro
   en modo oscuro, funcionan solos: se deja el tinte apenas para que
   el elemento activo se distinga del resto de la tarjeta. */
body.light .cf-cta.on,
body.light .tf-total,
body.light .crono-box,
body.light .camp-it.nueva,
body.light .gp-acc.on{background:var(--acc3)}
.cf-cta.rojo{border-left-color:var(--rd)}
.cf-cta.total{border-left-color:var(--gr);background:var(--bg3)}
.cf-cn{font-size:12px;font-weight:700;line-height:1.2}
.cf-ce{font-size:10px;color:var(--text3);font-family:var(--m);margin-top:2px}
.cf-cs{font-size:19px;font-weight:700;font-family:var(--m);margin-top:8px;line-height:1.1}
.cf-cu{font-size:11px;color:var(--text3);font-family:var(--m);margin-top:2px}
.cf-viejo{margin-top:5px;font-size:10.5px;font-weight:600;color:var(--am2);cursor:pointer}
.cf-viejo:hover{text-decoration:underline}
.cf-cw{font-size:10.5px;color:var(--rd2);font-family:var(--m);margin-top:6px;font-weight:600}
/* Mismo criterio que .alert: fondo limpio y el color en la barra. */
.cf-al{background:var(--bg2);border:0.5px solid var(--border);
  border-left:3px solid var(--rd);border-radius:var(--r);
  padding:13px 16px;margin-bottom:14px}
.cf-al-t{font-size:13px;font-weight:700;color:var(--rd2);margin-bottom:5px}
body:not(.light) .cf-al-t{color:var(--rd2)}
.cf-al-x{font-size:12px;color:var(--text2);line-height:1.55}
.cf-bars{display:flex;align-items:flex-end;gap:3px;height:130px;padding:0 2px;margin-bottom:6px;position:relative}
.cf-bw{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative;cursor:pointer}
.cf-bw:hover .cf-b{filter:brightness(1.15)}
.cf-b{position:absolute;left:0;right:0;border-radius:3px 3px 0 0;min-height:2px;background:var(--acc)}
.cf-b.neg{background:var(--rd);border-radius:0 0 3px 3px}
.cf-zero{position:absolute;left:0;right:0;height:1px;background:var(--border2);z-index:1}
.cf-xs{display:flex;gap:3px;padding:0 2px}
.cf-x{flex:1;font-size:8.5px;color:var(--text3);font-family:var(--m);text-align:center;overflow:hidden;white-space:nowrap}
.cf-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:0.5px solid var(--border);font-size:12.5px;cursor:pointer}
.cf-row:hover{background:var(--bg3)}
.cf-row.neg{background:color-mix(in srgb, var(--rd) 7%, transparent)}
.cf-row.abierta{background:var(--bg3)}
.cf-sem{flex:0 0 92px;font-family:var(--m);font-size:11.5px}
.cf-in{flex:1;text-align:right;font-family:var(--m);color:var(--gr2)}
.cf-out{flex:1;text-align:right;font-family:var(--m);color:var(--rd2)}
.cf-net{flex:1;text-align:right;font-family:var(--m)}
.cf-sal{flex:0 0 130px;text-align:right;font-family:var(--m);font-weight:700}
.cf-sal.neg{color:var(--rd)}
.cf-det{background:var(--bg3);border-radius:8px;padding:9px 13px;margin:2px 0 8px}

/* Los chips de vista se distinguen de un vistazo: el activo va
   relleno, el inactivo apenas dibujado. Con .eq-chip.on sólo
   cambiaba el grosor del borde y no se notaba cuál estaba puesto. */
.cf-vchip{display:inline-flex;align-items:center;padding:6px 14px;border-radius:20px;
          border:1px solid var(--border2);background:transparent;color:var(--text3);
          cursor:pointer;font-size:12px;font-weight:600;transition:.12s}
.cf-vchip:hover{border-color:var(--acc);color:var(--text2)}
.cf-vchip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.cf-vchip.off{opacity:.4;cursor:not-allowed}
.cf-vchip.off:hover{border-color:var(--border2);color:var(--text3)}

/* Los potenciales se ven distinto a propósito: son supuestos, no
   plata. Atenuados, en itálica y con un punto violeta adelante. */
.cf-mrow.pot .cf-mt,.cf-mrow.pot .cf-mi{opacity:.62;font-style:italic}
.cf-mrow.pot .cf-mt::before{content:'○ ';color:var(--acc);font-style:normal}
.cf-mrow.pot .cf-ms{opacity:.72}
.cf-potx{margin-left:8px;color:var(--text3);cursor:pointer;font-size:11px;font-style:normal}
.cf-potx:hover{color:var(--rd2)}

.cf-vacio{text-align:center;padding:34px 20px;background:var(--bg3);border-radius:var(--r);margin-top:12px}
.cf-potbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
           background:var(--bg2);border:0.5px solid var(--border);
           border-left:3px solid var(--acc);
           border-radius:var(--r);padding:10px 14px;margin-top:12px;font-size:12.5px}
.cf-potn{font-weight:700;color:var(--acc2)}
.cf-potm{font-family:var(--m);font-weight:600}
.cf-potm.neg{color:var(--rd2)}
.cf-potm.pos{color:var(--gr2)}

.cf-al-cerrar{display:inline-block;margin-top:9px;font-size:11.5px;color:var(--text3);
              cursor:pointer;text-decoration:underline}
.cf-al-cerrar:hover{color:var(--text2)}

/* Vista por movimiento: una fila por pago, con el saldo corriendo.
   Es el formato del extracto bancario y de la planilla. */
.cf-mrow{display:flex;align-items:center;gap:10px;padding:7px 13px;
         border-bottom:0.5px solid var(--border);font-size:12.5px}
.cf-mrow:hover{background:var(--bg3)}
.cf-mrow.inicial{font-weight:600;border-bottom:1px solid var(--border2)}
.cf-mf{flex:0 0 62px;font-family:var(--m);font-size:11.5px;color:var(--text3)}
.cf-mt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-mi{flex:0 0 130px;text-align:right;font-family:var(--m);font-size:12px}
.cf-mi.pos{color:var(--gr2)}
.cf-mi.neg{color:var(--rd2)}
.cf-ms{flex:0 0 130px;text-align:right;font-family:var(--m);font-weight:600}
.cf-ms.neg{color:var(--rd)}
.cf-mmes{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
         color:var(--acc2);padding:12px 13px 5px}
.cf-mov{display:flex;gap:10px;padding:4px 0;font-size:11.5px;border-bottom:0.5px solid var(--border)}
.cf-mov:last-child{border-bottom:0}
.cf-mov .d{flex:0 0 46px;font-family:var(--m);color:var(--text3);font-size:10.5px}
.cf-mov .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-mov .i{flex:0 0 118px;text-align:right;font-family:var(--m)}
.cf-mov .i.pos{color:var(--gr2)}
.cf-mov .i.neg{color:var(--rd2)}
.cf-head{display:flex;gap:10px;padding:0 4px 7px;font-size:9.5px;font-family:var(--m);color:var(--text3);letter-spacing:.4px;border-bottom:0.5px solid var(--border)}


/* --- Menú agrupado ---
   Catorce secciones al mismo nivel obligaban a hacer scroll y no
   dejaban ver todo de un pantallazo. Agrupadas por área quedan
   cuatro elementos y cada grupo se despliega al hacer clic. */
.tgrupo{position:relative}
.tnav.tg{display:flex;align-items:center;gap:5px}
.tnav.tg i{font-style:normal;font-size:9px;opacity:.5;transition:transform .15s}
.tgrupo.abierto .tnav.tg i{transform:rotate(180deg);opacity:.9}
.tgrupo.abierto .tnav.tg{background:var(--bg3);color:var(--text)}

.tmenu{position:absolute;top:calc(100% + 7px);left:0;z-index:400;min-width:196px;
       background:var(--card);border:0.5px solid var(--border2);border-radius:11px;
       padding:6px;box-shadow:0 10px 32px rgba(0,0,0,.18);
       opacity:0;visibility:hidden;transform:translateY(-5px);transition:.14s}
.tgrupo.abierto .tmenu{opacity:1;visibility:visible;transform:translateY(0)}
.tmenu a{display:block;padding:8px 12px;border-radius:7px;font-size:13px;
         color:var(--text2);cursor:pointer;white-space:nowrap;text-decoration:none}
.tmenu a:hover{background:var(--bg3);color:var(--text)}
.tmenu a.on{background:var(--acc);color:#fff;font-weight:600}
.tsep{height:0.5px;background:var(--border);margin:5px 9px}

/* En pantallas chicas el menú es vertical: los grupos se muestran
   siempre abiertos, sin desplegable. */
/* El menú móvil arranca en 760px: si esto se aplicara antes, en
   pantallas medianas el menú seguiría horizontal pero los grupos
   se verían desplegados todos juntos. */
@media (max-width: 760px) {
  .tgrupo{position:static}
  .tnav.tg{pointer-events:none;opacity:.55;font-size:10.5px;letter-spacing:.6px;
           text-transform:uppercase;padding-bottom:2px}
  .tnav.tg i{display:none}
  .tmenu{position:static;opacity:1;visibility:visible;transform:none;
         background:none;border:0;box-shadow:none;padding:0 0 8px;min-width:0}
  .tmenu a{padding:10px 16px;font-size:14px}
}

/* ============================================================
   PROPUESTAS COMERCIALES (Etapa 1 · 12/09/2026)
   Listado + editor de tres columnas: slides · vista previa · campos.
   ============================================================ */
.prp-crumb{font-size:12px;color:var(--text3);margin-bottom:8px}
.prp-crumb span{cursor:pointer}
.prp-crumb span:hover{color:var(--acc)}
.prp-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.prp-cab-tit{display:flex;flex-direction:column;gap:2px;flex:1;min-width:260px}
.prp-cab-tit input{background:transparent;border:0;border-bottom:1px solid transparent;color:var(--text);font-family:var(--f);outline:none;padding:2px 4px}
.prp-cab-tit input:first-child{font-size:15px;font-weight:700}
.prp-cab-tit input:last-child{font-size:12.5px;color:var(--text2)}
.prp-cab-tit input:hover,.prp-cab-tit input:focus{border-bottom-color:var(--border2)}
.prp-cab-acc{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.prp-cab-acc select{background:var(--bg3);border:0.5px solid var(--border2);border-radius:20px;color:var(--text);font-family:var(--f);font-size:12px;padding:5px 10px;outline:none}
.prp-colores{display:flex;gap:8px;align-items:center}
.prp-colores span{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;opacity:.55;transition:all .15s}
.prp-colores span.on{opacity:1;border-color:var(--text);transform:scale(1.12)}
.prp-colores.chico span{width:16px;height:16px}

.prp-ed{display:grid;grid-template-columns:230px minmax(0,1fr) 340px;gap:12px;height:calc(100vh - 190px);min-height:520px}
.prp-ed-izq,.prp-ed-der{background:var(--card);border:0.5px solid var(--border);border-radius:var(--r);overflow-y:auto}
.prp-ed-izq{padding:8px}
.prp-ed-der{padding:14px}
.prp-ed-centro{display:flex;flex-direction:column;min-width:0}
.prp-ed-marco{flex:1;background:#0e0e0e;border-radius:var(--r);overflow:hidden;border:0.5px solid var(--border)}
.prp-ed-marco iframe{width:100%;height:100%;border:0;display:block}

.prp-sl{display:grid;grid-template-columns:22px 1fr;column-gap:8px;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:12px;border:1px solid transparent}
.prp-sl:hover{background:var(--bg3)}
.prp-sl.on{background:color-mix(in srgb, var(--acc) 14%, transparent);border-color:color-mix(in srgb, var(--acc) 40%, transparent)}
.prp-sl-n{grid-row:span 2;font-family:var(--m);font-size:10.5px;color:var(--text3);padding-top:2px}
.prp-sl-t{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;font-family:var(--m)}
.prp-sl-x{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prp-sl-add{padding:10px 4px}

.prp-form label{display:block;font-size:11px;font-weight:600;color:var(--text2);margin:12px 0 4px;font-family:var(--m);letter-spacing:.3px}
.prp-form label:first-child{margin-top:0}
.prp-form input:not([type=checkbox]),.prp-form textarea,.prp-form select{width:100%;background:var(--bg3);border:0.5px solid var(--border2);border-radius:7px;color:var(--text);font-family:var(--f);font-size:13px;padding:7px 9px;outline:none}
.prp-form textarea{resize:vertical;line-height:1.4}
.prp-form input:focus,.prp-form textarea:focus,.prp-form select:focus{border-color:var(--acc)}
.prp-ayuda{font-size:10.5px;color:var(--text3);font-weight:400;text-transform:none;letter-spacing:0}
.prp-check{display:flex!important;align-items:center;gap:8px;cursor:pointer;text-transform:none}
.prp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.prp-btns{display:flex;flex-wrap:wrap;gap:6px}
.prp-form-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:10px;padding-bottom:10px;border-bottom:0.5px solid var(--border)}
.prp-obj,.prp-item{border:0.5px solid var(--border);border-radius:8px;padding:4px 10px 10px;margin-top:10px}
.prp-obj legend,.prp-item legend{font-size:10.5px;color:var(--text3);font-family:var(--m);padding:0 4px}
.prp-item-acc{margin-left:8px}
.prp-item-acc span{cursor:pointer;margin-left:6px;color:var(--text2)}
.prp-item-acc span:hover{color:var(--acc)}
.prp-lista{margin-top:8px}
.prp-lista > .btn-sm{margin-top:8px}
.prp-link{display:flex;gap:6px}
.prp-link input{flex:1}
@media (max-width:1100px){.prp-ed{grid-template-columns:200px minmax(0,1fr);grid-template-rows:1fr auto;height:auto}.prp-ed-der{grid-column:1 / -1;max-height:50vh}.prp-ed-marco{min-height:360px}}
@media (max-width:700px){.prp-ed{grid-template-columns:1fr}.prp-ed-izq{max-height:200px}}

/* chequeo antes de publicar una propuesta (26/09/2026).
   Una lista, no una tabla: cada renglón es una cosa que mirar, con el
   número del slide a la izquierda para poder ir. El color de la barra
   dice el nivel: rojo frena el link, ámbar no. */
.prp-ch{display:flex;flex-direction:column;gap:8px;max-width:640px}
.prp-ch-cab{margin:0;font-size:13px;color:var(--text2)}
.prp-ch-ok{margin:0;padding:14px 16px;background:var(--bg3);border-radius:var(--r);font-size:13.5px;color:var(--text)}
.prp-ch-tit{margin:8px 0 0;font-size:10.5px;font-family:var(--m);letter-spacing:.4px;text-transform:uppercase;color:var(--text3)}
.prp-ch-it{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border:0.5px solid var(--border);border-left-width:3px;border-radius:8px;background:var(--card)}
.prp-ch-it.grave{border-left-color:var(--rd)}
.prp-ch-it.aviso{border-left-color:var(--am)}
.prp-ch-it b{font-size:13px;font-weight:600;display:block}
.prp-ch-it p{margin:3px 0 0;font-size:12.5px;line-height:1.45;color:var(--text2)}
.prp-ch-sl{display:block;font-size:10.5px;font-family:var(--m);color:var(--text3);margin-top:1px}
.prp-ch-n{flex:0 0 26px;height:22px;margin-top:1px;border:0.5px solid var(--border2);border-radius:6px;background:var(--bg3);color:var(--text2);font-family:var(--m);font-size:11px;cursor:pointer}
.prp-ch-n:hover{border-color:var(--acc);color:var(--text)}
.prp-ch-n.vacio{display:flex;align-items:center;justify-content:center;cursor:default;background:transparent;border-style:dashed;color:var(--text3)}
.prp-ch-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px;padding-top:10px;border-top:0.5px solid var(--border)}
.prp-ch-pie p{margin:0;font-size:12.5px;color:var(--text2);flex:1;min-width:200px}
.prp-ch-pie div{display:flex;gap:8px}

/* brief y generación (Etapa 2 · 14/09/2026) */
.prp-brief-grid{display:grid;grid-template-columns:minmax(320px,5fr) minmax(360px,7fr);gap:12px;align-items:start}
.prp-brief-notas{position:sticky;top:12px}
.prp-inferido{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:10px;font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;background:color-mix(in srgb, var(--am) 18%, transparent);color:var(--am2);font-weight:700}
.prp-form .prp-ayuda{display:block;margin-top:1px}
.prp-pedido{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;padding:10px 12px;background:var(--card);border:0.5px solid var(--border);border-radius:var(--r)}
.prp-pedido-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.prp-pedido textarea{width:100%;background:var(--bg3);border:0.5px solid var(--border2);border-radius:12px;color:var(--text);font-family:var(--f);font-size:13px;line-height:1.5;padding:9px 13px;outline:none;resize:none;overflow:auto;min-height:38px}
.prp-pedido textarea:focus{border-color:var(--acc)}
.prp-pedido-pie{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.prp-pedido-pie .prp-ayuda{display:inline;margin:0}
/* grilla de la tabla: una celda por columna */
.prp-grilla-wrap{overflow-x:auto;margin:6px 0 8px}
.prp-grilla{border-collapse:separate;border-spacing:0;width:100%;font-family:var(--f)}
.prp-grilla th{text-align:left;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text3);padding:0 6px 5px;white-space:nowrap}
.prp-grilla th.n,.prp-grilla td.n{width:18px;text-align:center;font-family:var(--m);font-size:10px;color:var(--text3);padding-left:0;padding-right:0}
.prp-grilla td{padding:0 3px 5px;vertical-align:middle}
.prp-grilla td:nth-child(2) input{min-width:96px}
.prp-grilla td:first-child{padding-left:0}
.prp-grilla input{width:100%;min-width:62px;background:var(--bg3);border:0.5px solid var(--border2);border-radius:6px;color:var(--text);font-family:var(--f);font-size:12.5px;padding:6px 8px;outline:none}
.prp-grilla input:focus{border-color:var(--acc)}
.prp-grilla td.acc{white-space:nowrap;padding-left:6px}
.prp-grilla td.acc span{cursor:pointer;color:var(--text3);font-size:11px;padding:0 2px}
.prp-grilla td.acc span:hover{color:var(--text)}
.prp-grilla td.acc span:last-child:hover{color:var(--rd2)}
#prp-espera{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:20px}
.prp-espera-box{display:flex;gap:14px;align-items:center;background:var(--bg2);border:0.5px solid var(--border2);border-radius:13px;padding:18px 22px;max-width:520px;width:100%;font-size:14px}
.prp-barra{height:6px;background:var(--bg3);border-radius:3px;margin-top:10px;overflow:hidden}
.prp-barra i{display:block;height:100%;background:var(--acc);transition:width .4s}
@media (max-width:900px){.prp-brief-grid{grid-template-columns:1fr}.prp-brief-notas{position:static}}
.prp-relev{font-size:12.5px}
.prp-relev-sec{margin-top:8px}
.prp-relev-sec b{display:block;font-size:11px;font-family:var(--m);letter-spacing:.3px;color:var(--text2);margin-bottom:3px}
.prp-relev ul{padding-left:16px;margin:0}
.prp-relev li{margin:2px 0;line-height:1.45}
.prp-fuentes{padding-left:16px;margin:6px 0 0;font-size:11.5px}
.prp-fuentes a{color:var(--acc)}

/* ============================================================
   REFERENCIAS (rfr) · 17/09/2026
   ============================================================ */
.rfr-barra{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.rfr-barra input,.rfr-barra select{background:var(--bg2);border:0.5px solid var(--border2);border-radius:8px;color:var(--text);font-family:var(--f);font-size:13px;padding:8px 11px;outline:none}
.rfr-barra input{flex:1;min-width:240px} .rfr-barra input:focus,.rfr-barra select:focus{border-color:var(--acc)}
.rfr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.rfr-card{background:var(--bg2);border:0.5px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.rfr-card:hover{border-color:var(--acc);transform:translateY(-1px)}
.rfr-mini{height:150px;background:var(--bg3) center/cover no-repeat}
.rfr-mini-ico{display:grid;place-items:center;font-size:44px;height:96px}
.rfr-body{padding:11px 13px 10px;display:flex;flex-direction:column;gap:5px;flex:1}
.rfr-tipo{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.rfr-pill{font-family:var(--m);font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--bg3);color:var(--text2)}
.rfr-t-propuesta_propia{background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc2)}
.rfr-t-propuesta_ajena{background:color-mix(in srgb,var(--bl) 14%,transparent);color:var(--bl2)}
.rfr-t-caso{background:color-mix(in srgb,var(--gr) 14%,transparent);color:var(--gr2)}
.rfr-t-tendencia{background:color-mix(in srgb,var(--am) 16%,transparent);color:var(--am2)}
.rfr-t-creatividad{background:color-mix(in srgb,var(--rd) 12%,transparent);color:var(--rd2)}
.rfr-sec{font-size:10.5px;color:var(--text3);font-family:var(--m)}
.rfr-tit{font-weight:600;font-size:13.5px;line-height:1.3;color:var(--text)}
.rfr-fuente{font-size:11px;color:var(--text3);font-family:var(--m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rfr-nota{font-size:12px;color:var(--text2);line-height:1.45;font-style:italic}
.rfr-resumen{font-size:11.5px;color:var(--text3);line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rfr-leyendo{font-size:11px;color:var(--acc2);font-family:var(--m);animation:rfrpulso 1.4s ease-in-out infinite}
@keyframes rfrpulso{0%,100%{opacity:1}50%{opacity:.45}}
.rfr-pie{display:flex;gap:6px;margin-top:auto;padding-top:6px;font-size:10px;color:var(--text3);font-family:var(--m);border-top:0.5px solid var(--border)}
/* formulario (modal) */
.rfr-form label{display:block;font-size:11px;font-weight:600;color:var(--text2);margin:10px 0 4px;font-family:var(--m);letter-spacing:.3px}
.rfr-form input:not([type=checkbox]):not([type=file]),.rfr-form textarea,.rfr-form select{width:100%;background:var(--bg3);border:0.5px solid var(--border2);border-radius:7px;color:var(--text);font-family:var(--f);font-size:13px;padding:7px 9px;outline:none}
.rfr-form textarea{resize:vertical;line-height:1.4} .rfr-form input:focus,.rfr-form textarea:focus,.rfr-form select:focus{border-color:var(--acc)}
.rfr-form .prp-ayuda{display:inline;margin-left:6px;font-weight:400}
.rfr-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rfr-modo{display:flex;gap:4px;background:var(--bg3);border-radius:8px;padding:3px;width:fit-content;margin-bottom:6px}
.rfr-modo span{padding:5px 12px;border-radius:6px;font-size:12px;cursor:pointer;color:var(--text2)} .rfr-modo span.on{background:var(--bg2);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.rfr-drop{border:1.5px dashed var(--border2);border-radius:9px;padding:20px;text-align:center;font-size:12.5px;color:var(--text3);cursor:pointer}
.rfr-drop.on,.rfr-drop:hover{border-color:var(--acc);color:var(--text2)}
.rfr-aviso{margin-top:12px;padding:9px 11px;border-radius:8px;background:rgba(224,86,86,.10);border:0.5px solid rgba(224,86,86,.35);color:#e05656;font-size:12.5px;line-height:1.45}
/* Cartel de version nueva: aparece abajo a la derecha cuando sale una
   version mientras alguien esta trabajando. No tapa nada ni recarga
   solo: el que lo ve decide cuando. */
.ver-cartel{position:fixed;right:18px;bottom:18px;z-index:9000;display:flex;align-items:center;gap:10px;
  padding:11px 12px 11px 15px;border-radius:11px;background:var(--bg2);border:0.5px solid var(--border2);
  box-shadow:0 10px 30px rgba(20,16,50,.18);font-size:12.5px;color:var(--text);animation:vercartel .35s ease}
.ver-cartel .ver-x{background:none;border:0;color:var(--text3);cursor:pointer;font-size:12px;padding:2px 4px;line-height:1}
.ver-cartel .ver-x:hover{color:var(--text)}
/* Control cruzado del cash flow contra los saldos del banco. */
.cf-cuadre{margin:10px 0 2px;padding:10px 13px;border-radius:9px;font-size:12.5px;line-height:1.6;
  border:0.5px solid var(--border2);background:var(--bg3);color:var(--text2)}
.cf-cuadre.ok{border-color:rgba(74,181,122,.35);background:rgba(74,181,122,.09);color:var(--text2)}
.cf-cuadre.mal{border-color:rgba(224,86,86,.35);background:rgba(224,86,86,.09);color:var(--text)}
.cf-cuadre.neutro{color:var(--text3)}
.cf-cuadre-n{margin-top:5px;font-size:11.5px;color:var(--text3)}
/* Aviso en la cabecera del presupuesto: el costo se esta estimando con
   el tarifario de hoy porque el presupuesto no guardo el suyo. */
.pr-prestado{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:999px;
  background:rgba(240,177,52,.16);border:0.5px solid rgba(240,177,52,.4);color:var(--am2);
  font-size:10px;font-family:var(--m);letter-spacing:.02em;cursor:help;vertical-align:middle}
@keyframes vercartel{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:600px){.ver-cartel{left:12px;right:12px;bottom:12px;justify-content:space-between}}
.rfr-det-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:8px}
.rfr-det-img{width:150px;height:110px;object-fit:cover;border-radius:9px;border:0.5px solid var(--border)}
.rfr-link{font-size:12px;color:var(--bl2);word-break:break-all}
.rfr-resumen-det{font-size:12.5px;line-height:1.5;color:var(--text2)}
.rfr-extracto{font-size:12px;line-height:1.5;color:var(--text2);white-space:pre-wrap;max-height:260px;overflow:auto;background:var(--bg3);border-radius:8px;padding:10px;margin-top:6px}
/* selector de referencias en el brief (prp) */
.prp-refs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px}
.prp-ref{display:inline-flex;align-items:center;gap:6px;background:var(--bg3);border:0.5px solid var(--border2);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--text)}
.prp-ref span{cursor:pointer;color:var(--text3)} .prp-ref span:hover{color:var(--rd2)}
.prp-ref-sug{border:0.5px solid var(--border);border-radius:9px;max-height:220px;overflow:auto;margin-top:6px;display:none}
.prp-ref-sug.on{display:block}
.prp-ref-sug div{padding:7px 10px;font-size:12.5px;cursor:pointer;border-bottom:0.5px solid var(--border)} .prp-ref-sug div:hover{background:var(--bg3)}
.prp-ref-sug div b{font-weight:600} .prp-ref-sug div small{display:block;color:var(--text3);font-size:11px}

/* Aviso de tarea archivada en el modal (17/09) */
.pl-arch-aviso{background:color-mix(in srgb,var(--am) 14%,transparent);border:0.5px solid color-mix(in srgb,var(--am) 40%,transparent);border-radius:9px;padding:10px 12px;margin-bottom:12px;font-size:12.5px;line-height:1.5;color:var(--text)}
.pl-arch-aviso .btn-sm{margin-left:8px}
.pl-mvb.rec{color:var(--gr2)} .pl-mvb.rec:hover{background:color-mix(in srgb,var(--gr) 16%,transparent);border-color:var(--gr)}