/* =====================================================================
   NetCodigos CRM · Bloque 07 · Diseño «Eléctrico»: base visual
   Se carga DESPUÉS de app.css. Cambia colores, letras, menú lateral (riel),
   barra superior, barra del celular, botones C5 con tornasol y animaciones.
   Fuente: panel de netcodigos.com (public/css/panel.css, bloque 19a: botón C5)
   y la maqueta aprobada (diseno/crm-electrico.html, versión 3).
   Se apaga todo el movimiento si Windows tiene desactivados los efectos de animación.
   ===================================================================== */

/* ---------- Letras servidas desde el CRM (sin Google Fonts) ---------- */
@font-face{font-family:"Inter";src:url("../fonts/inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-condensed.woff2") format("woff2");font-weight:600 800;font-stretch:50% 200%;font-style:normal;font-display:swap}

/* ---------- Borde de luz: ángulo que gira ---------- */
@property --nc-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes nc-a2{to{--nc-ang:360deg}}
@keyframes nc-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes nc-row{from{transform:translateY(6px)}to{transform:none}}
@keyframes nc-in{from{transform:translateY(10px)}to{transform:none}}
@keyframes nc-pop{from{opacity:0;transform:scale(.95) translateY(8px)}to{opacity:1;transform:none}}
@keyframes nc-fade{from{opacity:0}to{opacity:1}}
@keyframes nc-fade-out{to{opacity:0}}
@keyframes nc-ping{from{transform:scale(1);opacity:.55}75%,to{transform:scale(1.7);opacity:0}}

