/* ==========================================================================
   CRM CIRUDERM · sistema visual

   Sale de la marca del cliente (ciruderm.pe): azul oceano #238BB1, turquesa
   #29B6B0 y el nude #E8D8D0 en que se funde su isotipo. La tipografia de
   titulos y cifras es una geometrica fina, como la de su logotipo.

   La profundidad viene de capas (aura de fondo, carriles translucidos,
   tarjetas con sombra tenida de azul), no de bordes gruesos.

   Reglas que se cumplen en todo el fichero:
     - Titulos y cifras grandes en Outfit fina (300); la interfaz en 400-550.
     - Esquinas: 16 px en tarjetas, 12 px en controles, pildora en etiquetas.
     - El azul oceano es el color de accion; el turquesa solo marca detalle
       (etiquetas, foco, lo ganado). El nude es fondo, nunca texto.
     - Los colores de linea son categoria: tinte suave en etiquetas y avatares.
   El tema de partida es el claro; el boton de la barra lateral cambia al de
   noche. No sigue al sistema a proposito: la demo se ve siempre igual.
   ========================================================================== */

@font-face{font-family:"Outfit";src:url("fonts/outfit.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --page:#f6f1ee; --paper:#fffdfc; --paper-2:#f9f4f1; --lane:rgba(255,253,252,.52);
  --line:rgba(42,39,39,.09); --line-2:rgba(42,39,39,.17);
  --ink:#2a2727; --ink-2:#4a4646; --ink-3:#6a6564;
  --ocean:#238bb1; --ocean-deep:#125a75;
  --btn:linear-gradient(180deg,#1f7ea1 0%,#125a75 100%); --btn-hover:linear-gradient(180deg,#248bb0 0%,#156582 100%);
  --btn-ink:#fbfeff; --btn-edge:rgba(255,255,255,.22);
  --detail:#29b6b0; --detail-ink:#13777c; --detail-soft:#dcf1ef;
  --focus:rgba(41,182,176,.30);
  --sel:#ecf4f5;
  --good:#177a66; --good-soft:#d9efe9; --warn:#93530d; --warn-soft:#f8ead2; --crit:#a5372d; --crit-soft:#f6e0db;
  /* Estados del embudo: de gris a oceano, y turquesa para lo ganado. */
  --st-0:#bcb5b1; --st-1:#8fc5d6; --st-2:#238bb1; --st-3:#29b6b0; --st-4:#dcc0b4; --st-5:#8e8886;
  --aura-a:rgba(41,182,176,.16); --aura-b:rgba(35,139,177,.11);
  --sh-1:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(18,90,117,.05),0 10px 22px -14px rgba(18,90,117,.22);
  --sh-2:inset 0 1px 0 rgba(255,255,255,.8),0 2px 5px rgba(18,90,117,.07),0 22px 40px -20px rgba(18,90,117,.34);
  --sh-3:0 44px 100px -40px rgba(7,39,51,.6);
  --scrim:rgba(7,39,51,.42);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='%236a6564' stroke-width='20' stroke-linecap='round' stroke-linejoin='round' d='m208 96-80 80-80-80'/%3E%3C/svg%3E");
  --r-card:16px; --r-ctl:12px; --pill:999px;
  --sans:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.75,.2,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --page:#06161c; --paper:#0e242d; --paper-2:#132d38; --lane:rgba(255,255,255,.028);
  --line:rgba(232,240,242,.09); --line-2:rgba(232,240,242,.18);
  --ink:#eef3f3; --ink-2:#bdc9cc; --ink-3:#8b9ba0;
  --btn:linear-gradient(180deg,#6adcd3 0%,#38b9b1 100%); --btn-hover:linear-gradient(180deg,#7fe5dd 0%,#45c5bd 100%);
  --btn-ink:#04211f; --btn-edge:rgba(255,255,255,.5);
  --detail:#5fd6cd; --detail-ink:#8fe6de; --detail-soft:rgba(95,214,205,.14);
  --focus:rgba(95,214,205,.34);
  --sel:rgba(255,255,255,.07);
  --good:#7fd6b9; --good-soft:rgba(127,214,185,.14); --warn:#e8b56d; --warn-soft:rgba(232,181,109,.14); --crit:#f09a8e; --crit-soft:rgba(240,154,142,.14);
  --st-0:#77848a; --st-1:#8fc5d6; --st-2:#3fa9d1; --st-3:#5fd6cd; --st-4:#d3b4a7; --st-5:#69737a;
  --aura-a:rgba(95,214,205,.12); --aura-b:rgba(63,169,209,.14);
  --sh-1:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.4),0 12px 24px -14px rgba(0,0,0,.7);
  --sh-2:inset 0 1px 0 rgba(255,255,255,.07),0 2px 6px rgba(0,0,0,.45),0 26px 44px -20px rgba(0,0,0,.85);
  --sh-3:0 44px 100px -40px rgba(0,0,0,.95);
  --scrim:rgba(2,9,12,.66);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='%238b9ba0' stroke-width='20' stroke-linecap='round' stroke-linejoin='round' d='m208 96-80 80-80-80'/%3E%3C/svg%3E");
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:
    radial-gradient(980px 560px at 92% -10%,var(--aura-a),transparent 62%),
    radial-gradient(820px 520px at 38% -14%,var(--aura-b),transparent 60%),
    var(--page);
  background-attachment:fixed}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
h1,h2,h3,p,dl,dd{margin:0}
::selection{background:var(--detail-soft)}
:focus-visible{outline:2px solid var(--detail);outline-offset:2px;border-radius:8px}
.ic{width:18px;height:18px;flex:none;fill:currentColor}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Controles ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;
  border-radius:var(--r-ctl);border:1px solid var(--line-2);background:var(--paper);color:var(--ink);
  font-size:13.5px;font-weight:500;letter-spacing:.005em;white-space:nowrap;text-decoration:none;box-shadow:var(--sh-1);
  transition:background .2s,border-color .2s,color .2s,box-shadow .25s var(--ease),transform .15s var(--ease)}
.btn:hover{border-color:var(--detail);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none}
.btn.primary{background:var(--btn);border-color:transparent;color:var(--btn-ink);font-weight:550;
  box-shadow:inset 0 1px 0 var(--btn-edge),0 1px 2px rgba(7,39,51,.3),0 12px 24px -12px rgba(18,90,117,.6)}
.btn.primary:hover{background:var(--btn-hover)}
.btn.sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:10px;box-shadow:none}
.btn.sm .ic{width:15px;height:15px}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2);box-shadow:none}
.btn.ghost:hover{background:var(--sel);color:var(--ink)}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;
  border-radius:10px;border:1px solid var(--line-2);background:var(--paper);color:var(--ink-2);
  transition:background .2s,color .2s,border-color .2s,transform .15s var(--ease)}
