/* Capa macOS: vibrancy, ventanas flotantes, controles nativos. Va la última. */
body { background: var(--canvas); letter-spacing: -.003em; }
h1 { letter-spacing: -.025em; font-weight: 700; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: none; box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--accent) 45%, transparent); }

/* Sidebar con vibrancy + semáforo de ventana */
.sidebar { background: var(--ink-900); -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px); border-right: .5px solid var(--border); }
.sidebar__brand { position: relative; padding: var(--space-5) var(--space-5) var(--space-3); }
.sidebar__group-label { text-transform: none; font-size: 11px; font-weight: 600; color: var(--text-faint); letter-spacing: .02em; }
.nav-item { padding: 6px 10px; border-radius: 8px; font-weight: 500; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.nav-item:active { transform: scale(.97); }
.nav-item.is-active { background: var(--accent); color: #fff; box-shadow: 0 1px 3px rgba(76,110,245,.45); }
.nav-item.is-active .nav-item__badge { background: rgba(255,255,255,.28); }
.sidebar__footer { border-top: .5px solid var(--border); }

/* Barra superior translúcida (toolbar) */
.topbar { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border-bottom: .5px solid var(--border); }
.icon-btn { border-radius: 8px; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--spring); }
.icon-btn:active { transform: scale(.9); }
.search-box { background: var(--ink-800); border: none; border-radius: 9px; transition: box-shadow var(--dur-fast) var(--ease); }
.search-box:hover { box-shadow: inset 0 0 0 .5px var(--border-strong); }

/* Entrada de página suave */
/* Solo opacidad + 6 px de subida: sin scale, que hacía "bailar" medio píxel
   a las tarjetas (texto y bordes redondeados) durante la animación. */
@keyframes mac-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page { animation: mac-in var(--dur-base) var(--ease) both; }
.is-refresh .page { animation: none; }
.page.no-anim { animation: none; }
.page-header { margin-bottom: var(--space-5); }

/* Tarjetas: inset-grouped, sin bordes duros */
.card, .stat-card, .contact-panel, .table-wrap, .kanban-col, .login-card {
  border: none !important; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); background: var(--surface); }
.stat-card { transition: transform var(--dur-base) var(--spring), box-shadow var(--dur-base) var(--ease); }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card), 0 8px 24px rgba(0,0,0,.08); }
.kanban-col { background: var(--surface-sunken); box-shadow: none; }
/* La tarjeta del pipeline lleva su propia franja de color (etapa), así que
   no comparte el box-shadow plano genérico de arriba: ver variable
   --stage-color, fijada por JS según la etapa del lead. */
.kanban-card {
  border: none !important; border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: var(--shadow-card), inset 4px 0 0 var(--stage-color, transparent);
  cursor: grab; transition: transform var(--dur-base) var(--spring), box-shadow var(--dur-base) var(--ease);
}
.kanban-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card), inset 4px 0 0 var(--stage-color, transparent), 0 8px 24px rgba(0,0,0,.08); }
.kanban-card:active { cursor: grabbing; transform: scale(1.02) rotate(-.6deg); }

/* Botones estilo AppKit */
.btn { border-radius: 8px; font-weight: 500; transition: transform var(--dur-fast) var(--spring), filter var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.btn:active { transform: scale(.96); }
.btn--primary { background: linear-gradient(180deg, var(--accent-strong), var(--accent)); color: #fff; border: none; box-shadow: 0 1px 2px rgba(76,110,245,.45), inset 0 .5px 0 rgba(255,255,255,.35); }
.btn--primary:hover { filter: brightness(1.07); }
.btn--secondary { background: var(--surface); border: none; box-shadow: 0 0 0 .5px var(--border-strong), 0 1px 1px rgba(0,0,0,.06); }
.btn--secondary:hover { background: var(--surface-sunken); }
.btn--danger { box-shadow: 0 1px 2px rgba(255,69,58,.4); }

/* Campos */
.input, .textarea, select.input, .field select, .field input, .field textarea {
  background: var(--surface); border: none; border-radius: 8px; box-shadow: 0 0 0 .5px var(--border-strong), inset 0 1px 1px rgba(0,0,0,.04);
  transition: box-shadow var(--dur-fast) var(--ease); }
.input:focus, .textarea:focus, .field input:focus, .field select:focus, .field textarea:focus {
  outline: none; box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 0 .5px var(--accent); }

/* Pestañas como control segmentado */
.tabs { display: inline-flex; gap: 2px; padding: 2px; background: var(--ink-800); border-radius: 9px; border-bottom: none !important; }
.tab { border-radius: 7px; border: none !important; padding: 5px 14px; font-weight: 500; transition: background var(--dur-fast) var(--ease); }
.tab.is-active, .tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.15), 0 0 0 .5px var(--border); }

