@layer theme,base,legacy,components,utilities;
@layer legacy{
/* thePower · CRM — base del sistema de diseño de las pantallas antiguas (#111, #128). Desde #542 lleva el tema Pokecut
de #541 (superficies y bordes grises, Inter, acción principal en petróleo, texto secundario #6b6c75, filas de 40 px):
los mismos valores que los tokens --ui-* del marco React (platform/web/src/index.css).
Tokens, fuentes, reinicio y componentes compartidos. Cada área tiene su fichero ui-*.css, que se
carga detrás de este en index.html; los nombres de clase históricos siguen siendo válidos.
Inter: SIL OFL 1.1 (static/fonts/OFL.txt). */
@font-face{font-family:"Inter";src:url(/fonts/inter-400-700-latin.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
:root{
color-scheme:light;
--font-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
--font-display:var(--font-ui);
font-family:var(--font-ui);line-height:1.5;font-synthesis:none;
/* Petróleo del marco antiguo: solo lo lee .brand-page (ui-ajustes.css);
se va con el frontal antiguo en #551. El marco es React desde #542 (platform/web). */
--frame-bg:#1e3740;--frame-fg:#cfe0e4;
/* Panel claro (Pokecut): fondo del panel, superficies grises y texto #393846; el secundario #6b6c75 llega a 4,5:1 sobre
blanco y sobre --surface-2, no sobre --surface-3 */
--bg:#fdfdfd;--surface:#ffffff;--surface-2:#f5f5f5;--surface-3:#ededed;
--fg:#393846;--fg-2:#404040;--muted:#6b6c75;--muted-2:#a3a4a9; /* muted-2 solo para iconos y puntos, nunca texto */
--border:#eaeceb;--border-strong:#cfcfcf;--border-2:var(--border-strong);
/* Campos: borde ≥ 3:1 sobre blanco; el texto de ayuda (placeholder) ≥ 4,5:1 y más claro que el valor */
--border-control:#8d8e95;--placeholder:#6b6c75;
/* Deshabilitado: texto ≥ 4,5:1 sobre su fondo, sin transparencia */
--disabled-bg:#ededed;--disabled-fg:#5e5e5e;
/* Acción principal (Pokecut con el petróleo de thePower): fondo petróleo y texto blanco */
--primary:#1e3740;--primary-hover:#2b4d59;--primary-active:#16292f;--on-primary:#fff;--on-primary-line:rgb(255 255 255/.35);
/* Menta de marca (acentos sobre petróleo y oscuro, marcas de hecho); nunca lleva texto blanco ni va como texto sobre claro */
--accent:#7af6c0;--accent-hover:#5ee8ab;--accent-active:#4fe0a0;--on-accent:#13242a;--accent-strong:#1e3740;--accent-strong-hover:#2e5360;
--accent-soft:#e3f9ee;--accent-soft-hover:#d2f4e3;--accent-fg:#0e6b4e;
--ring:#1e3740;
/* Tonos semánticos: el color está en los datos */
--success:#0e6b4e;--success-soft:#e8f8f0;--warning:#b45309;--warning-soft:#fff7ed;
--danger:#b3372f;--danger-soft:#fdeceb;--info:#1a55e0;--info-soft:#eef3ff;
--ai:#542c9e;--ai-soft:#f3effb; /* solo «IA propone» (D6) */
--due-late:#b3372f;--due-today:#9a5b00;
/* Etapas (en inglés, como se guardan) */
--st-prospecting:#44606a;--st-prospecting-bg:#eef2f3;
--st-delivered:#3a3f9f;--st-delivered-bg:#ecedfb;
--st-won:#0e6b4e;--st-won-bg:#e3f8ee;--st-lost:#a8322b;--st-lost-bg:#fdecea;--st-discarded:#5f6b6e;--st-discarded-bg:#f3f4f4;
/* Tiles de objeto */
--ob-cuenta:#1e3740;--ob-cuenta-bg:#e3ecef;--ob-contacto:#12598a;--ob-contacto-bg:#e5f2fb;
--ob-oportunidad:#0e6b4e;--ob-oportunidad-bg:#e3f8ee;--ob-reunion:#8a4a06;--ob-reunion-bg:#fdf0da;
/* Forma, profundidad y movimiento */
/* Radios (Pokecut, #542): xs 6 (marcas pequeñas) · sm 8 (botón, campo, select, segmentado, filtro) · md 12 (menú, popover, toast)
· lg 16 (panel, tarjeta, modal) · xl 24 (panel del marco). --radius* son alias de transición. */
--r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-full:999px;
--radius-sm:var(--r-sm);--radius:var(--r-lg);--radius-lg:var(--r-xl);--radius-full:var(--r-full);
--shadow-sm:0 1px 2px rgb(0 0 0/.05);--shadow:0 8px 16px -4px #dedede;
--shadow-lg:0 24px 64px -16px rgb(19 36 42/.35);--shadow-menu:0 8px 24px -6px rgb(19 36 42/.18),0 2px 6px rgb(19 36 42/.08);
/* Tipo (#266): siete tamaños. xs (meta, kbd) · sm · md (cuerpo) · lg · xl · 2xl · display (Inter, cifras y títulos grandes).
Un tamaño nuevo entra aquí, no escrito en la regla. */
--fs-xs:11px;--fs-sm:12px;--fs-md:13px;--fs-lg:15px;--fs-xl:18px;--fs-2xl:22px;--fs-display:26px;
/* Espaciado (#266): 2 4 6 8 12 16 20 24 32 48 en paddings y gaps. */
--s-2:2px;--s-4:4px;--s-6:6px;--s-8:8px;--s-12:12px;--s-16:16px;--s-20:20px;--s-24:24px;--s-32:32px;--s-48:48px;
/* --sidebar-w, --sidebar-w-icon, --topbar-h y --shell-top (borde inferior de la cabecera pegada) son del marco React. */
--ease:cubic-bezier(.2,.8,.2,1);--dur-fast:75ms;--dur:150ms;--dur-slow:240ms;
/* Alias históricos que aún se usan */
--green:var(--success);--green-soft:var(--success-soft);--red:var(--danger);
/* Tokens de sombras, velos y superficies especiales: los colores que antes iban escritos en cada regla. */
--shadow-ink:#13242a;--shadow-card:0 1px 1px rgb(19 36 42/.03);
--line-soft:rgb(19 36 42/.08);--hover-soft:rgb(30 55 64/.07);--menu-bg:rgb(255 255 255/.94);--shimmer:rgb(255 255 255/.6);--backdrop:rgb(19 36 42/.45);
--accent-line:#bfe9d3;--success-line:#bbf7d0;--warning-line:#f5d9b8;--danger-line:#f3c7c3;--danger-halo:rgb(179 55 47/.12);
--selected-fg:#1e3740;--step-current:#1e3740;
--on-strong:#fff;--veil:rgb(255 255 255/.12);--on-tone:#fff;--on-accent-line:rgb(19 36 42/.25);--ai-hover:color-mix(in srgb,#000 12%,var(--ai));
--inverse:#13242a;--on-inverse:#fff;--on-inverse-muted:rgb(255 255 255/.65);--on-inverse-soft:rgb(255 255 255/.75);--on-inverse-icon:rgb(255 255 255/.8);
--inverse-fill:rgb(255 255 255/.1);--inverse-fill-hover:rgb(255 255 255/.18);--inverse-sep:rgb(255 255 255/.2);--inverse-track:rgb(255 255 255/.22);
--inverse-danger:#ff9d94;--inverse-info:#a9c2c9;
--frame-strong:#fff;
/* Pantallas de marca (acceso y bienvenida): el mismo fondo petrol en los dos temas */
--brand-bg:#1e3740;--brand-glow:rgb(122 246 192/.24);--brand-glow-soft:rgb(122 246 192/.08);
/* Iconos de los campos (el trazo es --muted) */
--icon-select:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d6a73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d6a73' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg)}
/* El hueco de la barra de desplazamiento se reserva siempre: el marco no se mueve entre páginas cortas y largas (#250). */
html{scrollbar-gutter:stable}
/* Un dato sin espacios (una URL, un nombre pegado) se parte antes que salirse de su caja (#341): el texto corrido lo parte
donde no cabe y los títulos, que suelen ir en una fila flexible, también dejan que la fila los estreche. */
body{font-size:var(--fs-md);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums;overflow-wrap:break-word}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;color:var(--fg);overflow-wrap:anywhere}
h1{font-family:var(--font-display);font-size:var(--fs-display);line-height:36px;letter-spacing:-.02em}
h2{font-size:var(--fs-lg)}
h3{font-size:var(--fs-md);margin-bottom:6px}
.empty-state h3{margin-bottom:0}
h4{font-size:var(--fs-sm);font-weight:500;color:var(--muted);letter-spacing:0;margin:18px 0 8px}
p{margin:0 0 10px}
a{color:var(--accent-fg);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
small{font-size:var(--fs-sm);color:var(--muted)}
pre{font:var(--fs-sm)/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--s-8) var(--s-12);overflow:auto;white-space:pre-wrap}
code{font:var(--fs-xs) ui-monospace,SFMono-Regular,Menlo,monospace}
kbd{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 var(--s-6);border:1px solid var(--border-2);border-bottom-width:2px;border-radius:var(--r-xs);background:var(--surface);color:var(--muted);font:500 var(--fs-xs)/1 var(--font-ui);white-space:nowrap}
hr{border:0;border-top:1px solid var(--border);margin:16px 0}
ul,ol{margin:0 0 10px;padding-left:var(--s-20)}
li{margin-bottom:4px}
[hidden]{display:none!important}
/* Foco: anillo petrol de 2 px separado 2 px, sin halo; también en el marco React (platform/web/src/index.css). Los campos marcan el foco con su borde. */
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
::selection{background:var(--accent-hover);color:var(--on-accent)}
/* ---------- Controles ---------- */
button,input,select,textarea{font:inherit;color:inherit}
/* Un botón que deja pasar su texto a otra línea (white-space:normal, nombres de cuentas o propuestas) parte también las palabras
largas (#341); los de una línea no cambian. */
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-6);min-height:32px;padding:0 var(--s-12);border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--fg);font-weight:500;font-size:var(--fs-md);line-height:1;cursor:pointer;white-space:nowrap;overflow-wrap:anywhere;text-decoration:none;box-shadow:none;transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease)}
button:hover,.button:hover{background:var(--surface-2);text-decoration:none}
button:active,.button:active{transform:translateY(.5px)}
/* Un único primario por pantalla: petróleo con texto blanco (Pokecut, #542). */
button.primary,.button.primary{background:var(--primary);border-color:transparent;color:var(--on-primary);font-weight:600;box-shadow:none}
button.primary:hover,.button.primary:hover{background:var(--primary-hover);border-color:transparent}
button.primary:active,.button.primary:active{background:var(--primary-active)}
button.soft,.button.soft{background:var(--accent-soft);border-color:transparent;color:var(--accent-fg);box-shadow:none}
button.soft:hover{background:var(--accent-soft-hover)}
button.ghost{border-color:transparent;background:transparent;box-shadow:none}
button.ghost:hover{background:var(--surface-2)}
button.danger{color:var(--danger)}
button.danger:hover{background:var(--danger-soft);border-color:var(--danger-line)}
button.link,.link{min-height:0;padding:0;border:0;background:transparent;box-shadow:none;color:var(--accent-fg);font-weight:500;font-size:var(--fs-sm);border-radius:var(--r-xs)}
button.link:hover,.link:hover{background:transparent;text-decoration:underline;text-underline-offset:2px}
button.icon-button,.icon-button{width:32px;min-height:32px;padding:0;border-color:transparent;background:transparent;box-shadow:none;color:var(--muted);font-size:var(--fs-lg)}
button.icon-button:hover{background:var(--surface-2);color:var(--fg)}
button.sm{min-height:28px;padding:0 var(--s-8);font-size:var(--fs-sm)}
button.lg,.button.lg{min-height:40px;padding:0 var(--s-16);font-size:var(--fs-lg)}
/* Deshabilitado: texto --disabled-fg (≥ 4,5:1) sin transparencia; el secundario conserva su superficie y el borde
suave, y solo el primario pasa al gris --disabled-bg. Los transparentes (ghost, icono, enlace, opciones de menú)
solo se atenúan. */
button:disabled,.button:disabled{opacity:.5;cursor:not-allowed;transform:none}
:is(button,.button).primary:disabled:not(.menu-list button){background:var(--disabled-bg);border-color:transparent}
button svg,.button svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* :where deja la especificidad en la de un elemento: las reglas de cada componente (sufijos, iconos) ganan. */
input:where(:not([type=checkbox],[type=radio],[type=file])),select,textarea{width:100%;min-height:32px;padding:var(--s-4) var(--s-12);border:1px solid var(--border-control);border-radius:var(--r-sm);background:var(--surface);box-shadow:none;transition:border-color var(--dur),box-shadow var(--dur)}
input:where(:not([type=checkbox],[type=radio])):focus,select:focus,textarea:focus{outline:0;border-color:var(--ring);box-shadow:0 0 0 1px var(--ring)}
input::placeholder,textarea::placeholder{color:var(--placeholder);opacity:1}
textarea{resize:vertical;line-height:1.5;padding-top:var(--s-8)}
/* Un desplegable mide lo que su opción más larga: sin tope, el nombre de una persona lo sacaba de su fila (#341). */
select{max-width:100%;appearance:none;-webkit-appearance:none;padding-right:28px;background-image:var(--icon-select);background-repeat:no-repeat;background-position:right 9px center;background-size:14px}
select[multiple]{background-image:none;padding:var(--s-6);min-height:100px}
input[type=checkbox],input[type=radio]{width:15px;height:15px;accent-color:var(--accent-strong);margin:0;flex:none;vertical-align:-2px}
input[type=file]{font-size:var(--fs-sm)}
input[type=search]{-webkit-appearance:none}
input.search,.search{background-image:var(--icon-search);background-repeat:no-repeat;background-position:10px center;background-size:15px;padding-left:var(--s-32)}
label{font-weight:500;font-size:var(--fs-sm);color:var(--fg-2)}
details>summary{cursor:pointer;list-style:none;user-select:none}
details>summary::-webkit-details-marker{display:none}
details:not(.menu):not(.user-menu)>summary::before{content:"";display:inline-block;width:5px;height:5px;margin-right:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform var(--dur) var(--ease);vertical-align:1px}
details:not(.menu):not(.user-menu)[open]>summary::before{transform:rotate(45deg)}
/* Menús: superficie esmerilada, con iconos, teclas y grupos */
.menu-list{position:absolute;left:0;right:0;bottom:calc(100% + 6px);background:var(--menu-bg);-webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-menu);padding:var(--s-4);z-index:40;animation:menu-in var(--dur) var(--ease)}
.menu-list a,.menu-list button,.menu-list label{display:flex;align-items:center;gap:var(--s-8);width:100%;min-height:32px;padding:0 var(--s-12);border:0;border-radius:var(--r-sm);background:transparent;box-shadow:none;font-size:var(--fs-md);font-weight:500;color:var(--fg);text-align:left;justify-content:flex-start;cursor:pointer}
.menu-list a:hover,.menu-list button:hover{background:var(--surface-2);text-decoration:none;color:var(--fg)}
.menu-list .menu-sep{height:1px;background:var(--border);margin:4px}
.menu-list .menu-label{padding:var(--s-8) var(--s-12) var(--s-4);font-size:var(--fs-sm);font-weight:500;color:var(--muted)}
.menu-list svg{width:16px;height:16px;flex:none;color:var(--muted)}
.menu-list kbd{margin-left:auto}
@keyframes menu-in{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}
.loading{color:var(--muted);padding:var(--s-32) 0;text-align:center}
/* ---------- Cabecera de página ---------- */
.back-link{display:inline-flex;align-items:center;gap:var(--s-4);font-size:var(--fs-sm);color:var(--muted);margin-bottom:4px}
.back-link:hover{color:var(--accent-fg)}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-16);margin-bottom:16px}
.page-title{display:flex;align-items:baseline;gap:var(--s-8);min-width:0}
.page-count{font-family:var(--font-display);font-size:var(--fs-display);line-height:36px;font-weight:300;letter-spacing:-.01em;color:var(--muted);white-space:nowrap}
.page-head .subtitle{display:none}
.page-head .actions{flex:none}
.actions{display:flex;align-items:center;gap:var(--s-8);flex-wrap:wrap}
#modal .actions:not(.form-actions){margin-bottom:14px}
.actions .link{padding:0 var(--s-4)}
.eyebrow{font-size:var(--fs-sm);font-weight:500;color:var(--muted)}
/* Pestañas: indicador deslizante. ux.js fija --tab-x y --tab-w. */
.tabs{position:relative;display:flex;gap:var(--s-2);margin:0 0 16px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs>button,.tabs>a{min-height:36px;padding:0 var(--s-12);border:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:transparent;box-shadow:none;color:var(--muted);font-weight:500;font-size:var(--fs-md);white-space:nowrap;position:relative;transition:color var(--dur)}
.tabs>button:hover,.tabs>a:hover{color:var(--fg);background:var(--surface-2);text-decoration:none}
.tabs>button.active,.tabs>a.active,.tabs>a[aria-current=page]{color:var(--fg);font-weight:600}
.tabs::after{content:"";position:absolute;bottom:-1px;left:0;height:2px;width:var(--tab-w,0px);transform:translateX(var(--tab-x,0px));background:var(--accent-strong);border-radius:2px;transition:transform var(--dur-slow) var(--ease),width var(--dur-slow) var(--ease)}
.tabs .count{margin-left:6px;font-size:var(--fs-sm);color:var(--muted);font-weight:400}
/* Control segmentado (#249): el único patrón para elegir un filtro del mismo listado (vistas, etapas de Hoy, estados de
Licitaciones, actividad de la ficha). Mide 28 px, como los filtros; las subpáginas van con .tabs. */
.seg{display:inline-flex;align-items:center;max-width:100%;padding:var(--s-2);gap:var(--s-2);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg>button,.seg>a,.seg .view{flex:none;display:inline-flex;align-items:center;gap:var(--s-6);min-height:22px;padding:0 var(--s-8);border:0;border-radius:var(--r-xs);background:transparent;box-shadow:none;color:var(--muted);font-size:var(--fs-sm);font-weight:500;white-space:nowrap;text-decoration:none;transition:background var(--dur),color var(--dur),box-shadow var(--dur)}
.seg>button:hover,.seg>a:hover,.seg .view:hover{color:var(--fg);background:transparent;text-decoration:none}
.seg>button.active,.seg>a.active,.seg .view.active{background:var(--surface);color:var(--fg);box-shadow:var(--shadow-sm);font-weight:600}
/* Dentro de la bandeja el anillo va pegado a la opción: el desplazamiento no lo recorta. */
.seg>button:focus-visible,.seg>a:focus-visible,.seg .view:focus-visible{outline-offset:0}
.seg>button b{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.seg>button.active b{color:var(--accent-fg)}
/* Tiras que no caben (#249): una veladura del color del fondo en el borde por donde quedan opciones (ux.js pone
.more-start/.more-end). Es un pseudoelemento pegajoso que no ocupa sitio ni recoge el ratón; una máscara recortaría
los menús flotantes de la barra de vistas. En .tabs, ::after es el indicador: su veladura final va en ::before. */
.tabs,.seg{--strip-gap:2px}
/* La opción con el foco entra entera, sin quedar bajo la veladura (24 px). */
:is(.tabs,.seg:not(.views),.view-bar){scroll-padding-inline:28px}
.view-bar{--strip-gap:0px}
.seg{--strip-bg:var(--surface-2)}
.drawer,.panel,dialog{--strip-bg:var(--surface)}
:is(.seg:not(.views),.view-bar)::before,:is(.seg:not(.views),.view-bar)::after,.tabs::before{content:"";position:sticky;z-index:2;flex:none;align-self:stretch;width:24px;pointer-events:none;opacity:0;transition:opacity var(--dur)}
:is(.seg:not(.views),.view-bar)::before{left:0;margin-right:calc(-1*var(--s-24) - var(--strip-gap));background:linear-gradient(to right,var(--strip-bg,var(--bg)),transparent)}
:is(.seg:not(.views),.view-bar)::after,.tabs::before{right:0;order:99;margin-left:calc(-1*var(--s-24) - var(--strip-gap));background:linear-gradient(to left,var(--strip-bg,var(--bg)),transparent)}
:is(.seg,.view-bar).more-start::before,:is(.seg,.view-bar).more-end::after,.tabs.more-end::before{opacity:1}
/* Barra de herramientas del listado: búsqueda, filtros como píldoras y acciones en una fila */
.toolbar{display:flex;align-items:center;gap:var(--s-8);flex-wrap:wrap;margin-bottom:12px}
.toolbar .search{width:260px;flex:1 1 200px;max-width:340px}
.toolbar .spacer{flex:1}
.toolbar .count{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}
/* Filtros como píldoras */
.filters{display:flex;align-items:center;gap:var(--s-8);flex-wrap:wrap;margin-bottom:12px}
.filters+.filters{margin-top:-6px}
.filter-label{display:inline-flex;align-items:center;gap:var(--s-6);max-width:100%;font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}
.filter-label>select{min-width:0}
.filter-label select,.filters select,.toolbar select{width:auto;min-height:28px;padding:0 26px 0 var(--s-12);font-size:var(--fs-sm);font-weight:500;color:var(--fg-2);border-color:var(--border-control);background-color:var(--surface);box-shadow:none;border-radius:var(--r-sm)}
.filter-label select:hover,.filters select:hover,.toolbar select:hover{border-color:var(--muted)}
/* Estos desplegables quitan la sombra de los campos; con el foco del teclado vuelven el borde petrol y el halo (#140). */
.filter-label select:focus-visible,.filters select:focus-visible,.toolbar select:focus-visible{border-color:var(--ring);box-shadow:0 0 0 1px var(--ring)}
/* Un filtro con valor se distingue del resto. */
.toolbar select:not([multiple]):not(:has(option[value=""]:checked)){background-color:var(--accent-soft);border-color:var(--accent-line);color:var(--fg)}
.filters input:not([type=checkbox]){width:auto;flex:1 1 200px;max-width:320px;min-height:28px}
/* La búsqueda de una barra de filtros mide lo mismo que los filtros (#249). */
.list-toolbar .search{min-height:28px;padding-top:var(--s-2);padding-bottom:var(--s-2)}
.chip{display:inline-flex;align-items:center;gap:var(--s-6);min-height:28px;padding:0 var(--s-12);border:1px solid var(--border-2);border-radius:var(--r-sm);background:var(--surface);font-size:var(--fs-sm);font-weight:500;color:var(--fg-2);box-shadow:none}
.chip.active,.chip[aria-pressed=true]{background:var(--accent-strong);color:var(--on-strong);border-color:var(--accent-strong)}
.chip b{font-weight:600;color:inherit;opacity:.8}
.chip-row{display:flex;flex-wrap:wrap;gap:var(--s-6);align-items:center}
.helper-strip{display:flex;align-items:center;gap:var(--s-8);flex-wrap:wrap;padding:var(--s-8) var(--s-12);margin-bottom:12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);font-size:var(--fs-sm);color:var(--fg-2)}
/* Menú «⋯»: */
details.menu{position:relative;display:inline-block}
details.menu>summary{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-6);min-height:32px;padding:0 var(--s-12);border:1px solid var(--border-2);border-radius:var(--radius-sm);background:var(--surface);font-weight:500;font-size:var(--fs-md);box-shadow:none;white-space:nowrap}
details.menu>summary:hover{background:var(--surface-2)}
details.menu>summary.icon-button{width:32px;padding:0;font-size:var(--fs-lg);letter-spacing:.05em;color:var(--fg-2)}
details.menu>.menu-list{top:calc(100% + 6px);bottom:auto;left:auto;right:0;min-width:240px;animation:menu-down var(--dur) var(--ease)}
details.menu.left>.menu-list{left:0;right:auto}
@keyframes menu-down{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
/* ---------- Paneles ---------- */
.panel,section.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:none;margin-bottom:16px}
.panel .panel{box-shadow:none}
.notice{padding:var(--s-8) var(--s-16);margin:10px 0;border:1px solid var(--warning-line);border-radius:var(--r-md);background:var(--warning-soft);color:var(--warning);font-size:var(--fs-sm)}
.error{padding:var(--s-8) var(--s-16);margin:10px 0;border:1px solid var(--danger-line);border-radius:var(--r-md);background:var(--danger-soft);color:var(--danger);font-size:var(--fs-sm)}
.error p{margin:0 0 4px}
.note{font-size:var(--fs-sm);color:var(--muted);margin:0 0 10px;line-height:1.55}
.subtle{color:var(--muted)}
.optional{color:var(--muted);font-style:normal;font-size:var(--fs-sm)}
.text-right{text-align:right}
/* ---------- Badges: badge(v,tono) ---------- */
.badge{display:inline-flex;align-items:center;gap:var(--s-4);min-height:20px;padding:0 var(--s-8);border-radius:var(--radius-full);background:var(--surface-2);border:0;color:var(--fg-2);font-size:var(--fs-sm);font-weight:500;line-height:1;white-space:nowrap;vertical-align:middle}
.badge.success,.badge.green{background:var(--success-soft);color:var(--success)}
.badge.warning,.badge.amber{background:var(--warning-soft);color:var(--warning)}
.badge.danger,.badge.red{background:var(--danger-soft);color:var(--danger)}
.badge.sale{background:var(--st-won);color:var(--surface)}
.badge.info,.badge.blue,.badge.purple{background:var(--info-soft);color:var(--info)}
.badge.ai{background:var(--ai-soft);color:var(--ai)}
.badge.st-prospecting{background:var(--st-prospecting-bg);color:var(--st-prospecting)}
.badge.st-delivered{background:var(--st-delivered-bg);color:var(--st-delivered)}
.badge.st-won{background:var(--st-won-bg);color:var(--st-won)}
.badge.st-lost{background:var(--st-lost-bg);color:var(--st-lost)}
.badge.st-discarded{background:var(--st-discarded-bg);color:var(--st-discarded)}
.badge.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tag{display:inline-block;padding:var(--s-2) var(--s-6);border-radius:var(--r-xs);background:var(--surface-2);font-size:var(--fs-sm);color:var(--muted)}
/* Punto de estado: uiDot(texto,tono) */
.ui-dot{display:inline-flex;align-items:center;gap:var(--s-6);color:var(--fg);white-space:nowrap}
.ui-dot::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--dot,var(--muted-2))}
/* Tile de objeto: uiTile(tipo,nombre) */
.ui-tile{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border-radius:var(--r-xs);background:var(--tile-bg,var(--ob-cuenta-bg));color:var(--tile,var(--ob-cuenta));font:600 var(--fs-xs)/1 var(--font-ui)}
.ui-tile[data-initial]::before{content:attr(data-initial)}
.ui-tile svg{width:12px;height:12px;stroke-width:2}
.ui-tile.md{width:28px;height:28px;border-radius:var(--r-md);font-size:var(--fs-md)}.ui-tile.md svg{width:16px;height:16px;stroke-width:1.75}
.ui-tile.lg{width:40px;height:40px;border-radius:var(--radius-sm);font-size:var(--fs-xl)}.ui-tile.lg svg{width:20px;height:20px;stroke-width:1.75}
.ob-contacto{--tile:var(--ob-contacto);--tile-bg:var(--ob-contacto-bg)}.ob-oportunidad{--tile:var(--ob-oportunidad);--tile-bg:var(--ob-oportunidad-bg)}
.ob-reunion{--tile:var(--ob-reunion);--tile-bg:var(--ob-reunion-bg)}
/* Teclas: uiKeys('mod+k') */
.ui-keys{font-weight:500}
/* ---------- Tablas: filas de 36 px con líneas finas ---------- */
.table-wrap{overflow:auto;border-radius:0 0 var(--radius) var(--radius)}
.panel>.table-wrap:first-child{border-radius:var(--radius)}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-md)}
thead th{position:sticky;top:0;z-index:1;background:var(--surface-2);height:40px;padding:0 var(--s-12);text-align:left;font-size:var(--fs-sm);font-weight:600;color:var(--fg-2);letter-spacing:0;border-bottom:1px solid var(--border);white-space:nowrap}
tbody td{height:40px;padding:var(--s-6) var(--s-12);line-height:20px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--fg)}
tbody tr:last-child td{border-bottom:0}
tbody tr[data-id]{cursor:pointer}
tbody tr:hover td{background:var(--surface-2)}
td.name{color:var(--fg);font-weight:500}
td.name small{display:block;font-weight:400;font-size:var(--fs-sm);color:var(--muted);margin-top:1px}
td .actions{justify-content:flex-end;flex-wrap:nowrap}
td small{display:block;font-size:var(--fs-sm);color:var(--muted)}
th:first-child,td:first-child{padding-left:var(--s-20)}
th:last-child,td:last-child{padding-right:var(--s-20)}
td:last-child:has(>.icon-button:only-child),td:last-child:has(>.actions),td:last-child:has(>details.menu){text-align:right;white-space:nowrap}
tbody td .badge+small{margin-top:4px}
th.num,td.num{text-align:right}
/* ---------- Estados vacíos y carga: emptyState(tipo,{filtered}) ---------- */
.empty-state{padding:var(--s-48) var(--s-24);text-align:center;color:var(--muted)}
.empty-state>.ui-tile{margin:0 auto 12px}
.empty-state h3{font-size:var(--fs-lg);font-weight:600;color:var(--fg);margin-bottom:4px}
.empty-state p{font-size:var(--fs-md);max-width:420px;margin:0 auto 14px}
.empty-state .actions{justify-content:center}
.empty-state.compact{padding:var(--s-20) var(--s-16)}
.empty-state.compact p{margin-bottom:0}
/* Esqueletos por disposición: uiSkeleton('list'|'board'|'record'|'dashboard'|'panel') */
.skeleton{position:relative;overflow:hidden;background:var(--surface-3);border-radius:var(--r-sm);color:transparent!important;min-height:12px}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--shimmer),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.skeleton-page{display:grid;gap:var(--s-12)}
.skeleton-page .row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-12)}
.skeleton-page .k{height:88px;border-radius:var(--radius)}
.skeleton-page .t{height:40px}
.skeleton-page .h{height:32px;width:220px;border-radius:var(--r-md)}
.sk-head{display:flex;align-items:center;justify-content:space-between}
.sk-btn{width:120px;height:32px;border-radius:var(--radius-sm)}
.sk-views{display:flex;gap:var(--s-8)}
.sk-pill{width:96px;height:28px;border-radius:var(--r-sm)}
.sk-table{display:grid;gap:var(--s-8);padding:var(--s-12) 0}
.sk-thead{height:16px;width:60%}
.sk-row{height:26px}
.sk-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-12)}
.sk-col{display:grid;gap:var(--s-8);align-content:start}
.sk-card{height:84px;border-radius:var(--radius)}
.sk-record{display:flex;align-items:center;gap:var(--s-12)}
.sk-avatar{width:44px;height:44px;border-radius:var(--radius-sm)}
.sk-props{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8) var(--s-24)}
.sk-prop{height:22px}
/* ---------- Marco del modal ---------- */
dialog#modal{width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:var(--s-20) var(--s-24) var(--s-24);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);color:var(--fg);box-shadow:var(--shadow-lg);overflow:auto}
dialog#modal.p-wide-dialog,dialog#modal:has(.p-wide-dialog){width:min(960px,calc(100vw - 32px))}
dialog#modal::backdrop{background:var(--backdrop);backdrop-filter:blur(2px)}
dialog#modal[open]{animation:dialog-in 180ms var(--ease)}
@keyframes dialog-in{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.dialog-title{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-12);margin-bottom:14px}
.dialog-title h2{font-size:var(--fs-xl);letter-spacing:-.01em}
dialog .note:first-of-type{margin-top:-6px}
/* ---------- Formularios (se restilan solo con CSS) ---------- */
.field{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.field.wide{grid-column:1/-1}
.field>label{display:flex;align-items:baseline;gap:var(--s-6);font-size:var(--fs-sm)}
.field>label small{font-size:var(--fs-sm);color:var(--muted);font-weight:400}
.field>label small:empty{display:none}
.field-hint{font-size:var(--fs-sm);color:var(--muted);line-height:1.45}
.field-origin{font-size:var(--fs-sm);color:var(--accent-fg)}
/* Selector de registros con búsqueda en servidor (picker.js) */
.picker{position:relative;min-width:0}
.picker-input{padding-right:52px!important;text-overflow:ellipsis}
/* Selector de personas del equipo (people.js, #258): etiquetas, búsqueda y lista por rol. */
.people{position:relative;min-width:0}
.people .people-input{flex:1 1 110px;width:auto;min-width:80px;min-height:24px;padding:0 var(--s-6);border:0;border-radius:0;background:transparent;box-shadow:none}
.people .people-input:focus{border:0;box-shadow:none}
/* Fecha y hora de la reunión (datetime.js, #259): el campo cerrado dice «jue 1 oct · 10:00–10:30»; abierto, calendario que
empieza en lunes, horas cada 15 min y duración. El diálogo va en la capa superior (popover) con position:fixed. */
.dt{position:relative;min-width:0}
/* Casillas como chips para selección múltiple */
.check-chips{display:flex;flex-wrap:wrap;gap:var(--s-6)}
/* Registrar actividad (#508): el tipo junto al título y el resultado de la llamada, de un clic. */
.check-chips label{display:inline-flex;align-items:center;gap:var(--s-6);min-height:28px;padding:0 var(--s-12) 0 var(--s-8);border:1px solid var(--border-2);border-radius:var(--r-sm);background:var(--surface);font-weight:500;font-size:var(--fs-sm);color:var(--fg-2);cursor:pointer;transition:background var(--dur),border-color var(--dur),color var(--dur)}
.check-chips label:has(input:checked){background:var(--accent-soft);border-color:var(--accent-fg);color:var(--accent-fg)}
.check-chips input{width:13px;height:13px}
.advanced-fields{grid-column:1/-1;margin-top:6px;border-top:1px solid var(--border);padding-top:var(--s-8)}
.advanced-fields>summary{display:inline-flex;align-items:center;gap:var(--s-8);min-height:30px;padding:0 var(--s-4);color:var(--fg-2);font-weight:500;font-size:var(--fs-sm);border-radius:var(--r-sm)}
.advanced-fields>summary span{font-size:var(--fs-sm);color:var(--muted);font-weight:400}
.form-actions{display:flex;justify-content:flex-end;gap:var(--s-8);margin-top:20px;padding-top:var(--s-16);border-top:1px solid var(--border)}
.form-actions.start{justify-content:flex-start}
/* Selector de archivos (#501): zona de arrastre compartida, fileDrop() en ui.js. El input nativo queda dentro, oculto a la vista y con foco. */
.file-drop{position:relative;display:flex;flex-wrap:wrap;align-items:center;min-width:0;border:1px dashed var(--border-2);border-radius:var(--r-md);background:var(--surface-2);transition:border-color var(--dur),background var(--dur)}
.file-drop:hover,.file-drop.dragging{border-color:var(--accent-fg);background:var(--accent-soft)}
.file-drop.dragging{border-style:solid}
.file-drop:has(input:focus-visible){outline:2px solid var(--ring);outline-offset:2px}
.file-drop.has-file{border-style:solid;border-color:var(--border);background:var(--surface)}
.field.invalid .file-drop{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-halo)}
.file-drop>.file-drop-target{display:flex;align-items:center;gap:var(--s-12);flex:1;min-width:0;margin:0;padding:var(--s-12);font-weight:400;cursor:pointer}
.file-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.file-drop-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-sm);color:var(--fg-2)}
.file-drop-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.file-drop.has-file .file-drop-icon{background:var(--accent-soft);box-shadow:none;color:var(--accent-fg)}
.file-drop-body,.file-drop-empty,.file-drop-chosen{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.file-drop-body{flex:1}
.file-drop-body strong{font-size:var(--fs-md);font-weight:500;color:var(--fg);overflow:hidden;text-overflow:ellipsis}
.file-drop-body small{font-size:var(--fs-sm);font-weight:400;color:var(--muted)}
.file-drop-link{color:var(--accent-fg);text-decoration:underline;text-underline-offset:2px}
.file-drop-name{white-space:nowrap}
.file-drop-chosen,.file-drop.has-file .file-drop-empty,.file-drop-clear{display:none}
.file-drop.has-file .file-drop-chosen{display:flex}
.file-drop.has-file .file-drop-clear{display:grid;place-items:center;flex:none;width:28px;height:28px;min-height:0;margin-right:var(--s-8);padding:0;border:0;border-radius:var(--r-sm);background:none;box-shadow:none;color:var(--muted);cursor:pointer}
.file-drop-clear:hover{background:var(--surface-2);color:var(--fg)}
.file-drop-clear svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.file-drop-error{flex-basis:100%;padding:0 var(--s-12) var(--s-8);font-size:var(--fs-sm);color:var(--danger);line-height:1.45;overflow-wrap:anywhere}
.file-drop-error:empty{display:none}
.file-drop.large>.file-drop-target{flex-direction:column;gap:var(--s-8);padding:var(--s-24) var(--s-16);text-align:center}
.file-drop.large .file-drop-body{flex:none;align-items:center;max-width:100%}
.file-drop.large :is(.file-drop-empty,.file-drop-chosen){align-items:center;max-width:100%}
.file-drop.large .file-drop-body strong{max-width:100%}
.file-drop.large.has-file .file-drop-clear{position:absolute;top:var(--s-8);right:0}
/* ---------- Avisos: toast(texto,{tone,link}), abajo a la derecha ---------- */
.toast{position:fixed;right:20px;bottom:20px;z-index:200;display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-8);max-width:min(420px,calc(100vw - 32px));pointer-events:none}
.toast-item{display:flex;align-items:center;gap:var(--s-8);min-height:40px;padding:var(--s-8) var(--s-12) var(--s-8) var(--s-12);border-radius:var(--r-md);background:var(--inverse);color:var(--on-inverse);font-size:var(--fs-md);font-weight:500;line-height:1.35;box-shadow:var(--shadow-lg);pointer-events:auto;animation:toast-in 200ms var(--ease);position:relative;overflow:hidden}
.toast-item>svg{flex:none;width:18px;height:18px}
.toast-item .toast-link{margin-left:6px;color:var(--accent);font-weight:600;white-space:nowrap}.toast-item button.toast-link{background:none;border:0;padding:0;min-height:0;font:inherit;font-weight:600;cursor:pointer}.toast-item.has-action::after{animation-duration:10s}
.toast-item .toast-link:focus-visible{outline-color:var(--accent)}
/* Barra fina de tiempo: 5 s */
.toast-item::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--inverse-track);transform-origin:left;animation:toast-time 5s linear forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toast-time{to{transform:scaleX(0)}}
/* ---------- Responsive ---------- */
@media(max-width:980px){
.page-head{flex-direction:column;align-items:stretch}
}
@media(max-width:730px){
.page-head .actions{gap:var(--s-6)}
.toolbar .search{max-width:none}
.toast{left:16px;right:16px;bottom:16px;align-items:stretch;max-width:none}
.sk-board{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.skeleton::after{display:none}
}
/* ---------- Añadidos del panel y la ficha (coordinador) ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skeleton-page.loading{padding:0;text-align:initial}
.toolbar .filter-label{gap:0}
.table-wrap:has(details.menu[open]){overflow:visible}
.button.sm{min-height:28px;padding:0 var(--s-8);font-size:var(--fs-sm)}
/* ---------- Campos con formato ---------- */
.phone-field{display:flex;align-items:center;gap:var(--s-6);min-width:0}
.phone-field .phone-prefix{flex:0 0 112px;width:112px;padding-left:var(--s-8);padding-right:var(--s-24);font-variant-numeric:tabular-nums}
.phone-field .phone-number{flex:1 1 auto;min-width:0;font-variant-numeric:tabular-nums}
.phone-field .icon-button{flex:none;width:28px;min-height:28px}
.phone-list{display:flex;flex-direction:column;gap:var(--s-6)}
.field>.link[data-phone]{align-self:flex-start;margin-top:2px}
.num-field{position:relative}
/* El valor acaba 32 px antes del borde y el sufijo ocupa los 12–24 px finales; los de varias letras (MX$, COP) piden 52 px. */
.num-field input{padding-right:var(--s-32);text-align:right;font-variant-numeric:tabular-nums}
.num-field:has(.suffix[data-long]) input{padding-right:52px}
.num-field .suffix{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:var(--fs-sm);pointer-events:none}
.field .req{color:var(--danger);font-weight:600}
.field-error{font-size:var(--fs-sm);color:var(--danger);line-height:1.45}
.field-error[hidden]{display:none}
.field.invalid>input:not([type=hidden]),.field.invalid>select,.field.invalid>textarea,.field.invalid>.num-field>input,.phone-field.invalid>input,.phone-field.invalid>select{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-halo)}
/* Con error y con el foco, manda el foco: el campo que se está corrigiendo se ve. */
.field.invalid :is(input,select,textarea):focus,.phone-field.invalid :is(input,select):focus{border-color:var(--ring);box-shadow:0 0 0 1px var(--ring)}
/* Interruptor (#117): encendido en petrol; la menta no da contraste sobre claro. */
input[type=checkbox].switch{appearance:none;position:relative;width:32px;height:18px;margin:0;border-radius:var(--radius-full);background:var(--border-2);cursor:pointer;transition:background var(--dur)}
input[type=checkbox].switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease)}
input[type=checkbox].switch:checked{background:var(--accent-strong)}
input[type=checkbox].switch:checked::after{transform:translateX(14px)}
input[type=checkbox].switch:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
/* ---------- Del marco antiguo (antes ui-shell.css y ui-panel.css, #577) ---------- */
/* Con «＋ Nuevo» a la vista, la acción de la cabecera de la pantalla pasa a secundaria: un solo petróleo a la vista. */
body:has(#new-menu:not([hidden])) #main .page-head .actions .primary{background:var(--surface);border-color:var(--border-strong);color:var(--fg);font-weight:500}
body:has(#new-menu:not([hidden])) #main .page-head .actions .primary:hover{background:var(--surface-2)}
/* Asistente de bienvenida a pantalla completa: sin marco. */
html:has(body.onboarding-mode),body.onboarding-mode{background:var(--bg)}
@media(max-width:730px){
/* #140: con una acción principal, su fila se queda pegada bajo la cabecera al bajar por la pantalla. La cabecera de la
pantalla deja de ser caja para que la fila se pegue en todo #main y no solo dentro de ella. */
#main .page-head:has(>.actions .primary){display:contents}
#main .page-head:has(>.actions .primary)>div:first-child{margin-bottom:8px}
#main .page-head:has(>.actions .primary)>.actions{position:sticky;top:var(--shell-top);z-index:15;margin:0 calc(-1*var(--s-12)) 12px;padding:var(--s-8) var(--s-12);background:var(--bg)}
}
@media print{
.toast,.bulk-bar{display:none!important}
html,body{background:var(--surface)}
.panel{break-inside:avoid;box-shadow:none}
}
/* Listados: barra de vistas, chips de filtro, orden, tabla con columnas fijas, selección, edición en celda y
tarjetas en móvil · hijo 1 (#128) para Cuentas, generalizado por el hijo 3 (#130) */
.table-pager{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);padding:var(--s-8) var(--s-20);border-top:1px solid var(--border);font-size:var(--fs-sm);color:var(--muted)}
.table-pager button{min-height:28px;font-size:var(--fs-sm)}
th.check,td.check{width:36px;padding-right:0}
/* ---------- Barra de vistas ---------- */
/* Hueco de 6 px alrededor de las píldoras para que el anillo y el halo del foco no se recorten con el desplazamiento. */
.view-bar{position:relative;display:flex;align-items:center;gap:0;margin:-4px -4px 8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:var(--s-6)}
.view-bar::-webkit-scrollbar{display:none}
.view-bar>*+*{margin-left:10px}
/* Las vistas son un segmentado (.seg .view, #249); a 1280 px, con «Mis cuentas», «Base» y «Fuentes oficiales», caben todas sin desplazar (#191). */
.views.seg{flex:none;max-width:none;overflow:visible}
.view-count{font-size:var(--fs-sm);font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.view-count:empty{display:none}
.view.active .view-count{color:var(--accent-fg);font-weight:600}
/* Con los filtros cambiados la vista deja de parecer elegida: sin relieve y con un punto de «modificada» (#249). */
.seg .view.active.modified{background:transparent;box-shadow:none;color:var(--fg);font-weight:500}
.view.modified .view-count{color:var(--muted);font-weight:400}
.view-mod{width:6px;height:6px;border-radius:50%;background:var(--warning)}
/* Tablero o Agenda frente a Tabla (LIST_MODES): al principio de la barra, como en la maqueta del pipeline. */
.list-modes{flex:none}
.list-modes button{display:inline-flex;align-items:center;gap:var(--s-6)}
.list-modes svg{width:14px;height:14px}
button.view-reset{margin-left:2px;color:var(--muted);font-size:var(--fs-md)}
button.view-reset:hover{color:var(--fg)}
/* ---------- Barra de herramientas: búsqueda, chips «Campo: valor ×», «＋ Filtro», orden y recuento ---------- */
.list-toolbar{row-gap:var(--s-8)}
.list-toolbar .search{flex:0 1 220px;width:220px}
.list-toolbar .chip-row{gap:var(--s-6)}
/* Chips neutros, como en la maqueta: la menta queda para lo humano y lo ganado (D6). */
.filter-chip{padding:0;gap:0;overflow:hidden;background:var(--surface);border-color:var(--border-2);color:var(--fg)}
.filter-chip .chip-body{display:inline-flex;align-items:center;gap:var(--s-4);min-height:26px;padding:0 var(--s-4) 0 var(--s-12);border:0;background:transparent;box-shadow:none;font-size:var(--fs-sm);font-weight:500;color:var(--fg-2);border-radius:0}
.filter-chip .chip-body b{font-weight:600;color:var(--fg)}
.filter-chip .chip-x{width:26px;min-height:26px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--muted);border-radius:0}
.filter-chip .chip-x:hover,.filter-chip button.chip-body:hover{background:var(--surface-2);color:var(--fg)}
.filter-chip .chip-x svg{width:14px;height:14px}
details.list-filter>summary.chip-add{min-height:28px;padding:0 var(--s-12);border-style:dashed;border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--fg-2)}
.filter-menu{width:340px;max-width:calc(100vw - 32px);padding:var(--s-8);display:grid;gap:var(--s-6)}
.filter-row{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:var(--s-8)}
.filter-row .filter-name{font-size:var(--fs-sm);color:var(--muted)}
.filter-row .filter-label,.filter-row select{width:100%}
/* Geografía y estado de origen llegan al abrir el menú (#347): mientras tanto, se dice. */
.filter-menu[aria-busy=true]::after{content:"Cargando geografías y estados…";font-size:var(--fs-sm);color:var(--muted)}
/* Filtros de fecha (#382): «Fecha» con Desde y Hasta, y el corte del Pipeline con un solo día. */
.filter-row .filter-dates{display:grid;gap:var(--s-4);white-space:normal}
.filter-dates label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s-6);font-size:var(--fs-xs);color:var(--muted)}
.filter-dates input{width:100%;min-width:0;min-height:28px;padding:0 var(--s-6);font-size:var(--fs-sm)}
.menu-list .actions button.sm:not(.link){min-height:28px;padding:0 var(--s-12);border:1px solid var(--border-2);background:var(--surface);box-shadow:var(--shadow-sm);font-weight:600}
.menu-list .actions button.sm:not(.link):hover{background:var(--surface-2)}
.menu-list .actions button.link{min-height:28px;padding:0 var(--s-6);color:var(--muted)}
.cell-editor-error{font-size:var(--fs-sm);color:var(--danger);line-height:1.45}
.cell-editor-error.warn{color:var(--warning)}
.menu-list .menu-note{margin:0;padding:var(--s-8) var(--s-12) var(--s-4);font-size:var(--fs-sm);color:var(--fg-2);max-width:260px}
.menu-list .actions{display:flex;gap:var(--s-8);padding:var(--s-6) var(--s-12) var(--s-8)}
.menu-list .actions button{width:auto;display:inline-flex}
.menu-list button[aria-pressed=true]{font-weight:600}
.menu-list button svg:last-child:not(:first-child){margin-left:auto;color:var(--fg-2)}
details.list-sort>summary.sort-summary{min-height:28px;gap:var(--s-6);padding:0 var(--s-8);border-color:transparent;background:transparent;font-size:var(--fs-sm);color:var(--muted)}
details.list-sort>summary.sort-summary b{font-weight:500;color:var(--fg)}
details.list-sort>summary.sort-summary:hover{background:var(--surface-2)}
details.list-sort>summary svg{width:14px;height:14px}
details.list-sort>.menu-list{min-width:220px;max-height:min(420px,70vh);overflow:auto}
/* ---------- Tabla: 36 px, líneas finas; cabecera, casilla y nombre fijos al desplazar ---------- */
.list-panel{overflow:hidden}
.list-panel .table-wrap{border-radius:var(--radius);max-height:var(--list-max,calc(100vh - 150px));scroll-padding-top:var(--head-h,36px);scroll-padding-left:var(--sticky-w,0px)}
.data-table thead th{background:var(--bg)}
.list-table thead th{z-index:2}
.list-table th.check,.list-table td.check,.list-table th.name,.list-table td.name{position:sticky;left:0;z-index:1;background:var(--surface)}
.list-table thead th.check,.list-table thead th.name{z-index:3;background:var(--bg)}
.list-table.has-check th.name,.list-table.has-check td.name{left:var(--check-w,36px)}
.list-table tbody tr:hover td.check,.list-table tbody tr:hover td.name{background:var(--surface-2)}
.scrolled-x .list-table th.name,.scrolled-x .list-table td.name{box-shadow:inset -1px 0 0 var(--border)}
.data-table td.name .name-cell{display:inline-flex;align-items:center;gap:var(--s-8);max-width:100%;vertical-align:middle}
.data-table td.name .name-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
.list-table thead th[aria-sort]{color:var(--fg)}
.th-sort{display:inline-flex;align-items:center;gap:var(--s-4);min-height:24px;margin:0 -6px;padding:0 var(--s-6);border:0;border-radius:var(--r-sm);background:transparent;box-shadow:none;font:inherit;color:inherit;white-space:nowrap}
.th-sort:hover{background:var(--surface-2);color:var(--fg)}
.th-sort svg{width:13px;height:13px;opacity:0;transition:opacity var(--dur-fast)}
.th-sort:hover svg,.th-sort:focus-visible svg,.th-sort.on svg{opacity:1}
th.num .th-sort{flex-direction:row-reverse}
/* Filas de una línea: lo que no cabe se desplaza en horizontal con la cabecera y el nombre fijos. */
.list-table td{white-space:nowrap}
.list-table td.name{max-width:300px;overflow:hidden;text-overflow:ellipsis}
.k-cuentas th:not(:first-child):not(:last-child),.k-cuentas td:not(:first-child):not(:last-child){padding-left:var(--s-8);padding-right:var(--s-8)}
.k-cuentas td[data-col=sector]{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.k-cuentas td.name{overflow:hidden;text-overflow:ellipsis}
.k-cuentas td[data-col=_estado_compania] .badge{gap:var(--s-6);padding:0;background:none;color:var(--fg);font-size:var(--fs-md);font-weight:400;min-height:0}
.k-cuentas td[data-col=_estado_compania] .badge::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor;color:var(--muted-2)}
.k-cuentas td[data-col=_estado_compania] .badge.success::before{background:var(--success)}
.k-cuentas td[data-col=_estado_compania] .badge.info::before{background:var(--info)}
.k-cuentas td[data-col=_estado_compania] .badge.warning::before{background:var(--warning)}
.k-cuentas td[data-col=_estado_compania] .badge.danger::before{background:var(--danger)}
.k-cuentas td[data-col=_estado_compania] .badge:not(.success,.info,.warning,.danger)::before{background:transparent;border:1.5px solid var(--st-prospecting)}
.data-table td.open{width:44px;padding-top:0;padding-bottom:0;padding-left:var(--s-4)}
.data-table td.open .icon-button{width:28px;min-height:28px;color:var(--muted)}
.data-table tbody tr:hover td.open .icon-button{color:var(--fg)}
/* Acciones de la fila al pasar el ratón (o con el foco dentro de la fila). */
.list-table td.open .icon-button{opacity:0;transition:opacity var(--dur-fast)}
.list-table tbody tr:hover td.open .icon-button,.list-table tbody tr:focus-within td.open .icon-button{opacity:1}
/* Celda editable: lápiz al pasar el ratón; doble clic, Intro o F2 abren el editor. */
.list-table td[data-edit]{position:relative;padding-right:28px}
.list-table td[data-edit]:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
.list-table td.editing{background:var(--accent-soft)!important}
.cell-edit{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:22px;min-height:22px;padding:0;border:0;border-radius:var(--r-sm);background:var(--surface);box-shadow:none;color:var(--muted);opacity:0;transition:opacity var(--dur-fast)}
.cell-edit svg{width:13px;height:13px}
.list-table td[data-edit]:hover .cell-edit,.list-table td[data-edit]:focus .cell-edit{opacity:1}
.cell-edit:hover{color:var(--fg);background:var(--surface-2)}
.cell-editor{position:fixed;z-index:60;padding:var(--s-8) var(--s-12) var(--s-8);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-menu);animation:menu-down var(--dur) var(--ease)}
.cell-editor form{display:grid;gap:var(--s-6)}
.cell-editor-label{font-size:var(--fs-sm);color:var(--muted)}
.cell-editor input,.cell-editor select{width:100%}
.cell-editor-hint{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.cell-editor-foot{display:flex;gap:var(--s-12);margin-top:2px}
.cell-editor-foot .link{display:inline-flex;align-items:center;gap:var(--s-4);color:var(--fg-2);font-size:var(--fs-sm)}
.cell-editor-foot .ui-keys{min-width:20px;padding:0 var(--s-4);border:1px solid var(--border-2);border-radius:var(--r-xs);font-size:var(--fs-xs);line-height:16px;text-align:center;color:var(--muted)}
.cell-editor[aria-busy=true]{opacity:.7;pointer-events:none}
/* ---------- Selección: píldora flotante «n seleccionadas ×» ---------- */
#bulk{position:sticky;bottom:16px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:var(--s-8);pointer-events:none}
/* Los que no se pudieron asignar, con su motivo, encima de la píldora. */
.bulk-errors{pointer-events:auto;width:min(520px,100%);max-height:40vh;overflow:auto;padding:var(--s-8) var(--s-12);background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--danger);border-radius:var(--radius);box-shadow:var(--shadow-menu);font-size:var(--fs-sm)}
.bulk-errors-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-8);color:var(--danger)}
.bulk-errors-head .icon-button{width:26px;min-height:26px}
.bulk-errors ul{margin:6px 0 0;padding-left:var(--s-20);color:var(--fg-2)}
.bulk-errors li{margin:2px 0}
.bulk-bar{pointer-events:auto;display:flex;align-items:center;gap:var(--s-8);max-width:100%;padding:var(--s-6) var(--s-8) var(--s-6) var(--s-16);margin:12px 0 0;border-radius:var(--r-lg);background:var(--inverse);color:var(--on-inverse);box-shadow:var(--shadow-lg);animation:menu-in var(--dur) var(--ease)}
.bulk-bar .bulk-count{font-size:var(--fs-sm);white-space:nowrap}
.bulk-bar strong{font-weight:700}
.bulk-bar .actions{flex-wrap:nowrap;gap:var(--s-6)}
.bulk-bar button,.bulk-bar details.menu>summary{background:var(--inverse-fill);border-color:var(--inverse-fill-hover);color:var(--on-inverse);box-shadow:none;min-height:30px;font-size:var(--fs-sm);border-radius:var(--r-sm)}
.bulk-bar button:hover,.bulk-bar details.menu>summary:hover{background:var(--inverse-fill-hover)}
.bulk-bar button.soft{background:var(--on-inverse);color:var(--inverse);border-color:var(--on-inverse)}
.bulk-bar .bulk-clear{width:28px;min-height:28px;background:transparent;border-color:transparent;color:var(--on-inverse-soft)}
.bulk-bar .bulk-clear svg{width:14px;height:14px}
.bulk-bar .bulk-sep{width:1px;height:20px;background:var(--inverse-sep)}
.bulk-bar .menu-list button{background:transparent;border:0;color:var(--fg);border-radius:var(--r-sm);min-height:32px}
.bulk-bar .menu-list button:hover{background:var(--surface-2)}
.bulk-bar .menu-list .menu-note{color:var(--fg-2)}
.bulk-bar .menu-list .actions button{border:1px solid var(--border-2);background:var(--surface)}
details.menu.up>.menu-list{top:auto;bottom:calc(100% + 8px);right:0;left:auto;animation:menu-in var(--dur) var(--ease);max-height:min(360px,60vh);overflow:auto}
.bulk-bar[aria-busy=true] .actions{opacity:.5;pointer-events:none}
.view-loading{padding:var(--s-12) var(--s-20)}
.view-failed .actions{margin-top:12px}
.list-mode{padding:var(--s-12)}
.close-note{margin-bottom:12px}
@media(max-width:730px){
.view-bar{margin:-4px calc(-1*var(--s-12)) 8px;padding:var(--s-6) var(--s-12)}
.toolbar .search,.list-toolbar .search{flex-basis:100%;width:100%}
/* Por debajo de 730 px las filas pasan a tarjetas: sin casillas ni edición en celda (se edita en la ficha). */
.list-panel{overflow:visible;background:transparent;border:0;box-shadow:none}
.list-panel .table-wrap{overflow:visible;max-height:none;border-radius:0}
.list-panel .data-table,.list-panel .data-table tbody{display:block}
.list-panel .data-table thead,.list-panel .data-table .check,.list-panel .data-table .cell-edit{display:none}
.list-panel .data-table tbody{display:grid;gap:var(--s-8)}
.list-panel .data-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-4) var(--s-12);padding:var(--s-12) var(--s-12) var(--s-12) var(--s-12);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.list-panel .data-table td{display:block;height:auto;padding:0;border:0;white-space:normal;overflow-wrap:anywhere;min-width:0;max-width:none;overflow:visible;position:static;background:none;line-height:1.45}
.list-panel .data-table tbody tr:hover td{background:none}
.list-panel .data-table td.name{grid-column:1;font-weight:600}
.list-panel .data-table td.open{grid-column:2;grid-row:1;width:auto;padding:0}
.list-panel .data-table td.open .icon-button{opacity:1}
.list-panel .data-table td[data-label]:not(.name){grid-column:1/-1;display:flex;gap:var(--s-8);font-size:var(--fs-sm);text-align:left}
.list-panel .data-table td[data-label]:not(.name)::before{content:attr(data-label);flex:0 0 38%;color:var(--muted);font-weight:400}
.list-panel .data-table td[data-empty]:not(.name){display:none}
.list-panel .table-pager{margin-top:8px;padding:var(--s-8) 0;border-top:0}
.list-toolbar [data-action=select-filtered],.list-toolbar [data-list-select-all]{display:none}
.bulk-bar{border-radius:var(--radius)}
}
/* Estado de prospección (#190): el estado y, debajo, la fecha del último intento, sin ensanchar la tabla. */
.prospect-cell{display:inline-flex;flex-direction:column;line-height:1.25;white-space:nowrap}
.prospect-cell small{font-size:var(--fs-sm);color:var(--muted)}
/* ---------- Anchos por columna y un solo desplazamiento (#265) ----------
Cada columna tiene su : el nombre se queda con lo que sobra y Responsable y Sector no se recortan (pasan a
una segunda línea si hace falta). Cuentas y Contactos se desplazan con la página, con la cabecera fija bajo la
barra superior, sin un segundo desplazamiento dentro de la tabla. Con la ficha abierta manda recordFit. */
.list-panel:has(.table-wrap.flow){overflow:clip}
.list-panel .table-wrap.flow{overflow:visible;max-height:none}
.table-wrap.flow .list-table thead th{top:var(--shell-top)}
html:has(#main .table-wrap.flow){scroll-padding-top:calc(var(--shell-top) + 40px)}
.data-table col.col-check{width:40px}
.data-table col.col-open{width:40px}
.k-contactos td.name .name-text{display:block;overflow:hidden;text-overflow:ellipsis}
.k-contactos td.name .name-sub,.k-contactos td.name small{display:block;font-size:var(--fs-sm);font-weight:400;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.k-contactos td:not(.name) .name-sub{display:block;font-size:var(--fs-sm);color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.list-select-page{display:none}
.cell-link{color:inherit;text-decoration:none}
.cell-link:hover{color:var(--accent-fg);text-decoration:underline}
.cell-more{margin-left:4px;font-size:var(--fs-sm);color:var(--muted)}
/* Qué es la base de prospección, encima de su vista. */
.base-note{margin:0 0 10px;padding:var(--s-8) var(--s-16);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);font-size:var(--fs-md);line-height:1.5;color:var(--fg-2)}
.base-note p{margin:0;max-width:78ch}
.base-note strong{color:var(--fg);font-weight:600}
/* «Añadir a campaña»: una opción por campaña, con su línea y su estado. */
@media (min-width:731px){
/* El nombre es la columna que manda (#265): nunca baja de ~250 px, con la ficha abierta o no; lo que no cabe se
esconde de derecha a izquierda (recordFit) o, por debajo de 1400 px, con Línea y País fuera de la tabla. */
.k-cuentas :is(th,td).name{min-width:250px;max-width:none}
.k-cuentas td.name .name-cell{max-width:100%}
body:not(.record-open) .list-panel .data-table:is(.k-cuentas,.k-contactos){table-layout:fixed;width:100%}
body:not(.record-open) .list-panel :is(.k-cuentas,.k-contactos) td:not(.check):not(.open){max-width:none;overflow:hidden;text-overflow:ellipsis}
body:not(.record-open) .k-cuentas col[data-col=_estado_compania]{width:140px}
body:not(.record-open) .k-cuentas col[data-col=_prospeccion]{width:116px}
body:not(.record-open) .k-cuentas col[data-col=negocios]{width:60px}
body:not(.record-open) .k-cuentas col[data-col=id_responsable]{width:128px}
body:not(.record-open) .k-cuentas col[data-col=pais]{width:80px}
body:not(.record-open) .k-cuentas col[data-col=sector]{width:124px}
body:not(.record-open) .k-cuentas col[data-col=_missing]{width:124px}
body:not(.record-open) .k-cuentas.k-base col[data-col=sector]{width:212px}
body:not(.record-open) .k-cuentas.k-base col[data-col=_prospeccion]{width:140px}
body:not(.record-open) .k-cuentas.k-base col[data-col=id_responsable]{width:168px}
body:not(.record-open) .k-cuentas.k-base col[data-col=pais]{width:112px}
body:not(.record-open) .k-contactos col[data-col=_cuenta]{width:24%}
body:not(.record-open) .k-contactos col[data-col=emails]{width:27%}
body:not(.record-open) .k-contactos col[data-col=telefonos]{width:152px}
/* Responsable y Sector no se recortan: pasan a otra línea. */
#main .list-panel .data-table.k-cuentas.list-table td:is([data-col=id_responsable],[data-col=sector],[data-col=pais],[data-col=_estado_compania],[data-col=_prospeccion],[data-col=_missing]){white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3;max-width:none}
body:not(.record-open) .k-cuentas td[data-col=_missing]{overflow:visible}
}
/* Por debajo de 1400 px, Línea y País dejan su sitio al nombre; la columna «Ficha» (y la vista «Por completar») se quedan. */
@media (min-width:731px) and (max-width:1399px){
.k-cuentas:not(.k-base) :is(col,th,td)[data-col=negocios],.k-cuentas:not(.k-base) :is(col,th,td)[data-col=pais]{display:none}
}
/* Móvil (#265): Cuentas y Contactos en filas compactas de dos líneas (nombre; y estado, prospección, responsable y
sector, o cuenta, email y teléfono), con casilla para seleccionar: caben más de seis por pantalla. */
@media (max-width:730px){
.list-panel .data-table colgroup{display:none}
.list-panel .data-table:is(.k-cuentas,.k-contactos) tbody{display:block;gap:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.list-panel .data-table:is(.k-cuentas,.k-contactos) tr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) 0;padding:var(--s-8) var(--s-8) var(--s-8) var(--s-12);border:0;border-bottom:1px solid var(--border);border-radius:0;background:none}
.list-panel .data-table:is(.k-cuentas,.k-contactos) tr:last-child{border-bottom:0}
.list-panel .data-table:is(.k-cuentas,.k-contactos) td.check{display:block;flex:none;width:auto;margin-right:10px}
.list-panel .data-table:is(.k-cuentas,.k-contactos) td.name{flex:1 1 calc(100% - 72px);min-width:0;font-size:var(--fs-md)}
.list-panel .data-table:is(.k-cuentas,.k-contactos) td.open{flex:none;order:1;margin-left:auto}
.list-panel .data-table:is(.k-cuentas,.k-contactos) td[data-label]:not(.name){display:inline-flex;align-items:center;flex:none;order:2;max-width:100%;margin-right:12px;font-size:var(--fs-sm);color:var(--muted);gap:0}
.list-panel .data-table:is(.k-cuentas,.k-contactos) td[data-label]:not(.name)::before{content:none}
/* Las tarjetas de Contactos conservan su etiqueta («Cuenta», «Email», «Teléfono»): sin ella un número suelto no dice qué es. */
.list-panel .data-table.k-contactos td[data-label]:not(.name)::before{content:attr(data-label) ": ";margin-right:4px;color:var(--muted)}
.list-panel .data-table.k-contactos td[data-label]:not(.name){flex:1 1 100%;margin-right:0;white-space:normal;overflow-wrap:anywhere}
.list-panel .data-table.k-contactos td:not(.name) .name-sub{display:none}
button.link.list-select-page{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-6)}
.list-panel .data-table:is(.k-cuentas,.k-contactos) td[data-label]:not(.name) :is(.badge,.cell-link){font-size:var(--fs-sm)}
.list-panel .data-table.k-cuentas td[data-label]:is([data-col=negocios],[data-col=pais],[data-col=_missing]){display:none}
.list-panel .data-table.k-cuentas td[data-col=_estado_compania] .badge{font-size:var(--fs-sm);color:var(--fg-2)}
.list-panel .data-table.k-cuentas .prospect-cell{flex-direction:row;gap:var(--s-4)}
.list-panel .data-table.k-cuentas .prospect-cell small{font-size:var(--fs-sm)}
.list-panel .data-table.k-cuentas .prospect-cell small::before{content:"("}
.list-panel .data-table.k-cuentas .prospect-cell small::after{content:")"}
.list-panel .data-table.k-cuentas td.name small{display:none}
.list-panel .data-table:is(.k-cuentas,.k-contactos) td.name .name-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-panel .data-table.k-contactos td.name .name-sub{white-space:nowrap}
.bulk-bar{flex-wrap:wrap;row-gap:var(--s-6)}
.bulk-bar .actions{flex-wrap:wrap}
}
/* Escribir o llamar a un toque: en pantallas táctiles los botones de correo y teléfono miden 44 px (#265). */
@media (pointer:coarse),(max-width:730px){
#drawer .ct-links a.icon-button.sm,#drawer .ct-links .icon-button{width:44px;min-height:44px}
#drawer .ct-head button{min-height:44px}
}
/* Responsable vacío de un registro de Salesforce (#272): de quién era allí, para repartirlo. */
/* position:relative en .view-bar: el texto oculto de las vistas («· de Salesforce») queda dentro de la barra y no ensancha la página en móvil. */
.sf-owner{display:block;min-width:0;color:var(--muted)}
/* #239 · a 390 px los menús «⋯» de las cabeceras (listas, Campañas, campaña) se alinean con la pantalla, no con su botón: ninguno se sale por la izquierda. */
@media (max-width:640px){.page-head details.menu>.menu-list{position:fixed;left:var(--s-16);right:var(--s-16);min-width:0;max-width:none}}
.sf-owner small{display:block;font-size:var(--fs-sm);white-space:normal;overflow-wrap:anywhere;line-height:1.3}
/* Ficha de registro · hijo 2 (#129): panel lateral acoplado y sin velo, página completa (#//completa),
y la hoja sheetOpen de los hijos 6, 7, 8, 9 y 12. Desde #546 el interior de la ficha es React (Tailwind): aquí queda la
maqueta del panel y de la página completa (rec-bar, rec-side, rec-acts, rec-main, rec-tabbar). */
:root{--rec-shadow:-12px 0 32px -24px color-mix(in srgb,var(--shadow-ink) 35%,transparent);--rec-line:color-mix(in srgb,var(--accent-fg) 22%,var(--accent-soft));--rec-w:clamp(360px,36vw,480px);--rec-w-wide:min(840px,calc(100vw - var(--sidebar-w-icon) - 380px))}
/* Una hoja ancha o «Nueva reunión» con los huecos del BD (#117) ensanchan el panel; la lista se estrecha con él. */
body.rec-wide,body:has(#modal.rec-docked[open] .p-wide-dialog){--rec-w:var(--rec-w-wide)}
/* Importar: vista previa de cambios */
.diff div{margin-bottom:3px;font-size:var(--fs-sm)}
.diff del{color:var(--red);text-decoration:line-through;opacity:.8}
.diff ins{color:var(--green);text-decoration:none}
/* ---------- Panel acoplado: #overlay es el hueco a la derecha del panel claro; sin velo y sin trampa de foco ---------- */
.record-dock{position:fixed;top:var(--shell-top);right:8px;bottom:8px;z-index:15;width:var(--rec-w);display:flex;background:var(--surface);border-left:1px solid var(--border);border-radius:0 var(--radius-lg) var(--radius-lg) 0;box-shadow:var(--rec-shadow);animation:rec-in var(--dur-slow) var(--ease)}
@keyframes rec-in{from{transform:translateX(12px);opacity:0}to{transform:none;opacity:1}}
.drawer{flex:1;min-width:0;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;outline:0;border-radius:inherit}
/* Mientras llega otra ficha, la actual se atenúa y una línea avanza bajo la barra. */
.drawer[aria-busy=true] .rec-side,.drawer[aria-busy=true] .rec-main{opacity:.55;transition:opacity var(--dur) var(--ease)}
.drawer[aria-busy=true] .rec-bar::after{content:"";position:absolute;left:0;bottom:-1px;width:40%;height:2px;background:var(--accent-strong);animation:rec-busy 1.1s var(--ease) infinite}
@keyframes rec-busy{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
/* La lista sigue a la vista, desplazable y clicable: el panel claro se estrecha y se une al panel de la ficha. */
body.record-open main,body.record-form-open main{margin-right:calc(var(--rec-w) + 8px)}
/* En una pantalla sin lista, o con una lista que junto al panel no cabe ni con la barra plegada (record.js recordFit →
body.record-over), el panel va encima y la página conserva su ancho. */
body.record-open.record-over main,body.record-form-open.record-over main{margin-right:8px}
/* Encima de la lista, la ficha llega abajo: por el hueco de 8 px asomaba el texto de detrás (#707). */
body.record-over .record-dock{bottom:0;border-bottom-right-radius:0}
body.record-open #main tr[data-id]{scroll-margin:100px 0 24px}
/* Con la ficha o el formulario abiertos, si traen su propia acción principal, la de la cabecera de la lista pasa a secundaria (#250). */
body.record-open:has(#drawer .primary) #main .page-head .actions .primary,body.record-form-open:has(#drawer .primary) #main .page-head .actions .primary{background:var(--surface);border-color:var(--border-strong);color:var(--fg);font-weight:500}
body.record-open:has(#drawer .primary) #main .page-head .actions .primary:hover,body.record-form-open:has(#drawer .primary) #main .page-head .actions .primary:hover{background:var(--surface-2)}
/* Dentro de la ficha manda la acción de su cabecera: las principales de una pestaña (Fuentes, Enriquecer…) pasan a secundarias (#250). */
#drawer:has(.rec-acts .primary) #drawer-body .primary{background:var(--surface);border-color:var(--border-strong);color:var(--fg);font-weight:500}
#drawer:has(.rec-acts .primary) #drawer-body .primary:hover{background:var(--surface-2)}
#main tr.rec-current td{background:var(--accent-soft)}
#main tr.rec-current td:first-child{box-shadow:inset 3px 0 0 var(--accent-strong)}
/* En tarjetas (DataTable, #707) la marca es el borde de la tarjeta: la barra de la primera celda caería sobre el texto. */
#main [data-layout=cards] tr.rec-current{border-color:var(--accent-strong);background:var(--accent-soft)}
#main [data-layout=cards] tr.rec-current td{background:none;box-shadow:none}
#main .rec-col-off{display:none}
#main .data-table.rec-compact td:not(.check):not(.open){max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- Barra del panel: tipo o «← anterior», ↑/↓ con la posición, enlace, página completa y cerrar ---------- */
.rec-bar{position:sticky;top:0;z-index:4;flex:none;display:flex;align-items:center;gap:var(--s-4);min-height:44px;padding:var(--s-6) var(--s-12) var(--s-6) var(--s-16);background:var(--surface);border-bottom:1px solid var(--border);border-radius:0 var(--radius-lg) 0 0}
.rec-bar button.icon-button{width:28px;min-height:28px}
.rec-grow{flex:1}
.rec-mobile-close{display:none}
.rec-sheet-title{margin:0 0 0 4px;font:600 var(--fs-lg)/20px var(--font-display);letter-spacing:-.01em;outline:0}
/* ---------- Cabecera: icono del tipo, nombre, estado, responsable y acciones ---------- */
.rec-side{flex:none;min-width:0}
.badge.line{background:var(--ob-cuenta-bg);color:var(--ob-cuenta)}
.rec-acts{padding:var(--s-12) var(--s-20)}
/* El ⋯ de la ficha abre su menú bajo el botón, alineado a su derecha; si así se sale del panel por la izquierda
(el ⋯ va pegado a «Editar» en una oportunidad), ux.js lo marca .menu-start y se alinea a su izquierda (#151). */
.rec-acts details.menu.menu-start>.menu-list{left:0;right:auto}
.rec-slot{padding:0 var(--s-20) var(--s-12)}
/* ---------- Pestañas con recuento; las que no caben van a «Más» ---------- */
.rec-main{flex:1 0 auto;display:flex;flex-direction:column;min-width:0}
.rec-tabbar{position:sticky;top:44px;z-index:3;display:flex;align-items:center;gap:var(--s-4);padding:0 var(--s-8) 0 var(--s-20);background:var(--surface);border-bottom:1px solid var(--border)}
.rec-tabbar .tabs{flex:1;min-width:0;margin:0;border-bottom:0}
.rec-tabbar .rec-tabs{gap:0}
.rec-tabs>button{min-height:40px;padding:0 var(--s-6)}
.rec-tabs>button:first-child{margin-left:-5px}
.rec-tabs .count{margin-left:4px}
.rec-body{flex:1;padding:var(--s-16) var(--s-20) var(--s-24)}
/* ---------- Formulario acoplado: #record-form en el sitio del panel, sin velo (#modal con show()) ---------- */
.rec-guard{margin:-4px 0 14px}
.rec-guard p{margin:0 0 8px}
.rec-guard .actions{gap:var(--s-8)}
/* «Nueva reunión» con huecos (#117) acoplada: el ancho de la maqueta c-reserva, no el del diálogo modal. */
dialog#modal.rec-docked[open]{position:fixed;inset:var(--shell-top) 8px 8px auto;z-index:16;width:var(--rec-w);max-width:none;height:auto;max-height:none;margin:0;border:0;border-left:1px solid var(--border);border-radius:0 var(--radius-lg) var(--radius-lg) 0;box-shadow:var(--rec-shadow);overscroll-behavior:contain;animation:rec-in var(--dur-slow) var(--ease)}
/* ---------- Página completa: la misma ficha a todo el ancho, propiedades a la izquierda y pestañas a la derecha ---------- */
body.record-full main{display:none}
@media(min-width:731px){
body.record-full .record-dock{left:var(--sidebar-w);width:auto;border-left:0;border-radius:var(--radius-lg);box-shadow:none}
body.record-full.nav-collapsed .record-dock{left:var(--sidebar-w-icon)}
body.record-full .drawer{display:grid;grid-template-columns:minmax(320px,400px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);overflow:hidden}
body.record-full .rec-bar{grid-column:1/-1;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
body.record-full .rec-side{overflow:auto;padding-bottom:var(--s-24);border-right:1px solid var(--border)}
body.record-full .rec-main{overflow:auto;min-height:0}
body.record-full .rec-tabbar{top:0}
body.record-full .rec-body{padding:var(--s-20) var(--s-32) var(--s-32);max-width:880px}
}
/* Página completa sin sitio para dos columnas (una tablet, 768 px con la barra lateral): la actividad se quedaba en 105 px y
se desplazaba en horizontal (#341). Con menos de 760 px de ficha, una sola columna que se desplaza entera, como el panel. */
.record-dock{container-type:inline-size}
@container (max-width:760px){
body.record-full .drawer{display:flex;overflow:auto}
body.record-full .rec-side{overflow:visible;padding-bottom:0;border-right:0}
body.record-full .rec-main{overflow:visible}
body.record-full .rec-tabbar{top:44px}
}
/* ---------- Ficha antigua y otros módulos: rejilla de datos, origen de la oportunidad, línea de tiempo, señales ---------- */
.origin-note strong{color:var(--fg);font-weight:600}
.timeline{position:relative;padding-left:var(--s-20)}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--border)}
.rec-body .table-wrap{border:1px solid var(--border);border-radius:var(--radius)}
/* ---------- Móvil: el panel ocupa todo el ancho, con «←» para volver a la lista ---------- */
@media(max-width:730px){
.record-dock{left:0;right:0;bottom:0;width:auto;border-left:0;border-radius:0;box-shadow:none;z-index:25}
body.record-open main,body.record-form-open main{margin-right:6px}
dialog#modal.rec-docked[open]{inset:var(--shell-top) 0 0 0;width:auto;border-left:0;border-radius:0;z-index:26}
.rec-bar{padding-left:var(--s-6);border-radius:0}
.rec-mobile-close{display:inline-flex}
.rec-close,.rec-full-btn{display:none}
.rec-bar.has-back .rec-mobile-close{display:none}
.rec-bar.has-back .rec-close{display:inline-flex}
.rec-acts{padding-left:var(--s-20)}
.rec-tabbar{padding:0 var(--s-12)}
.rec-tabs>button:first-child{margin-left:0}
.rec-body{padding:var(--s-12) var(--s-16) var(--s-24)}
/* #140 (QA de staging): la fila de acciones de la ficha, con su botón menta, se queda pegada bajo la barra de la ficha
al bajar por el panel. .rec-side deja de ser caja para que la fila se pegue en todo el panel y no solo en su cabecera. */
body:not(.record-full) .rec-side{display:contents}
body:not(.record-full) .rec-side>*{flex:none}
body:not(.record-full) .rec-acts{position:sticky;top:44px;z-index:3;background:var(--surface);border-bottom:1px solid var(--border)}
/* Las pestañas ya no se pegan en el móvil: en el mismo sitio taparían esa fila. */
body:not(.record-full) .rec-tabbar{position:static}
}
/* Estado de la cuenta (#391): «¿Por qué está en …?» bajo las acciones y el diálogo «Descartar cuenta…». */
.ec-why{font-size:var(--fs-sm);color:var(--fg-2)}
.ec-why>summary{cursor:pointer;width:fit-content;color:var(--accent-strong);font-weight:500}
.ec-blockers{list-style:none;margin:0 0 var(--s-12);padding:0;display:grid;gap:var(--s-8)}
.ec-blockers li{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-12);padding:var(--s-8) var(--s-12);border:1px solid var(--border);border-radius:var(--r-md);font-size:var(--fs-sm);overflow-wrap:anywhere}
.ec-blockers li button{flex:none}
/* C3 (#392): lo que el descarte cierra en el mismo paso, el botón «No renueva…» de la pestaña Negocios y la nota del cierre a mano. */
.ec-closures{margin:0 0 var(--s-12);padding-left:var(--s-16);font-size:var(--fs-sm);overflow-wrap:anywhere}.ec-closures li{margin-bottom:var(--s-4)}
.nr-closed{margin:0}
/* Ajustes, Mi cuenta, acceso y bienvenida · hijo 11 (#133) */
/* ---------- Plantilla de Ajustes ---------- */
main.settings{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s-8) var(--s-24);align-content:start}
main.settings>.settings-nav{grid-column:1;grid-row:1/span 40;align-self:start;position:sticky;top:calc(var(--shell-top) + 24px)}
main.settings>:not(.settings-nav){grid-column:2}
main.settings>.page-head{margin-top:2px}
/* La Guía se lee sin la subnavegación: sin ella, la página ocupa todo el panel. */
main.settings:not(:has(>.settings-nav)){display:block}
.settings-nav{display:flex;flex-direction:column;gap:var(--s-2);position:sticky;top:calc(var(--shell-top) + 16px)}
.settings-nav a{display:flex;align-items:center;gap:var(--s-8);min-height:32px;padding:0 var(--s-12);border-radius:var(--radius-sm);color:var(--fg-2);font-weight:500;font-size:var(--fs-md);text-decoration:none}
.settings-nav a:hover{background:var(--surface-2);text-decoration:none}
/* Seleccionada como en la barra lateral del marco (Pokecut, #542): superficie con borde y sombra, texto principal. */
.settings-nav a.active{background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-strong),var(--shadow-sm);color:var(--fg);font-weight:600}
/* El recuento va fuera del texto del enlace (los arneses leen los textos exactos). */
.settings-nav a[data-count]::after{content:attr(data-count)}
.settings-nav a[data-count]::after{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 var(--s-6);border-radius:var(--radius-full);background:var(--warning-soft);color:var(--warning);font-size:var(--fs-sm);font-weight:600;line-height:1}
.settings-nav a[data-count]::after{margin-left:auto}
/* ---------- Puesta en marcha ---------- */
/* ---------- Horario de trabajo (#117) ---------- */
/* Añadir y copiar salen en la fila bajo el puntero o con el foco (así el resto de filas caben en una línea, como en la
maqueta); en pantallas táctiles, siempre. Fuera de esa fila se ocultan solo a la vista: siguen en el árbol de
accesibilidad y en el orden del tabulador, y al recibir el foco la fila los enseña. */
/* Editor estrecho (la puesta en marcha y Mi cuenta en pantallas medianas, #257): con las acciones con texto no caben tramo y acciones en la fila y,
al pasar el puntero, se montaban sobre las horas. Aquí van solo con su icono (el nombre sigue en aria-label) y siempre
a la vista, para que la fila no cambie de ancho con el puntero. En móvil manda la regla de 730 px. */
/* Más estrecho aún (Mi cuenta a 768 px): el día va en su línea y el tramo con sus acciones en la siguiente; en una sola fila
el tramo no cabía y las acciones se montaban sobre la hora de fin (#341). */
body:has(#main>.brand-page,#main>.login,#main>[data-brand-page]) #main{margin:0;padding:0;border-radius:0;background:var(--brand-bg);min-height:100vh}
#main>.login{margin:12vh auto}
.brand-body{margin:0;background:var(--brand-bg)}
.brand-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;gap:var(--s-24);padding:clamp(32px,12vh,120px) var(--s-16) var(--s-48);background:radial-gradient(760px 440px at 50% -12%,var(--brand-glow),transparent 70%),radial-gradient(520px 360px at 100% 105%,var(--brand-glow-soft),transparent 70%),var(--brand-bg);color:var(--frame-fg)}
.brand-logo-wrap svg{display:block;width:auto;height:34px}
.login{width:100%;max-width:420px;padding:var(--s-24);border-radius:var(--r-lg);background:var(--surface);color:var(--fg);box-shadow:var(--shadow-lg)}
.login h1{margin-bottom:6px;font-size:var(--fs-2xl);line-height:30px}
.login .note{margin-bottom:20px}
.login form{display:grid;gap:var(--s-12)}
.login-actions{margin:0}
.login h1+.login-actions{margin-top:16px}
body.onboarding-mode main{max-width:none;padding:0}
/* Horario de reuniones en la puesta en marcha (#179): el editor de Mi cuenta, siempre desplegado. */
/* «Guardar y continuar» guarda el horario (#257): el pie propio del editor sobra en el asistente. */
/* Rol y email los fija otra persona: se leen como dato, no como campo apagado (#257). */
/* (0,4,1): gana al campo base de style.css, input:not(…):not(…):not(…). */
/* ---------- Pantallas estrechas ---------- */
@media(max-width:980px){
main.settings{display:block}
main.settings>.settings-nav{position:static;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--s-4);padding-bottom:var(--s-8);margin-bottom:8px;border-bottom:1px solid var(--border)}
main.settings>.settings-nav a{white-space:nowrap;flex:none}
.settings-nav{position:static}
}
@media(max-width:730px){
.brand-page{gap:var(--s-20);padding-top:var(--s-32)}
.login{padding:var(--s-20) var(--s-16)}
}
/* En móvil los tramos van en su propia línea bajo el día. Cada hora conserva el ancho de su contenido (también «06:00 PM»
o «6:00 p. m.» con reloj de 12 horas) y, si el tramo no cabe en una línea, se parte en dos. El selector de las horas
(0,3,1) empata con el de los campos de la base (input:not(…), que pone width:100%) y gana solo porque ui-ajustes.css
se carga después de style.css: si se lleva a la base o a un fichero anterior, vuelve el width:100%. */
}