/* ---------- Colores «Eléctrico» (los mismos de panel.css de netcodigos.com) ---------- */
:root{
  --nc-bg:#EDF1F5;--nc-panel:#FFFFFF;--nc-panel-2:#F6F8FB;--nc-line:#DCE3EC;--nc-line-2:#C9D3E0;
  --nc-fg:#061237;--nc-fg-2:#33405E;--nc-muted:#525E77;--nc-faint:#66728C;
  --nc-accent:#0145F2;--nc-accent-ui:#0145F2;--nc-accent-h:#0136C4;--nc-accent-deep:#0A2A9E;--nc-accent-soft:#E3EAFD;--nc-accent-text:#0145F2;
  --nc-hover:rgba(1,69,242,.06);--nc-side:rgba(255,255,255,.74);--nc-top:rgba(237,241,245,.80);
  --nc-shadow:0 24px 48px -32px rgba(6,18,55,.40);--nc-shadow-lg:0 40px 90px -30px rgba(6,18,55,.55);
  --nc-ok:#15803D;--nc-ok-s:#E3F5EA;--nc-warn:#A15C07;--nc-warn-s:#FDF1DC;--nc-bad:#B91C1C;--nc-bad-s:#FDE8E8;
  --nc-iri:#33D6FF,#4A82FF,#8B6CFF,#FF7AD9,#FFC46B,#33D6FF;
  --nc-display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --nc-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --nc-ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
html.dark{
  --nc-bg:#050A18;--nc-panel:#0B1328;--nc-panel-2:#0E1830;--nc-line:#1B2643;--nc-line-2:#2A3A60;
  --nc-fg:#E8EDF9;--nc-fg-2:#C3CDDA;--nc-muted:#8D99B6;--nc-faint:#7684A3;
  --nc-accent-ui:#4A82FF;--nc-accent-soft:rgba(1,69,242,.22);--nc-accent-text:#8AA6FF;
  --nc-hover:rgba(138,166,255,.08);--nc-side:rgba(8,14,32,.80);--nc-top:rgba(5,10,24,.80);
  --nc-shadow:0 24px 48px -28px rgba(0,0,0,.8);--nc-shadow-lg:0 40px 90px -30px rgba(0,0,0,.9);
  --nc-ok:#4ADE80;--nc-ok-s:rgba(74,222,128,.12);--nc-warn:#FBBF24;--nc-warn-s:rgba(251,191,36,.12);--nc-bad:#F87171;--nc-bad-s:rgba(248,113,113,.12);
  color-scheme:dark;
}
/* Los nombres viejos de app.css apuntan a los colores nuevos: así todo el CRM cambia de una vez. */
body,body.light{
  --bg:var(--nc-bg);--bg2:var(--nc-panel);--bg3:var(--nc-panel);--card:var(--nc-panel);--ch:var(--nc-hover);
  --t1:var(--nc-fg);--t2:var(--nc-fg-2);--t3:var(--nc-muted);--t4:var(--nc-faint);
  --brd:var(--nc-line);--brd2:var(--nc-line-2);
  --gold:var(--nc-accent-ui);--gdim:var(--nc-accent-soft);--gh:var(--nc-accent-h);
  --thhbg:var(--nc-panel-2);--inbg:var(--nc-panel-2);
  --accent2:#4A82FF;--info:var(--nc-accent-text);--danger:var(--nc-bad);--success:var(--nc-ok);--warning:var(--nc-warn);
  --money:var(--nc-fg);--metric:var(--nc-fg);
  --app-font:"Inter";
}
html{background:var(--nc-bg)}
body,body.light{margin:0;padding:0;display:block;min-height:100vh;background:var(--nc-bg);font-family:var(--nc-body);color:var(--nc-fg);-webkit-font-smoothing:antialiased;transition:none}
::selection{background:color-mix(in srgb,var(--nc-accent) 22%,transparent)}
:focus-visible{outline:2px solid var(--nc-accent-text);outline-offset:2px}

/* =====================================================================
   Estructura: menú lateral de vidrio + barra superior + contenido
   ===================================================================== */
.nc-app{position:relative;display:flex;height:100vh;height:100dvh;overflow:hidden;font-size:13px;color:var(--nc-fg);
  background:radial-gradient(60% 50% at 100% 0%,rgba(1,69,242,.12),transparent 70%),radial-gradient(40% 40% at 0% 100%,rgba(1,69,242,.07),transparent 70%),var(--nc-bg)}
html.dark .nc-app{background:radial-gradient(60% 55% at 100% 0%,rgba(1,69,242,.26),transparent 70%),radial-gradient(45% 45% at 0% 100%,rgba(1,69,242,.13),transparent 70%),var(--nc-bg)}
.nc-side{width:252px;flex:none;height:100%;display:flex;flex-direction:column;overflow:hidden;z-index:40;background:var(--nc-side);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-right:1px solid var(--nc-line);
  transition:width .42s var(--nc-ease),box-shadow .3s}
.nc-logo{display:flex;align-items:center;gap:10px;padding:18px 19px 14px;white-space:nowrap}
.nc-logo .mk{width:34px;height:34px;border-radius:10px;display:block;flex:none}
.nc-logo .wm{height:19px;width:auto;display:block}
.nc-logo small{display:block;font:600 10.5px var(--nc-body);letter-spacing:.08em;text-transform:uppercase;color:var(--nc-muted);margin-top:3px}
html:not(.dark) .on-dark{display:none!important}
html.dark .on-light{display:none!important}
.nc-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 14px 16px;display:flex;flex-direction:column;gap:10px}
.nc-group{display:flex;flex-direction:column;gap:2px}
.nc-group-hd{font:600 10.5px var(--nc-body);letter-spacing:.12em;text-transform:uppercase;color:var(--nc-muted);padding:8px 10px 4px;white-space:nowrap}
.nc-item{position:relative;display:flex;align-items:center;gap:11px;padding:6px 11px;min-height:40px;border-radius:12px;white-space:nowrap;overflow:hidden;
  color:var(--nc-fg);font:500 14px var(--nc-body);cursor:pointer;border:2px solid transparent;background:none;width:100%;text-align:left;text-decoration:none;transition:background .2s,color .2s}
.nc-item i{width:18px;flex:none;text-align:center;font-size:16px;color:var(--nc-muted);transition:color .2s}
.nc-item:hover{background:var(--nc-hover)}
.nc-item:hover i{color:var(--nc-accent-text)}
/* Elemento activo (ajuste del 31-oct): solo la silueta en tornasol, que gira despacio; sin bloque azul y sin cuadro blanco en el icono.
   Es lo único que se mueve solo (uno por pantalla). La silueta es un marco fijo con máscara (.nc-ring) y dentro gira un degradado:
   el giro es solo «transform», que lo resuelve la tarjeta gráfica sin que el navegador trabaje (regla del bloque 08b: CRM quieto = navegador en reposo).
   En pantallas táctiles queda quieta, y con «reducir movimiento» también. */
