Modos: popover · end (derecha) · start (izquierda) · sheet (abajo)
Las capas viven al final de : un ancestro con backdrop-filter
rompería position:fixed. nublar.js las mueve allí si hace falta.
------------------------------------------------------------------------- */
.nb-layer-backdrop {
position: fixed;
inset: 0;
z-index: var(--nb-z-layer);
background: rgba(0, 20, 18, 0.32);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
opacity: 0;
pointer-events: none;
transition: opacity var(--nb-dur) var(--nb-ease);
}
.nb-layer-backdrop.is-visible { opacity: 1; pointer-events: auto; }
.nb-layer-backdrop.is-clear { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nb-layer {
position: fixed;
z-index: calc(var(--nb-z-layer) + 1);
display: none;
flex-direction: column;
max-height: calc(100dvh - 16px);
border: 1px solid var(--nb-glass-border);
background: var(--nb-glass-bg-strong);
-webkit-backdrop-filter: blur(var(--nb-glass-blur)) saturate(var(--nb-glass-saturate));
backdrop-filter: blur(var(--nb-glass-blur)) saturate(var(--nb-glass-saturate));
box-shadow: var(--nb-glass-highlight), 0 0 0 1px var(--nb-glass-edge), var(--nb-shadow-lg);
color: var(--nb-text);
font-size: var(--nb-text-base);
}
.nb-layer.is-open { display: flex; }
.nb-layer.is-popover {
background: var(--nb-glass-bg-solid);
width: var(--nb-layer-w, 320px);
max-width: calc(100vw - 16px);
border-radius: var(--nb-radius-md);
animation: nb-pop var(--nb-dur) var(--nb-ease);
}
.nb-layer.is-end,
.nb-layer.is-start {
top: 0;
bottom: 0;
width: min(var(--nb-layer-panel-w, 400px), 92vw);
max-height: none;
height: 100dvh;
}
.nb-layer.is-end { right: 0; border-radius: 0; border-top: 0; border-bottom: 0; border-right: 0; animation: nb-layer-in-end var(--nb-dur-slow) var(--nb-ease); }
.nb-layer.is-start { left: 0; border-radius: 0; border-top: 0; border-bottom: 0; border-left: 0; animation: nb-layer-in-start var(--nb-dur-slow) var(--nb-ease); }
.nb-layer.is-sheet {
left: 0;
right: 0;
bottom: 0;
max-height: 88dvh;
border-radius: var(--nb-radius-lg) var(--nb-radius-lg) 0 0;
border-bottom: 0;
padding-bottom: env(safe-area-inset-bottom);
animation: nb-sheet-in var(--nb-dur-slow) var(--nb-ease);
}
.nb-layer.is-sheet::before {
content: "";
flex: 0 0 auto;
width: 36px;
height: 4px;
margin: 8px auto 0;
border-radius: var(--nb-radius-pill);
background: var(--nb-border-strong);
}
.nb-layer-header {
display: flex;
align-items: center;
gap: var(--nb-space-3);
flex: 0 0 auto;
padding: var(--nb-space-4) var(--nb-space-3) var(--nb-space-3) var(--nb-space-5);
border-bottom: 1px solid var(--nb-border-subtle);
}
.nb-layer.is-popover .nb-layer-header { padding: var(--nb-space-3) var(--nb-space-2) var(--nb-space-3) var(--nb-space-4); }
.nb-layer-header-text { flex: 1 1 auto; min-width: 0; }
.nb-layer-title { margin: 0; font-size: var(--nb-text-md); font-weight: var(--nb-weight-bold); line-height: var(--nb-leading-snug); }
.nb-layer-subtitle { margin: 2px 0 0; font-size: var(--nb-text-xs); color: var(--nb-text-3); }
.nb-layer-body { flex: 1 1 auto; min-height: 0; padding: var(--nb-space-2); overflow-y: auto; overscroll-behavior: contain; }
.nb-layer-body.is-padded { padding: var(--nb-space-4) var(--nb-space-5); }
.nb-layer-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--nb-space-2);
flex: 0 0 auto;
padding: var(--nb-space-3) var(--nb-space-4);
border-top: 1px solid var(--nb-border-subtle);
}
.nb-layer-footer .nb-spacer { flex: 1 1 auto; }
.nb-layer.is-popover .nb-layer-close { display: none; }
.nb-layer.is-popover [data-only-sheet] { display: none; }
@keyframes nb-layer-in-end { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes nb-layer-in-start { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes nb-sheet-in { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
/* -------------------------------------------------------------------------
29. ALERTAS (panel de notificaciones)
------------------------------------------------------------------------- */
.nb-notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nb-notif {
--_bg: var(--nb-neutral-bg);
--_fg: var(--nb-neutral-fg);
position: relative;
display: flex;
gap: var(--nb-space-3);
padding: var(--nb-space-3) var(--nb-space-8) var(--nb-space-3) var(--nb-space-3);
border-radius: var(--nb-radius-sm);
color: inherit;
text-decoration: none;
transition: background-color var(--nb-dur-fast) var(--nb-ease);
}
.nb-notif:hover { background: var(--nb-surface-3); color: inherit; text-decoration: none; }
.nb-notif-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: var(--nb-radius-sm);
background: var(--_bg);
color: var(--_fg);
font-size: 18px;
}
.nb-notif--danger { --_bg: var(--nb-danger-bg); --_fg: var(--nb-danger-fg); }
.nb-notif--warning { --_bg: var(--nb-warning-bg); --_fg: var(--nb-warning-fg); }
.nb-notif--success { --_bg: var(--nb-success-bg); --_fg: var(--nb-success-fg); }
.nb-notif--info { --_bg: var(--nb-info-bg); --_fg: var(--nb-info-fg); }
.nb-notif--accent { --_bg: var(--nb-accent-soft); --_fg: var(--nb-accent-strong); }
.nb-notif-body { min-width: 0; flex: 1 1 auto; }
.nb-notif-title { display: block; font-size: var(--nb-text-sm); font-weight: var(--nb-weight-medium); color: var(--nb-text); line-height: var(--nb-leading-snug); }
.nb-notif-text { display: block; margin-top: 2px; font-size: var(--nb-text-xs); color: var(--nb-text-2); }
.nb-notif-time { display: block; margin-top: 4px; font-size: var(--nb-text-2xs); color: var(--nb-text-3); }
/* Punto de "no leída": estado semántico real */
.nb-notif.is-unread::after {
content: "";
position: absolute;
top: 16px;
right: 14px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--nb-accent);
}
.nb-notif.is-unread .nb-notif-title { font-weight: var(--nb-weight-bold); }
/* -------------------------------------------------------------------------
30. PANEL DE USUARIO
------------------------------------------------------------------------- */
.nb-userpanel-head {
display: flex;
align-items: center;
gap: var(--nb-space-3);
padding: var(--nb-space-4);
border-bottom: 1px solid var(--nb-border-subtle);
}
.nb-userpanel-head > div { min-width: 0; }
.nb-userpanel-name { display: block; font-size: var(--nb-text-sm); font-weight: var(--nb-weight-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-userpanel-meta { display: block; font-size: var(--nb-text-xs); color: var(--nb-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-menu-item > .nb-avatar { margin: 4px 0; }
.nb-menu-item > .nb-item-end { margin-left: auto; display: inline-flex; align-items: center; }
.nb-menu-item.is-current { font-weight: var(--nb-weight-medium); }
.nb-menu-item.is-current .nb-item-end { color: var(--nb-accent-strong); }
/* Interruptor visual dentro de un item de menú (role="menuitemcheckbox") */
.nb-menu-item .nb-switch-track { margin-left: auto; }
.nb-menu-item[aria-checked="true"] .nb-switch-track { background: var(--nb-accent); }
.nb-menu-item[aria-checked="true"] .nb-switch-track::after { transform: translateX(16px); }
/* -------------------------------------------------------------------------
31. AVATAR SÓLIDO (listas de personas, estilo Adminator)
------------------------------------------------------------------------- */
.nb-avatar--solid { color: #fff; }
.nb-avatar--solid[data-tone="1"] { background: #1d8a7e; color: #fff; }
.nb-avatar--solid[data-tone="2"] { background: #4757c4; color: #fff; }
.nb-avatar--solid[data-tone="3"] { background: #c93a55; color: #fff; }
.nb-avatar--solid[data-tone="4"] { background: #f2a900; color: #002825; }
.nb-avatar--solid[data-tone="5"] { background: #355c58; color: #fff; }
[data-theme="dark"] .nb-avatar--solid[data-tone="1"] { color: #fff; }
[data-theme="dark"] .nb-avatar--solid[data-tone="2"] { color: #fff; }
[data-theme="dark"] .nb-avatar--solid[data-tone="3"] { color: #fff; }
[data-theme="dark"] .nb-avatar--solid[data-tone="4"] { color: #002825; }
[data-theme="dark"] .nb-avatar--solid[data-tone="5"] { background: #4d7a75; color: #fff; }
/* -------------------------------------------------------------------------
32. DASHBOARD PERSONALIZABLE
…
← nublar-dashboard.js lo rellena
Tamaños de bloque: sm 3/12 · md 4/12 · lg 6/12 · xl 8/12 · full 12/12
Se adaptan al ancho del contenedor (container queries), no al de la ventana:
funciona igual con el sidebar abierto o contraído.
------------------------------------------------------------------------- */
.nb-dash { container-type: inline-size; container-name: nb-dash; }
.nb-dash-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--nb-space-4);
align-items: stretch;
}
.nb-widget {
--span: 4;
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
grid-column: span var(--span);
border-radius: var(--nb-radius-md);
}
.nb-widget > :not(.nb-widget-tools) { flex: 1 1 auto; min-width: 0; }
.nb-widget[data-size="sm"] { --span: 3; }
.nb-widget[data-size="md"] { --span: 4; }
.nb-widget[data-size="lg"] { --span: 6; }
.nb-widget[data-size="xl"] { --span: 8; }
.nb-widget[data-size="full"] { --span: 12; }
.nb-widget .nb-kpi-value { font-size: clamp(1.5rem, 1.1rem + 1.1cqi, 2rem); }
@container nb-dash (max-width: 1040px) {
.nb-widget[data-size="sm"] { --span: 6; }
.nb-widget[data-size="md"] { --span: 6; }
.nb-widget[data-size="lg"],
.nb-widget[data-size="xl"] { --span: 12; }
}
@container nb-dash (max-width: 640px) {
.nb-dash-grid { gap: var(--nb-space-3); }
.nb-widget[data-size="md"] { --span: 12; }
.nb-sizes { display: none !important; }
}
@container nb-dash (max-width: 420px) {
.nb-widget[data-size="sm"] { --span: 12; }
}
/* Barra de herramientas de cada bloque (solo en modo edición) */
.nb-widget-tools {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
display: none;
align-items: center;
gap: 2px;
padding: 3px;
border: 1px solid var(--nb-glass-border);
border-radius: var(--nb-radius-sm);
background: var(--nb-glass-bg-strong);
-webkit-backdrop-filter: blur(var(--nb-glass-blur));
backdrop-filter: blur(var(--nb-glass-blur));
box-shadow: var(--nb-shadow-md);
}
.nb-widget-tools .nb-btn { height: 30px; width: 30px; padding: 0; }
.nb-widget-handle { cursor: grab; touch-action: none; }
.nb-widget-handle:active { cursor: grabbing; }
.nb-sizes { display: inline-flex; gap: 1px; padding: 0 2px; border-left: 1px solid var(--nb-border-subtle); border-right: 1px solid var(--nb-border-subtle); margin: 0 2px; }
.nb-size-btn {
min-width: 28px;
height: 26px;
padding: 0 6px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--nb-text-3);
font: inherit;
font-size: var(--nb-text-2xs);
font-weight: var(--nb-weight-bold);
cursor: pointer;
}
.nb-size-btn:hover { background: var(--nb-surface-3); color: var(--nb-text); }
.nb-size-btn[aria-pressed="true"] { background: var(--nb-accent-soft); color: var(--nb-accent-strong); }
.nb-dash.is-editing .nb-widget-tools { display: flex; }
.nb-dash.is-editing .nb-widget > :not(.nb-widget-tools) { pointer-events: none; user-select: none; }
.nb-dash.is-editing .nb-widget::after {
content: "";
position: absolute;
inset: -1px;
z-index: 2;
border: 1.5px dashed var(--nb-accent);
border-radius: var(--nb-radius-md);
pointer-events: none;
}
.nb-dash.is-editing .nb-reveal { animation: none; opacity: 1; transform: none; }
/* Elemento arrastrado y hueco de destino (compartido con el gestor de columnas) */
.is-sort-dragging {
position: fixed !important;
z-index: var(--nb-z-palette) !important;
margin: 0 !important;
pointer-events: none !important;
box-shadow: var(--nb-shadow-lg);
opacity: 0.96;
transition: none !important;
}
.nb-widget.is-sort-dragging { transform: rotate(0.6deg) scale(1.01); }
.nb-sort-placeholder {
grid-column: span var(--span, 12);
border: 2px dashed var(--nb-accent);
border-radius: var(--nb-radius-md);
background: var(--nb-accent-soft);
list-style: none;
}
.nb-widget.is-flash { animation: nb-flash 1.4s var(--nb-ease); }
@keyframes nb-flash {
0% { box-shadow: 0 0 0 0 var(--nb-accent-soft-2); }
25% { box-shadow: 0 0 0 6px var(--nb-accent-soft-2); }
100% { box-shadow: 0 0 0 0 transparent; }
}
/* Barra de edición */
.nb-editbar {
position: sticky;
top: calc(var(--nb-topbar-h) + var(--nb-space-3));
z-index: var(--nb-z-sticky);
display: none;
align-items: center;
flex-wrap: wrap;
gap: var(--nb-space-2) var(--nb-space-3);
margin-bottom: var(--nb-space-4);
padding: var(--nb-space-2) var(--nb-space-2) var(--nb-space-2) var(--nb-space-4);
border-radius: var(--nb-radius-md);
}
.nb-dash.is-editing > .nb-editbar { display: flex; }
.nb-editbar-text { flex: 1 1 220px; min-width: 0; font-size: var(--nb-text-sm); color: var(--nb-text-2); }
.nb-editbar-text strong { color: var(--nb-text); }
.nb-editbar-actions { display: flex; align-items: center; gap: var(--nb-space-2); margin-left: auto; }
@media (max-width: 575.98px) {
.nb-editbar { padding: var(--nb-space-3); }
.nb-editbar-actions { width: 100%; }
.nb-editbar-actions .nb-btn { flex: 1 1 auto; padding: 0 var(--nb-space-2); }
.nb-editbar-actions .nb-btn[data-nb-dash-reset] { flex: 0 0 var(--nb-control-h); }
.nb-editbar .nb-btn-label { display: none; }
}
[data-nb-dash-edit][aria-pressed="true"] { --_bg: var(--nb-accent-soft); --_bd: var(--nb-accent); --_fg: var(--nb-accent-strong); }
.nb-dash-empty { display: none; }
.nb-dash.is-empty .nb-dash-empty { display: flex; }
/* Catálogo de bloques (capa "Añadir bloque") */
.nb-catalog { display: flex; flex-direction: column; gap: var(--nb-space-2); }
.nb-catalog-group { padding: var(--nb-space-3) var(--nb-space-1) var(--nb-space-1); }
.nb-catalog-item {
display: flex;
align-items: center;
gap: var(--nb-space-3);
width: 100%;
padding: var(--nb-space-3);
border: 1px solid var(--nb-border-subtle);
border-radius: var(--nb-radius-md);
background: var(--nb-surface);
color: var(--nb-text);
font: inherit;
text-align: left;
cursor: pointer;
transition: border-color var(--nb-dur) var(--nb-ease), box-shadow var(--nb-dur) var(--nb-ease), transform var(--nb-dur-fast) var(--nb-ease);
}
.nb-catalog-item:hover { border-color: var(--nb-accent); box-shadow: var(--nb-shadow-sm); }
.nb-catalog-item:active { transform: translateY(1px); }
.nb-catalog-item[disabled] { cursor: default; opacity: 0.55; box-shadow: none; border-color: var(--nb-border-subtle); }
.nb-catalog-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: var(--nb-radius-sm);
background: var(--nb-accent-soft);
color: var(--nb-accent-strong);
font-size: 20px;
}
.nb-catalog-text { min-width: 0; flex: 1 1 auto; }
.nb-catalog-title { display: block; font-size: var(--nb-text-sm); font-weight: var(--nb-weight-bold); }
.nb-catalog-desc { display: block; margin-top: 2px; font-size: var(--nb-text-xs); color: var(--nb-text-3); }
.nb-catalog-item .nb-badge { flex: 0 0 auto; }
/* -------------------------------------------------------------------------
33. TABLA v2 (estilo Adminator): búsqueda, filtros, chips, cabecera en versalitas
------------------------------------------------------------------------- */
.nb-table-toolbar { gap: var(--nb-space-2); }
.nb-toolbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-2); min-width: 0; }
.nb-toolbar-group--end { margin-left: auto; }
.nb-search { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 420px; min-width: 0; }
.nb-search > .nb-icon { position: absolute; left: 12px; font-size: 18px; color: var(--nb-text-3); pointer-events: none; }
.nb-search input.nb-input { padding-left: 38px; padding-right: 34px; }
.nb-search-clear {
position: absolute;
right: 4px;
display: none !important;
width: 30px !important;
height: 30px !important;
}
.nb-search.has-value .nb-search-clear { display: inline-flex !important; }
.nb-filter-btn .nb-badge { min-width: 20px; height: 20px; padding: 0 6px; justify-content: center; }
.nb-filter-btn .nb-badge:empty { display: none; }
/* Filtros activos como chips debajo de la barra */
.nb-filterbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 0 var(--nb-space-4) var(--nb-space-3);
}
.nb-filterbar:empty,
.nb-filterbar[hidden] { display: none; }
.nb-table-toolbar + .nb-filterbar { margin-top: calc(-1 * var(--nb-space-1)); padding-top: var(--nb-space-3); }
.nb-table-toolbar:has(+ .nb-filterbar:not(:empty)) { border-bottom: 0; }
/* Cabecera en versalitas con tracking (más aire, menos ruido) */
.nb-table--caps thead th {
height: 44px;
background: transparent;
border-bottom: 1px solid var(--nb-border);
color: var(--nb-text-3);
font-size: var(--nb-text-2xs);
font-weight: var(--nb-weight-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.nb-table--caps tbody td { height: 64px; }
.nb-table--caps tbody tr.is-selected { background: var(--nb-accent-soft); }
.nb-table--caps tbody tr.is-selected > td:first-child { box-shadow: inset 3px 0 0 var(--nb-accent); }
.nb-table .nb-cell-stack { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.nb-table .nb-cell-stack .nb-meta { font-family: var(--nb-font-mono); font-size: 11px; }
.nb-table .nb-mono-cell { font-family: var(--nb-font-mono); font-size: var(--nb-text-xs); color: var(--nb-text-2); letter-spacing: 0.01em; }
.nb-sort .nb-icon { font-size: 13px; }
.nb-table--caps .nb-sort { text-transform: inherit; letter-spacing: inherit; font-weight: inherit; }
.nb-table--caps .nb-col-grow .nb-cell-entity { min-width: 200px; max-width: 260px; }
.nb-table tfoot td[data-count] { position: relative; }
.nb-table tfoot .nb-tfoot-label { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); white-space: nowrap; }
@media (max-width: 575.98px) { .nb-table--stack tfoot .nb-tfoot-label { position: static; transform: none; padding: 0; } }
.nb-table--caps thead th,
.nb-table--caps tbody td,
.nb-table--caps tfoot td { padding-left: 10px; padding-right: 10px; }
.nb-table--caps thead th:first-child,
.nb-table--caps tbody td:first-child,
.nb-table--caps tfoot td:first-child { padding-left: var(--nb-space-4); }
.nb-table--caps .nb-col-grow { width: auto; max-width: none; }
.nb-row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0; }
.nb-row-actions .nb-btn { --_fg: var(--nb-text-3); }
.nb-row-actions .nb-btn:hover { --_fg: var(--nb-text); }
.nb-table .nb-col-actions { width: 1%; white-space: nowrap; }
.nb-table .nb-col-truncate { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.nb-table-empty td { height: auto !important; padding: 0 !important; white-space: normal !important; }
.nb-table-empty .nb-empty { padding: var(--nb-space-10) var(--nb-space-4); }
.nb-pagesize { display: inline-flex; align-items: center; gap: var(--nb-space-2); }
.nb-pagesize select.nb-select { width: auto; height: 32px; padding-left: 10px; font-size: var(--nb-text-sm); }
/* Tabla apilada en móvil: cada fila pasa a ser una tarjeta.
Cada
lleva data-label con el nombre de la columna. */
@media (max-width: 575.98px) {
.nb-table--stack thead { display: none; }
.nb-table--stack,
.nb-table--stack tbody,
.nb-table--stack tfoot,
.nb-table--stack tr,
.nb-table--stack td { display: block; width: 100%; }
.nb-table--stack tbody tr {
display: flex;
flex-direction: column;
position: relative;
padding: var(--nb-space-3) var(--nb-space-4) var(--nb-space-3) 48px;
border-bottom: 1px solid var(--nb-border-subtle);
}
.nb-table--stack tbody td {
height: auto !important;
padding: 3px 0 !important;
border: 0 !important;
white-space: normal;
}
.nb-table--stack tbody td[data-label] {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--nb-space-3);
text-align: right;
}
.nb-table--stack tbody td[data-label]::before {
content: attr(data-label);
font-family: var(--nb-font-sans);
letter-spacing: 0;
flex: 0 0 auto;
color: var(--nb-text-3);
font-size: var(--nb-text-xs);
text-align: left;
}
.nb-table--stack tbody td.nb-col-primary { order: -1; padding: 0 72px var(--nb-space-2) 0 !important; }
.nb-table--stack tbody td[data-stack-hide] { display: none !important; }
.nb-table--stack tbody td.nb-col-check { position: absolute; top: 18px; left: 16px; width: auto; }
.nb-table--stack tbody td.nb-col-actions { position: absolute; top: 8px; right: 8px; width: auto; }
.nb-table--stack tbody td.nb-col-actions .nb-row-actions > :not(.nb-dropdown) { display: none; }
.nb-table--stack tbody tr.is-selected > td:first-child { box-shadow: none; }
.nb-table--stack tbody tr.is-selected { box-shadow: inset 3px 0 0 var(--nb-accent); }
.nb-table--stack tfoot tr { display: flex; flex-wrap: wrap; gap: var(--nb-space-2) var(--nb-space-4); padding: var(--nb-space-3) var(--nb-space-4); background: var(--nb-surface-2); }
.nb-table--stack tfoot td { width: auto; height: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
.nb-table--stack tfoot td:empty { display: none; }
.nb-table--stack tfoot td[data-label]::before { content: attr(data-label) " "; color: var(--nb-text-3); font-weight: var(--nb-weight-regular); font-size: var(--nb-text-xs); }
.nb-table-toolbar .nb-search { flex-basis: 100%; max-width: none; order: -1; }
.nb-toolbar-group--end { margin-left: 0; }
}
/* Panel de filtros */
.nb-filter-group { border: 0; margin: 0 0 var(--nb-space-5); padding: 0; min-width: 0; }
.nb-filter-group:last-child { margin-bottom: 0; }
.nb-filter-group > legend { margin-bottom: var(--nb-space-2); padding: 0; font-size: var(--nb-text-sm); font-weight: var(--nb-weight-medium); color: var(--nb-text); }
.nb-range-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nb-space-2); }
/* Pills de selección múltiple */
.nb-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-pill { position: relative; display: inline-flex; }
.nb-pill input { position: absolute; opacity: 0; pointer-events: none; }
.nb-pill > span {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px;
border: 1px solid var(--nb-border);
border-radius: var(--nb-radius-pill);
background: var(--nb-surface);
color: var(--nb-text-2);
font-size: var(--nb-text-sm);
cursor: pointer;
user-select: none;
transition: background-color var(--nb-dur) var(--nb-ease), border-color var(--nb-dur) var(--nb-ease), color var(--nb-dur) var(--nb-ease);
}
.nb-pill > span:hover { border-color: var(--nb-border-strong); color: var(--nb-text); }
.nb-pill input:checked + span { border-color: var(--nb-accent); background: var(--nb-accent-soft); color: var(--nb-text); font-weight: var(--nb-weight-medium); }
.nb-pill input:focus-visible + span { box-shadow: var(--nb-focus-ring); }
/* Gestor de columnas (capa lateral) */
.nb-colman { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nb-colman-item {
display: flex;
align-items: center;
gap: var(--nb-space-2);
min-height: 44px;
padding: 0 4px;
border-radius: var(--nb-radius-sm);
background: transparent;
}
.nb-colman-item:hover { background: var(--nb-surface-3); }
.nb-colman-item.is-sort-dragging { background: var(--nb-surface); }
.nb-colman-handle {
display: inline-grid;
place-items: center;
flex: 0 0 auto;
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--nb-text-3);
cursor: grab;
touch-action: none;
font-size: 18px;
}
.nb-colman-handle:hover { background: var(--nb-surface-2); color: var(--nb-text); }
.nb-colman-label { display: flex; align-items: center; gap: var(--nb-space-3); flex: 1 1 auto; min-width: 0; font-size: var(--nb-text-sm); cursor: pointer; }
.nb-colman-label .nb-meta { margin-left: auto; }
.nb-colman-arrows { display: inline-flex; flex: 0 0 auto; }
.nb-colman-arrows .nb-btn { width: 30px; height: 30px; padding: 0; }
.nb-colman-item.is-locked .nb-colman-label { color: var(--nb-text-2); cursor: default; }
.nb-colman li.nb-sort-placeholder { min-height: 44px; border-radius: var(--nb-radius-sm); }
/* -------------------------------------------------------------------------
34. SELECTOR DE FECHAS (presets + rango)
------------------------------------------------------------------------- */
.nb-daterange { display: inline-flex; min-width: 0; }
.nb-daterange-trigger { max-width: 100%; }
.nb-daterange-trigger .nb-dr-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-daterange-trigger .nb-dr-label strong { font-weight: var(--nb-weight-bold); }
.nb-daterange-trigger .nb-dr-label span { color: var(--nb-text-2); font-variant-numeric: tabular-nums; }
.nb-dr { display: grid; grid-template-columns: 188px minmax(0, 1fr); min-height: 0; }
.nb-dr-presets {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--nb-space-2);
border-right: 1px solid var(--nb-border-subtle);
}
.nb-dr-preset {
display: flex;
align-items: center;
gap: var(--nb-space-2);
width: 100%;
min-height: 34px;
padding: 0 var(--nb-space-3);
border: 0;
border-radius: 7px;
background: transparent;
color: var(--nb-text);
font: inherit;
font-size: var(--nb-text-sm);
text-align: left;
white-space: nowrap;
cursor: pointer;
}
.nb-dr-preset:hover { background: var(--nb-surface-3); }
.nb-dr-preset[aria-pressed="true"] { background: var(--nb-accent-soft); font-weight: var(--nb-weight-medium); }
.nb-dr-preset[aria-pressed="true"]::after { content: "\2713"; margin-left: auto; color: var(--nb-accent-strong); font-weight: var(--nb-weight-bold); }
.nb-dr-main { min-width: 0; padding: var(--nb-space-4) var(--nb-space-4) 0; }
.nb-dr-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nb-space-3); margin-bottom: var(--nb-space-4); }
.nb-dr-months { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nb-space-6); }
.nb-dr.is-compact .nb-dr-months { grid-template-columns: 1fr; }
.nb-dr.is-compact .nb-cal + .nb-cal { display: none; }
.nb-cal-head { display: flex; align-items: center; justify-content: space-between; height: 36px; margin-bottom: var(--nb-space-1); }
.nb-cal-title { font-size: var(--nb-text-sm); font-weight: var(--nb-weight-bold); text-transform: capitalize; }
.nb-cal-head .nb-btn { width: 32px; height: 32px; padding: 0; }
.nb-cal-head .nb-cal-nav-hidden { visibility: hidden; }
.nb-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.nb-cal-dow {
display: grid;
place-items: center;
height: 28px;
color: var(--nb-text-3);
font-size: var(--nb-text-2xs);
font-weight: var(--nb-weight-medium);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.nb-cal-day {
position: relative;
height: 36px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--nb-text);
font: inherit;
font-size: var(--nb-text-sm);
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.nb-cal-day.is-out { visibility: hidden; pointer-events: none; }
.nb-cal-day.is-today { color: var(--nb-accent-strong); font-weight: var(--nb-weight-bold); }
.nb-cal-day.is-today::after {
content: "";
position: absolute;
left: 50%;
bottom: 5px;
width: 4px;
height: 4px;
margin-left: -2px;
border-radius: 50%;
background: currentColor;
}
.nb-cal-day:hover { background: var(--nb-surface-3); border-radius: var(--nb-radius-xs); }
.nb-cal-day.is-in-range { background: var(--nb-accent-soft); border-radius: 0; }
.nb-cal-day.is-start,
.nb-cal-day.is-end { background: var(--nb-accent); color: var(--nb-text-on-accent); font-weight: var(--nb-weight-bold); }
.nb-cal-day.is-start { border-radius: var(--nb-radius-xs) 0 0 var(--nb-radius-xs); }
.nb-cal-day.is-end { border-radius: 0 var(--nb-radius-xs) var(--nb-radius-xs) 0; }
.nb-cal-day.is-start.is-end { border-radius: var(--nb-radius-xs); }
.nb-cal-day.is-start::after,
.nb-cal-day.is-end::after { background: var(--nb-text-on-accent); }
.nb-dr-footer {
display: flex;
align-items: center;
gap: var(--nb-space-2);
margin: var(--nb-space-4) calc(-1 * var(--nb-space-4)) 0;
padding: var(--nb-space-3) var(--nb-space-4);
border-top: 1px solid var(--nb-border-subtle);
}
.nb-dr-summary { flex: 1 1 auto; min-width: 0; font-size: var(--nb-text-xs); color: var(--nb-text-3); }
/* Hoja inferior en móvil: presets en fila deslizable, un solo mes, días más grandes */
.nb-layer.is-sheet .nb-dr { grid-template-columns: minmax(0, 1fr); }
.nb-layer.is-sheet .nb-dr-presets {
flex-direction: row;
overflow-x: auto;
padding: var(--nb-space-3) var(--nb-space-4);
border-right: 0;
border-bottom: 1px solid var(--nb-border-subtle);
scrollbar-width: none;
}
.nb-layer.is-sheet .nb-dr-preset {
width: auto;
flex: 0 0 auto;
height: 32px;
min-height: 32px;
border: 1px solid var(--nb-border);
border-radius: var(--nb-radius-pill);
}
.nb-layer.is-sheet .nb-dr-preset[aria-pressed="true"] { border-color: var(--nb-accent); }
.nb-layer.is-sheet .nb-dr-preset[aria-pressed="true"]::after { display: none; }
.nb-layer.is-sheet .nb-cal-day { height: 44px; }
/* =========================================================================
v1.2
========================================================================= */
/* -------------------------------------------------------------------------
35. GRÁFICAS: contenedor con leyenda configurable
------------------------------------------------------------------------- */
.nb-chart-wrap {
display: flex;
flex-direction: column;
gap: var(--nb-space-4);
min-width: 0;
}
.nb-chart-wrap > .nb-chart { min-height: 0; }
.nb-chart-wrap[data-legend="bottom"] > .nb-chart-legend { order: 2; }
.nb-chart-wrap[data-legend="none"] > .nb-chart-legend { display: none; }
.nb-chart-wrap[data-legend="right"] {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, 46%);
align-items: center;
gap: var(--nb-space-5);
}
.nb-chart-wrap[data-legend="right"] > .nb-chart-legend { order: 2; }
.nb-chart-wrap[data-legend="right"] .nb-legend { flex-direction: column; flex-wrap: nowrap; gap: var(--nb-space-2); }
.nb-chart-wrap[data-legend="top"] > .nb-chart-legend .nb-legend { justify-content: flex-start; }
.nb-chart-legend[hidden] { display: none; }
@container (max-width: 520px) {
.nb-chart-wrap[data-legend="right"] { display: flex; flex-direction: column; }
}
/* Con poco ancho, la leyenda detallada muestra nombre y % (el importe va en el tooltip) */
@container (max-width: 680px) {
.nb-chart-wrap[data-legend="right"] .nb-legend-value { display: none; }
}
/* Leyenda interactiva (botón por serie: oculta / muestra) */
.nb-legend { gap: var(--nb-space-2) var(--nb-space-4); }
.nb-legend-item {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 28px;
padding: 0 6px;
margin: 0 -6px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--nb-text-2);
font: inherit;
font-size: var(--nb-text-xs);
cursor: pointer;
transition: background-color var(--nb-dur) var(--nb-ease), opacity var(--nb-dur) var(--nb-ease);
}
.nb-legend-item:hover { background: var(--nb-surface-3); color: var(--nb-text); }
.nb-legend-item[aria-pressed="false"] { opacity: 0.45; }
.nb-legend-item[aria-pressed="false"] .nb-legend-name { text-decoration: line-through; }
.nb-legend-key { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; }
.nb-legend-key.is-line { width: 14px; height: 3px; border-radius: 2px; }
.nb-legend-key.is-dot { width: 10px; height: 10px; border-radius: 50%; }
/* Leyenda con valores (anillo / quesito) */
.nb-legend--detail { flex-direction: column; flex-wrap: nowrap; gap: 2px; width: 100%; }
.nb-legend--detail li { width: 100%; }
.nb-legend--detail .nb-legend-item { width: calc(100% + 12px); min-height: 34px; font-size: var(--nb-text-sm); }
.nb-legend--detail .nb-legend-name { flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nb-text); }
.nb-legend-value { font-weight: var(--nb-weight-medium); color: var(--nb-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-legend-pct { white-space: nowrap; min-width: 48px; text-align: right; color: var(--nb-text-3); font-variant-numeric: tabular-nums; }
.nb-chart-wrap[data-legend="bottom"] .nb-legend--detail,
.nb-chart-wrap[data-legend="top"] .nb-legend--detail {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
column-gap: var(--nb-space-5);
}
/* Selector de rango dentro de la cabecera de una gráfica (1M · 3M · 12M) */
.nb-card-header .nb-segmented { flex: 0 0 auto; }
.nb-segmented--sm button { height: 26px; padding: 0 10px; font-size: var(--nb-text-xs); }
/* Cifra principal encima de una gráfica de área */
.nb-chart-hero { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--nb-space-2) var(--nb-space-3); }
.nb-chart-hero .nb-kpi-value { font-size: var(--nb-text-2xl); }
/* Sparkline dentro de un KPI */
.nb-kpi-spark { position: relative; height: 44px; margin: var(--nb-space-1) calc(-1 * var(--nb-space-2)) 0; }
.nb-kpi[data-spark="no"] .nb-kpi-spark { display: none; }
/* -------------------------------------------------------------------------
36. BLOQUES: contenedor propio + opciones
------------------------------------------------------------------------- */
.nb-widget { container-type: inline-size; }
.nb-segmented--fill { display: flex; width: 100%; }
.nb-segmented--fill > button,
.nb-segmented--fill > label { flex: 1 1 0; }
/* -------------------------------------------------------------------------
37. LISTA RESPONSIVA (.nb-rlist)
Una lista que gana columnas según el ancho de SU contenedor:
estrecha (< 480px · bloque 1/3): nombre + "número · fecha" | importe + estado
media (≥ 480px · bloque 1/2): nombre + fecha | número | base | estado, con cabecera
ancha (≥ 860px · bloque 1/1): nombre + NIF | número | fecha | referencia | base | IVA | total | estado
data-rows="5|8|12" limita las filas visibles (opción del bloque).
------------------------------------------------------------------------- */
.nb-rlist { container-type: inline-size; display: block; }
.nb-rlist-head,
.nb-rlist-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "main amt" "main st";
align-items: center;
column-gap: var(--nb-space-3);
row-gap: 4px;
padding: var(--nb-space-3) var(--nb-space-5);
}
.nb-rlist-head { display: none; }
.nb-rlist-row { color: inherit; text-decoration: none; transition: background-color var(--nb-dur-fast) var(--nb-ease); }
.nb-rlist-row + .nb-rlist-row { border-top: 1px solid var(--nb-border-subtle); }
a.nb-rlist-row:hover { background: var(--nb-surface-2); color: inherit; text-decoration: none; }
.nb-rlist .c-main { grid-area: main; display: flex; align-items: center; gap: var(--nb-space-3); min-width: 0; }
.nb-rlist .c-main > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.nb-rlist .c-title { font-size: var(--nb-text-sm); font-weight: var(--nb-weight-medium); color: var(--nb-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-rlist .c-meta { margin-top: 2px; font-size: var(--nb-text-xs); color: var(--nb-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-rlist .c-amt { grid-area: amt; justify-self: end; font-size: var(--nb-text-sm); font-weight: var(--nb-weight-bold); font-variant-numeric: tabular-nums; color: var(--nb-text); white-space: nowrap; }
.nb-rlist .c-st { grid-area: st; justify-self: end; }
.nb-rlist .c-num, .nb-rlist .c-date, .nb-rlist .c-ref, .nb-rlist .c-tax, .nb-rlist .c-total { display: none; }
.nb-rlist .c-num, .nb-rlist .c-date { font-family: var(--nb-font-mono); font-size: var(--nb-text-xs); color: var(--nb-text-2); white-space: nowrap; }
.nb-rlist .c-ref { font-size: var(--nb-text-sm); color: var(--nb-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nb-rlist .c-tax, .nb-rlist .c-total { justify-self: end; font-size: var(--nb-text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-rlist .c-tax { color: var(--nb-text-3); }
.nb-rlist-head > span {
font-size: var(--nb-text-2xs);
font-weight: var(--nb-weight-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--nb-text-3);
font-family: var(--nb-font-sans);
}
@container (min-width: 480px) {
.nb-rlist-head,
.nb-rlist-row {
grid-template-columns: minmax(0, 1fr) 80px 104px 116px;
grid-template-areas: "main num amt st";
}
.nb-rlist-head { display: grid; padding-top: var(--nb-space-2); padding-bottom: var(--nb-space-2); border-bottom: 1px solid var(--nb-border); }
.nb-rlist-head + .nb-rlist-row { border-top: 0; }
.nb-rlist .c-num { display: block; grid-area: num; }
.nb-rlist .c-st { justify-self: start; }
.nb-rlist .c-meta-narrow { display: none; }
.nb-rlist .c-meta-mid { display: block; }
}
@container (min-width: 860px) {
.nb-rlist-head,
.nb-rlist-row {
grid-template-columns: minmax(0, 1.3fr) 80px 92px minmax(0, 1fr) 100px 92px 104px 116px;
grid-template-areas: "main num date ref amt tax total st";
}
.nb-rlist .c-date { display: block; grid-area: date; }
.nb-rlist .c-ref { display: block; grid-area: ref; }
.nb-rlist .c-tax { display: block; grid-area: tax; }
.nb-rlist .c-total { display: block; grid-area: total; }
.nb-rlist .c-amt { font-weight: var(--nb-weight-medium); }
.nb-rlist .c-total { font-weight: var(--nb-weight-bold); color: var(--nb-text); }
.nb-rlist .c-meta-mid { display: none; }
.nb-rlist .c-meta-wide { display: block; }
}
.nb-rlist .nb-rlist-head > span {
font-family: var(--nb-font-sans);
font-size: var(--nb-text-2xs);
font-weight: var(--nb-weight-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--nb-text-3);
}
.nb-rlist[data-rows="5"] > .nb-rlist-row:nth-of-type(n+6),
.nb-rlist[data-rows="8"] > .nb-rlist-row:nth-of-type(n+9),
.nb-rlist[data-rows="12"] > .nb-rlist-row:nth-of-type(n+13) { display: none; }
.nb-rlist .c-meta-mid,
.nb-rlist .c-meta-wide { display: none; }
/* Vista alternativa dentro de un bloque (p. ej. Mejores clientes: lista | barras) */
[data-view="lista"] [data-view-only="barras"],
[data-view="barras"] [data-view-only="lista"] { display: none !important; }
/* -------------------------------------------------------------------------
38. MODAL (modo de capa centrado) · v1.2
icono + título + descripción + cerrar
… (opcional, asistentes)
…
------------------------------------------------------------------------- */
.nb-layer.is-modal {
left: 50%;
top: 50%;
width: min(var(--nb-layer-w, 560px), calc(100vw - 32px));
max-height: calc(100dvh - 48px);
border-radius: var(--nb-radius-lg);
background: var(--nb-glass-bg-solid);
transform: translate(-50%, -50%);
animation: nb-modal-pop var(--nb-dur-slow) var(--nb-ease);
}
@keyframes nb-modal-pop {
from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(0.98); }
to { opacity: 1; transform: translate(-50%, -50%); }
}
.nb-modal-head {
display: flex;
align-items: flex-start;
gap: var(--nb-space-4);
flex: 0 0 auto;
padding: var(--nb-space-6) var(--nb-space-4) var(--nb-space-4) var(--nb-space-6);
}
.nb-layer.is-sheet .nb-modal-head { padding: var(--nb-space-4) var(--nb-space-3) var(--nb-space-3) var(--nb-space-5); }
.nb-modal-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: var(--nb-radius-sm);
background: var(--nb-accent-soft);
color: var(--nb-accent-strong);
font-size: 22px;
}
.nb-modal-icon--danger { background: var(--nb-danger-bg); color: var(--nb-danger-fg); }
.nb-modal-head-text { flex: 1 1 auto; min-width: 0; }
.nb-modal-title { margin: 0; font-size: var(--nb-text-lg); font-weight: var(--nb-weight-bold); letter-spacing: var(--nb-tracking-tight); line-height: var(--nb-leading-tight); }
.nb-modal-desc { margin: 4px 0 0; font-size: var(--nb-text-sm); color: var(--nb-text-2); }
.nb-layer.is-modal .nb-layer-body.is-padded { padding: var(--nb-space-2) var(--nb-space-6) var(--nb-space-6); }
.nb-layer.is-modal .nb-layer-footer { padding: var(--nb-space-4) var(--nb-space-6); background: var(--nb-surface-2); border-radius: 0 0 var(--nb-radius-lg) var(--nb-radius-lg); }
.nb-layer-footer .nb-footer-hint { margin-right: auto; font-size: var(--nb-text-xs); color: var(--nb-text-3); display: inline-flex; align-items: center; gap: 6px; }
/* Pasos de un asistente */
.nb-modal-steps {
display: flex;
align-items: center;
gap: var(--nb-space-2);
margin: 0 var(--nb-space-6) var(--nb-space-4);
padding: 0;
list-style: none;
}
.nb-step {
display: inline-flex;
align-items: center;
gap: var(--nb-space-2);
color: var(--nb-text-3);
font-size: var(--nb-text-sm);
font-weight: var(--nb-weight-medium);
white-space: nowrap;
}
.nb-step-num {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
border: 1.5px solid var(--nb-border-strong);
font-size: var(--nb-text-xs);
font-weight: var(--nb-weight-bold);
font-variant-numeric: tabular-nums;
}
.nb-step.is-current { color: var(--nb-text); }
.nb-step.is-current .nb-step-num { border-color: var(--nb-accent); background: var(--nb-accent); color: var(--nb-text-on-accent); }
.nb-step.is-done { color: var(--nb-text-2); }
.nb-step.is-done .nb-step-num { border-color: var(--nb-accent); color: var(--nb-accent-strong); }
.nb-step-sep { flex: 1 1 auto; height: 1px; min-width: 24px; background: var(--nb-border); }
[data-step][hidden] { display: none !important; }
/* -------------------------------------------------------------------------
39. LISTA DE SELECCIÓN (buscar organización, producto…)
------------------------------------------------------------------------- */
.nb-picklist {
display: flex;
flex-direction: column;
gap: 2px;
max-height: min(340px, 46dvh);
margin-top: var(--nb-space-3);
overflow-y: auto;
overscroll-behavior: contain;
}
.nb-picklist-group { padding: var(--nb-space-3) var(--nb-space-2) var(--nb-space-1); }
.nb-pick {
display: flex;
align-items: center;
gap: var(--nb-space-3);
width: 100%;
min-height: 56px;
padding: var(--nb-space-2) var(--nb-space-3);
border: 1px solid transparent;
border-radius: var(--nb-radius-sm);
background: transparent;
color: var(--nb-text);
font: inherit;
text-align: left;
cursor: pointer;
transition: background-color var(--nb-dur-fast) var(--nb-ease), border-color var(--nb-dur-fast) var(--nb-ease);
}
.nb-pick:hover,
.nb-pick.is-active { background: var(--nb-surface-3); }
.nb-pick[aria-selected="true"] { border-color: var(--nb-accent); background: var(--nb-accent-soft); }
.nb-pick-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.nb-pick-title { font-size: var(--nb-text-sm); font-weight: var(--nb-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-pick-meta { font-family: var(--nb-font-mono); font-size: 11px; color: var(--nb-text-3); }
.nb-pick-check { color: var(--nb-accent-strong); font-size: 20px; opacity: 0; }
.nb-pick[aria-selected="true"] .nb-pick-check { opacity: 1; }
.nb-pick mark { background: transparent; color: var(--nb-accent-strong); font-weight: var(--nb-weight-bold); padding: 0; }
.nb-picklist-empty { padding: var(--nb-space-6) var(--nb-space-4); text-align: center; color: var(--nb-text-3); font-size: var(--nb-text-sm); }
.nb-picklist-empty[hidden] { display: none; }
/* Entidad elegida (resumen con "Cambiar") */
.nb-chosen {
display: flex;
align-items: center;
gap: var(--nb-space-3);
padding: var(--nb-space-3);
border: 1px solid var(--nb-border);
border-radius: var(--nb-radius-md);
background: var(--nb-surface);
}
.nb-chosen .nb-pick-text { flex: 1 1 auto; }
/* Avatar con logo de empresa: el logo se ve entero sobre blanco */
.nb-avatar.has-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--nb-border-subtle); padding: 4px; }
.nb-avatar.has-logo img { object-fit: contain; }
/* -------------------------------------------------------------------------
40. CAMPO DE FECHA (una sola fecha)
------------------------------------------------------------------------- */
.nb-datefield { position: relative; display: flex; align-items: center; }
.nb-datefield input.nb-input { padding-right: 44px; font-variant-numeric: tabular-nums; }
.nb-datefield .nb-datefield-btn { position: absolute; right: 4px; width: 32px; height: 32px; padding: 0; }
.nb-datepicker { padding: var(--nb-space-3); }
.nb-datepicker .nb-cal-day.is-selected { background: var(--nb-accent); color: var(--nb-text-on-accent); font-weight: var(--nb-weight-bold); border-radius: var(--nb-radius-xs); }
.nb-datepicker-foot { display: flex; justify-content: space-between; gap: var(--nb-space-2); margin-top: var(--nb-space-2); padding-top: var(--nb-space-2); border-top: 1px solid var(--nb-border-subtle); }
/* -------------------------------------------------------------------------
41. SECRETOS Y CÓDIGO (API keys)
------------------------------------------------------------------------- */
.nb-secret {
display: inline-flex;
align-items: center;
gap: 2px;
max-width: 100%;
height: 38px;
padding: 0 4px 0 var(--nb-space-3);
border: 1px solid var(--nb-border);
border-radius: var(--nb-radius-sm);
background: var(--nb-surface-2);
}
.nb-secret-value {
min-width: 0;
margin-right: var(--nb-space-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--nb-font-mono);
font-size: var(--nb-text-sm);
color: var(--nb-text);
letter-spacing: 0.01em;
}
.nb-secret .nb-btn { width: 30px; height: 30px; padding: 0; --_fg: var(--nb-text-3); }
.nb-secret .nb-btn:hover { --_fg: var(--nb-text); }
.nb-secret.is-revoked .nb-secret-value { color: var(--nb-text-3); text-decoration: line-through; }
.nb-code {
position: relative;
margin: 0;
padding: var(--nb-space-4) var(--nb-space-12) var(--nb-space-4) var(--nb-space-4);
border: 1px solid var(--nb-border);
border-radius: var(--nb-radius-sm);
background: var(--nb-surface-2);
color: var(--nb-text);
font-family: var(--nb-font-mono);
font-size: var(--nb-text-sm);
line-height: 1.7;
overflow-x: auto;
white-space: pre;
}
.nb-code .tok-k { color: var(--nb-accent-strong); }
.nb-code .tok-s { color: var(--nb-info-fg); }
.nb-code .tok-c { color: var(--nb-text-3); }
.nb-code-copy { position: absolute; top: 8px; right: 8px; }
code.nb-inline-code {
padding: 2px 6px;
border-radius: 6px;
background: var(--nb-accent-soft);
color: var(--nb-accent-strong);
font-family: var(--nb-font-mono);
font-size: 0.92em;
}
/* Botón de peligro suave (Revocar) */
.nb-btn--danger-soft { --_bg: var(--nb-danger-bg); --_bd: transparent; --_fg: var(--nb-danger-fg); --_bg-h: rgba(255, 51, 102, 0.2); }
/* Permisos de una clave */
.nb-scopes { display: flex; flex-wrap: wrap; gap: 4px; }
/* Utilidades de formulario v1.2 */
/* [hidden] siempre gana a display de componente (botones por paso, paneles) */
.nb-app [hidden] { display: none !important; }
.nb-label-hint { margin-left: 4px; font-weight: var(--nb-weight-regular); color: var(--nb-text-3); font-size: var(--nb-text-xs); }
.nb-field .nb-error--auto { display: none; }
.nb-field.is-invalid .nb-error--auto { display: flex; }
.nb-field.is-invalid input.nb-input,
.nb-field.is-invalid select.nb-select { border-color: var(--nb-danger-solid); }
input.nb-input.nb-mono, .nb-input-addon.nb-mono { font-family: var(--nb-font-mono); font-size: var(--nb-text-sm); letter-spacing: 0.02em; }
.nb-search--lg { max-width: none; flex: 0 0 auto; }
.nb-search--lg input.nb-input { height: var(--nb-control-h-lg); font-size: var(--nb-text-md); }
.nb-field:has(> .nb-datefield) { position: relative; }
.nb-datepicker {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 5;
width: 300px;
max-width: 100%;
background: var(--nb-surface);
box-shadow: var(--nb-shadow-lg);
animation: nb-pop var(--nb-dur) var(--nb-ease);
}
.nb-datepicker[hidden] { display: none; }
.nb-datepicker .nb-cal-day { height: 36px; }
.nb-secret--block { display: flex; width: 100%; height: auto; min-height: 48px; padding: 4px 4px 4px var(--nb-space-3); }
.nb-secret--block .nb-secret-value { flex: 1 1 auto; white-space: normal; word-break: break-all; font-size: var(--nb-text-base); }
.nb-badge .nb-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.nb-table tbody tr.is-muted td { color: var(--nb-text-3); }
.nb-table tbody tr.is-muted .nb-cell-primary { color: var(--nb-text-2); }
.nb-api-table .nb-secret { width: 250px; max-width: 100%; }
.nb-api-table .nb-scopes { min-width: 120px; }
.nb-api-table .nb-secret-value { flex: 1 1 auto; }
/* Lista de casillas con borde (permisos, opciones) */
.nb-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--nb-space-2); }
.nb-checklist .nb-check {
display: flex;
min-height: 44px;
padding: 0 var(--nb-space-3);
border: 1px solid var(--nb-border);
border-radius: var(--nb-radius-sm);
background: var(--nb-surface);
font-size: var(--nb-text-sm);
transition: border-color var(--nb-dur-fast) var(--nb-ease), background-color var(--nb-dur-fast) var(--nb-ease);
}
.nb-checklist .nb-check:hover { border-color: var(--nb-border-strong); }
.nb-checklist .nb-check:has(input:checked) { border-color: var(--nb-accent); background: var(--nb-accent-soft); }
/* Configuración en móvil: el submenú pasa a una fila deslizable */
@media (max-width: 991.98px) {
.nb-subnav { position: static; flex-direction: row; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nb-subnav::-webkit-scrollbar { display: none; }
.nb-subnav-group { display: contents; }
.nb-subnav-label { display: none; }
.nb-subnav a { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 575.98px) {
.nb-api-table.nb-table--stack tbody td.nb-col-primary { padding-right: 96px !important; }
.nb-api-table .nb-secret { width: auto; flex: 1 1 auto; min-width: 0; }
}
/* Fila recién creada: destello suave */
.nb-table tbody tr.nb-row-new > td { animation: nb-row-new 1.6s var(--nb-ease); }
@keyframes nb-row-new { from { background: var(--nb-accent-soft); } to { background: transparent; } }
.nb-api-table td.nb-col-primary { white-space: normal; min-width: 160px; }
.nb-api-table .nb-cell-stack .nb-meta { white-space: normal; font-family: var(--nb-font-sans); font-size: var(--nb-text-xs); }
/* Estados de presupuesto (v1.3) */
.nb-status--rejected { --_fg: var(--nb-text-2); --_bg: var(--nb-surface-3); --_dot: var(--nb-danger-solid); }
.nb-status--expired { --_fg: var(--nb-text-3); --_bg: var(--nb-surface-3); --_dot: var(--nb-text-disabled); }
/* -------------------------------------------------------------------------
42. LISTADOS DE DOCUMENTOS (presupuestos, facturas) · v1.3
------------------------------------------------------------------------- */
/* Resumen clicable encima de la tabla: cada ficha filtra por su pestaña */
.nb-sumtiles {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--nb-space-4);
margin-bottom: var(--nb-space-5);
}
.nb-sumtile {
position: relative;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
padding: var(--nb-space-4) var(--nb-space-5);
border: 1px solid var(--nb-glass-border);
border-radius: var(--nb-radius-md);
color: var(--nb-text);
font: inherit;
text-align: left;
cursor: pointer;
transition: border-color var(--nb-dur) var(--nb-ease), box-shadow var(--nb-dur) var(--nb-ease), transform var(--nb-dur) var(--nb-ease);
}
.nb-sumtile:hover { border-color: var(--nb-border-strong); transform: translateY(-1px); }
.nb-sumtile[aria-pressed="true"] { border-color: var(--nb-accent); box-shadow: 0 0 0 1px var(--nb-accent), var(--nb-shadow-sm); }
.nb-sumtile:disabled, .nb-sumtile.is-static { cursor: default; transform: none; }
.nb-sumtile-label { display: flex; align-items: center; gap: 6px; font-size: var(--nb-text-sm); color: var(--nb-text-2); }
.nb-sumtile-label .nb-icon { font-size: 16px; color: var(--nb-text-3); }
.nb-sumtile-value { font-size: var(--nb-text-xl); font-weight: var(--nb-weight-bold); letter-spacing: var(--nb-tracking-tight); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-sumtile-meta { font-size: var(--nb-text-xs); color: var(--nb-text-3); }
.nb-sumtile--danger .nb-sumtile-value { color: var(--nb-danger-fg); }
.nb-sumtile--danger .nb-sumtile-label .nb-icon { color: var(--nb-danger-fg); }
.nb-sumtile--accent .nb-sumtile-label .nb-icon { color: var(--nb-accent-strong); }
.nb-sumtile-bar { height: 4px; margin-top: var(--nb-space-2); border-radius: var(--nb-radius-pill); background: var(--nb-surface-3); overflow: hidden; }
.nb-sumtile-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--nb-accent); }
@media (max-width: 1199.98px) { .nb-sumtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
.nb-sumtiles { gap: var(--nb-space-2); }
.nb-sumtile { padding: var(--nb-space-3); }
.nb-sumtile-value { font-size: var(--nb-text-lg); }
}
/* Pestañas de estado dentro de la tarjeta de tabla */
.nb-table-tabs {
display: flex;
gap: var(--nb-space-1);
padding: var(--nb-space-2) var(--nb-space-4) 0;
border-bottom: 1px solid var(--nb-border-subtle);
overflow-x: auto;
scrollbar-width: none;
}
.nb-table-tabs::-webkit-scrollbar { display: none; }
.nb-table-tabs .nb-tab { height: 44px; }
.nb-tab-count {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 20px;
padding: 0 6px;
border-radius: var(--nb-radius-pill);
background: var(--nb-surface-3);
color: var(--nb-text-2);
font-size: 11px;
font-weight: var(--nb-weight-bold);
font-variant-numeric: tabular-nums;
}
.nb-tab[aria-selected="true"] .nb-tab-count { background: var(--nb-accent-soft); color: var(--nb-accent-strong); }
.nb-tab--danger:not(.is-empty) .nb-tab-count { background: var(--nb-danger-bg); color: var(--nb-danger-fg); }
.nb-tab.is-empty .nb-tab-count { opacity: 0.6; }
/* Marcador (bandera) de documento */
.nb-flag {
display: inline-grid;
place-items: center;
width: 32px;
height: 32px;
border: 0;
border-radius: var(--nb-radius-sm);
background: transparent;
color: var(--nb-text-disabled);
font-size: 18px;
cursor: pointer;
transition: color var(--nb-dur-fast) var(--nb-ease), background-color var(--nb-dur-fast) var(--nb-ease);
}
.nb-flag:hover { background: var(--nb-surface-3); color: var(--nb-text-2); }
.nb-flag[aria-pressed="true"] { color: var(--nb-chart-2); }
.nb-table .nb-col-flag { width: 40px; padding-left: 0; padding-right: 0; text-align: center; }
/* Fecha con contexto (vencimiento, validez) */
.nb-due { display: flex; flex-direction: column; line-height: 1.3; white-space: nowrap; }
.nb-due-date { font-family: var(--nb-font-mono); font-size: var(--nb-text-xs); color: var(--nb-text-2); }
.nb-due-rel { font-size: var(--nb-text-xs); color: var(--nb-text-3); }
.nb-due.is-soon .nb-due-rel { color: var(--nb-warning-fg); font-weight: var(--nb-weight-medium); }
.nb-due.is-late .nb-due-rel { color: var(--nb-danger-fg); font-weight: var(--nb-weight-medium); }
.nb-due.is-done .nb-due-rel { color: var(--nb-text-3); }
.nb-cell-sub { display: block; font-size: var(--nb-text-xs); color: var(--nb-text-3); font-weight: var(--nb-weight-regular); }
/* Acción destacada en fila (Facturar un presupuesto aceptado) */
.nb-row-actions .nb-row-cta { margin-right: var(--nb-space-1); }
@media (max-width: 575.98px) {
.nb-table--stack tbody td.nb-col-actions .nb-row-actions > .nb-row-cta { display: inline-flex; }
}
/* Estado vacío de página (primer uso) */
.nb-firstrun {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: var(--nb-space-8);
align-items: center;
padding: var(--nb-space-12) var(--nb-space-10);
}
.nb-firstrun-art {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 4 / 3;
border-radius: var(--nb-radius-lg);
background:
radial-gradient(120% 90% at 0% 0%, var(--nb-accent-soft) 0%, transparent 60%),
radial-gradient(90% 80% at 100% 100%, rgba(163, 92, 200, 0.12) 0%, transparent 60%),
var(--nb-surface-2);
overflow: hidden;
}
.nb-firstrun-doc {
width: 58%;
padding: var(--nb-space-5);
border-radius: var(--nb-radius-md);
background: var(--nb-surface);
box-shadow: var(--nb-shadow-lg);
transform: rotate(-3deg);
}
.nb-firstrun-doc + .nb-firstrun-doc { position: absolute; transform: translate(18%, 10%) rotate(4deg); opacity: 0.9; }
.nb-firstrun-doc .nb-skeleton { margin-bottom: 10px; }
.nb-firstrun-doc .nb-skeleton:last-child { margin-bottom: 0; }
.nb-firstrun-stamp {
position: absolute;
right: 14%;
top: 16%;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: var(--nb-radius-pill);
background: var(--nb-success-bg);
color: var(--nb-success-fg);
font-size: var(--nb-text-sm);
font-weight: var(--nb-weight-bold);
box-shadow: var(--nb-shadow-md);
}
.nb-firstrun-title { margin: 0 0 var(--nb-space-2); font-size: var(--nb-text-2xl); font-weight: var(--nb-weight-bold); letter-spacing: var(--nb-tracking-tight); line-height: var(--nb-leading-tight); }
.nb-firstrun-text { margin: 0 0 var(--nb-space-6); color: var(--nb-text-2); max-width: 46ch; }
.nb-firstrun-steps { display: flex; flex-direction: column; gap: var(--nb-space-3); margin: var(--nb-space-8) 0 0; padding: 0; list-style: none; }
.nb-firstrun-steps li { display: flex; align-items: flex-start; gap: var(--nb-space-3); font-size: var(--nb-text-sm); color: var(--nb-text-2); }
.nb-firstrun-steps .nb-icon { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--nb-surface-3); color: var(--nb-text-2); font-size: 16px; }
.nb-firstrun-steps li.is-done .nb-icon { background: var(--nb-success-bg); color: var(--nb-success-fg); }
.nb-firstrun-steps strong { color: var(--nb-text); font-weight: var(--nb-weight-medium); }
.nb-firstrun-steps a { color: var(--nb-accent-strong); font-weight: var(--nb-weight-medium); }
@media (max-width: 991.98px) {
.nb-firstrun { grid-template-columns: minmax(0, 1fr); padding: var(--nb-space-6); gap: var(--nb-space-6); }
.nb-firstrun-art { order: -1; aspect-ratio: 16 / 9; }
}
/* Estado vacío dentro de la tabla: con acciones en fila */
.nb-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nb-space-2); margin-top: var(--nb-space-3); }
.nb-empty-actions .nb-btn { margin-top: 0; }
.nb-empty-icon--success { background: var(--nb-success-bg); color: var(--nb-success-fg); }
.nb-empty-icon--neutral { background: var(--nb-surface-3); color: var(--nb-text-2); }
/* Opciones en tarjeta (radio): partir de un presupuesto, plantillas */
.nb-choices { display: flex; flex-direction: column; gap: var(--nb-space-2); }
.nb-choice {
display: flex;
align-items: center;
gap: var(--nb-space-3);
min-height: 52px;
padding: var(--nb-space-2) var(--nb-space-3);
border: 1px solid var(--nb-border);
border-radius: var(--nb-radius-sm);
background: var(--nb-surface);
cursor: pointer;
transition: border-color var(--nb-dur-fast) var(--nb-ease), background-color var(--nb-dur-fast) var(--nb-ease);
}
.nb-choice:hover { border-color: var(--nb-border-strong); }
.nb-choice:has(input:checked) { border-color: var(--nb-accent); background: var(--nb-accent-soft); }
.nb-choice:has(input:focus-visible) { box-shadow: var(--nb-focus-ring); }
.nb-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--nb-accent-strong); flex: 0 0 auto; }
.nb-choice-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.nb-choice-title { font-size: var(--nb-text-sm); font-weight: var(--nb-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-choice-meta { font-size: var(--nb-text-xs); color: var(--nb-text-3); }
.nb-choice-end { font-size: var(--nb-text-sm); font-weight: var(--nb-weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-field-hint-strong { display: inline-flex; align-items: center; gap: 6px; font-size: var(--nb-text-xs); color: var(--nb-text-2); }
.nb-field-hint-strong .nb-icon { font-size: 14px; color: var(--nb-accent-strong); }
/* Número + fecha en una celda (ahorra una columna) */
.nb-doc-id { display: flex; flex-direction: column; line-height: 1.3; white-space: nowrap; }
.nb-doc-num { font-family: var(--nb-font-mono); font-size: var(--nb-text-sm); font-weight: var(--nb-weight-medium); color: var(--nb-text); }
.nb-doc-date { font-family: var(--nb-font-mono); font-size: 11px; color: var(--nb-text-3); }
@media (max-width: 575.98px) { .nb-table--stack .nb-doc-id { align-items: flex-end; } }
[data-doc-type] .nb-table--caps .nb-col-grow .nb-cell-entity { min-width: 180px; max-width: 230px; }
[data-doc-type] .nb-table .nb-col-truncate { max-width: 160px; }
.nb-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
/* -------------------------------------------------------------------------
43. FORMULARIO DE ORGANIZACIÓN · v1.4
------------------------------------------------------------------------- */
.nb-modal-section { margin: 0; padding: var(--nb-space-5) 0; border: 0; border-top: 1px solid var(--nb-border-subtle); min-width: 0; }
.nb-modal-section:first-child { padding-top: 0; border-top: 0; }
.nb-modal-section-title {
float: left;
width: 100%;
margin: 0 0 var(--nb-space-3);
padding: 0;
font-size: var(--nb-text-xs);
font-weight: var(--nb-weight-bold);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--nb-text-3);
}
.nb-modal-section-title + * { clear: both; }
.nb-segmented label .nb-icon { font-size: 16px; margin-right: 6px; }
.nb-nif-feedback { display: flex; align-items: center; gap: 6px; min-height: 18px; margin: 0; font-size: var(--nb-text-xs); color: var(--nb-text-3); }
.nb-nif-feedback:empty { display: none; }
.nb-nif-feedback .nb-icon { font-size: 15px; }
.nb-nif-feedback.is-ok { color: var(--nb-success-fg); }
.nb-nif-feedback.is-bad { color: var(--nb-danger-fg); }
.nb-field.is-invalid input.nb-input[data-nb-nif] { border-color: var(--nb-danger-solid); }
/* Lista de opciones con interruptor y explicación */
.nb-optlist { display: flex; flex-direction: column; gap: var(--nb-space-2); }
.nb-opt, .nb-opt-main {
display: flex;
align-items: center;
gap: var(--nb-space-4);
cursor: pointer;
}
.nb-opt { padding: var(--nb-space-3) var(--nb-space-4); border: 1px solid var(--nb-border); border-radius: var(--nb-radius-sm); background: var(--nb-surface); }
.nb-opt--with-extra { flex-direction: column; align-items: stretch; gap: var(--nb-space-3); cursor: default; }
.nb-opt-main { width: 100%; }
.nb-opt:has(> .nb-switch input:checked), .nb-opt--with-extra:has(.nb-opt-main input:checked) { border-color: var(--nb-accent); }
.nb-opt-text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.nb-opt-title { font-size: var(--nb-text-sm); font-weight: var(--nb-weight-medium); color: var(--nb-text); }
.nb-opt-desc { font-size: var(--nb-text-xs); color: var(--nb-text-3); }
.nb-opt .nb-switch { flex: 0 0 auto; }
.nb-opt-extra .nb-segmented { flex-wrap: wrap; }
/* Desplegable de sección (details) */
.nb-disclosure > summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; margin-bottom: 0; float: none; }
.nb-disclosure > summary::-webkit-details-marker { display: none; }
.nb-disclosure > summary .nb-icon { font-size: 16px; transition: transform var(--nb-dur) var(--nb-ease); }
.nb-disclosure[open] > summary .nb-icon { transform: rotate(90deg); }
.nb-disclosure > summary .nb-label-hint { text-transform: none; letter-spacing: 0; }
/* -------------------------------------------------------------------------
44. FICHA DE DOCUMENTO (factura / presupuesto) · v1.4
------------------------------------------------------------------------- */
.nb-doc-header { align-items: flex-end; }
.nb-doc-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-3); }
.nb-doc-title .nb-h1 { margin: 0; font-family: var(--nb-font-mono); letter-spacing: -0.02em; }
.nb-doc-sub { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; font-size: var(--nb-text-sm); color: var(--nb-text-2); }
.nb-doc-sub strong { color: var(--nb-text); font-variant-numeric: tabular-nums; }
.nb-due-inline.is-soon { color: var(--nb-warning-fg); font-weight: var(--nb-weight-medium); }
.nb-due-inline.is-late { color: var(--nb-danger-fg); font-weight: var(--nb-weight-medium); }
.nb-detail-main { min-width: 0; }
.nb-detail-main > .nb-tabs { margin-bottom: var(--nb-space-5); }
/* Cliente + datos del documento
Arriba el cliente (quién); debajo las propiedades del documento como celdas editables en línea:
se leen como datos y se editan sin cambiar de modo (borde solo al pasar o al enfocar). */
.nb-docinfo { overflow: visible; }
.nb-docclient { display: flex; align-items: flex-start; gap: var(--nb-space-4); padding: var(--nb-space-5) var(--nb-space-6); }
.nb-docclient-body { flex: 1 1 auto; min-width: 0; }
.nb-docclient-name { margin: 2px 0 2px; font-size: var(--nb-text-lg); font-weight: var(--nb-weight-bold); letter-spacing: var(--nb-tracking-tight); line-height: var(--nb-leading-tight); }
.nb-docclient-name a { color: var(--nb-text); text-decoration: none; }
.nb-docclient-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nb-docclient-meta { margin: 0; font-size: var(--nb-text-sm); color: var(--nb-text-2); line-height: 1.5; }
.nb-docclient-meta > span[aria-hidden] { margin: 0 6px; }
.nb-docclient-meta .nb-mono { font-family: var(--nb-font-mono); font-size: var(--nb-text-xs); line-height: 20px; }
.nb-docclient-tax { display: flex; flex-wrap: wrap; gap: 4px; margin: var(--nb-space-2) 0 0; }
.nb-docclient-tax:empty { display: none; }
.nb-docclient-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0; flex: 0 0 auto; }
.nb-props {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
margin: 0;
border-top: 1px solid var(--nb-border-subtle);
background: var(--nb-border-subtle);
border-radius: 0 0 var(--nb-radius-md) var(--nb-radius-md);
container-type: inline-size;
}
.nb-prop { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; padding: var(--nb-space-3) var(--nb-space-5) var(--nb-space-3); background: var(--nb-surface); }
.nb-props > .nb-prop:nth-last-child(-n+3):nth-child(3n+1) { border-bottom-left-radius: var(--nb-radius-md); }
.nb-props > .nb-prop:last-child { border-bottom-right-radius: var(--nb-radius-md); }
.nb-prop-label { display: flex; align-items: center; font-size: var(--nb-text-xs); color: var(--nb-text-3); }
.nb-prop-label label { display: inline-flex; align-items: center; gap: 0; margin: 0; cursor: pointer; font: inherit; font-weight: var(--nb-weight-regular); color: inherit; }
.nb-prop-label .nb-icon { font-size: 14px; margin-right: 6px; }
.nb-prop-value { display: flex; align-items: center; gap: var(--nb-space-2); min-width: 0; min-height: 36px; margin: 0; }
/* Controles "en línea": parecen texto hasta que se tocan */
.nb-prop input.nb-input,
.nb-prop select.nb-select {
width: calc(100% + var(--nb-space-2));
height: 36px;
margin-left: calc(-1 * var(--nb-space-2));
padding-left: var(--nb-space-2);
border-color: transparent;
background-color: transparent;
font-weight: var(--nb-weight-medium);
}
.nb-prop select.nb-select { background-position: right 6px center; padding-right: 28px; }
.nb-prop input.nb-input:hover, .nb-prop select.nb-select:hover { border-color: var(--nb-border); background-color: var(--nb-surface); }
.nb-prop input.nb-input::placeholder { font-weight: var(--nb-weight-regular); color: var(--nb-accent-strong); }
.nb-prop .nb-datefield { width: calc(100% + var(--nb-space-2)); margin-left: calc(-1 * var(--nb-space-2)); }
.nb-prop .nb-datefield input.nb-input { width: 100%; margin-left: 0; font-family: var(--nb-font-mono); font-size: var(--nb-text-sm); }
.nb-prop .nb-datefield .nb-datefield-btn { opacity: 0.55; }
.nb-prop:hover .nb-datefield-btn, .nb-prop:focus-within .nb-datefield-btn { opacity: 1; }
.nb-prop-static { font-size: var(--nb-text-base); font-weight: var(--nb-weight-bold); color: var(--nb-text); }
.nb-prop-static.nb-mono { font-family: var(--nb-font-mono); font-size: var(--nb-text-sm); letter-spacing: 0.01em; }
.nb-prop-lock { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--nb-text-3); font-size: 14px; cursor: help; }
.nb-prop-lock:hover, .nb-prop-lock:focus-visible { background: var(--nb-surface-3); color: var(--nb-text-2); }
.nb-prop.is-locked { background: var(--nb-surface-2); }
.nb-prop-link {
display: flex; align-items: baseline; gap: var(--nb-space-2);
width: calc(100% + var(--nb-space-2)); height: 36px; margin-left: calc(-1 * var(--nb-space-2)); padding: 0 var(--nb-space-2);
border: 1px solid transparent; border-radius: var(--nb-radius-sm); background: transparent;
color: var(--nb-text); font: inherit; text-align: left; cursor: pointer; align-items: center;
}
.nb-prop-link:hover { border-color: var(--nb-border); }
.nb-prop-link .nb-mono { font-family: var(--nb-font-mono); font-size: var(--nb-text-sm); font-weight: var(--nb-weight-medium); }
.nb-prop-sub { font-size: var(--nb-text-xs); color: var(--nb-text-3); white-space: nowrap; }
.nb-prop-sub.is-soon { color: var(--nb-warning-fg); font-weight: var(--nb-weight-medium); }
.nb-prop-sub.is-late { color: var(--nb-danger-fg); font-weight: var(--nb-weight-medium); }
@container (max-width: 520px) {
.nb-props { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
.nb-docclient { flex-wrap: wrap; padding: var(--nb-space-4); }
.nb-docclient-actions { width: 100%; justify-content: flex-start; margin-left: calc(-1 * var(--nb-space-3)); }
.nb-prop { padding: var(--nb-space-3) var(--nb-space-4); }
}
.nb-card.is-flash { box-shadow: 0 0 0 2px var(--nb-accent), var(--nb-shadow-md); transition: box-shadow var(--nb-dur-slow) var(--nb-ease); }
/* Contacto en el lateral */
.nb-aside-head { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-2); margin-bottom: var(--nb-space-3); }
.nb-aside-head .nb-btn { margin-right: calc(-1 * var(--nb-space-2)); }
.nb-contactcard { display: flex; align-items: flex-start; gap: var(--nb-space-3); }
.nb-contactcard-body { min-width: 0; }
.nb-contactcard-name { margin: 0; font-size: var(--nb-text-sm); font-weight: var(--nb-weight-medium); }
.nb-contactcard-body .nb-meta { margin: 0; }
.nb-contactcard-body .nb-meta:empty { display: none; }
.nb-contactcard-mail { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--nb-text-sm); color: var(--nb-accent-strong); text-decoration: none; }
.nb-contactcard-mail:hover { text-decoration: underline; }
.nb-contactcard-empty p { margin: 0 0 var(--nb-space-2); font-size: var(--nb-text-sm); color: var(--nb-text-2); }
.nb-contact-option { display: flex; align-items: center; gap: var(--nb-space-3); }
.nb-contact-option-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; text-align: left; }
.nb-contact-option-text > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-contact-option-check { opacity: 0; color: var(--nb-accent-strong); }
.nb-contact-option[aria-checked="true"] .nb-contact-option-check { opacity: 1; }
/* Líneas (lista en rejilla, no tabla: se puede ordenar y se apila en móvil) */
.nb-lineitems { --li-cols: 28px minmax(0, 1fr) 88px 116px 80px 128px 36px; container-type: inline-size; }
.nb-li {
display: grid;
grid-template-columns: var(--li-cols);
align-items: start;
gap: var(--nb-space-2);
padding: var(--nb-space-3) var(--nb-space-4);
border-top: 1px solid var(--nb-border-subtle);
background: var(--nb-surface);
transition: background-color var(--nb-dur) var(--nb-ease);
}
.nb-li.is-new { background: var(--nb-accent-soft); }
.nb-li.is-sort-dragging { position: fixed; z-index: var(--nb-z-dropdown); box-shadow: var(--nb-shadow-lg); border-radius: var(--nb-radius-sm); }
.nb-li--head {
align-items: center;
padding-top: var(--nb-space-2);
padding-bottom: var(--nb-space-2);
background: var(--nb-surface-2);
font-size: 11px;
font-weight: var(--nb-weight-bold);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--nb-text-3);
}
.nb-li--head .nb-num { text-align: right; }
.nb-lineitems-body .nb-sort-placeholder { height: 72px; border-top: 1px solid var(--nb-border-subtle); background: var(--nb-accent-soft); }
.nb-li-drag {
display: grid; place-items: center;
width: 28px; height: 40px;
border: 0; border-radius: var(--nb-radius-xs);
background: transparent; color: var(--nb-text-disabled);
cursor: grab; touch-action: none;
}
.nb-li-drag:hover, .nb-li-drag:focus-visible { color: var(--nb-text-2); background: var(--nb-surface-3); }
.nb-li-concept { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nb-li-head { display: flex; align-items: center; gap: var(--nb-space-2); min-width: 0; }
.nb-li-ref { flex: 0 0 auto; padding: 2px 6px; border-radius: 6px; background: var(--nb-surface-3); font-family: var(--nb-font-mono); font-size: 11px; color: var(--nb-text-2); }
.nb-li-name {
flex: 1 1 auto; min-width: 0; height: 40px;
padding: 0 var(--nb-space-2); margin-left: calc(-1 * var(--nb-space-2));
border: 1px solid transparent; border-radius: var(--nb-radius-sm);
background: transparent; color: var(--nb-text);
font: inherit; font-size: var(--nb-text-base); font-weight: var(--nb-weight-medium);
}
.nb-li-name:hover { border-color: var(--nb-border); }
.nb-li-name:focus { outline: none; border-color: var(--nb-accent); box-shadow: var(--nb-focus-ring); background: var(--nb-surface); }
.nb-li-ref + .nb-li-name, .nb-badge + .nb-li-name { margin-left: 0; }
.nb-li-desc {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
max-width: 62ch; padding: 2px 0; border: 0; background: transparent;
color: var(--nb-text-3); font: inherit; font-size: var(--nb-text-xs); line-height: 1.5; text-align: left; cursor: pointer;
}
.nb-li-desc:hover { color: var(--nb-text-2); text-decoration: underline; text-underline-offset: 2px; }
.nb-li-desc.is-empty { color: var(--nb-accent-strong); font-weight: var(--nb-weight-medium); }
.nb-li-desc.is-empty::before { content: "+ "; }
.nb-li-cell { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.nb-li-cell input.nb-input, .nb-li-cell select.nb-select { height: 40px; }
.nb-li-cell .nb-input-wrap input.nb-input { padding-right: 26px; }
.nb-li-cell .nb-input-wrap > .nb-input-suffix { right: 10px; }
.nb-li-cell select.nb-select { padding-right: 28px; background-position: right 8px center; }
.nb-li-label { display: none; font-size: var(--nb-text-xs); color: var(--nb-text-3); margin-bottom: 4px; text-align: left; }
.nb-li-total { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-top: 9px; font-weight: var(--nb-weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-li-iva {
display: inline-flex; align-items: center; gap: 2px;
height: 22px; padding: 0 6px; margin-right: -6px;
border: 1px solid transparent; border-radius: var(--nb-radius-pill);
background: transparent; color: var(--nb-text-3);
font: inherit; font-size: var(--nb-text-xs); font-weight: var(--nb-weight-regular); cursor: pointer;
}
.nb-li-iva .ti { font-size: 12px; opacity: 0; transition: opacity var(--nb-dur-fast) var(--nb-ease); }
.nb-li:hover .nb-li-iva .ti, .nb-li-iva:focus-visible .ti { opacity: 1; }
.nb-li-iva:hover { border-color: var(--nb-border); color: var(--nb-text-2); }
.nb-li-iva.is-override { background: var(--nb-warning-bg); color: var(--nb-warning-fg); font-weight: var(--nb-weight-medium); }
.nb-li-iva.is-override .ti { opacity: 1; }
.nb-li-iva.is-static { cursor: default; }
/* Salto de página */
.nb-li--break { grid-template-columns: 28px minmax(0, 1fr) 36px; align-items: center; padding-top: var(--nb-space-2); padding-bottom: var(--nb-space-2); background: var(--nb-surface-2); }
.nb-li-break-label {
display: flex; align-items: center; gap: var(--nb-space-2); min-width: 0;
padding: 6px var(--nb-space-3);
border: 1px dashed var(--nb-border-strong); border-radius: var(--nb-radius-sm);
color: var(--nb-text-2); font-size: var(--nb-text-sm); font-weight: var(--nb-weight-medium);
}
.nb-li-break-label .ti { font-size: 18px; color: var(--nb-text-3); }
.nb-li-break-label .nb-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--nb-weight-regular); }
.nb-lineitems-foot { display: flex; justify-content: flex-end; padding: var(--nb-space-3) var(--nb-space-5) var(--nb-space-4); border-top: 1px solid var(--nb-border-subtle); }
.nb-menu-item-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; text-align: left; }
.nb-menu-item-text .nb-meta { font-weight: var(--nb-weight-regular); }
.nb-paper-break { padding: 6px 0; border-bottom: 1px dashed #b9c2c0; color: #8a9593; font-size: 11px; text-align: center; text-transform: uppercase; letter-spacing: 0.08em; }
.nb-static-field { display: flex; align-items: center; gap: 6px; height: var(--nb-control-h); margin: 0; padding: 0 var(--nb-space-3); border-radius: var(--nb-radius-sm); background: var(--nb-surface-2); color: var(--nb-text-2); }
.nb-static-field .nb-mono { font-family: var(--nb-font-mono); font-size: var(--nb-text-sm); color: var(--nb-text); }
.nb-static-field .ti { font-size: 14px; color: var(--nb-text-3); }
/* Datos del documento en solo lectura */
.nb-facts { display: flex; flex-wrap: wrap; margin: 0; border-top: 1px solid var(--nb-border-subtle); }
.nb-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; padding: var(--nb-space-3) var(--nb-space-5); border-right: 1px solid var(--nb-border-subtle); }
.nb-fact:last-child { border-right: 0; }
.nb-fact--grow { flex: 1 1 160px; }
.nb-fact dt { font-size: var(--nb-text-xs); color: var(--nb-text-3); }
.nb-fact dd { display: flex; align-items: center; gap: 4px; min-height: 24px; margin: 0; font-size: var(--nb-text-sm); font-weight: var(--nb-weight-medium); color: var(--nb-text); white-space: nowrap; }
.nb-fact dd.nb-mono, .nb-fact .nb-mono { font-family: var(--nb-font-mono); font-size: var(--nb-text-sm); }
.nb-fact--grow dd { white-space: normal; overflow-wrap: anywhere; }
.nb-fact dd.is-empty { color: var(--nb-text-3); font-weight: var(--nb-weight-regular); }
.nb-fact .nb-prop-lock { width: 20px; height: 20px; font-size: 13px; }
.nb-fact-link { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--nb-text); font: inherit; font-weight: inherit; cursor: pointer; text-align: left; }
.nb-fact-link:hover .nb-mono { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767.98px) {
.nb-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-fact { padding: var(--nb-space-3) var(--nb-space-4); border-right: 0; border-bottom: 1px solid var(--nb-border-subtle); }
.nb-fact:nth-child(odd) { border-right: 1px solid var(--nb-border-subtle); }
.nb-fact dd { white-space: normal; }
}
/* Foto de contacto: fila propia, alineada con el resto de campos */
.nb-photo-row { display: flex; align-items: center; gap: var(--nb-space-4); }
.nb-photo-row .nb-avatar-upload { width: 56px; height: 56px; flex: 0 0 auto; }
.nb-photo-row-text { display: flex; flex-direction: column; gap: 2px; }
.nb-photo-row-text .nb-help { margin: 0; }
.nb-li-menu { margin-top: 4px; }
.nb-lineitems-empty { display: flex; align-items: center; gap: var(--nb-space-3); padding: var(--nb-space-6) var(--nb-space-5); border-top: 1px solid var(--nb-border-subtle); color: var(--nb-text-3); font-size: var(--nb-text-sm); }
.nb-lineitems-empty .ti { font-size: 22px; }
.nb-lineitems-add {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-2);
padding: var(--nb-space-3) var(--nb-space-4) var(--nb-space-4);
border-top: 1px dashed var(--nb-border);
}
.nb-lineitems-subtotal { font-size: var(--nb-text-sm); color: var(--nb-text-2); }
.nb-lineitems-subtotal strong { margin-left: 6px; color: var(--nb-text); font-size: var(--nb-text-md); font-variant-numeric: tabular-nums; }
/* Contenedor medio: concepto en su fila y los números debajo */
@container (max-width: 760px) {
.nb-li--head { display: none; }
.nb-li:not(.nb-li--break) {
grid-template-columns: 28px repeat(3, minmax(0, 1fr)) minmax(110px, 1fr) 36px;
grid-template-areas: "drag concept concept concept concept menu" ". qty price dto total .";
row-gap: var(--nb-space-2);
}
.nb-li-drag { grid-area: drag; }
.nb-li-concept { grid-area: concept; }
.nb-li-cell:nth-of-type(1) { grid-area: qty; }
.nb-li-cell:nth-of-type(2) { grid-area: price; }
.nb-li-cell:nth-of-type(3) { grid-area: dto; }
.nb-li-total { grid-area: total; }
.nb-li-menu { grid-area: menu; }
.nb-li-label { display: block; }
.nb-li-total .nb-li-label { text-align: right; }
}
/* Contenedor estrecho (móvil) */
@container (max-width: 480px) {
.nb-li:not(.nb-li--break) {
grid-template-columns: 28px repeat(2, minmax(0, 1fr)) 36px;
grid-template-areas: "drag concept concept menu" ". qty price ." ". dto total .";
row-gap: var(--nb-space-3);
}
}
/* Cobro: plazo + fecha, plazos, cobros registrados */
.nb-cobro-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-3); }
.nb-cobro-row .nb-segmented { flex-wrap: wrap; }
.nb-plazos { border: 1px solid var(--nb-border); border-radius: var(--nb-radius-sm); overflow: visible; }
.nb-plazos-head, .nb-plazo { display: grid; grid-template-columns: minmax(150px, 1fr) 110px 120px 36px; align-items: center; gap: var(--nb-space-3); padding: var(--nb-space-2) var(--nb-space-3); }
.nb-plazos-head { background: var(--nb-surface-2); border-radius: var(--nb-radius-sm) var(--nb-radius-sm) 0 0; font-size: 11px; font-weight: var(--nb-weight-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--nb-text-3); }
.nb-plazos-head .nb-num { text-align: right; }
.nb-plazo { border-top: 1px solid var(--nb-border-subtle); }
.nb-plazo-amount { font-weight: var(--nb-weight-medium); font-variant-numeric: tabular-nums; text-align: right; }
.nb-plazos-foot { display: flex; align-items: center; gap: var(--nb-space-2); padding: var(--nb-space-2) var(--nb-space-3); border-top: 1px solid var(--nb-border-subtle); }
.nb-plazos-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--nb-text-sm); }
.nb-plazos-check.is-ok { color: var(--nb-success-fg); }
.nb-plazos-check.is-bad { color: var(--nb-danger-fg); font-weight: var(--nb-weight-medium); }
.nb-cobros { padding-top: var(--nb-space-4); border-top: 1px solid var(--nb-border-subtle); }
.nb-cobros-head { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-3); margin-bottom: var(--nb-space-3); }
.nb-cobros-list { display: flex; flex-direction: column; gap: var(--nb-space-2); margin: 0; padding: 0; list-style: none; }
.nb-cobros-list:empty { display: none; }
.nb-cobro { display: flex; align-items: center; gap: var(--nb-space-3); padding: var(--nb-space-2) var(--nb-space-3); border-radius: var(--nb-radius-sm); background: var(--nb-success-bg); color: var(--nb-text); font-size: var(--nb-text-sm); }
.nb-cobro > .nb-icon { color: var(--nb-success-fg); font-size: 18px; }
.nb-cobro-text { flex: 1 1 auto; }
.nb-cobros-empty { margin: 0; font-size: var(--nb-text-sm); color: var(--nb-text-3); }
@media (max-width: 575.98px) {
.nb-plazos-head { display: none; }
.nb-plazo { grid-template-columns: minmax(0, 1fr) 90px 36px; grid-template-areas: "date date del" "pct amount ."; }
.nb-plazo > .nb-field { grid-area: date; }
.nb-plazo > .nb-input-wrap { grid-area: pct; }
.nb-plazo-amount { grid-area: amount; }
.nb-plazo > .nb-btn { grid-area: del; }
}
/* Notas internas e historial */
.nb-notes { display: flex; flex-direction: column; gap: var(--nb-space-4); margin: 0 0 var(--nb-space-4); padding: 0; list-style: none; }
.nb-notes:empty { display: none; }
.nb-note { display: flex; gap: var(--nb-space-3); }
.nb-note-meta { margin: 0; font-size: var(--nb-text-xs); color: var(--nb-text-3); }
.nb-note-meta strong { color: var(--nb-text); font-weight: var(--nb-weight-medium); }
.nb-note-text { margin: 2px 0 0; padding: var(--nb-space-2) var(--nb-space-3); border-radius: 4px var(--nb-radius-sm) var(--nb-radius-sm) var(--nb-radius-sm); background: var(--nb-surface-2); font-size: var(--nb-text-sm); }
.nb-note-composer { display: flex; align-items: flex-end; gap: var(--nb-space-2); }
.nb-note-composer textarea.nb-textarea { min-height: 44px; }
.nb-timeline { position: relative; display: flex; flex-direction: column; gap: var(--nb-space-4); margin: 0; padding: 0; list-style: none; }
.nb-timeline::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 1px; background: var(--nb-border); }
.nb-timeline-item { position: relative; display: flex; gap: var(--nb-space-3); }
.nb-timeline-item > .nb-icon { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--nb-surface-3); color: var(--nb-text-2); font-size: 16px; box-shadow: 0 0 0 4px var(--nb-surface); }
.nb-timeline-item--accent > .nb-icon { background: var(--nb-accent-soft); color: var(--nb-accent-strong); }
.nb-timeline-item--info > .nb-icon { background: var(--nb-info-bg); color: var(--nb-info-fg); }
.nb-timeline-item--success > .nb-icon { background: var(--nb-success-bg); color: var(--nb-success-fg); }
.nb-timeline-item p { margin: 5px 0 0; font-size: var(--nb-text-sm); }
.nb-timeline-item time { font-size: var(--nb-text-xs); color: var(--nb-text-3); font-variant-numeric: tabular-nums; }
/* Lateral: resumen, cobrado, Verifactu, adjuntos */
.nb-summary-row--sub .nb-summary-label { padding-left: var(--nb-space-3); }
.nb-summary-row--sub .nb-meta { margin-left: 4px; }
.nb-paid { margin-top: var(--nb-space-4); padding-top: var(--nb-space-3); border-top: 1px dashed var(--nb-border); }
.nb-paid-bar { height: 6px; border-radius: var(--nb-radius-pill); background: var(--nb-surface-3); overflow: hidden; }
.nb-paid-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--nb-success-solid); transition: width var(--nb-dur-slow) var(--nb-ease); }
.nb-paid-row { display: flex; justify-content: space-between; gap: var(--nb-space-2); margin-top: var(--nb-space-2); font-size: var(--nb-text-xs); color: var(--nb-text-3); }
.nb-paid-row strong { color: var(--nb-text); font-variant-numeric: tabular-nums; }
.nb-verifactu-head { display: flex; align-items: center; gap: var(--nb-space-3); }
.nb-verifactu-head > div { flex: 1 1 auto; }
.nb-verifactu-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--nb-radius-sm); background: var(--nb-accent-soft); color: var(--nb-accent-strong); font-size: 20px; }
.nb-verifactu-title { margin: 0; font-size: var(--nb-text-sm); font-weight: var(--nb-weight-medium); }
.nb-verifactu-data { margin: var(--nb-space-3) 0 0; }
.nb-verifactu-data > div { display: flex; align-items: center; justify-content: space-between; font-size: var(--nb-text-xs); }
.nb-verifactu-data dt { color: var(--nb-text-3); }
.nb-verifactu-data dd { display: flex; align-items: center; gap: 2px; margin: 0; font-family: var(--nb-font-mono); }
.nb-files { display: flex; flex-direction: column; gap: 4px; margin: 0 0 var(--nb-space-2); padding: 0; list-style: none; }
.nb-files:empty { display: none; }
.nb-file { display: flex; align-items: center; gap: var(--nb-space-2); padding: 4px 4px 4px var(--nb-space-2); border-radius: var(--nb-radius-sm); background: var(--nb-surface-2); font-size: var(--nb-text-sm); }
.nb-file > .nb-icon { color: var(--nb-danger-fg); font-size: 18px; }
.nb-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-file-size { font-size: var(--nb-text-xs); color: var(--nb-text-3); white-space: nowrap; }
.nb-dropzone--compact { flex-direction: row; padding: var(--nb-space-3); font-size: var(--nb-text-sm); color: var(--nb-text-2); cursor: pointer; }
.nb-dropzone--compact .nb-icon { font-size: 18px; }
.nb-qr-box { display: grid; place-items: center; width: 168px; height: 168px; margin: 0 auto; border-radius: var(--nb-radius-sm); background: #fff; color: #002825; font-size: 140px; box-shadow: inset 0 0 0 1px var(--nb-border); }
/* Selector de producto: referencia y precio */
.nb-pick-ref { flex: 0 0 auto; display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: var(--nb-radius-sm); background: var(--nb-surface-3); font-family: var(--nb-font-mono); font-size: var(--nb-text-xs); font-weight: var(--nb-weight-bold); color: var(--nb-text-2); }
.nb-pick-price { flex: 0 0 auto; font-size: var(--nb-text-sm); font-weight: var(--nb-weight-medium); font-variant-numeric: tabular-nums; }
/* Contacto: foto + nombre */
.nb-avatar-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 56px; height: 56px; border: 1.5px dashed var(--nb-border-strong); border-radius: 50%; background: var(--nb-surface-2); color: var(--nb-text-3); font-size: var(--nb-text-xs); cursor: pointer; }
.nb-avatar-upload .nb-icon { font-size: 22px; color: var(--nb-accent-strong); }
.nb-avatar-upload:hover, .nb-avatar-upload.is-dragover { border-color: var(--nb-accent); background: var(--nb-accent-soft); }
/* DIR3 */
.nb-dir3 { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--nb-space-4); align-items: start; padding: var(--nb-space-3) 0; border-top: 1px solid var(--nb-border-subtle); }
.nb-dir3-label { display: flex; flex-direction: column; padding-top: 8px; font-size: var(--nb-text-sm); }
.nb-dir3-label span { font-size: var(--nb-text-xs); color: var(--nb-text-3); }
@media (max-width: 575.98px) { .nb-dir3 { grid-template-columns: minmax(0, 1fr); gap: var(--nb-space-2); } }
/* Editor de texto ligero */
.nb-richtext { border: 1px solid var(--nb-border-strong); border-radius: var(--nb-radius-sm); background: var(--nb-surface); overflow: hidden; }
.nb-richtext:focus-within { border-color: var(--nb-accent); box-shadow: var(--nb-focus-ring); }
.nb-richtext-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--nb-border-subtle); background: var(--nb-surface-2); }
.nb-richtext-bar button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--nb-radius-xs); background: transparent; color: var(--nb-text-2); font-size: 18px; cursor: pointer; }
.nb-richtext-bar button:hover { background: var(--nb-surface-3); color: var(--nb-text); }
.nb-richtext-bar button[aria-pressed="true"] { background: var(--nb-accent-soft); color: var(--nb-accent-strong); }
.nb-richtext-bar .nb-meta { padding-right: var(--nb-space-2); }
.nb-richtext-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--nb-border); }
.nb-richtext-area { min-height: 220px; max-height: 46dvh; overflow-y: auto; padding: var(--nb-space-4); font-size: var(--nb-text-base); line-height: 1.6; color: var(--nb-text); outline: none; }
.nb-richtext-area p { margin: 0 0 0.6em; }
.nb-richtext-area ul, .nb-richtext-area ol { margin: 0 0 0.6em; padding-left: 1.4em; }
.nb-richtext-area a { color: var(--nb-accent-strong); }
/* Documento: vista previa + envío */
.nb-docview .nb-docview-body { display: grid; grid-template-columns: 340px minmax(0, 1fr); padding: 0; overflow: hidden; }
.nb-docview-side { display: flex; flex-direction: column; gap: var(--nb-space-4); padding: var(--nb-space-2) var(--nb-space-6) var(--nb-space-6); overflow-y: auto; }
.nb-docview-side .nb-segmented button .nb-icon { font-size: 16px; margin-right: 6px; }
.nb-docview-actions { display: flex; flex-direction: column; gap: var(--nb-space-1); }
.nb-docview-actions .nb-btn--ghost { justify-content: flex-start; }
.nb-docview-paper { padding: var(--nb-space-6); background: var(--nb-surface-3); overflow-y: auto; border-top-left-radius: var(--nb-radius-md); }
.nb-paper {
max-width: 720px; margin: 0 auto; padding: 56px 64px;
background: #fff; color: #1d1d1d;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 40, 37, 0.12);
font-size: 13px; line-height: 1.55;
}
.nb-paper-head { display: flex; justify-content: space-between; gap: 32px; padding-bottom: 20px; border-bottom: 1px solid #e5e7e6; }
.nb-paper-title { margin: 0 0 12px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: #111; }
.nb-paper p { margin: 0 0 10px; }
.nb-paper-from { text-align: left; min-width: 200px; }
.nb-paper-logo { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 50%; background: #e9f7f5; color: #0b6b62; font-weight: 700; }
.nb-paper-h { margin: 24px 0 12px; font-size: 24px; font-weight: 700; color: #111; }
.nb-paper-line { padding-bottom: 12px; border-bottom: 1px solid #f0f1f1; }
.nb-paper-desc ul { margin: 6px 0; padding-left: 18px; }
.nb-paper-desc p { margin: 0 0 6px; }
.nb-paper-amount { margin-top: 8px; text-align: right; }
.nb-paper-totals { width: 260px; margin: 20px 0 0 auto; }
.nb-paper-totals > div { display: flex; justify-content: space-between; padding: 4px 0; }
.nb-paper-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.nb-paper-totals .is-total { margin-top: 6px; padding-top: 8px; border-top: 2px solid #111; font-size: 16px; font-weight: 700; }
.nb-paper-foot { display: flex; align-items: center; gap: 12px; margin-top: 32px; font-size: 11px; color: #555; }
.nb-paper-qr { font-size: 48px; line-height: 1; color: #111; }
@media (max-width: 991.98px) {
.nb-docview .nb-docview-body { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
.nb-docview-paper { border-radius: 0; padding: var(--nb-space-3); }
.nb-paper { padding: 28px 22px; font-size: 12px; }
.nb-paper-head { flex-direction: column; gap: 12px; }
}
.nb-layer.is-modal.nb-docview { height: min(860px, calc(100dvh - 48px)); }
.nb-layer.is-modal.nb-docview .nb-docview-body { flex: 1 1 auto; min-height: 0; }
.nb-entity-actions { gap: 0; margin-left: calc(-1 * var(--nb-space-3)); }
@media (max-width: 575.98px) {
.nb-doc-header .nb-doc-nav { display: none; }
.nb-doc-header .nb-page-actions > .nb-dropdown { margin-left: auto; }
}
.nb-tags input[type],
.nb-tags input:not([type="hidden"]) { flex: 1 1 80px; min-width: 80px; height: 28px; padding: 0 4px; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; outline: 0; color: var(--nb-text); font: inherit; font-size: var(--nb-text-sm); }
.nb-help:empty { display: none; }
.nb-dir3 .nb-field { gap: 4px; }
/* Si el NIF ya tiene su propio aviso (formato), no se repite el genérico */
.nb-field:has(.nb-nif-feedback.is-bad) [data-nif-required] { display: none; }
.nb-prop-link { flex-wrap: wrap; row-gap: 0; height: auto; min-height: 36px; }
.nb-prop { min-width: 0; }
.nb-prop .nb-datepicker { left: 0; right: auto; z-index: 20; }
/* =========================================================================
45. ESTADÍSTICAS (v1.5) · una página con pestañas (CLAUDE.md §25)
========================================================================= */
.nb-st-filters { flex-wrap: wrap; justify-content: flex-end; }
.nb-st-compare { width: auto; min-width: 0; }
.nb-st-compare .nb-select { padding-left: 36px; max-width: 290px; }
.nb-st-tabs { overflow-x: auto; scrollbar-width: none; }
.nb-st-tabs::-webkit-scrollbar { display: none; }
.nb-st-tabs .nb-tab { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nb-st-tabs .nb-tab .nb-icon { font-size: 16px; opacity: 0.7; }
.nb-st-tabs .nb-tab.is-active .nb-icon { opacity: 1; color: var(--nb-accent-strong); }
/* Fichas: variación + texto en la misma línea */
.nb-st-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.nb-st-meta .nb-delta { height: 20px; font-size: var(--nb-text-2xs); }
.nb-sumtile .nb-sumtile-meta strong { color: var(--nb-danger-fg); font-weight: var(--nb-weight-medium); }
.nb-st-note {
display: flex; align-items: center; gap: 8px; margin: var(--nb-space-3) 0 0;
padding: var(--nb-space-2) var(--nb-space-3); border-radius: var(--nb-radius-sm);
background: var(--nb-surface-2); color: var(--nb-text-2); font-size: var(--nb-text-sm);
}
.nb-st-note::before { content: "\eac5"; font-family: "tabler-icons"; font-size: 16px; color: var(--nb-text-3); } /* ti-info-circle */
/* Tablas de datos */
.nb-st-tablecard { overflow: hidden; }
.nb-st-tablecard > .nb-table-scroll { border-top: 1px solid var(--nb-border-subtle); }
.nb-st-table tbody th[scope="row"] {
height: 44px; padding: 0 var(--nb-space-3) 0 var(--nb-space-4);
border-bottom: 1px solid var(--nb-border-subtle);
font-weight: var(--nb-weight-regular); text-align: left; white-space: nowrap;
}
.nb-st-table tbody td { height: 44px; }
.nb-table--caps.nb-st-table tbody td { height: 56px; }
.nb-st-table tfoot th, .nb-st-table tfoot td {
height: 48px; padding: 0 var(--nb-space-3); background: var(--nb-surface-2);
border-top: 1px solid var(--nb-border); font-weight: var(--nb-weight-bold); white-space: nowrap; text-align: left;
}
.nb-st-table tfoot th { padding-left: var(--nb-space-4); }
.nb-st-table tfoot .nb-num { text-align: right; }
.nb-st-table tr.is-current { background: var(--nb-accent-soft); }
.nb-st-table tr.is-current th .nb-badge { margin-left: 6px; }
.nb-st-table tr.is-future th, .nb-st-table tr.is-future td { color: var(--nb-text-disabled); }
.nb-st-table .nb-delta { height: 20px; font-size: var(--nb-text-2xs); }
.nb-st-rank { width: 44px; color: var(--nb-text-3); font-variant-numeric: tabular-nums; }
.nb-st-link { color: inherit; text-decoration: none; }
.nb-st-link:hover { color: var(--nb-accent-strong); text-decoration: underline; }
.nb-st-ref {
flex: 0 0 auto; min-width: 34px; padding: 2px 6px; border-radius: 6px;
background: var(--nb-surface-3); color: var(--nb-text-2);
font-family: var(--nb-font-mono); font-size: var(--nb-text-2xs); text-align: center;
}
.nb-st-empty td { height: auto !important; padding: var(--nb-space-8) var(--nb-space-4) !important; white-space: normal !important; }
.nb-st-more { display: flex; justify-content: center; padding: var(--nb-space-2); }
/* Cuenta de resultados: primera columna fija al hacer scroll horizontal */
.nb-st-pnl { font-size: var(--nb-text-xs); }
.nb-st-pnl thead th:first-child,
.nb-st-pnl tbody th[scope="row"] {
position: sticky; left: 0; z-index: 2; min-width: 168px;
background: var(--nb-surface); box-shadow: 1px 0 0 var(--nb-border-subtle);
}
.nb-st-pnl thead th:first-child { z-index: 3; background: var(--nb-surface-2); }
.nb-st-pnl tbody td { padding: 0 8px; font-variant-numeric: tabular-nums; }
.nb-st-pnl th.is-current, .nb-st-pnl td.is-current { background: var(--nb-accent-soft); }
.nb-st-pnl td.is-future, .nb-st-pnl th.is-future { color: var(--nb-text-disabled); }
.nb-st-pnl .nb-st-total { padding-left: var(--nb-space-4) !important; border-left: 1px solid var(--nb-border-subtle); font-weight: var(--nb-weight-bold); }
.nb-st-pnl tr.nb-st-strong th, .nb-st-pnl tr.nb-st-strong td { border-top: 1px solid var(--nb-border); font-weight: var(--nb-weight-bold); color: var(--nb-text); }
.nb-st-pnl tr.nb-st-sub th, .nb-st-pnl tr.nb-st-sub td { color: var(--nb-text-2); height: 36px; }
.nb-st-pnl tr.nb-st-child th { padding-left: calc(var(--nb-space-4) + 22px); color: var(--nb-text-2); }
.nb-st-pnl tr.nb-st-child td { color: var(--nb-text-2); height: 36px; }
.nb-st-pnl tr.nb-st-section th {
height: 40px; padding-top: var(--nb-space-3); background: var(--nb-surface-2);
color: var(--nb-text-3); font-size: var(--nb-text-2xs); font-weight: var(--nb-weight-bold);
text-transform: uppercase; letter-spacing: 0.06em;
}
.nb-st-pnl tbody tr:hover th[scope="row"] { background: var(--nb-surface-2); }
.nb-st-toggle {
display: inline-flex; align-items: center; gap: 4px; margin-left: -4px; padding: 2px 4px;
border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.nb-st-toggle:hover { background: var(--nb-surface-3); }
.nb-st-toggle .nb-icon { font-size: 14px; transition: transform var(--nb-dur-fast) var(--nb-ease); }
.nb-st-toggle[aria-expanded="true"] .nb-icon { transform: rotate(90deg); }
/* Reparto ABC: una barra con tres tramos (secuencial de un solo tono: A oscuro → C claro) */
.nb-st-abc-head { display: flex; flex-direction: column; gap: var(--nb-space-3); padding-top: 0; }
.nb-abc { display: flex; gap: 2px; height: 12px; border-radius: var(--nb-radius-pill); overflow: hidden; background: var(--nb-surface-3); }
.nb-abc-seg { flex: 0 0 auto; min-width: 4px; }
.nb-abc-seg--a { background: var(--nb-accent-strong); }
.nb-abc-seg--b { background: var(--nb-accent); }
.nb-abc-seg--c { background: color-mix(in srgb, var(--nb-accent) 38%, var(--nb-surface)); }
.nb-abc-legend { display: flex; flex-wrap: wrap; gap: var(--nb-space-2) var(--nb-space-5); margin: 0; padding: 0; list-style: none; font-size: var(--nb-text-sm); color: var(--nb-text-2); }
.nb-abc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.nb-abc-legend strong { color: var(--nb-text); }
.nb-abc-key { width: 10px; height: 10px; border-radius: 3px; }
.nb-abc-badge {
display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
font-size: var(--nb-text-2xs); font-weight: var(--nb-weight-bold);
}
.nb-abc-badge--a { background: var(--nb-accent-strong); color: var(--nb-surface); }
.nb-abc-badge--b { background: var(--nb-accent); color: var(--nb-text-on-accent); }
.nb-abc-badge--c { background: var(--nb-surface-3); color: var(--nb-text-2); }
/* Peso: barra fina + porcentaje */
.nb-st-share { display: inline-flex; align-items: center; gap: var(--nb-space-2); min-width: 150px; }
.nb-st-share-bar { flex: 1 1 auto; height: 6px; min-width: 60px; border-radius: var(--nb-radius-pill); background: var(--nb-surface-3); overflow: hidden; }
.nb-st-share-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--nb-accent); }
.nb-st-share-num { width: 48px; text-align: right; font-variant-numeric: tabular-nums; color: var(--nb-text-2); }
/* Rejilla de dos tarjetas (se apila cuando no caben) */
.nb-st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--nb-space-5); align-items: start; }
/* Cómo terminan los presupuestos: barras de reparto por estado (colores de estado) */
.nb-outcome { display: flex; flex-direction: column; gap: var(--nb-space-2); }
.nb-outcome-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--nb-space-2); }
.nb-outcome-bar { display: flex; gap: 2px; height: 14px; border-radius: var(--nb-radius-pill); overflow: hidden; background: var(--nb-surface-3); }
.nb-outcome-seg { flex: 0 0 auto; min-width: 4px; }
.nb-outcome-seg--success { background: var(--nb-success-solid); }
.nb-outcome-seg--info { background: var(--nb-info-solid); }
.nb-outcome-seg--danger { background: var(--nb-danger-solid); }
.nb-outcome-legend { display: flex; flex-wrap: wrap; gap: 4px var(--nb-space-4); margin: 0; padding: 0; list-style: none; font-size: var(--nb-text-sm); color: var(--nb-text-2); }
.nb-outcome-legend li { display: inline-flex; align-items: center; gap: 6px; }
.nb-outcome-legend strong { color: var(--nb-text); font-variant-numeric: tabular-nums; }
.nb-outcome-key { width: 10px; height: 10px; border-radius: 3px; }
.nb-st-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nb-space-3); margin: var(--nb-space-2) 0 0; padding-top: var(--nb-space-4); border-top: 1px solid var(--nb-border-subtle); }
.nb-st-facts dt { font-size: var(--nb-text-xs); color: var(--nb-text-3); }
.nb-st-facts dd { margin: 2px 0 0; font-size: var(--nb-text-lg); font-weight: var(--nb-weight-bold); font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) {
.nb-st-filters { width: 100%; justify-content: flex-start; }
.nb-st-filters .nb-daterange { flex: 1 1 100%; }
.nb-st-filters .nb-daterange-trigger { width: 100%; justify-content: flex-start; }
.nb-st-compare { flex: 1 1 auto; }
.nb-st-compare .nb-select { max-width: none; width: 100%; }
.nb-st-share { min-width: 0; }
.nb-st-facts { grid-template-columns: 1fr; }
}
/* =========================================================================
46. FICHA DE ORGANIZACIÓN (v1.5) · CLAUDE.md §24
========================================================================= */
.nb-org-id { display: flex; align-items: center; gap: var(--nb-space-4); min-width: 0; }
.nb-org-id-text { min-width: 0; }
.nb-org-id .nb-doc-title .nb-h1 { font-family: inherit; letter-spacing: var(--nb-tracking-tight); overflow-wrap: anywhere; }
.nb-org-logo { position: relative; flex: 0 0 auto; border-radius: var(--nb-radius-md); cursor: pointer; }
.nb-org-logo .nb-avatar { --_size: 64px; border-radius: var(--nb-radius-md); }
.nb-org-logo-edit {
position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit;
background: color-mix(in srgb, var(--nb-text) 55%, transparent); color: var(--nb-surface); font-size: 22px;
opacity: 0; transition: opacity var(--nb-dur-fast) var(--nb-ease);
}
.nb-org-logo:hover .nb-org-logo-edit, .nb-org-logo:focus-visible .nb-org-logo-edit, .nb-org-logo.is-dragover .nb-org-logo-edit { opacity: 1; }
.nb-org-sub { align-items: center; }
.nb-vies { display: inline-flex; align-items: center; gap: 4px; font-size: var(--nb-text-xs); font-weight: var(--nb-weight-medium); }
.nb-vies.is-ok { color: var(--nb-success-fg); }
.nb-vies.is-bad { color: var(--nb-danger-fg); }
.nb-vies .ti { font-size: 15px; }
/* Últimos documentos */
.nb-doclist { margin: 0; padding: 0 0 var(--nb-space-2); list-style: none; }
.nb-doclist-item {
display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--nb-space-3);
padding: var(--nb-space-3) var(--nb-space-5); color: inherit; text-decoration: none;
border-top: 1px solid var(--nb-border-subtle);
}
.nb-doclist li:first-child .nb-doclist-item { border-top: 0; }
.nb-doclist-item:hover { background: var(--nb-surface-2); }
.nb-doclist-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--nb-radius-sm); background: var(--nb-surface-3); color: var(--nb-text-2); font-size: 18px; }
.nb-doclist-main { display: flex; flex-direction: column; min-width: 0; }
.nb-doclist-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--nb-weight-medium); }
.nb-doclist-title .nb-mono { margin-right: 4px; color: var(--nb-text-2); font-size: var(--nb-text-xs); }
.nb-doclist-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.nb-doclist-amount { font-weight: var(--nb-weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-doctype { display: inline-flex; align-items: center; gap: 6px; color: var(--nb-text-2); }
.nb-doctype .nb-icon { font-size: 16px; color: var(--nb-text-3); }
/* Qué le vendes */
.nb-sharelist { display: flex; flex-direction: column; gap: var(--nb-space-4); margin: 0; padding: 0; list-style: none; }
.nb-sharelist-row { display: flex; justify-content: space-between; gap: var(--nb-space-3); margin-bottom: 6px; }
.nb-sharelist-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--nb-weight-medium); }
.nb-sharelist-value { font-weight: var(--nb-weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-sharelist .nb-meta { margin: 4px 0 0; }
.nb-org-card-foot { padding-top: var(--nb-space-3); padding-bottom: var(--nb-space-3); }
.nb-org-card-foot .nb-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--nb-text-sm); }
/* Contactos en el lateral */
.nb-people { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.nb-person {
display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--nb-space-3); align-items: start;
padding: var(--nb-space-3) 0; border-top: 1px solid var(--nb-border-subtle);
}
.nb-person:first-child { padding-top: 0; border-top: 0; }
.nb-person .nb-avatar { --_size: 40px; }
.nb-person-body { min-width: 0; }
.nb-person-name { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--nb-weight-medium); }
.nb-person-body .nb-meta { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-person-flag { margin-top: 6px; }
.nb-person-actions { display: flex; gap: 0; margin-right: calc(-1 * var(--nb-space-2)); }
.nb-ct-warn { display: flex; gap: 6px; align-items: center; margin: var(--nb-space-2) 0 0; color: var(--nb-warning-fg); }
/* Clave / valor compacto (Condiciones) */
.nb-kv { display: flex; flex-direction: column; gap: var(--nb-space-3); margin: 0; }
.nb-kv dt { font-size: var(--nb-text-xs); color: var(--nb-text-3); }
.nb-kv dd { margin: 2px 0 0; font-size: var(--nb-text-sm); }
/* Cuentas bancarias */
.nb-bankacc {
display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: var(--nb-space-4); align-items: start;
padding-top: var(--nb-space-4); border-top: 1px solid var(--nb-border-subtle);
}
.nb-bankacc:first-child { padding-top: 0; border-top: 0; }
.nb-bankacc-sepa { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.nb-bankacc-remove { margin-top: 26px; }
.nb-field.is-invalid input[data-nb-iban] { border-color: var(--nb-danger-solid); }
#datos .nb-card { scroll-margin-top: 96px; }
#datos .nb-modal-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 767.98px) {
.nb-org-id { align-items: flex-start; }
.nb-org-logo .nb-avatar { --_size: 48px; }
.nb-bankacc { grid-template-columns: minmax(0, 1fr) auto; }
.nb-bankacc-sepa { grid-column: 1 / -1; grid-row: 2; }
.nb-bankacc-remove { grid-column: 2; grid-row: 1; }
.nb-doclist-item { padding-left: var(--nb-space-4); padding-right: var(--nb-space-4); }
}
.nb-sumtile-value--text { font-size: var(--nb-text-lg); line-height: 1.6; }
@media (max-width: 575.98px) {
.nb-tab-panel .nb-card-header { flex-wrap: wrap; }
.nb-tab-panel .nb-card-header .nb-card-actions { width: 100%; }
}
/* =========================================================================
47. PROYECTOS (v1.6) · listado, tablero y detalle de tarea (CLAUDE.md §26)
========================================================================= */
/* Portadas: color de la paleta de gráficas + icono o inicial. Una imagen subida la sustituye */
.nb-pj-cover {
--_c: var(--nb-chart-1);
position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden;
background:
radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--_c) 55%, transparent) 0%, transparent 60%),
linear-gradient(140deg, color-mix(in srgb, var(--_c) 22%, var(--nb-surface)) 0%, color-mix(in srgb, var(--_c) 40%, var(--nb-surface)) 100%);
color: color-mix(in srgb, var(--_c) 75%, var(--nb-text));
font-size: 44px; font-weight: var(--nb-weight-bold); line-height: 1;
}
.nb-pj-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nb-pj-cover--1 { --_c: var(--nb-chart-1); } .nb-pj-cover--2 { --_c: var(--nb-chart-2); } .nb-pj-cover--3 { --_c: var(--nb-chart-3); }
.nb-pj-cover--4 { --_c: var(--nb-chart-4); } .nb-pj-cover--5 { --_c: var(--nb-chart-5); } .nb-pj-cover--6 { --_c: var(--nb-chart-6); }
.nb-pj-cover--mini { width: 36px; height: 36px; aspect-ratio: auto; flex: 0 0 auto; border-radius: var(--nb-radius-sm); font-size: 20px; }
/* Listado */
.nb-pj-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-3); margin-bottom: var(--nb-space-5); }
.nb-pj-toolbar .nb-search { flex: 1 1 280px; max-width: 420px; }
.nb-pj-sort .nb-select { padding-left: 36px; }
.nb-pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--nb-space-5); }
.nb-pj-card {
position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
border: 1px solid var(--nb-border-subtle); border-radius: var(--nb-radius-md); background: var(--nb-surface);
box-shadow: var(--nb-shadow-xs); transition: transform var(--nb-dur-fast) var(--nb-ease), box-shadow var(--nb-dur-fast) var(--nb-ease);
}
.nb-pj-card:hover { transform: translateY(-2px); box-shadow: var(--nb-shadow-md); }
.nb-pj-card:focus-within { box-shadow: 0 0 0 2px var(--nb-accent), var(--nb-shadow-md); }
.nb-pj-card-body { display: flex; flex-direction: column; gap: 6px; padding: var(--nb-space-4); flex: 1 1 auto; }
.nb-pj-card-title { margin: 0; font-size: var(--nb-text-md); font-weight: var(--nb-weight-bold); line-height: 1.3; }
.nb-pj-card-link { color: inherit; text-decoration: none; outline: 0; }
.nb-pj-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.nb-pj-card-body .nb-meta { margin: 0; }
.nb-pj-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-2); margin-top: auto; padding-top: 6px; font-size: var(--nb-text-xs); color: var(--nb-text-2); }
.nb-pj-card-empty { margin: 4px 0; font-size: var(--nb-text-xs); color: var(--nb-text-3); }
.nb-pj-card-warn { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0; padding: 6px 8px; border-radius: var(--nb-radius-xs); background: var(--nb-warning-bg); color: var(--nb-warning-fg); font-size: var(--nb-text-xs); line-height: 1.35; }
.nb-pj-card-warn .ti { font-size: 15px; margin-top: 1px; }
.nb-pj-card--new {
align-items: center; justify-content: center; gap: var(--nb-space-2); min-height: 220px;
border: 1.5px dashed var(--nb-border-strong); background: transparent; box-shadow: none; color: var(--nb-text-2);
font: inherit; font-weight: var(--nb-weight-medium); cursor: pointer;
}
.nb-pj-card--new .nb-icon { font-size: 26px; }
.nb-pj-card--new:hover { color: var(--nb-accent-strong); border-color: var(--nb-accent); background: var(--nb-accent-soft); }
.nb-pj-fav {
position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px;
border: 0; border-radius: var(--nb-radius-pill); background: color-mix(in srgb, var(--nb-surface) 82%, transparent);
color: var(--nb-text-3); font-size: 17px; cursor: pointer; backdrop-filter: blur(6px);
opacity: 0; transition: opacity var(--nb-dur-fast) var(--nb-ease);
}
.nb-pj-card:hover .nb-pj-fav, .nb-pj-fav:focus-visible, .nb-pj-fav[aria-pressed="true"] { opacity: 1; }
.nb-pj-fav[aria-pressed="true"] { color: var(--nb-chart-5); }
.nb-pj-fav--inline { position: static; opacity: 1; background: transparent; backdrop-filter: none; }
.nb-pj-progress { height: 6px; margin: 6px 0 2px; border-radius: var(--nb-radius-pill); background: var(--nb-surface-3); overflow: hidden; }
.nb-pj-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--nb-accent); transition: width var(--nb-dur-slow) var(--nb-ease); }
.nb-pj-progress--lg { height: 6px; margin: var(--nb-space-2) 0 var(--nb-space-3); }
.nb-avatar-stack { display: inline-flex; align-items: center; flex: 0 0 auto; }
.nb-avatar-stack > .nb-avatar { box-shadow: 0 0 0 2px var(--nb-surface); border-radius: var(--nb-radius-pill); }
.nb-avatar-stack > * + * { margin-left: -6px; }
.nb-avatar-more { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: var(--nb-radius-pill); background: var(--nb-surface-3); box-shadow: 0 0 0 2px var(--nb-surface); color: var(--nb-text-2); font-size: var(--nb-text-2xs); font-weight: var(--nb-weight-bold); }
/* Mis tareas */
.nb-mytasks { overflow: hidden; }
.nb-mytasks-head { display: flex; align-items: center; gap: var(--nb-space-2); padding: var(--nb-space-4) var(--nb-space-5) var(--nb-space-2); }
.nb-mytasks-title { margin: 0; font-size: var(--nb-text-md); font-weight: var(--nb-weight-bold); }
.nb-mytasks-head.is-late .nb-mytasks-title { color: var(--nb-danger-fg); }
.nb-mytasks-list { margin: 0; padding: 0 0 var(--nb-space-2); list-style: none; }
.nb-mytask { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--nb-space-3); padding: 10px var(--nb-space-5); border-top: 1px solid var(--nb-border-subtle); transition: opacity var(--nb-dur) var(--nb-ease); }
.nb-mytask:hover { background: var(--nb-surface-2); }
.nb-mytask.is-done { opacity: 0.45; }
.nb-mytask.is-done .nb-mytask-title { text-decoration: line-through; }
.nb-mytask-main { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
.nb-mytask-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--nb-weight-medium); }
.nb-mytask-end { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.nb-emoji { margin-right: 6px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-weight: var(--nb-weight-regular); }
/* Comprobar (círculo) */
.nb-check-round {
display: inline-grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; padding: 0;
border: 1.5px solid var(--nb-border-strong); border-radius: var(--nb-radius-pill); background: var(--nb-surface);
color: transparent; font-size: 13px; cursor: pointer; transition: all var(--nb-dur-fast) var(--nb-ease);
}
.nb-check-round:hover { border-color: var(--nb-success-solid); color: var(--nb-success-solid); }
.nb-check-round[aria-pressed="true"] { border-color: var(--nb-success-solid); background: var(--nb-success-solid); color: var(--nb-surface); }
.nb-check-round--sm { width: 18px; height: 18px; font-size: 11px; }
/* Chips de la tarjeta */
.nb-pj-chip, .nb-pj-due, .nb-pj-pri { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: var(--nb-text-2xs); font-weight: var(--nb-weight-medium); color: var(--nb-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nb-pj-chip .ti, .nb-pj-due .ti, .nb-pj-pri .ti { font-size: 14px; }
.nb-pj-chip { background: var(--nb-surface-2); }
.nb-pj-chip.is-complete { background: var(--nb-success-bg); color: var(--nb-success-fg); }
.nb-pj-due { background: var(--nb-surface-2); }
.nb-pj-due.is-soon { background: var(--nb-warning-bg); color: var(--nb-warning-fg); }
.nb-pj-due.is-late { background: var(--nb-danger-bg); color: var(--nb-danger-fg); }
.nb-pj-pri { padding: 0 4px; background: transparent; }
.nb-pj-pri--urgente { color: var(--nb-danger-fg); }
.nb-pj-pri--alta { color: var(--nb-warning-fg); }
.nb-pj-pri--media { color: var(--nb-info-fg); }
.nb-pj-pri--baja { color: var(--nb-text-3); }
.nb-pj-running { background: var(--nb-danger-bg); color: var(--nb-danger-fg); }
.nb-pj-running .ti { animation: nb-pulse 1.4s var(--nb-ease-in-out) infinite; }
@keyframes nb-pulse { 50% { opacity: 0.35; } }
/* Etiquetas (categorías): punto de color + texto en tinta (el color nunca lleva el texto) */
.nb-tag { --_c: var(--nb-chart-1); display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--nb-radius-pill); background: color-mix(in srgb, var(--_c) 13%, var(--nb-surface)); color: var(--nb-text); font-size: var(--nb-text-2xs); font-weight: var(--nb-weight-medium); white-space: nowrap; }
.nb-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--_c); }
.nb-tag--client { background: var(--nb-surface-2); color: var(--nb-text-2); }
.nb-tag--client::before { display: none; }
.nb-tag--client .ti { font-size: 13px; }
.nb-tag-tone--1 { --_c: var(--nb-chart-1); } .nb-tag-tone--2 { --_c: var(--nb-chart-2); } .nb-tag-tone--3 { --_c: var(--nb-chart-3); }
.nb-tag-tone--4 { --_c: var(--nb-chart-4); } .nb-tag-tone--5 { --_c: var(--nb-chart-5); } .nb-tag-tone--6 { --_c: var(--nb-chart-6); }
/* Modal de proyecto */
.nb-pj-ident { display: flex; gap: var(--nb-space-5); align-items: flex-start; }
.nb-pj-coverpick { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 150px; }
.nb-pj-coverpick .nb-pj-cover { width: 150px; border-radius: var(--nb-radius-md); font-size: 40px; }
.nb-pj-coverpanel { display: grid; grid-template-columns: auto 1fr; gap: var(--nb-space-4); margin-top: var(--nb-space-4); padding: var(--nb-space-4); border-radius: var(--nb-radius-md); background: var(--nb-surface-2); }
.nb-pj-coverpanel .nb-dropzone { grid-column: 1 / -1; }
.nb-pj-tones { display: flex; flex-wrap: wrap; gap: 8px; }
.nb-pj-tones--menu { padding: 4px 12px 8px; }
.nb-pj-tone { width: 28px; height: 28px; aspect-ratio: auto; padding: 0; border: 0; border-radius: var(--nb-radius-pill); cursor: pointer; font-size: 0; }
.nb-pj-tone[aria-checked="true"], .nb-pj-tone[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--nb-surface), 0 0 0 4px var(--nb-text); }
.nb-pj-emojis { display: grid; grid-template-columns: repeat(7, 32px); gap: 4px; }
.nb-pj-emoji { width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--nb-radius-xs); background: transparent; font-size: 18px; cursor: pointer; }
.nb-pj-emoji:hover { background: var(--nb-surface-3); }
.nb-pj-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.nb-pj-person { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--nb-border); border-radius: var(--nb-radius-sm); cursor: pointer; }
.nb-pj-person input { position: absolute; opacity: 0; pointer-events: none; }
.nb-pj-person-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--nb-text-sm); }
.nb-pj-person-check { color: var(--nb-accent-strong); opacity: 0; }
.nb-pj-person:has(input:checked) { border-color: var(--nb-accent); background: var(--nb-accent-soft); }
.nb-pj-person:has(input:checked) .nb-pj-person-check { opacity: 1; }
.nb-pj-person:has(input:disabled) { cursor: default; }
.nb-pj-person:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--nb-accent); }
.nb-pj-templates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nb-pj-template-cols { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.nb-pj-template-cols span { padding: 1px 6px; border-radius: 6px; background: var(--nb-surface-3); color: var(--nb-text-2); font-size: var(--nb-text-2xs); }
.nb-pj-template-cols .is-empty { background: transparent; padding: 0; color: var(--nb-text-3); }
.nb-pj-labels { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--nb-space-2); padding: 0; list-style: none; }
.nb-pj-label { display: flex; align-items: center; gap: 8px; }
.nb-pj-label .nb-input { flex: 1 1 auto; }
.nb-pj-swatch { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--nb-radius-pill); background: var(--_c); cursor: pointer; }
.nb-pj-swatch:hover { box-shadow: 0 0 0 2px var(--nb-surface), 0 0 0 4px var(--_c); }
.nb-pj-danger { display: flex; flex-direction: column; gap: var(--nb-space-3); margin-top: var(--nb-space-5); padding-top: var(--nb-space-5); border-top: 1px solid var(--nb-border-subtle); }
.nb-input--sm { height: 32px; padding-top: 0; padding-bottom: 0; font-size: var(--nb-text-sm); }
/* Cabecera y filtros del tablero */
.nb-pj-titlerow { display: flex; align-items: center; gap: var(--nb-space-3); }
.nb-pj-titlerow .nb-h1 { margin: 0; }
.nb-pj-late { padding: 0; border: 0; background: none; color: var(--nb-danger-fg); font: inherit; font-weight: var(--nb-weight-medium); cursor: pointer; }
.nb-pj-late:hover { text-decoration: underline; }
.nb-pj-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-3); margin-bottom: var(--nb-space-3); }
.nb-pj-filters .nb-search { flex: 0 1 280px; }
.nb-pj-people-filter { display: inline-flex; align-items: center; padding-left: 6px; }
.nb-pj-personbtn { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-left: -6px; padding: 0; border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-surface); box-shadow: 0 0 0 2px var(--nb-bg); cursor: pointer; transition: transform var(--nb-dur-fast) var(--nb-ease); }
.nb-pj-personbtn:hover { transform: translateY(-2px); z-index: 1; }
.nb-pj-personbtn .nb-avatar { --_size: 30px; border-radius: var(--nb-radius-pill); }
.nb-pj-personbtn[aria-pressed="true"] { z-index: 1; box-shadow: 0 0 0 2px var(--nb-bg), 0 0 0 4px var(--nb-accent); }
.nb-pj-personbtn--none { margin-left: 2px; border: 1.5px dashed var(--nb-border-strong); color: var(--nb-text-3); font-size: 16px; }
.nb-pj-hint { font-size: var(--nb-text-xs); }
/* Tablero */
.nb-board {
--_colw: 300px;
display: flex; align-items: flex-start; gap: var(--nb-space-4);
margin: 0 calc(-1 * var(--nb-space-6)); padding: var(--nb-space-2) var(--nb-space-6) var(--nb-space-6);
overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: var(--nb-space-6);
}
.nb-col {
--_c: var(--nb-chart-1);
display: flex; flex-direction: column; flex: 0 0 var(--_colw); width: var(--_colw);
max-height: calc(100dvh - 250px); min-height: 160px;
border: 1px solid var(--nb-border-subtle); border-radius: var(--nb-radius-md);
background: color-mix(in srgb, var(--_c) 6%, var(--nb-surface-2));
}
.nb-col--1 { --_c: var(--nb-chart-1); } .nb-col--2 { --_c: var(--nb-chart-2); } .nb-col--3 { --_c: var(--nb-chart-3); }
.nb-col--4 { --_c: var(--nb-chart-4); } .nb-col--5 { --_c: var(--nb-chart-5); } .nb-col--6 { --_c: var(--nb-chart-6); }
.nb-col-head { display: flex; align-items: center; gap: 8px; padding: 10px 8px 6px 14px; }
.nb-col-dot { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--_c); }
.nb-col-title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--nb-text-base); font-weight: var(--nb-weight-bold); }
.nb-col-count { padding: 0 7px; border-radius: var(--nb-radius-pill); background: color-mix(in srgb, var(--_c) 14%, var(--nb-surface)); color: var(--nb-text-2); font-size: var(--nb-text-2xs); font-weight: var(--nb-weight-bold); font-variant-numeric: tabular-nums; line-height: 20px; }
.nb-col-rename { flex: 1 1 auto; }
.nb-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 12px; padding: 4px 8px; overflow-y: auto; scrollbar-width: thin; }
.nb-col-empty { margin: 4px 8px; padding: var(--nb-space-4) var(--nb-space-3); border: 1.5px dashed var(--nb-border); border-radius: var(--nb-radius-sm); color: var(--nb-text-3); font-size: var(--nb-text-xs); text-align: center; }
.nb-col-add { padding: 4px 8px 8px; }
.nb-col-addbtn { display: flex; align-items: center; gap: 6px; width: 100%; height: 36px; padding: 0 8px; border: 0; border-radius: var(--nb-radius-sm); background: transparent; color: var(--nb-text-2); font: inherit; font-size: var(--nb-text-sm); cursor: pointer; }
.nb-col-addbtn:hover { background: color-mix(in srgb, var(--_c) 12%, var(--nb-surface)); color: var(--nb-text); }
.nb-col-quickform { display: flex; flex-direction: column; gap: 8px; }
.nb-col-quickform .nb-textarea { min-height: 64px; resize: none; background: var(--nb-surface); }
.nb-col-quickform .nb-cluster { align-items: center; }
.nb-col-done { margin: 0 8px 8px; border-top: 1px solid var(--nb-border-subtle); }
.nb-col-done summary { display: flex; align-items: center; gap: 6px; padding: 10px 6px 6px; list-style: none; color: var(--nb-text-2); font-size: var(--nb-text-sm); cursor: pointer; }
.nb-col-done summary::-webkit-details-marker { display: none; }
.nb-col-done summary .ti { font-size: 14px; transition: transform var(--nb-dur-fast) var(--nb-ease); }
.nb-col-done[open] summary .ti { transform: rotate(90deg); }
.nb-col-done ul { max-height: 220px; margin: 0; padding: 0 0 4px; overflow-y: auto; list-style: none; }
.nb-col-done li { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: var(--nb-radius-xs); font-size: var(--nb-text-sm); color: var(--nb-text-3); }
.nb-col-done li > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: line-through; }
.nb-col-done li > .ti { color: var(--nb-success-solid); font-size: 16px; }
.nb-col-done li .nb-btn { opacity: 0; }
.nb-col-done li:hover .nb-btn, .nb-col-done li .nb-btn:focus-visible { opacity: 1; }
.nb-col--ghost { background: transparent; border: 1.5px dashed var(--nb-border); min-height: 0; padding: 8px; }
.nb-col-new { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; border: 0; border-radius: var(--nb-radius-sm); background: transparent; color: var(--nb-text-2); font: inherit; font-weight: var(--nb-weight-medium); cursor: pointer; }
.nb-col-new:hover { background: var(--nb-surface-2); color: var(--nb-text); }
/* Tarjeta */
.nb-kcard {
position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; row-gap: 8px; align-items: start;
padding: 10px 8px 10px 10px; border: 1px solid var(--nb-border-subtle); border-radius: var(--nb-radius-sm);
background: var(--nb-surface); box-shadow: var(--nb-shadow-xs); cursor: grab; touch-action: pan-y;
transition: box-shadow var(--nb-dur-fast) var(--nb-ease), border-color var(--nb-dur-fast) var(--nb-ease), opacity var(--nb-dur) var(--nb-ease), transform var(--nb-dur) var(--nb-ease);
}
.nb-kcard:hover { border-color: var(--nb-border); box-shadow: var(--nb-shadow-sm); }
.nb-kcard.is-late { box-shadow: inset 3px 0 0 var(--nb-danger-solid), var(--nb-shadow-xs); }
.nb-kcard-check { margin-top: 1px; opacity: 0.55; }
.nb-kcard:hover .nb-kcard-check, .nb-kcard-check:focus-visible { opacity: 1; }
.nb-kcard-open { grid-column: 2; min-width: 0; padding: 0; border: 0; background: none; color: var(--nb-text); font: inherit; text-align: left; cursor: inherit; }
.nb-kcard-open:focus-visible { outline: 2px solid var(--nb-accent); outline-offset: 4px; border-radius: 4px; }
.nb-kcard-title { display: block; font-size: var(--nb-text-sm); font-weight: var(--nb-weight-medium); line-height: 1.35; overflow-wrap: anywhere; }
.nb-kcard-menu { grid-column: 3; margin: -4px -2px 0 0; opacity: 0; }
.nb-kcard:hover .nb-kcard-menu, .nb-kcard:focus-within .nb-kcard-menu, .nb-kcard-menu[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .nb-kcard-menu, .nb-kcard-check { opacity: 1; } }
.nb-kcard-tags { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.nb-kcard-meta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-left: 30px; }
.nb-kcard-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.nb-kcard.is-drag-source { opacity: 0.35; box-shadow: none; border-style: dashed; }
.nb-kcard--ghost { position: fixed; left: 0; top: 0; z-index: var(--nb-z-toast); pointer-events: none; box-shadow: var(--nb-shadow-lg); cursor: grabbing; }
.nb-kcard.is-completing { opacity: 0; transform: scale(0.96); }
html.is-dragging-card, html.is-dragging-card * { cursor: grabbing !important; user-select: none; }
.nb-board-jump { display: none; }
/* Lista */
.nb-pj-list { overflow: hidden; }
.nb-pj-table tbody tr[data-task] { cursor: pointer; }
.nb-pj-table .nb-list-group th { height: 40px; padding: 0 var(--nb-space-4); background: var(--nb-surface-2); border-bottom: 1px solid var(--nb-border-subtle); text-align: left; font-size: var(--nb-text-sm); font-weight: var(--nb-weight-bold); }
.nb-pj-table .nb-list-group .nb-col-dot { margin-right: 8px; }
.nb-pj-table .nb-tag + .nb-tag { margin-left: 4px; }
/* Panel de tarea */
.nb-layer.nb-task { display: flex; flex-direction: column; padding: 0; }
.nb-task-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 6px; padding: var(--nb-space-3) var(--nb-space-4) var(--nb-space-3) var(--nb-space-6); border-bottom: 1px solid var(--nb-border-subtle); background: var(--nb-surface); }
.nb-task-done.is-done { border-color: var(--nb-success-solid); background: var(--nb-success-bg); color: var(--nb-success-fg); }
.nb-task-timer-mini { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; color: var(--nb-danger-fg); font-family: var(--nb-font-mono); font-size: var(--nb-text-xs); }
.nb-task-timer-mini .ti { animation: nb-pulse 1.4s var(--nb-ease-in-out) infinite; }
.nb-task-body { flex: 1 1 auto; padding: var(--nb-space-5) var(--nb-space-6) var(--nb-space-10); overflow-y: auto; background: var(--nb-surface); }
.nb-task-crumb { display: flex; align-items: center; gap: 4px; margin: 0 0 var(--nb-space-2); color: var(--nb-text-3); font-size: var(--nb-text-xs); }
.nb-task-title { width: 100%; margin: 0 0 var(--nb-space-4); padding: 4px 6px; margin-left: -6px; border: 1px solid transparent; border-radius: var(--nb-radius-sm); background: transparent; color: var(--nb-text); font: inherit; font-size: var(--nb-text-xl); font-weight: var(--nb-weight-bold); line-height: 1.25; letter-spacing: var(--nb-tracking-tight); resize: none; overflow: hidden; }
.nb-task-title:hover { border-color: var(--nb-border-subtle); }
.nb-task-title:focus { border-color: var(--nb-accent); outline: 0; box-shadow: 0 0 0 3px var(--nb-accent-soft); }
.nb-task-props { display: grid; grid-template-columns: 130px minmax(0, 1fr); row-gap: 4px; margin: 0 0 var(--nb-space-2); }
.nb-task-prop { display: contents; }
.nb-task-prop dt { display: flex; align-items: center; gap: 8px; min-height: 36px; color: var(--nb-text-3); font-size: var(--nb-text-sm); }
.nb-task-prop dt .ti { font-size: 16px; }
.nb-task-prop dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; margin: 0; }
.nb-task-propbtn { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 32px; padding: 3px 8px; margin-left: -8px; border: 0; border-radius: var(--nb-radius-xs); background: transparent; color: var(--nb-text); font: inherit; font-size: var(--nb-text-sm); text-align: left; cursor: pointer; }
.nb-task-propbtn:hover, .nb-task-propbtn[aria-expanded="true"] { background: var(--nb-surface-2); }
.nb-task-propbtn > .ti-chevron-down { color: var(--nb-text-3); font-size: 14px; opacity: 0; }
.nb-task-propbtn:hover > .ti-chevron-down, .nb-task-propbtn:focus-visible > .ti-chevron-down { opacity: 1; }
.nb-task-propbtn .ti-building { color: var(--nb-text-3); }
.nb-pj-person-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; border-radius: var(--nb-radius-pill); background: var(--nb-surface-2); font-size: var(--nb-text-xs); }
.nb-task-popwrap { position: relative; }
.nb-pop { position: absolute; top: calc(100% + 4px); left: -8px; z-index: 5; min-width: 230px; max-height: 300px; overflow-y: auto; padding: 4px; border: 1px solid var(--nb-border); border-radius: var(--nb-radius-sm); background: var(--nb-surface); box-shadow: var(--nb-shadow-lg); }
.nb-pop--end { left: auto; right: 0; }
.nb-pop--form { display: flex; flex-direction: column; gap: 6px; width: 240px; padding: var(--nb-space-3); }
.nb-pop--form.is-invalid .nb-input { border-color: var(--nb-danger-solid); }
.nb-pop .nb-menu-item { width: 100%; }
.nb-pop .nb-menu-item[aria-selected="true"] { background: var(--nb-accent-soft); }
.nb-pop-check { margin-left: auto; color: var(--nb-accent-strong); opacity: 0; }
.nb-pop [aria-checked="true"] .nb-pop-check { opacity: 1; }
.nb-pop-help { margin: 4px 8px; }
.nb-task-dates { gap: 8px; }
.nb-task-dates [data-nb-datepicker] { width: 150px; }
.nb-task-dates .is-late .nb-input { border-color: var(--nb-danger-solid); color: var(--nb-danger-fg); }
.nb-task-time { min-width: 72px; font-variant-numeric: tabular-nums; font-weight: var(--nb-weight-medium); }
.nb-task-bill { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--nb-text-sm); cursor: pointer; }
.nb-task-section { padding: var(--nb-space-5) 0 0; margin-top: var(--nb-space-5); border-top: 1px solid var(--nb-border-subtle); }
.nb-task-h { margin: 0 0 var(--nb-space-3); font-size: var(--nb-text-base); font-weight: var(--nb-weight-bold); }
.nb-task-h-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-2); margin-bottom: var(--nb-space-2); }
.nb-task-h-row .nb-task-h { margin: 0; }
.nb-task-h-row > .nb-btn { margin-left: auto; }
.nb-task-lock { display: inline-flex; align-items: center; gap: 4px; }
.nb-task-section .nb-richtext-area[data-placeholder]:empty::before { content: attr(data-placeholder); color: var(--nb-text-3); }
/* Checklist */
.nb-checklist2 { margin: 0; padding: 0; list-style: none; }
.nb-chk-item { display: flex; align-items: center; gap: 8px; padding: 2px 4px 2px calc(4px + var(--lvl, 0) * 24px); border-radius: var(--nb-radius-xs); }
.nb-chk-item:hover { background: var(--nb-surface-2); }
.nb-chk-text { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 4px; border: 0; border-radius: 4px; background: transparent; color: var(--nb-text); font: inherit; font-size: var(--nb-text-sm); }
.nb-chk-text:focus { outline: 0; background: var(--nb-surface); box-shadow: 0 0 0 2px var(--nb-accent-soft); }
.nb-chk-item.is-done .nb-chk-text { color: var(--nb-text-3); text-decoration: line-through; }
.nb-chk-del { opacity: 0; }
.nb-chk-item:hover .nb-chk-del, .nb-chk-del:focus-visible { opacity: 1; }
.nb-checklist2-add { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-left: 4px; color: var(--nb-text-3); }
.nb-checklist2-add .nb-input { flex: 1 1 auto; border-style: dashed; background: transparent; }
/* Accesos */
.nb-access-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 var(--nb-space-2); padding: 0; list-style: none; }
.nb-access { padding: 10px 12px; border: 1px solid var(--nb-border-subtle); border-radius: var(--nb-radius-sm); background: var(--nb-surface-2); }
.nb-access-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nb-access-head > .ti { color: var(--nb-text-3); }
.nb-access-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--nb-text-xs); }
.nb-access-grid { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 2px 8px; margin: 6px 0 0; }
.nb-access-grid dt { color: var(--nb-text-3); font-size: var(--nb-text-xs); }
.nb-access-grid dd { margin: 0; min-width: 0; }
.nb-access-grid .nb-secret { display: flex; align-items: center; gap: 2px; min-width: 0; }
.nb-access-grid .nb-secret-value { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--nb-font-mono); font-size: var(--nb-text-sm); }
.nb-access-form { padding: var(--nb-space-4); border: 1px solid var(--nb-border); border-radius: var(--nb-radius-sm); }
/* Comentarios y actividad */
.nb-task-composer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: start; }
.nb-task-composer .nb-btn { grid-column: 2; justify-self: end; }
.nb-task-activity { display: flex; flex-direction: column; gap: 10px; margin: var(--nb-space-4) 0 0; padding: 0; list-style: none; }
.nb-act { display: flex; gap: 8px; align-items: flex-start; color: var(--nb-text-2); font-size: var(--nb-text-sm); }
.nb-act > .ti { margin-top: 2px; color: var(--nb-text-disabled); }
.nb-act p { margin: 0; }
.nb-act--comment { color: var(--nb-text); }
.nb-act--comment .nb-note-text { margin: 2px 0 0; padding: 8px 10px; border-radius: 0 var(--nb-radius-sm) var(--nb-radius-sm); background: var(--nb-surface-2); }
.nb-mention { color: var(--nb-accent-strong); font-weight: var(--nb-weight-medium); }
@media (max-width: 767.98px) {
.nb-pj-header .nb-page-actions { width: 100%; }
.nb-pj-header .nb-page-actions [data-pj-new-task] { margin-left: auto; }
.nb-pj-header .nb-btn-label { display: none; }
.nb-pj-filters .nb-search { flex: 1 1 100%; }
.nb-pj-hint { display: none; }
.nb-board-jump { display: flex; gap: 6px; margin: 0 calc(-1 * var(--nb-space-4)) var(--nb-space-2); padding: 0 var(--nb-space-4); overflow-x: auto; scrollbar-width: none; }
.nb-board-jump .nb-chip { flex: 0 0 auto; gap: 6px; }
.nb-board { --_colw: 84vw; margin: 0 calc(-1 * var(--nb-space-4)); padding: 4px var(--nb-space-4) var(--nb-space-5); scroll-snap-type: x mandatory; scroll-padding-inline: var(--nb-space-4); }
.nb-col { scroll-snap-align: start; max-height: none; }
.nb-layer.nb-task.is-end { width: 100vw; }
.nb-task-body { padding: var(--nb-space-4); }
.nb-task-head { padding-left: var(--nb-space-4); }
.nb-task-props { grid-template-columns: 104px minmax(0, 1fr); }
.nb-task-dates [data-nb-datepicker] { width: 100%; }
.nb-task-dates > .ti { display: none; }
.nb-pj-ident { flex-direction: column; align-items: stretch; }
.nb-pj-coverpick { flex-direction: row; flex-basis: auto; }
.nb-pj-coverpick .nb-pj-cover { width: 96px; font-size: 28px; }
.nb-pj-coverpanel { grid-template-columns: 1fr; }
.nb-pj-templates { grid-template-columns: 1fr; }
.nb-mytask { grid-template-columns: auto minmax(0, 1fr); }
.nb-mytask-end { grid-column: 2; justify-content: flex-start; }
}
.nb-task-propbtn [data-task-col] { display: inline-flex; align-items: center; gap: 8px; }
.nb-task-propbtn .nb-pj-pri { height: auto; padding: 0; font-size: var(--nb-text-sm); }
.nb-pop .nb-pj-pri { font-size: var(--nb-text-sm); }
.nb-pj-tone { background: var(--_c); }
.nb-avatar-stack > * + * { margin-left: -4px; }
[data-pj-view] button { display: inline-flex; align-items: center; gap: 6px; }
.nb-task-section .nb-richtext-area { min-height: 96px; }
@media (max-width: 767.98px) { .nb-task-props { grid-template-columns: 116px minmax(0, 1fr); } .nb-task-prop dt { font-size: var(--nb-text-xs); } }
|