.iconbtn:hover{border-color:var(--detail);color:var(--ink)}
.iconbtn:active{transform:scale(.95)}
.iconbtn .ic{width:16px;height:16px}
.field,.select{width:100%;height:40px;padding:0 13px;border-radius:var(--r-ctl);border:1px solid var(--line-2);
  background:var(--paper);color:var(--ink);font-size:13.5px;
  transition:border-color .2s,box-shadow .2s}
.field::placeholder{color:var(--ink-3)}
.field:focus,.select:focus{outline:none;border-color:var(--detail);box-shadow:0 0 0 4px var(--focus)}
textarea.field{height:auto;min-height:92px;padding:11px 13px;resize:vertical;line-height:1.5}
.select{width:auto;padding-right:32px;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:var(--chev);background-repeat:no-repeat;background-position:right 12px center}
.kbd{font-size:11px;padding:2px 6px;border-radius:6px;border:1px solid var(--line-2);color:var(--ink-3);letter-spacing:.02em}
.seg{display:inline-flex;padding:3px;border-radius:var(--pill);background:var(--paper-2);border:1px solid var(--line)}
.seg button{height:26px;padding:0 12px;border:0;border-radius:var(--pill);background:transparent;color:var(--ink-3);font-size:12.5px;font-weight:500;
  transition:background .2s,color .2s}