.nc-item.on{color:var(--nc-fg);font-weight:600;overflow:visible}
.nc-item.on i{color:var(--nc-accent-text)}
.nc-ring{display:none}
.nc-item.on .nc-ring,.nc-dock button.on .nc-ring{display:block;position:absolute;inset:-2px;border-radius:inherit;padding:2px;overflow:hidden;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.nc-ring::before{content:"";position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;background:conic-gradient(var(--nc-iri));
  transform:translate(-50%,-50%) rotate(0deg);will-change:transform;animation:nc-giro 5s linear infinite}
@keyframes nc-giro{to{transform:translate(-50%,-50%) rotate(360deg)}}
.nc-count{margin-left:auto;min-width:22px;text-align:center;font:700 11px/18px var(--nc-body);padding:0 7px;border-radius:999px;background:var(--nc-warn-s);color:var(--nc-warn);position:relative;isolation:isolate}
.nc-count::after,.nc-dock button b::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--nc-warn);opacity:0;pointer-events:none;animation:nc-ping 2.6s cubic-bezier(0,0,.2,1) 3}
.nc-userbox{border-top:1px solid var(--nc-line);padding:10px;transition:border-color .3s}
.nc-user{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;white-space:nowrap;overflow:hidden}
.nc-user-name{font-size:13.5px;font-weight:600;color:var(--nc-fg)}
.nc-user-role{font-size:12px;color:var(--nc-muted)}
.nc-side .lb,.nc-logo-txt,.nc-group-hd,.nc-user>div{transition:opacity .22s ease,transform .32s var(--nc-ease)}

.nc-main{flex:1;min-width:0;height:100%;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;position:relative;scrollbar-gutter:stable}
.nc-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:14px 26px;background:var(--nc-top);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--nc-line)}
.nc-titles{min-width:0}
.nc-crumb{font-size:12.5px;color:var(--nc-muted)}
.nc-title{margin:0;font-family:var(--nc-display);font-stretch:75%;font-weight:700;font-size:30px;line-height:1.02;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--nc-fg)}
.nc-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.nc-ibtn{position:relative;isolation:isolate;width:40px;height:40px;border-radius:999px;border:1px solid var(--nc-line);background:var(--nc-panel);display:grid;place-items:center;color:var(--nc-fg);cursor:pointer;text-decoration:none;flex:none;transition:border-color .2s,color .2s}
.nc-ibtn:hover{color:var(--nc-accent-text);border-color:transparent}
.nc-ibtn i{font-size:17px}
.nc-theme{display:inline-flex;padding:3px;border-radius:999px;border:1px solid var(--nc-line);background:var(--nc-panel);flex:none}
.nc-theme button{width:32px;height:32px;border:2px solid transparent;border-radius:999px;background:transparent;color:var(--nc-muted);display:grid;place-items:center;cursor:pointer;font-size:15px;transition:color .25s}
.nc-theme button[aria-pressed="true"]{color:#fff;background:linear-gradient(180deg,#4A82FF,#0145F2) padding-box,conic-gradient(from var(--nc-ang),var(--nc-iri)) border-box;box-shadow:0 10px 22px -14px var(--nc-accent)}
.nc-content,.ppg.nc-content{flex:1;padding:24px 26px 48px}
.nc-dock{display:none}

/* Bloque 07b · Iconos 3D (Iconora, los mismos de netcodigos.com) en el menú y la barra del celular.
   Si un archivo no carga, se ve el icono de línea de siempre (nunca una imagen rota). */
.nc-item .nc-ico{width:26px;height:26px;flex:none;object-fit:contain;margin:-4px;border-radius:9px;filter:drop-shadow(0 4px 6px rgba(1,69,242,.20));transition:transform .4s var(--nc-ease),filter .3s,background .3s}
.nc-item .nc-ico+i{display:none}
.nc-item:hover .nc-ico{transform:translateY(-2px) rotate(-6deg) scale(1.1)}
html.dark .nc-item .nc-ico{filter:drop-shadow(0 4px 8px rgba(0,0,0,.55)) brightness(1.08)}
.nc-dock .nc-ico{width:24px;height:24px;object-fit:contain;border-radius:8px;filter:drop-shadow(0 3px 5px rgba(1,69,242,.2));transition:transform .3s var(--nc-ease)}
.nc-dock .nc-ico+i{display:none}
.nc-dock button:active .nc-ico{transform:scale(.9)}
html.dark .nc-dock button .nc-ico{filter:drop-shadow(0 3px 6px rgba(0,0,0,.55)) brightness(1.08)}

/* Menú de cuenta (Mi cuenta, Salir; en celular también Papelera, Configuración y Usuarios) */
.nc-menu{position:absolute;right:20px;top:calc(100% + 6px);z-index:60;min-width:250px;padding:6px;border-radius:18px;background:var(--nc-panel);border:1px solid var(--nc-line);box-shadow:var(--nc-shadow);display:grid;gap:2px;transform-origin:top right;animation:nc-pop .26s cubic-bezier(.2,1.2,.4,1) both}
.nc-menu[hidden]{display:none}
.nc-menu .hd{padding:10px 12px;border-bottom:1px solid var(--nc-line);margin-bottom:4px}
.nc-menu .hd b{display:block;font-size:14px;color:var(--nc-fg)}
.nc-menu .hd small{color:var(--nc-muted);font-size:12px}
.nc-menu a,.nc-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:12px;background:none;color:var(--nc-fg);font:500 14px var(--nc-body);cursor:pointer;text-align:left;text-decoration:none}
.nc-menu a:hover,.nc-menu button:hover{background:var(--nc-hover)}
.nc-menu i{font-size:18px;color:var(--nc-muted)}
.nc-menu .sep{height:1px;background:var(--nc-line);margin:4px 6px}
.nc-menu .only-sm{display:none}