/* Tablas limpias */
.data-table th { background: transparent; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); border-bottom: .5px solid var(--border); }
.data-table td { border-bottom: .5px solid var(--border); }
.data-table tbody tr { transition: background var(--dur-fast) var(--ease); }
.data-table tbody tr:hover { background: var(--accent-soft); }

.badge { border-radius: 6px; font-weight: 600; }
.avatar { box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.12); }

/* Ventanas modales y paneles flotantes */
.modal-backdrop { background: rgba(0,0,0,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: mac-fade var(--dur-base) var(--ease); }
.modal { border: none; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-float); animation: mac-pop 320ms var(--spring); }
.modal__head, .modal__foot { border-color: var(--border); }
.global-search__panel, .dropdown { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
  border: none; border-radius: 12px; box-shadow: var(--shadow-float); animation: mac-pop 260ms var(--spring); }
.dropdown__item, .global-search__item { border-radius: 6px; }
.dropdown__item:hover, .global-search__item:hover, .global-search__item.is-active { background: var(--accent); color: #fff; }
@keyframes mac-fade { from { opacity: 0; } }
@keyframes mac-pop { from { opacity: 0; transform: scale(.94) translateY(6px); } }

/* Toasts como notificaciones de macOS */
.toast { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  border: none; border-radius: 14px; box-shadow: var(--shadow-float); color: var(--text); animation: mac-pop 380ms var(--spring); }

/* Login */
.login-screen { background: radial-gradient(1200px 600px at 20% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
  radial-gradient(900px 500px at 90% 100%, rgba(76,110,245,.12), transparent 60%), var(--canvas); }
.login-card { background: var(--glass); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); box-shadow: var(--shadow-float); }

/* Scrollbars finas tipo macOS */
::-webkit-scrollbar-thumb { background: rgba(128,128,128,.4); border: 3px solid transparent; background-clip: content-box; }
@media (max-width: 980px) { .sidebar { box-shadow: var(--shadow-float); } }

/* Extras CRM */
.data-table th.is-sortable { cursor: pointer; user-select: none; }
.data-table th.is-sortable:hover { color: var(--text); }
.data-table th[data-dir="asc"]::after { content: " ↑"; color: var(--accent-soft-text); }
.data-table th[data-dir="desc"]::after { content: " ↓"; color: var(--accent-soft-text); }
.focus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.focus-item { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); cursor: pointer; transition: transform var(--dur-base) var(--spring); }
.focus-item:hover { transform: translateY(-2px); }
.focus-item b { font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.focus-item span { color: var(--text-muted); font-size: var(--text-sm); }
.focus-item.is-hot b { color: var(--red-soft-text); }
.contact-quick { display: inline-flex; gap: 6px; margin-left: 8px; }
.contact-quick a { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-soft-text); }
.kbd { font: 600 11px var(--font-sans); padding: 1px 7px; border-radius: 5px; background: var(--surface-sunken); box-shadow: 0 0 0 .5px var(--border-strong); }
.shortcuts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: center; }
.net-banner { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 90; padding: 8px 16px; border-radius: 999px; background: var(--red-soft); color: var(--red-soft-text); box-shadow: var(--shadow-float); font-size: var(--text-sm); }