.seg button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(18,90,117,.2)}
.count{font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--ink-3);padding:1px 8px;border-radius:var(--pill);
  background:var(--paper-2);border:1px solid var(--line)}
.label{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--detail-ink)}

/* --- Barra lateral: siempre azul oceano profundo, en los dos temas ------- */
.app{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100dvh}
.side{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:26px;padding:26px 16px 18px;
  color:#e9f1f3;overflow-y:auto;scrollbar-width:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(460px 330px at -12% -8%,rgba(78,209,200,.40),transparent 70%),
    radial-gradient(400px 320px at 112% 104%,rgba(232,216,208,.22),transparent 70%),
    linear-gradient(180deg,#10475d 0%,#072733 100%);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.07),8px 0 40px -20px rgba(7,39,51,.55)}
.side::-webkit-scrollbar{display:none}
.brand{display:block;padding:2px 6px 0}
.brand-logo{display:block;width:176px;height:auto}
.brand-sub{margin-top:10px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(233,241,243,.56)}
.navgroup{display:flex;flex-direction:column;gap:2px}
.navlabel{padding:0 10px 9px;font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,241,243,.48)}
.nav-item{position:relative;display:flex;align-items:center;gap:11px;width:100%;height:38px;padding:0 10px;border:0;border-radius:11px;
  background:transparent;color:rgba(233,241,243,.76);font-size:14px;font-weight:400;text-align:left;
  transition:background .2s,color .2s}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fbfeff}