/* Nombre de la sección cuando el menú está recogido */
.nc-tip{position:fixed;z-index:620;padding:6px 10px;border-radius:10px;background:#061237;color:#fff;font:600 12.5px var(--nc-body);pointer-events:none;box-shadow:var(--nc-shadow);opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .2s;white-space:nowrap}
.nc-tip.on{opacity:1;transform:none}
html.dark .nc-tip{background:#E8EDF9;color:#061237}

/* ---------- A · Riel: el menú lateral se recoge a una columna de iconos (solo computadora) ---------- */
@media (min-width:761px){
  html.riel .nc-side{width:72px}
  html.riel .nc-side .lb,html.riel .nc-logo-txt,html.riel .nc-group-hd,html.riel .nc-user>div{opacity:0;transform:translateX(-8px);pointer-events:none}
  html.riel .nc-userbox{border-top-color:transparent}
  html.riel .nc-count{position:absolute;top:5px;right:6px;min-width:0;width:9px;height:9px;padding:0;font-size:0;line-height:0;border-radius:50%;background:var(--nc-warn)}
}

/* ---------- Celular: barra de 5 botones abajo, sin menú lateral ---------- */
@media (max-width:760px){
  .nc-side,.nc-sidebtn,.hide-sm{display:none!important}
  .nc-top{padding:12px 16px;gap:8px}
  .nc-title{font-size:24px}
  .nc-content,.ppg.nc-content{padding:16px 16px 110px}
  .nc-menu{right:12px;left:12px;min-width:0}
  .nc-menu .only-sm{display:flex}
  .nc-dock{display:grid;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:50;grid-template-columns:repeat(5,1fr);gap:2px;padding:6px;border-radius:999px;
    background:var(--nc-side);border:1px solid var(--nc-line);box-shadow:var(--nc-shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  .nc-dock button{position:relative;display:grid;justify-items:center;gap:2px;padding:5px 0 4px;border-radius:999px;border:2px solid transparent;background:none;color:var(--nc-fg);font:600 11px var(--nc-body);cursor:pointer}
  .nc-dock button i{font-size:18px;color:var(--nc-muted)}
  .nc-dock button.on i{color:var(--nc-accent-text)}
  .nc-dock button b{position:absolute;top:2px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--nc-warn);color:#fff;font:700 10px/17px var(--nc-body);text-align:center;isolation:isolate}
  html.dark .nc-dock button b{color:#1A1203}
  .ptoast{left:12px!important;right:12px!important;bottom:90px!important;min-width:0!important}
}

/* =====================================================================
   Botones C5 de netcodigos.com (borde de luz, inclinación y reflejo)
   ===================================================================== */
.nc-btn,.cbtn,.gbtn,.bcf{--c5-fill:linear-gradient(180deg,#4A82FF,#0145F2);--c5-ring:conic-gradient(from var(--nc-ang),var(--nc-iri));
  position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:999px;cursor:pointer;white-space:nowrap;
  color:#fff;border:2px solid transparent;background:var(--c5-fill) padding-box,var(--c5-ring) border-box;box-shadow:0 12px 24px -14px var(--nc-accent);
  transform:perspective(600px) rotateX(var(--c5-rx,0deg)) rotateY(var(--c5-ry,0deg));transition:transform .15s ease-out,box-shadow .25s,color .2s;font-family:var(--nc-body)}
.nc-btn{padding:10px 18px;font-weight:600;font-size:14px}
.cbtn{padding:7px 15px;font-size:12.5px;font-weight:600}
.gbtn,.bcf{padding:6px 13px;font-size:12px;font-weight:600}
/* Bloque 08b · Rendimiento: el borde de luz se ve siempre, pero solo gira al pasar el mouse. Cada borde que gira
   obliga al navegador a repintar cada cuadro; con cientos de botones en las tablas, el CRM se ponía lento. */
.nc-btn::before,.cbtn::before,.gbtn::before,.bcf::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:38%;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .65s ease}
.nc-btn:hover,.cbtn:hover,.gbtn:hover,.bcf:hover{animation:nc-a2 1.6s linear infinite;box-shadow:0 16px 28px -14px var(--nc-accent)}
.cbtn:hover{background:var(--c5-fill) padding-box,var(--c5-ring) border-box}
.nc-btn:hover::before,.cbtn:hover::before,.gbtn:hover::before,.bcf:hover::before{left:125%}
.nc-btn:active,.cbtn:active,.gbtn:active,.bcf:active{transform:perspective(600px) scale(.96)}
.nc-btn i,.cbtn i,.gbtn i,.bcf i{font-size:15px}
/* Secundarios: blancos con tornasol que gira despacio */
.gbtn,.nc-btn.sec{--c5-fill:linear-gradient(180deg,var(--nc-panel),var(--nc-panel-2));color:var(--nc-fg);box-shadow:0 10px 20px -16px rgba(6,18,55,.45)}
.gbtn:hover,.nc-btn.sec:hover{animation:nc-a2 2.4s linear infinite;color:var(--nc-fg);border-color:transparent;background:var(--c5-fill) padding-box,var(--c5-ring) border-box;box-shadow:0 14px 24px -16px rgba(6,18,55,.5)}
.gbtn::before,.nc-btn.sec::before{background:linear-gradient(100deg,transparent,rgba(1,69,242,.16),transparent)}
html.dark .gbtn::before,html.dark .nc-btn.sec::before{background:linear-gradient(100deg,transparent,rgba(138,166,255,.28),transparent)}
/* Confirmar (verde) */
.bcf{--c5-fill:linear-gradient(180deg,#22A35A,#15803D);--c5-ring:conic-gradient(from var(--nc-ang),#7CF0B0,#15803D,#7CF0B0);box-shadow:0 12px 24px -14px rgba(21,128,61,.8)}
.bcf:hover{background:var(--c5-fill) padding-box,var(--c5-ring) border-box;box-shadow:0 16px 26px -14px rgba(21,128,61,.85)}
/* Eliminar: rojo suave; al pasar el mouse, borde de luz rojo */
.danger-btn{position:relative;isolation:isolate;border-radius:999px;background:var(--nc-bad-s);border:1px solid color-mix(in srgb,var(--nc-bad) 30%,transparent);color:var(--nc-bad);transition:border-color .2s,background .2s}
.danger-btn:hover{border-color:transparent;background:linear-gradient(var(--nc-bad-s),var(--nc-bad-s)) padding-box,conic-gradient(from var(--nc-ang),#FCA5A5,#EF4444,#FDBA74,#FCA5A5) border-box;animation:nc-a2 2.4s linear infinite}

/* Tornasol al pasar el mouse (como netcodigos.com: borde arcoíris, nunca un fondo oscuro) */
.tbtn,.icon-btn,.sort-dir-btn,.copy-mini,.notes-add,.cfg-tab,.cli-chip{position:relative;isolation:isolate}
:is(.nc-ibtn,.tbtn,.icon-btn,.sort-dir-btn,.copy-mini,.notes-add,.cfg-tab:not(.active),.cli-chip:not(.empty))::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .25s;
  background:conic-gradient(from var(--nc-ang),var(--nc-iri));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
:is(.nc-ibtn,.tbtn,.icon-btn,.sort-dir-btn,.copy-mini,.notes-add,.cfg-tab:not(.active),.cli-chip:not(.empty)):hover::after,.tbtn.on::after,.sort-dir-btn.active::after,.icon-btn.on::after{opacity:1;animation:nc-a2 3s linear infinite}
.tbtn.on::after,.sort-dir-btn.active::after,.icon-btn.on::after{animation:none}
:is(.tbtn.on,.sort-dir-btn.active,.icon-btn.on):hover::after,.nc-theme button:hover,.cfg-tab.active:hover{animation:nc-a2 3s linear infinite}
.tbtn{border-radius:999px;padding:6px 13px;font-size:12px;color:var(--nc-fg-2);background:var(--nc-panel)}
.tbtn:hover,.sort-dir-btn:hover,.copy-mini:hover,.notes-add:hover,.icon-btn:hover,.cli-chip:hover{border-color:transparent;color:var(--nc-accent-text)}
.tbtn.on,.sort-dir-btn.active,.icon-btn.on{background:var(--nc-accent-soft);border-color:transparent;color:var(--nc-accent-text)}
.sort-dir-btn,.copy-mini,.notes-add{border-radius:999px}
.icon-btn{border-radius:12px;background:var(--nc-panel)}
.cfg-tabs{background:var(--nc-panel);border:1px solid var(--nc-line);border-radius:999px;padding:4px;box-shadow:var(--nc-shadow)}
.cfg-tab{border-radius:999px;border:2px solid transparent;font-size:12.5px;color:var(--nc-fg-2)}
.cfg-tab:hover:not(.active){background:var(--nc-hover);color:var(--nc-accent-text)}
.cfg-tab.active{color:#fff;background:linear-gradient(180deg,#4A82FF,#0145F2) padding-box,conic-gradient(from var(--nc-ang),var(--nc-iri)) border-box;box-shadow:0 10px 22px -14px var(--nc-accent)}

/* =====================================================================
   Tarjetas, tablas, campos, etiquetas, ventanas y avisos
   ===================================================================== */
.card,.detcard,.cfg-card,.cli-card{border-radius:20px;border:1px solid var(--nc-line);background:var(--nc-panel);box-shadow:var(--nc-shadow)}
html.dark :is(.card,.detcard,.cfg-card,.cli-card,.sc){box-shadow:inset 0 1px 0 rgba(255,255,255,.05),var(--nc-shadow)}
.sc{border-radius:20px!important;background:var(--nc-panel);box-shadow:var(--nc-shadow)}
.ch{padding:14px 18px;border-bottom:1px solid var(--nc-line)}
.dt th{background:transparent;font:600 10.5px var(--nc-body);letter-spacing:.1em;text-transform:uppercase;color:var(--nc-muted);padding:10px 14px;border-bottom:1px solid var(--nc-line)}
.dt td{border-bottom:1px solid var(--nc-line);padding:11px 14px;font-size:12.5px}
.dt tbody tr{transition:background .15s}
.dt tr:hover td{background:var(--nc-hover)}
.dt tbody tr td:first-child{box-shadow:inset 0 0 0 transparent;transition:box-shadow .2s,background .15s}
.dt tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--nc-accent-ui)}
.fin,.dsel,.srch,.ui-control-trigger{background:var(--nc-panel-2);border:1px solid var(--nc-line);border-radius:12px;color:var(--nc-fg);font-family:var(--nc-body)}
.fin:focus,.dsel:focus,.srch:focus,.ui-control-trigger:focus,.ui-select.open .ui-control-trigger,.ui-date.open .ui-control-trigger{border-color:var(--nc-accent-ui);box-shadow:0 0 0 3px var(--nc-accent-soft);outline:0}
.srch{border-radius:999px;padding-left:14px}
.flabel{color:var(--nc-fg-2)}
.b,.ap,.method-pill,.status-badge,.avail-pill,.duration-pill{border-radius:999px}
.tip{background:var(--nc-accent-soft);border-color:transparent;color:var(--nc-accent-text);border-radius:14px}
.sectitle{color:var(--nc-accent-text)}
.selected-service{border-color:transparent;color:var(--nc-accent-text)}
.backbtn:hover{color:var(--nc-accent-text)}
.lnk:hover{color:var(--nc-accent-text)}
.assign-item.checked{border-color:color-mix(in srgb,var(--nc-accent) 40%,transparent)}
.cobro-cuenta-pill:hover,.cobro-cuenta-pill[style*="cursor: pointer"]:hover{border-color:color-mix(in srgb,var(--nc-accent) 35%,transparent)}
.ui-floating{background:var(--nc-panel);border:1px solid var(--nc-line);border-radius:16px;box-shadow:var(--nc-shadow-lg);animation:nc-pop .2s cubic-bezier(.2,1.2,.4,1) both}
.ui-select-option{border-radius:10px}
.ui-select-option:hover{background:var(--nc-hover)}
.ui-select-option.selected{background:var(--nc-accent-soft);color:var(--nc-accent-text)}
.ui-cal-nav button:hover{border-color:transparent;color:var(--nc-accent-text);background:var(--nc-accent-soft)}
.ui-cal-day{border-radius:10px}
.ui-cal-day.today{border:1px solid color-mix(in srgb,var(--nc-accent) 45%,transparent);color:var(--nc-accent-text)}
.ui-cal-day.selected{color:#fff;background:linear-gradient(180deg,#4A82FF,#0145F2);box-shadow:0 8px 16px -10px var(--nc-accent)}
.ui-cal-footer button{color:var(--nc-accent-text)}
/* Ventanas: fondo con desenfoque y entrada con un rebote suave */
.mov{position:absolute;background:rgba(5,10,24,.50);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.light .mov{background:rgba(6,18,55,.38)}
.mov.open{animation:nc-fade .2s ease both}
.mcard{background:var(--nc-panel);border:1px solid var(--nc-line);border-radius:22px;box-shadow:var(--nc-shadow-lg);max-height:min(720px,calc(100vh - 40px))}
.mov.open .mcard{animation:nc-pop .38s cubic-bezier(.2,1.25,.4,1) both}
.mhdr,.mftr{background:var(--nc-panel);border-color:var(--nc-line)}
/* Avisos: tarjeta con borde de color, entra deslizándose */
.ptoast{background:var(--nc-panel);border-radius:16px;box-shadow:var(--nc-shadow-lg);color:var(--nc-fg);transition:opacity .3s,transform .4s cubic-bezier(.2,1.3,.4,1)}
.ptoast.off{transform:translateY(14px) scale(.98)}
/* Barras de desplazamiento finas */
.nc-main::-webkit-scrollbar,.card::-webkit-scrollbar,.nc-nav::-webkit-scrollbar{width:10px;height:10px}
.nc-main::-webkit-scrollbar-thumb,.card::-webkit-scrollbar-thumb,.nc-nav::-webkit-scrollbar-thumb{background:var(--nc-line-2);border-radius:99px;border:3px solid transparent;background-clip:padding-box}

/* Celular y tableta: las tablas se deslizan de lado (decisión de Max), en vez de apilarse en tarjetas */
@media (max-width:900px){
  #nc-app #ppg .dt,#nc-app #mcard .dt{display:table!important;width:100%!important;min-width:720px!important;table-layout:auto!important}
  #nc-app #ppg .dt thead,#nc-app #mcard .dt thead{display:table-header-group!important}
  #nc-app #ppg .dt tbody,#nc-app #mcard .dt tbody{display:table-row-group!important;padding:0!important}
  #nc-app #ppg .dt tr,#nc-app #mcard .dt tr{display:table-row!important;border:0!important;border-radius:0!important;background:transparent!important;margin:0!important;padding:0!important;box-shadow:none!important}
  #nc-app #ppg .dt th,#nc-app #mcard .dt th{display:table-cell!important;white-space:nowrap}
  #nc-app #ppg .dt td,#nc-app #mcard .dt td{display:table-cell!important;width:auto!important;max-width:none!important;padding:11px 14px!important;border-bottom:1px solid var(--nc-line)!important;vertical-align:middle;white-space:nowrap!important}
  #nc-app #ppg .dt td::before,#nc-app #mcard .dt td::before{content:none!important;display:none!important}
  #nc-app #ppg .dt tbody tr:last-child td{border-bottom:0!important}
  #nc-app #ppg .dt tbody tr:hover td{background:var(--nc-hover)!important}
  #nc-app #ppg .card,#nc-app #mcard .card{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
}

/* =====================================================================
   Movimiento al cambiar de sección: tarjetas y filas entran en cascada.
   La pastilla del menú y la del celular se deslizan (View Transitions).
   ===================================================================== */
#ppg.nc-enter>*{animation:nc-in .4s var(--nc-ease) both}
#ppg.nc-enter>*:nth-child(2){animation-delay:.05s}#ppg.nc-enter>*:nth-child(3){animation-delay:.1s}#ppg.nc-enter>*:nth-child(4){animation-delay:.15s}#ppg.nc-enter>*:nth-child(n+5){animation-delay:.2s}
#ppg.nc-enter .dt tbody tr:nth-child(-n+12){animation:nc-row .4s var(--nc-ease) both}
#ppg.nc-enter .dt tbody tr:nth-child(2){animation-delay:.03s}#ppg.nc-enter .dt tbody tr:nth-child(3){animation-delay:.06s}#ppg.nc-enter .dt tbody tr:nth-child(4){animation-delay:.09s}#ppg.nc-enter .dt tbody tr:nth-child(5){animation-delay:.12s}#ppg.nc-enter .dt tbody tr:nth-child(6){animation-delay:.15s}#ppg.nc-enter .dt tbody tr:nth-child(7){animation-delay:.18s}#ppg.nc-enter .dt tbody tr:nth-child(8){animation-delay:.21s}#ppg.nc-enter .dt tbody tr:nth-child(n+9){animation-delay:.24s}
.nc-item.on{view-transition-name:nc-on}
@media (max-width:760px){.nc-item.on{view-transition-name:none}.nc-dock button.on{view-transition-name:nc-dock-on}}
#ptitle{view-transition-name:nc-title}
.cfg-tab.active{view-transition-name:nc-tab-on}
::view-transition-group(nc-on),::view-transition-group(nc-dock-on),::view-transition-group(nc-tab-on),::view-transition-group(nc-title){animation-duration:.45s;animation-timing-function:var(--nc-ease)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
html.vt-theme :is(#ptitle,.nc-item.on,.nc-dock button.on,.cfg-tab.active){view-transition-name:none}
html.vt-theme::view-transition-old(root),html.vt-theme::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* Si Windows pide «reducir movimiento», todo queda quieto */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Bloque 09 · En pantallas táctiles, el «pasar el mouse» queda pegado al botón que se tocó:
   ahí el borde de luz no gira, para que nada se mueva sin fin (regla del bloque 08b). */
@media (hover:none){
  .nc-ring::before{animation:none}
  .nc-btn:hover,.cbtn:hover,.gbtn:hover,.bcf:hover,.danger-btn:hover,.nc-theme button:hover,.cfg-tab.active:hover,
  :is(.nc-ibtn,.tbtn,.icon-btn,.sort-dir-btn,.copy-mini,.notes-add,.cfg-tab:not(.active),.cli-chip:not(.empty)):hover::after{animation:none}
}