/* Gráficos, notas, puntuación y plantillas */
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.chart-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4) var(--space-5); }
.chart-card h4 { font-size: var(--text-sm); color: var(--text-muted); font-weight: 600; margin-bottom: var(--space-3); }
.donut { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.donut ul { display: grid; gap: 4px; font-size: var(--text-sm); flex: 1; min-width: 120px; }
.donut li { display: flex; align-items: center; gap: 8px; } .donut li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.donut li i { width: 9px; height: 9px; border-radius: 3px; }
.donut__n { fill: var(--text); font: 700 26px var(--font-sans); } .donut__l { fill: var(--text-muted); font: 12px var(--font-sans); }
.hbars { display: grid; gap: 10px; } .hbar { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 10px; font-size: var(--text-sm); }
.hbar > div { height: 8px; background: var(--surface-sunken); border-radius: 99px; overflow: hidden; }
.hbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); transition: width .6s var(--ease); }
.hbar b { font-variant-numeric: tabular-nums; }
.area { width: 100%; height: auto; } .axis { fill: var(--text-faint); font: 10px var(--font-sans); }
.chart-card h4 small { display: block; font-weight: 400; font-size: 11px; color: var(--text-faint); margin-top: 1px; }
.val { fill: var(--text); font: 600 10px var(--font-sans); font-variant-numeric: tabular-nums; }
.gridline { stroke: var(--border); stroke-width: .6; stroke-dasharray: 3 3; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: var(--space-2); font-size: 11px; color: var(--text-muted); }
.legend li { display: flex; align-items: center; gap: 6px; } .legend i { width: 9px; height: 9px; border-radius: 3px; }
.heat--empty { fill: var(--surface-sunken); fill-opacity: 1; }
.gauge { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gauge__track { stroke: var(--surface-sunken); }
.gauge__label { font-size: var(--text-xs); color: var(--text-muted); text-align: center; }
.funnel { display: grid; gap: 8px; }
.funnel__row { display: grid; grid-template-columns: 1fr 150px; gap: 12px; align-items: center; }
.funnel__bar { height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: var(--text-sm); margin: 0 auto; min-width: 34px; transition: width .6s var(--ease); }
.funnel__txt { display: flex; flex-direction: column; font-size: var(--text-sm); min-width: 0; }
.funnel__txt small { color: var(--text-faint); font-size: 11px; }
@media (max-width: 560px) { .funnel__row { grid-template-columns: 1fr 110px; } }
.spark { width: 100%; height: 28px; display: block; margin-top: 6px; }

/* Página de estadísticas */
.stats-section { margin-top: var(--space-7); }
.stats-section__head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.stats-section__head h2 { font-size: var(--text-md); letter-spacing: -.01em; }
.stats-section__head span { font-size: var(--text-xs); color: var(--text-faint); }
.stats-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); }
.stats-kpis .stat-card__delta { display: flex; gap: 4px; align-items: center; }
.chart-card--wide { grid-column: span 2; }
.chart-card--full { grid-column: 1 / -1; }
.stats-section .chart-grid { grid-auto-flow: dense; margin-bottom: 0; }
@media (max-width: 760px) { .chart-card--wide { grid-column: auto; } }
.chart-card .data-table { margin: 0; }
.cell-bar { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.cell-bar > div { flex: 1; height: 6px; background: var(--surface-sunken); border-radius: 99px; overflow: hidden; }
.cell-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.lead-score { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; }
.lead-score--hi { background: var(--green-soft); color: var(--green); } .lead-score--mid { background: var(--amber-soft); color: var(--amber-soft-text); } .lead-score--lo { background: var(--surface-sunken); color: var(--text-muted); }
.tpl { padding: 12px 14px; border-radius: 10px; cursor: pointer; margin-bottom: 8px; background: var(--surface-sunken); transition: background var(--dur-fast) var(--ease); }
.tpl:hover { background: var(--accent-soft); } .tpl p { margin: 4px 0; color: var(--text-muted); font-size: var(--text-sm); } .tpl span { font-size: 11px; color: var(--accent-soft-text); }