.nav-item.on{background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.06));color:#fbfeff;font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.12)}
.nav-item.on::before{content:"";position:absolute;left:-16px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:#5fd6cd}
.nav-item .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item .ic{opacity:.8}
.nav-item.on .ic{opacity:1;color:#8fe6de}
.nav-item .count{background:rgba(255,255,255,.08);border-color:transparent;color:rgba(233,241,243,.72)}
.nav-item .due{font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;padding:1px 8px;border-radius:var(--pill);
  background:rgba(232,216,208,.22);color:#f6e9e2}
.sw{width:9px;height:9px;border-radius:99px;background:var(--c);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 26%,transparent)}
.sw.all{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(233,241,243,.62)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.demo-note{padding:10px 12px;border-radius:12px;border:1px dashed rgba(232,216,208,.44);background:rgba(232,216,208,.08);
  color:#f3e6df;font-size:12px;line-height:1.45}
.integ{display:flex;flex-direction:column;gap:9px;padding:13px 12px;border-radius:14px;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.09)}
.integ-row{display:flex;align-items:center;gap:9px;font-size:12.5px}
.integ-row b{font-weight:500;color:#f4f9fa;flex:1}
.integ-row .st{color:rgba(233,241,243,.58)}
/* Punto de estado: conectado, en pruebas o apagado. */
.led{width:7px;height:7px;border-radius:99px;background:rgba(233,241,243,.3);flex:none}
.led.on{background:#6fe0d5;box-shadow:0 0 0 3px rgba(111,224,213,.2)}
.led.test{background:#f0d0a0;box-shadow:0 0 0 3px rgba(240,208,160,.2)}
.side-actions{display:flex;gap:8px}
.side-actions .btn{flex:1;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.11);color:#e9f1f3;box-shadow:none}
.side-actions .btn:hover{background:rgba(255,255,255,.13);border-color:rgba(95,214,205,.6)}

/* --- Zona principal ----------------------------------------------------- */
.main{min-width:0;padding:30px 34px 64px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.head h1{margin-top:8px;font-size:44px;font-weight:300;letter-spacing:-.035em;line-height:1.02}
.head p.desc{margin-top:10px;color:var(--ink-3);font-size:14px;max-width:62ch}
.head-actions{display:flex;gap:10px}

/* Resumen: embudo a la izquierda, dos cifras destacadas a la derecha. */
.summary{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom:22px}
.tile{position:relative;overflow:hidden;padding:20px 22px;border-radius:var(--r-card);border:1px solid var(--line);
  background:var(--paper);box-shadow:var(--sh-1)}
.tile .big{margin-top:10px;font-size:60px;font-weight:250;line-height:.92;letter-spacing:-.045em;font-variant-numeric:lining-nums}
.tile .cap{margin-top:9px;font-size:13px;color:var(--ink-3)}
.funnel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center}
.funnel-total{padding-right:26px;border-right:1px solid var(--line)}
.bar{display:flex;gap:3px;height:10px;margin:12px 0 16px}
.bar i{display:block;min-width:4px;border-radius:99px;background:var(--s);transition:flex-grow .5s var(--ease)}
.legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 22px}
.legend div{display:flex;align-items:baseline;gap:8px;min-width:0;font-size:12.5px;color:var(--ink-2)}
.legend .dot{width:8px;height:8px;border-radius:99px;background:var(--s);flex:none;align-self:center}
.legend .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend b{font-size:17px;font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1}
.tile.won{border-color:transparent;color:#eef6f7;
  background:
    radial-gradient(260px 190px at 100% 0%,rgba(78,209,200,.5),transparent 70%),
    radial-gradient(240px 200px at 0% 100%,rgba(232,216,208,.24),transparent 70%),
    linear-gradient(160deg,#17627f,#072733);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 5px rgba(7,39,51,.2),0 26px 44px -22px rgba(18,90,117,.7)}
.tile.won .big{color:#b4f1eb}
.tile.won .cap{color:rgba(238,246,247,.74)}
.tile.won .label{color:rgba(180,241,235,.9)}
.tile.due{background:radial-gradient(260px 170px at 100% 0%,var(--warn-soft),transparent 72%),var(--paper)}
.tile.due.has .big{color:var(--warn)}
.tile-ic{position:absolute;right:18px;top:18px;width:22px;height:22px;opacity:.6}
.tile .link{display:inline-flex;align-items:center;gap:5px;margin-top:12px;padding:0;border:0;background:none;
  font-size:12.5px;font-weight:500;color:var(--detail-ink);border-bottom:1px solid transparent;transition:border-color .2s}
.tile .link:hover{border-color:currentColor}
.tile .link .ic{width:13px;height:13px}

.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.search{position:relative;flex:1;min-width:230px}
.search .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none;width:16px;height:16px}
.search .field{padding-left:40px}
.tools .field,.tools .select{box-shadow:var(--sh-1)}
.warnbar{margin-bottom:18px;padding:12px 14px;border-radius:var(--r-ctl);background:var(--warn-soft);color:var(--warn);font-size:13px}

/* --- Tablero ------------------------------------------------------------ */
/* Las columnas no se estrechan por debajo de 208 px: si no caben todas, el
   tablero se desliza en horizontal y las tarjetas siguen siendo legibles. */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(208px,1fr);gap:12px;align-items:start;
  overflow-x:auto;padding:4px 2px 14px;margin:-4px -2px 0;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.board.today{grid-auto-columns:minmax(280px,1fr)}
.board>.col{scroll-snap-align:start}
.col{min-width:0;padding:10px 8px 8px;border-radius:18px;border:1px solid var(--line);background:var(--lane);
  backdrop-filter:blur(6px);transition:background .2s,border-color .2s,box-shadow .2s}
.col.drop{border-color:var(--detail);background:var(--detail-soft);box-shadow:0 0 0 4px var(--focus)}
.colhead{display:flex;align-items:center;gap:9px;padding:4px 6px 12px}
.colhead .dot{width:8px;height:8px;border-radius:99px;background:var(--s);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--s) 24%,transparent)}
.colhead h2{flex:1;min-width:0;font-size:12.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.colbody{display:flex;flex-direction:column;gap:8px;max-height:calc(100dvh - 392px);min-height:120px;overflow-y:auto;padding:2px;margin:-2px;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.card{position:relative;padding:12px 12px 11px;border-radius:14px;border:1px solid var(--line);background:var(--paper);
  box-shadow:var(--sh-1);cursor:grab;
  transition:border-color .2s,box-shadow .3s var(--ease),transform .3s var(--ease)}
.card:hover,.card:focus-within{border-color:color-mix(in srgb,var(--detail) 60%,transparent);box-shadow:var(--sh-2);transform:translateY(-2px)}
.card:active{cursor:grabbing}
.card.dragging{opacity:.4}
.card-top{display:flex;align-items:flex-start;gap:10px}
/* Monograma tenido con el color de la linea del lead. */
.ava{width:32px;height:32px;border-radius:99px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
  color:color-mix(in srgb,var(--c) 58%,var(--ink));
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 28%,var(--paper)),color-mix(in srgb,var(--c) 10%,var(--paper)));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent)}
.card-id{min-width:0;flex:1}
.card-name{font-size:14px;font-weight:550;letter-spacing:-.005em;line-height:1.25;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.card-sub{margin-top:2px;font-size:12.5px;color:var(--ink-3);line-height:1.35;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.card-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px;align-items:center}
.tag-line{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 7px;border-radius:var(--pill);
  font-size:11.5px;font-weight:500;white-space:nowrap;
  color:color-mix(in srgb,var(--c) 52%,var(--ink));
  background:color-mix(in srgb,var(--c) 13%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 24%,transparent)}
.tag-line::before{content:"";width:6px;height:6px;border-radius:99px;background:var(--c)}
.flag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--pill);
  font-size:11.5px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums;
  background:var(--paper-2);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.flag .ic{width:13px;height:13px}
.flag.warn{background:var(--warn-soft);color:var(--warn);box-shadow:none}
.flag.crit{background:var(--crit-soft);color:var(--crit);box-shadow:none}
.flag.good{background:var(--good-soft);color:var(--good);box-shadow:none}
.card-foot{display:flex;align-items:center;gap:8px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
.card-origin{flex:1;min-width:0;font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who{flex:none;font-size:11.5px;font-weight:500;color:var(--detail-ink);white-space:nowrap}
/* Acciones rapidas: aparecen sobre la tarjeta al pasar el raton; siempre visibles en tactil. */
.card-actions{position:absolute;right:9px;top:9px;display:flex;gap:5px;opacity:0;transform:translateY(-3px);
  transition:opacity .2s,transform .25s var(--ease)}
.card:hover .card-actions,.card:focus-within .card-actions{opacity:1;transform:none}
.card-actions .iconbtn{width:30px;height:30px;box-shadow:var(--sh-2)}
@media (hover:none){.card-actions{position:static;opacity:1;transform:none;margin-top:10px}.card-actions .iconbtn{box-shadow:none}}
.empty{padding:26px 12px;text-align:center;color:var(--ink-3);font-size:12.5px;line-height:1.55;
  border:1px dashed var(--line-2);border-radius:14px}

/* Entrada: solo al cargar la pagina, no en cada repintado del tablero. */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body.boot .head,body.boot .tile,body.boot .tools,body.boot .col{animation:rise .7s var(--ease) both;animation-delay:calc(var(--i,0)*60ms)}

/* --- Tabla -------------------------------------------------------------- */
.tablewrap{display:none;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);box-shadow:var(--sh-1);overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:960px}
thead th{padding:14px 16px;text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--detail-ink);
  white-space:nowrap;border-bottom:1px solid var(--line-2)}
tbody td{padding:11px 16px;vertical-align:middle;border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .15s}
tbody tr:hover{background:var(--sel)}
td .idc{display:flex;align-items:center;gap:11px}
td .nm{font-weight:550}
td .em{font-size:12px;color:var(--ink-3)}
td .tags{display:flex;flex-wrap:wrap;gap:5px}
td .row-actions{display:flex;gap:6px}
.select.st{height:34px;font-size:12.5px;border-radius:10px}
.muted{color:var(--ink-3)}

/* --- Ficha lateral ------------------------------------------------------ */
.scrim{position:fixed;inset:0;z-index:70;background:var(--scrim);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
.panel{position:fixed;top:10px;right:10px;bottom:10px;z-index:71;width:min(520px,calc(100vw - 20px));display:flex;flex-direction:column;
  border-radius:22px;background:var(--paper);border:1px solid var(--line-2);box-shadow:var(--sh-3);overflow:hidden;
  transform:translateX(calc(100% + 24px));transition:transform .42s var(--ease)}
.panel.on{transform:none}
.panel-h{display:flex;gap:16px;align-items:flex-start;padding:26px 24px 22px;border-bottom:1px solid var(--line);
  background:
    radial-gradient(360px 180px at 0% 0%,color-mix(in srgb,var(--c) 24%,transparent),transparent 72%),
    radial-gradient(300px 160px at 100% 0%,var(--aura-a),transparent 72%),
    var(--paper-2)}
.panel-h .ava{width:54px;height:54px;font-size:17px}
.panel-h h2{font-size:30px;font-weight:300;letter-spacing:-.03em;line-height:1.05}
.panel-h .m{margin-top:7px;font-size:13px;color:var(--ink-3);line-height:1.5;word-break:break-word}
.panel-h .iconbtn{margin-left:auto;border-radius:99px}
.panel-b{flex:1;overflow-y:auto;padding:2px 24px 34px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.sec{padding:20px 0;border-bottom:1px solid var(--line)}
.sec:last-child{border-bottom:0}
.sec h3{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--detail-ink);margin-bottom:12px}
.sec .help{margin-top:10px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.sec .help strong{color:var(--ink-2);font-weight:550}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.ctarow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.ctarow .btn{height:46px;font-size:14.5px}
.bpick{display:flex;flex-wrap:wrap;gap:7px}
.bpick button{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px 0 11px;border-radius:var(--pill);
  border:1px solid var(--line-2);background:transparent;color:var(--ink-3);font-size:12.5px;
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.bpick button::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--c);opacity:.5}
.bpick button:hover{color:var(--ink);border-color:color-mix(in srgb,var(--c) 50%,transparent)}
.bpick button.on{color:color-mix(in srgb,var(--c) 48%,var(--ink));font-weight:500;border-color:transparent;
  background:color-mix(in srgb,var(--c) 15%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 34%,transparent)}
.bpick button.on::before{opacity:1}
.pipe{display:flex;flex-direction:column;gap:8px}
.pipe-row{display:grid;grid-template-columns:minmax(0,1fr) 158px 146px;gap:8px;align-items:center;padding:8px 8px 8px 12px;
  border-radius:14px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
.pipe-row .bn{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;min-width:0}
.pipe-row .bn::before{content:"";width:8px;height:8px;border-radius:99px;background:var(--c);flex:none}
.pipe-row .select,.pipe-row .field{width:100%;height:34px;font-size:12.5px;border-radius:10px}
.orig{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 20px;font-size:13.5px}
.orig dt{color:var(--ink-3)}
.orig dd{word-break:break-word}
.znotes{display:flex;flex-direction:column;gap:8px}
.znote{padding:11px 13px;border-radius:14px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);
  font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.znote time{display:block;margin-top:5px;font-size:11.5px;color:var(--ink-3)}
/* Cobro */
.payrow{display:grid;grid-template-columns:118px 92px 1fr;gap:8px;margin-top:8px}
.payrow .select{width:100%}
.paylist{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.payitem{padding:12px 13px;border-radius:14px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
.payitem .l1{display:flex;align-items:baseline;gap:9px}
.payitem .amount{font-size:20px;font-weight:350;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.payitem .cpt{flex:1;min-width:0;font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.payitem .l2{margin-top:4px;font-size:12px;color:var(--ink-3)}
.payitem .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
/* Historial: linea de tiempo */
.logadd{display:grid;grid-template-columns:124px 1fr auto;gap:8px;margin-bottom:16px}
.logadd .select{width:100%}
.log{position:relative;display:flex;flex-direction:column;gap:14px;padding-left:18px}
.log::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--line-2)}
.logitem{position:relative;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;font-size:13.5px}
.logitem::before{content:"";position:absolute;left:-18px;top:6px;width:9px;height:9px;border-radius:99px;background:var(--paper);
  box-shadow:inset 0 0 0 2px var(--detail)}
.logitem .tp{font-weight:550}
.logitem .ts{margin-left:8px;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.logitem .tx{display:block;margin-top:2px;color:var(--ink-2);line-height:1.5;word-break:break-word}
.logitem .del{width:26px;height:26px;border:0;background:transparent;color:var(--ink-3);border-radius:8px;opacity:0;transition:opacity .2s,color .2s,background .2s}
.logitem:hover .del,.logitem .del:focus-visible{opacity:1}
.logitem .del:hover{color:var(--crit);background:var(--crit-soft)}
.logitem .del .ic{width:14px;height:14px}
.log.none{padding-left:0}
.log.none::before{display:none}
@media (hover:none){.logitem .del{opacity:1}}

/* --- Buscador rapido ---------------------------------------------------- */
.pal{position:fixed;inset:0;z-index:80;display:none;align-items:flex-start;justify-content:center;padding:14vh 20px 20px;
  background:var(--scrim);backdrop-filter:blur(4px)}
.pal.on{display:flex}
.palbox{width:min(580px,100%);border-radius:20px;border:1px solid var(--line-2);background:var(--paper);overflow:hidden;box-shadow:var(--sh-3);
  animation:rise .35s var(--ease) both}
.palbox input{width:100%;height:62px;padding:0 22px;border:0;background:transparent;font-size:22px;font-weight:300;letter-spacing:-.02em}
.palbox input::placeholder{color:var(--ink-3)}
.palbox input:focus{outline:none}
.pallist{max-height:52vh;overflow-y:auto;border-top:1px solid var(--line);padding:6px}
.palitem{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;cursor:pointer}
.palitem:hover,.palitem.sel{background:var(--sel)}
.palitem .ava{width:28px;height:28px;font-size:10.5px}
.palitem .nm{flex:1;min-width:0;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palitem .hint{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.pallist .empty{margin:10px;border:0}

.toast{position:fixed;left:50%;bottom:26px;z-index:90;transform:translate(-50%,18px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--pill);
  background:linear-gradient(180deg,#17627f,#0a3444);color:#f4fafb;font-size:13.5px;font-weight:500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--sh-3);transition:opacity .3s,transform .4s var(--ease)}
.toast::before{content:"";width:7px;height:7px;border-radius:99px;background:#6fe0d5}
.toast.on{opacity:1;transform:translate(-50%,0)}
.foot{margin-top:30px;font-size:12.5px;color:var(--ink-3)}

/* --- Acceso ------------------------------------------------------------- */
.login{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);min-height:100dvh}
.login-form{display:flex;flex-direction:column;justify-content:center;padding:40px clamp(24px,7vw,104px)}
.login-logo{display:block;width:212px;height:auto;margin-bottom:64px}
:root[data-theme="dark"] .login-logo{filter:brightness(0) invert(1)}
.login-form h1{font-size:48px;font-weight:300;letter-spacing:-.04em;line-height:1}
.login-form .lead{margin-top:14px;color:var(--ink-3);font-size:15px;max-width:36ch}
.login-form form{margin-top:34px;max-width:360px}
.login-form label{display:block;margin-bottom:7px;font-size:13px;font-weight:500;color:var(--ink-2)}
.login-form .field{height:48px;font-size:16px;box-shadow:var(--sh-1)}
.login-form .btn{width:100%;height:48px;margin-top:14px;font-size:15px}
.login-form .err{margin-top:9px;font-size:13px;color:var(--crit)}
.login-form .fine{margin-top:26px;font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:8px}
.login-form .fine .ic{width:15px;height:15px}
.login-aside{position:relative;display:flex;flex-direction:column;justify-content:flex-end;margin:14px;padding:clamp(28px,4.5vw,60px);
  border-radius:28px;color:#eef6f7;overflow:hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(70% 55% at 0% 0%,rgba(78,209,200,.5),transparent 70%),
    radial-gradient(60% 50% at 100% 100%,rgba(232,216,208,.3),transparent 72%),
    linear-gradient(160deg,#14566f 0%,#062129 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 40px 80px -40px rgba(7,39,51,.7)}
/* El isotipo del cliente, grande y recortado por la esquina. */
.login-aside .iso{position:absolute;right:-9%;top:-7%;width:min(62%,460px);height:auto;opacity:.92;pointer-events:none;
  filter:drop-shadow(0 30px 60px rgba(4,24,31,.5))}
.login-aside .big{position:relative;font-size:clamp(40px,4.6vw,68px);font-weight:250;letter-spacing:-.045em;line-height:1.02;max-width:12ch}
.login-aside p{position:relative;margin-top:20px;max-width:38ch;font-size:15.5px;line-height:1.55;color:rgba(238,246,247,.78)}

/* --- Pantallas pequenas -------------------------------------------------
   La barra lateral pasa arriba, con las lineas en una fila que se desliza;
   el tablero queda en una columna por estado y la ficha a pantalla completa. */
@media (min-width:1700px){ .legend{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:1240px){
  .app{grid-template-columns:248px minmax(0,1fr)}
  .side{padding-left:14px;padding-right:14px}
  .nav-item{font-size:13.5px;gap:9px}
  .nav-item.on::before{left:-14px}
  .brand-logo{width:164px}
  .main{padding:26px 22px 56px}
  .head h1{font-size:38px}
  .summary{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .summary .funnel{grid-column:1 / -1}
  .colbody{max-height:calc(100dvh - 300px)}
}
@media (max-width:760px){
  /* minmax(0,1fr): con 1fr a secas la fila de lineas, que se desliza, ensancharia la pagina. */
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;gap:14px;padding:16px 16px 14px;overflow:hidden;min-width:0;box-shadow:none}
  .side>*{min-width:0}
  .brand-logo{width:150px}
  .brand-sub,.navlabel{display:none}
  .navgroup{flex-direction:row;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .navgroup::-webkit-scrollbar{display:none}
  .nav-item{width:auto;flex:none;padding:0 13px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)}
  .nav-item.on::before{display:none}
  .side-foot{margin-top:0;flex-direction:row;align-items:center}
  .integ,.demo-note{display:none}
  .side-actions{margin-left:auto}
  .side-actions .btn{flex:none}
  .main{padding:22px 16px 52px}
  .head h1{font-size:34px}
  .tools .select{flex:1;min-width:140px}
  .hide-sm{display:none}
  .login{grid-template-columns:1fr}
  .login-aside{display:none}
}
@media (max-width:640px){
  .summary{grid-template-columns:minmax(0,1fr)}
  .funnel{grid-template-columns:minmax(0,1fr);gap:16px}
  .funnel-total{padding:0 0 14px;border-right:0;border-bottom:1px solid var(--line)}
  .legend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile .big{font-size:50px}
  /* En el movil cada estado ocupa casi toda la pantalla y se pasa con el dedo. */
  .board,.board.today{grid-auto-columns:86%;scroll-snap-type:x mandatory}
  .colbody{max-height:62dvh}
  .panel{top:0;right:0;bottom:0;width:100vw;border-radius:0;border:0}
  .pipe-row{grid-template-columns:1fr 1fr}
  .pipe-row .bn{grid-column:1 / -1}
  .payrow{grid-template-columns:1fr 92px}
  .payrow .btn{grid-column:1 / -1}
  .logadd{grid-template-columns:1fr 1fr}
  .logadd .field{grid-column:1 / -1;grid-row:1}
  .login-form h1{font-size:40px}
  .login-logo{margin-bottom:44px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important}
}