/* ============================================================================
   TEMA not404 — mi_pyme_erp
   Capa de tema sobre el desk de Frappe/ERPNext v15. Solo CSS: no toca DOM ni JS.
   Tokens extraídos de la referencia "not404 CRM.html".
   ========================================================================== */

/* ---- Fuentes (extraídas del bundle de referencia, latin) ---- */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/mi_pyme_erp/fonts/plus-jakarta-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/assets/mi_pyme_erp/fonts/jetbrains-mono-latin.woff2") format("woff2");
}

/* ---- Tokens ---- */
:root,
:root[data-theme="light"],
:root[data-theme-mode="light"] {
  --n4-bg: #f1f1ee;
  --n4-card: #ffffff;
  --n4-ink: #060606;
  --n4-ink-2: #4a4a4a;
  --n4-ink-3: #5f5f5f;
  --n4-primary: #0510ac;
  --n4-primary-hover: #3847ff;
  --n4-blue-mid: #2233c4;
  --n4-mint: #eefff8;
  --n4-mint-dot: #7df0c0;
  --n4-on-primary: #fbfbf9;
  --n4-border: #e8e8e8;
  --n4-radius: 18px;
  --n4-radius-inner: 14px;
  --n4-pill: 999px;
  --n4-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --n4-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* --- remapeo de variables de Frappe --- */
  --bg-color: var(--n4-bg);
  --fg-color: var(--n4-card);
  --card-bg: var(--n4-card);
  --navbar-bg: var(--n4-bg);
  --awesomebar-focus-bg: var(--n4-card);
  --modal-bg: var(--n4-card);
  --subtle-fg: #f7f7f4;
  --subtle-accent: var(--n4-mint);
  --text-color: var(--n4-ink);
  --heading-color: var(--n4-ink);
  --text-muted: var(--n4-ink-3);
  --text-light: var(--n4-ink-3);
  --border-color: var(--n4-border);
  --dark-border-color: #dcdcd8;
  --primary: var(--n4-primary);
  --primary-color: var(--n4-primary);
  --btn-primary: var(--n4-primary);
  --btn-default-bg: var(--n4-card);
  --btn-default-hover-bg: var(--n4-mint);
  --sidebar-select-color: var(--n4-mint);
  --shadow-base: 0 1px 2px rgba(6, 6, 6, 0.04), 0 8px 24px -14px rgba(5, 16, 172, 0.10);
  --checkbox-color: var(--n4-primary);
  --checkbox-focus-shadow: 0 0 0 2px var(--n4-mint);
  --input-focus-shadow: 0 0 0 2px rgba(56, 71, 255, 0.18);
  --highlight-color: var(--n4-mint);
  --scrollbar-thumb-color: #dcdcd8;
  --scrollbar-track-color: transparent;
}

/* ---- Base ---- */
body {
  font-family: var(--n4-font);
  background-color: var(--n4-bg);
  color: var(--n4-ink);
  letter-spacing: 0.01em;
}
a { color: var(--n4-primary); }
a:hover { color: var(--n4-primary-hover); }
::selection { background: var(--n4-mint); color: var(--n4-primary); }
:focus-visible { outline: 2px solid var(--n4-primary-hover); outline-offset: 2px; border-radius: 4px; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb {
  background: #dcdcd8;
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 6px;
}

/* ---- Navbar superior ---- */
.navbar {
  background: var(--n4-bg) !important;
  border-bottom: 0;
  box-shadow: none;
}
.navbar .navbar-brand { color: var(--n4-primary); font-weight: 700; }
#navbar-search,
.navbar .search-bar input,
.navbar .form-control {
  background: var(--n4-card);
  border: 1px solid var(--n4-border);
  border-radius: var(--n4-pill);
}
.navbar .btn-reset.nav-link,
.navbar .nav-link { border-radius: var(--n4-pill); }
.navbar .avatar-frame,
.avatar-frame { border-radius: var(--n4-pill); }

/* ---- Sidebar de workspaces ---- */
.body-sidebar,
.layout-side-section .sidebar-menu,
.desk-sidebar {
  background: transparent;
}
.sidebar-item-container .item-anchor,
.desk-sidebar .desk-sidebar-item,
.standard-sidebar-item {
  border-radius: var(--n4-pill) !important;
  font-weight: 500;
}
.sidebar-item-container .item-anchor:hover,
.standard-sidebar-item:hover {
  background: var(--n4-card);
}
.sidebar-item-container.selected > .desk-sidebar-item,
.standard-sidebar-item.selected {
  background: var(--n4-primary) !important;
  color: var(--n4-on-primary) !important;
}
.standard-sidebar-item.selected a,
.standard-sidebar-item.selected .sidebar-item-label,
.sidebar-item-container.selected .sidebar-item-label { color: var(--n4-on-primary) !important; }

/* ---- Encabezado de página ---- */
.page-head {
  background: var(--n4-bg);
  border-bottom: 0;
}
.page-title .title-text {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.page-head .indicator-pill,
.indicator-pill {
  border-radius: var(--n4-pill);
  font-family: var(--n4-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.indicator-pill.green { background: var(--n4-mint); color: #0c7a4d; }
.indicator-pill.blue { background: #dde2ff; color: var(--n4-primary); }

/* ---- Botones ---- */
.btn {
  border-radius: var(--n4-pill);
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: none;
}
.btn-primary,
.btn-primary:active,
.btn-primary:focus {
  background-color: var(--n4-primary) !important;
  border-color: var(--n4-primary) !important;
  color: var(--n4-on-primary) !important;
}
.btn-primary:hover {
  background-color: var(--n4-primary-hover) !important;
  border-color: var(--n4-primary-hover) !important;
}
.btn-default,
.btn-secondary {
  background: var(--n4-card);
  border: 1px solid var(--n4-border);
  color: var(--n4-ink-2);
}
.btn-default:hover,
.btn-secondary:hover {
  background: var(--n4-mint);
  border-color: var(--n4-primary-hover);
  color: var(--n4-primary);
}

/* ---- Tarjetas de workspace (widgets) ---- */
.widget {
  background: var(--n4-card);
  border: 1px solid var(--n4-border);
  border-radius: var(--n4-radius);
  box-shadow: none;
}
.widget:hover { box-shadow: var(--shadow-base); }
.widget.number-widget-box .widget-content .number {
  font-family: var(--n4-mono);
  font-weight: 700;
  font-size: 22px;
  color: var(--n4-ink);
}
.widget.number-widget-box .widget-head .widget-label .widget-title {
  font-family: var(--n4-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--n4-ink-3);
}
.widget.shortcut-widget-box {
  border-radius: var(--n4-radius-inner);
}
.widget.shortcut-widget-box:hover {
  border-color: var(--n4-primary-hover);
  background: var(--n4-mint);
}
.widget .widget-head .widget-title { font-weight: 700; }
.codex-editor .ce-header, .wspace-title { font-weight: 800; letter-spacing: -0.02em; }

/* ---- List View ---- */
.frappe-list .list-row-head,
.list-row-head {
  background: var(--subtle-fg);
  border-bottom: 1px solid var(--n4-border);
  font-family: var(--n4-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n4-ink-3);
}
.list-row-container {
  background: var(--n4-card);
  border-bottom: 1px solid #f0f0ec;
}
.list-row-container:first-of-type { border-radius: var(--n4-radius-inner) var(--n4-radius-inner) 0 0; }
.list-row-container:hover { background: #fbfbf8; }
.frappe-list { background: transparent; }
.filter-selector .btn, .filter-button, .list-filter-button { border-radius: var(--n4-pill); }
.filter-pill { border-radius: var(--n4-pill); }
.list-paging-area { background: transparent; }

/* ---- Formularios ---- */
.form-page,
.std-form-layout > .form-layout .form-page {
  background: var(--n4-card);
  border: 1px solid var(--n4-border);
  border-radius: var(--n4-radius);
}
.form-section .section-head,
.form-dashboard-section .section-head {
  font-weight: 700;
  color: var(--n4-ink);
}
.form-tabs-list {
  background: var(--n4-card);
  border-radius: var(--n4-pill);
  padding: 4px;
  border-bottom: 0 !important;
}
.form-tabs .nav-link {
  border-radius: var(--n4-pill) !important;
  border: 0 !important;
  font-weight: 600;
  color: var(--n4-ink-2);
}
.form-tabs .nav-link.active {
  background: var(--n4-primary) !important;
  color: var(--n4-on-primary) !important;
}
.frappe-control input.form-control,
.frappe-control select.form-control,
.frappe-control textarea.form-control,
.form-control {
  background: var(--n4-card);
  border: 1px solid var(--n4-border);
  border-radius: 10px;
  color: var(--n4-ink);
  font-family: var(--n4-font);
}
.form-control:focus {
  border-color: var(--n4-primary-hover);
  box-shadow: var(--input-focus-shadow);
}
.control-label {
  color: var(--n4-ink-3);
  font-size: 11.5px;
  font-weight: 600;
}
.like-disabled-input {
  background: #f7f7f4;
  border-radius: 10px;
}
.comment-box .comment-input-container .ql-editor { border-radius: var(--n4-radius-inner); }

/* ---- Grid de ítems (tabla hija en forms) ---- */
.form-grid {
  border: 1px solid var(--n4-border);
  border-radius: var(--n4-radius-inner);
  overflow: hidden;
}
.form-grid .grid-heading-row {
  background: #f7f7f4;
  font-family: var(--n4-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--n4-ink-3);
}
.grid-row:hover { background: #fbfbf8; }

/* ---- Modales y diálogos ---- */
.modal .modal-content {
  border-radius: 20px;
  border: 1px solid var(--n4-border);
  background: var(--n4-card);
}
.modal .modal-header { border-bottom: 1px solid var(--n4-border); }
.modal .modal-title { font-weight: 700; }

/* ---- Reportes (datatable) ---- */
.datatable .dt-header .dt-cell,
.dt-header .dt-cell__content {
  background: #f7f7f4;
  font-family: var(--n4-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--n4-ink-3);
}
.datatable { border: 1px solid var(--n4-border); border-radius: var(--n4-radius-inner); }
.dt-cell { border-color: #f0f0ec !important; }
.dt-row:hover .dt-cell { background: #fbfbf8; }
.report-summary { background: var(--n4-card); border-radius: var(--n4-radius); }

/* ---- Awesomplete (buscadores/dropdowns) ---- */
.awesomplete > ul {
  border-radius: var(--n4-radius-inner);
  border: 1px solid var(--n4-border);
  box-shadow: var(--shadow-base);
}
.awesomplete > ul > li:hover,
.awesomplete > ul > li[aria-selected="true"] {
  background: var(--n4-mint);
  color: var(--n4-primary);
}

/* ---- Misceláneas ---- */
.frappe-card, .page-card {
  background: var(--n4-card);
  border: 1px solid var(--n4-border);
  border-radius: var(--n4-radius);
  box-shadow: none;
}
.msgprint, .modal-message { border-radius: var(--n4-radius-inner); }
.alert { border-radius: var(--n4-radius-inner); }
.progress { height: 5px; border-radius: 3px; background: var(--n4-bg); }
.progress-bar { background-color: var(--n4-primary); border-radius: 3px; }
.badge, .tag, .filter-tag { border-radius: var(--n4-pill); }
.text-muted { color: var(--n4-ink-3) !important; }
.comment-box, .timeline-item .timeline-content { border-radius: var(--n4-radius-inner); }

/* números tabulares donde importan */
.list-row .text-right,
.dt-cell--align-right .dt-cell__content,
.widget.number-widget-box .number,
.grid-static-col.text-right {
  font-variant-numeric: tabular-nums;
}

/* ============================== FASE 1: SHELL ============================== */
/* (bloque .n4-tabs removido: su JS inyector fue retirado — sin consumidores) */

/* ---- Listas: contenedor tarjeta ---- */
.frappe-list .result {
  background: var(--n4-card);
  border: 1px solid var(--n4-border);
  border-radius: var(--n4-radius);
  overflow: hidden;
}

/* ---- Login azul (n4-login) ---- */
body[data-path="login"] { background: #0510ac !important; }
body[data-path="login"] .page-card,
body[data-path="login"] .for-login {
  background: #ffffff; border-radius: 20px; border: 0;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.35);
}
body[data-path="login"] .page-card-head h4,
body[data-path="login"] h4 { font-weight: 800; color: #060606; }
body[data-path="login"] .btn-primary { border-radius: 999px; }
body[data-path="login"] .form-control { border-radius: 10px; }
body[data-path="login"] .web-footer, body[data-path="login"] .navbar { display: none; }

/* ================= FASE 1.1: FORMULARIOS PROFUNDOS (vista documento) ================= */
/* fondo y contenedor */
.layout-main-section-wrapper { background: var(--n4-bg); }
.layout-main-section.frappe-card,
.layout-main-section {
  background: var(--n4-card);
  border: 1px solid var(--n4-border);
  border-radius: var(--n4-radius);
  box-shadow: none;
}
/* encabezado del doc: título + estado */
.page-head .page-title .indicator-pill { margin-left: 8px; }
.title-area .title-text { font-size: 19px; }
/* secciones del form: separadores limpios + títulos fuertes */
.form-section, .form-dashboard-section { border-color: #f0f0ec; }
.form-section .section-head, .form-dashboard-section .section-head {
  font-family: var(--n4-mono);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--n4-ink-3);
  font-weight: 600;
}
.section-head.collapsible:hover { color: var(--n4-primary); }
/* labels de campos en mono uppercase (como la referencia) */
.frappe-control .control-label {
  font-family: var(--n4-mono);
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--n4-ink-3);
}
/* inputs consistentes */
.frappe-control .control-input-wrapper .control-input .link-field,
.frappe-control input, .frappe-control select, .frappe-control textarea {
  border-radius: 10px;
}
.frappe-control .like-disabled-input { border-radius: 10px; background: #f7f7f4; }
/* sidebar del formulario (asignado/adjuntos/etiquetas) */
.layout-side-section .form-sidebar { padding-top: 4px; }
.form-sidebar .sidebar-menu, .form-sidebar .form-assignments,
.form-sidebar .form-attachments, .form-sidebar .form-tag-row,
.form-sidebar .form-shared, .form-sidebar .followed-by-section {
  background: var(--n4-card);
  border: 1px solid var(--n4-border);
  border-radius: var(--n4-radius-inner);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.form-sidebar .sidebar-label, .form-sidebar .form-sidebar-items .modified-by,
.form-sidebar .h6 {
  font-family: var(--n4-mono);
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--n4-ink-3);
}
/* grilla de ítems */
.form-grid { border-radius: var(--n4-radius-inner); }
.form-grid .grid-heading-row { border-radius: var(--n4-radius-inner) var(--n4-radius-inner) 0 0; }
.grid-add-row, .grid-footer .grid-add-row { color: var(--n4-primary); font-weight: 600; }
.grid-row .btn-open-row { border-radius: 999px; }
/* timeline / comentarios como burbujas */
.new-timeline .timeline-item .timeline-content {
  background: var(--n4-card);
  border: 1px solid var(--n4-border);
  border-radius: var(--n4-radius-inner);
  box-shadow: none;
}
.new-timeline::before { border-color: #e4ded4; }
.timeline-badge { background: var(--n4-bg); }
.comment-box .comment-input-header { background: var(--n4-mint); border-radius: var(--n4-radius-inner) var(--n4-radius-inner) 0 0; }
.comment-box { border: 1px solid var(--n4-border); border-radius: var(--n4-radius-inner); }
/* botonera principal */
.page-actions .btn-primary { padding: 8px 18px; }
.standard-actions .btn { border-radius: 999px; }
.menu-btn-group .btn, .page-icon-group .btn { border-radius: 999px; }
/* breadcrumbs */
#navbar-breadcrumbs a { color: var(--n4-ink-3); font-size: 12px; }
#navbar-breadcrumbs a:hover { color: var(--n4-primary); }
/* selects/awesomplete dentro del form */
.form-control:focus, .awesomplete input:focus { border-color: var(--n4-primary-hover); }
/* footer del form */
.form-footer { background: transparent; }

/* ---- boton de regreso a la app n4 (bridge) ---- */
.n4-back {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 28px; padding: 0 10px; margin-left: 10px;
  border-radius: var(--n4-pill); background: var(--n4-primary);
  color: var(--n4-on-primary) !important; font-family: var(--n4-mono);
  font-size: 12px; font-weight: 700; text-decoration: none !important;
}
.n4-back:hover { background: var(--n4-primary-hover); }

/* ============== FASE 1.2: PULIDO NAVBAR + TABS + TIPOGRAFIA DE ETIQUETAS ============== */
/* navbar: un solo logo (n4). El logo E de ERPNext se oculta para no duplicar marca */
.navbar-brand .app-logo, .navbar-brand img { display: none; }
.navbar .navbar-brand { padding: 0; margin-right: 2px; }
.n4-back { margin-left: 0; margin-right: 10px; }
#navbar-breadcrumbs { margin-left: 2px; }

/* tabs del formulario: pastilla contenedora que abraza a las tabs (sin recortes) */
.form-tabs-list {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  background: var(--n4-card);
  border: 1px solid var(--n4-border);
  border-radius: var(--n4-pill);
  padding: 4px;
  gap: 2px;
  overflow-x: auto;
}
.form-tabs .nav-item { margin: 0; }
.form-tabs .nav-link {
  padding: 7px 16px !important;
  line-height: 1.25;
  white-space: nowrap;
}

/* tipografia de etiquetas: Plus Jakarta seminegrita (feedback: mono solo para NUMEROS) */
.frappe-control .control-label,
.form-section .section-head,
.form-dashboard-section .section-head,
.frappe-list .list-row-head,
.list-row-head,
.form-grid .grid-heading-row,
.datatable .dt-header .dt-cell,
.dt-header .dt-cell__content,
.widget.number-widget-box .widget-head .widget-label .widget-title,
.form-sidebar .sidebar-label,
.form-sidebar .h6,
.indicator-pill {
  font-family: var(--n4-font);
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ============== FASE 1.3: logo del motor fuera + tabs mas largas ============== */
/* el brand de ERPNext (logo E) se oculta por completo: la marca es el boton n4 */
.navbar .navbar-brand { display: none !important; }
.n4-back { margin-right: 12px; }

/* tabs: mas aire horizontal y pill perfecta (pedido: "un poquito mas largas") */
.form-tabs .nav-link {
  padding: 8px 22px !important;
  border-radius: 999px !important;
  border: 0 !important;
  font-weight: 600;
  font-size: 13px;
}
.form-tabs .nav-link.active {
  background: var(--n4-primary) !important;
  color: var(--n4-on-primary) !important;
  box-shadow: none !important;
}
.form-tabs .nav-link:not(.active):hover { background: var(--n4-bg); }

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║ FASE 2A — PARIDAD TOTAL DEL DESK (12 superficies)                        ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* 2A-1 · Dropdowns y menús (usuario, notificaciones, awesomplete, menús de página) */
.dropdown-menu {
  border: 1px solid var(--n4-border);
  border-radius: var(--n4-radius-inner);
  box-shadow: 0 18px 40px -18px rgba(6, 6, 6, 0.22);
  padding: 6px;
  background: var(--n4-card);
}
.dropdown-menu .dropdown-item {
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 13px;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: var(--n4-mint);
  color: var(--n4-primary);
}
.dropdown-divider { border-color: #f0f0ec; }

/* 2A-2 · Diálogos completos */
.modal .modal-header { padding: 16px 20px 12px; }
.modal .modal-body { padding: 16px 20px; }
.modal .modal-footer {
  border-top: 1px solid #f0f0ec;
  padding: 12px 20px;
  gap: 8px;
}
.modal .modal-footer .btn { padding: 8px 18px; }
.modal .modal-header .modal-actions .btn-modal-close { border-radius: 999px; }
.msgprint-dialog .modal-body { font-size: 13.5px; }

/* 2A-3 · Toasts / alerts flotantes */
.alert.desk-alert, .desk-alert {
  background: var(--n4-card);
  border: 1px solid var(--n4-border);
  border-radius: var(--n4-radius-inner);
  box-shadow: 0 18px 40px -18px rgba(6, 6, 6, 0.28);
}
.desk-alert .alert-message { font-size: 13px; }
.desk-alert.green, .desk-alert.success { background: var(--n4-mint); border-color: #d5eee2; }

/* 2A-4 · List view completa */
.filter-section .filter-selector .btn,
.tag-filters-area .btn,
.sort-selector .btn { border-radius: var(--n4-pill); }
.filter-popover, .filter-box {
  border: 1px solid var(--n4-border);
  border-radius: var(--n4-radius-inner);
  background: var(--n4-card);
}
.list-sidebar .sidebar-section, .list-sidebar .list-tags {
  background: var(--n4-card);
  border: 1px solid var(--n4-border);
  border-radius: var(--n4-radius-inner);
  padding: 10px 12px;
  margin-bottom: 10px;
}
/* barra de selección masiva estilo n4 (oscura, píldora) */
.bulk-actions-bar, .list-row-activity .bulk-actions,
.frappe-list .bulk-actions-bar {
  background: var(--n4-ink);
  color: #fff;
  border-radius: var(--n4-pill);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5);
}
.bulk-actions-bar .btn { border-radius: var(--n4-pill); }
.list-paging-area .btn-group .btn { border-radius: var(--n4-pill); }

/* 2A-5 · Editor de fila de grilla (fila expandida) */
.grid-row-open {
  background: var(--n4-card);
  border: 1px solid var(--n4-border);
  border-radius: var(--n4-radius-inner);
  box-shadow: 0 12px 30px -18px rgba(6, 6, 6, 0.2);
}
.grid-form-heading, .grid-footer-toolbar {
  background: #f7f7f4;
  border-radius: var(--n4-radius-inner) var(--n4-radius-inner) 0 0;
}
.grid-form-heading .btn, .grid-footer-toolbar .btn,
.grid-shortcuts .btn, .grid-delete-row .btn { border-radius: var(--n4-pill); }
.grid-row-open .form-area { padding: 12px; }

/* 2A-6 · Reportes: toolbar + totales */
.query-report .page-form, .report-view .page-form {
  background: var(--n4-card);
  border: 1px solid var(--n4-border);
  border-radius: var(--n4-radius);
  padding: 8px 12px;
}
.query-report .page-form .form-control { border-radius: 999px; }
.dt-row--totals .dt-cell, .dt-row-totalRow .dt-cell__content {
  background: var(--n4-mint) !important;
  font-weight: 700;
}
.chart-wrapper { background: var(--n4-card); border-radius: var(--n4-radius); }

/* 2A-7 · Vista árbol (plan de cuentas, grupos) */
.tree { background: transparent; }
.tree-node .tree-label {
  border-radius: var(--n4-pill);
  padding: 4px 10px;
}
.tree-node .tree-label:hover { background: var(--n4-card); }
.tree-node.opened > .tree-label.active,
.tree-link.active .tree-label {
  background: var(--n4-primary);
  color: var(--n4-on-primary);
}
.tree-children { border-left: 1px solid #e4ded4; }

/* 2A-8 · Buscador global (Ctrl+G) */
.search-dialog .modal-content { border-radius: 20px; }
.search-dialog .search-input { border-radius: 999px; }
.search-dialog .list-item, .search-dialog .search-result {
  border-radius: 10px;
  padding: 9px 12px;
}
.search-dialog .search-result:hover, .search-dialog .list-item:hover {
  background: var(--n4-mint);
}

/* 2A-9 · Print preview */
.print-preview-wrapper { background: var(--n4-bg); }
.print-preview {
  background: #fff;
  border: 1px solid var(--n4-border);
  border-radius: var(--n4-radius-inner);
  box-shadow: 0 18px 40px -22px rgba(6, 6, 6, 0.25);
}
.print-toolbar { background: var(--n4-bg); border-bottom: 0; }

/* 2A-10 · Uploader y adjuntos */
.file-uploader .file-upload-area, .file-uploader .dropzone {
  border: 2px dashed var(--n4-border);
  border-radius: var(--n4-radius-inner);
  background: var(--n4-card);
}
.file-uploader .file-upload-area:hover { border-color: var(--n4-primary-hover); background: var(--n4-mint); }
.file-uploader .file-row { border-radius: 10px; }
.attachment-row, .attachments .attachment-row { border-radius: 10px; }

/* 2A-11 · Página de error / estados del sistema */
.page-card-container .page-card, .message-page .message-container {
  background: var(--n4-card);
  border: 1px solid var(--n4-border);
  border-radius: var(--n4-radius);
}

/* 2A-12 · Unificación tipográfica final: labels en PJS (mono SOLO números/códigos) */
.badge, .indicator-pill, .filter-pill, .tag-row .tag,
.frappe-timestamp, .sidebar-label {
  font-family: var(--n4-font);
  font-weight: 600;
}
.navbar .tag, .page-head .tag { font-family: var(--n4-font); }

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║ FASE 2B — RESPONSIVE DEL DESK                                            ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 991px) {
  #navbar-breadcrumbs { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-head .page-actions { flex-wrap: wrap; gap: 6px; }
  .page-head .standard-actions { overflow-x: auto; }
  .layout-main-section { border-radius: var(--n4-radius-inner); }
  .form-column { padding: 0 8px; }
  .form-page { padding: 4px; }
  .list-row, .list-row-container .level { min-height: 42px; }
  .form-tabs-list { max-width: calc(100vw - 24px); }
}
@media (max-width: 560px) {
  .page-title .title-text { font-size: 17px; }
  .widget-group .widget { grid-column: span 12 !important; }
  .modal-dialog { margin: 0; max-width: 100vw; min-height: 100vh; display: flex; align-items: flex-end; }
  .modal-dialog .modal-content { border-radius: 20px 20px 0 0; width: 100vw; max-height: 92vh; display: flex; flex-direction: column; }
  .modal-dialog .modal-content .modal-body { overflow-y: auto; } /* header y footer quedan fijos */
  .form-grid { overflow-x: auto; }
  .page-head { position: sticky; top: 0; z-index: 10; }
  .btn { min-height: 38px; }
}

/* ---- n4 split sign-in: presentational only; native authentication stays intact ---- */
body[data-path="login"].n4-login-ready {
  background: #ffffff !important;
  font-family: var(--n4-font);
}
body[data-path="login"].n4-login-ready .page-content-wrapper { min-height: 100vh; }
body[data-path="login"].n4-login-ready main.container {
  width: 100%; max-width: none; margin: 0 !important; padding: 0;
}
body[data-path="login"].n4-login-ready .page-header-wrapper,
body[data-path="login"].n4-login-ready .page-breadcrumbs { display: none; }
body[data-path="login"] .n4-login-layout {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  min-height: 100vh; margin: 0;
}
body[data-path="login"] .n4-login-brand {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  min-height: 100vh; padding: 46px clamp(32px, 5vw, 88px) 33px;
  color: #ffffff; background: #0510ac;
}
body[data-path="login"] .n4-login-brand::before {
  content: ""; position: absolute; top: -220px; right: -280px;
  width: 570px; height: 570px; border: 1px solid #8d9cff25;
  border-radius: 50%; box-shadow: 0 0 0 80px #8d9cff08, 0 0 0 160px #8d9cff04;
  pointer-events: none;
}
body[data-path="login"] .n4-login-wordmark {
  display: flex; gap: 17px; align-items: center; position: relative; z-index: 1;
}
body[data-path="login"] .n4-login-wordmark > span:first-child {
  font-family: var(--n4-mono); font-size: 42px; font-weight: 700;
  line-height: 1; letter-spacing: -5px;
}
body[data-path="login"] .n4-login-wordmark > span:last-child {
  font-size: 9px; font-weight: 600; letter-spacing: .14em; color: #b9c3ff;
  padding-left: 18px; border-left: 1px solid #7685e870;
}
body[data-path="login"] .n4-login-story { margin-top: auto; padding-top: 68px; position: relative; z-index: 1; }
body[data-path="login"] .n4-login-eyebrow {
  color: #b9c3ff; font-size: 9px; font-weight: 600; letter-spacing: .14em; margin: 0 0 20px;
}
body[data-path="login"] .n4-login-story h1 {
  color: #ffffff; font-family: var(--n4-font); font-weight: 800;
  font-size: clamp(35px, 3.65vw, 61px); letter-spacing: -.055em;
  line-height: 1.13; margin: 0; max-width: 600px;
}
body[data-path="login"] .n4-login-story h1 span { color: #b9f5db; }
body[data-path="login"] .n4-login-description {
  font-size: 12.5px; line-height: 1.85; color: #d2d9ff; margin: 22px 0 0;
}
body[data-path="login"] .n4-login-illustration { margin: 4px -22px 6px; position: relative; }
body[data-path="login"] .n4-login-illustration svg { display: block; width: 100%; max-height: 310px; }
body[data-path="login"] .n4-login-brand-footer {
  display: flex; gap: 8px; align-items: center; color: #c2cdff;
  font-size: 10px; margin-top: auto; padding-top: 18px; border-top: 1px solid #6575db55;
}
body[data-path="login"] .n4-login-dot { width: 5px; height: 5px; background: #7df0c0; border-radius: 50%; }
body[data-path="login"] .n4-login-footer-mark { margin-left: auto; color: #7df0c0; font-size: 20px; }
body[data-path="login"] .n4-login-auth {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-width: 0; min-height: 100vh; padding: 70px clamp(34px, 6vw, 110px) 82px;
  background: #ffffff;
}
body[data-path="login"] .n4-login-auth > section {
  width: 100%; max-width: 390px; margin: 0 auto;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
body[data-path="login"] .n4-login-auth > section > .page-card-head {
  text-align: left; margin: 0; padding: 0 0 31px; max-width: none;
}
body[data-path="login"] .n4-login-auth > section > .page-card-head .app-logo {
  display: block; width: 42px; height: 42px; max-height: none; margin: 0 0 24px;
  border-radius: 12px;
}
body[data-path="login"] .n4-login-auth > section > .page-card-head h4 {
  font-size: 29px; font-weight: 800; letter-spacing: -.045em; line-height: 1.3;
  margin: 0; color: #101523;
}
body[data-path="login"] .n4-login-intro { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: #697080; font-weight: 400; }
body[data-path="login"] .n4-login-auth .page-card {
  max-width: none; padding: 0; margin: 0; background: transparent;
  border: 0; border-radius: 0; box-shadow: none;
}
body[data-path="login"] .n4-login-auth .page-card form { max-width: none; margin: 0; }
body[data-path="login"] .n4-login-auth .form-group { margin-bottom: 22px; }
body[data-path="login"] .n4-login-auth .form-label.sr-only {
  position: static; width: auto; height: auto; padding: 0; margin: 0 0 9px;
  clip: auto; clip-path: none; overflow: visible; white-space: normal;
  color: #353b4a; font-size: 11px; font-weight: 600;
}
body[data-path="login"] .n4-login-auth .page-card .form-control {
  height: 49px; font-family: var(--n4-font); font-size: 12px; line-height: 1.5;
  border: 1px solid #e4e7ed; border-radius: 11px; background: #f8f9fb;
  color: #151b2a; padding-top: 12px; padding-bottom: 12px; margin-bottom: 0;
  box-shadow: none;
}
body[data-path="login"] .n4-login-auth .page-card .form-control:focus {
  border-color: #3847ff; outline: 2px solid #3847ff28; outline-offset: 1px; background: #ffffff;
}
body[data-path="login"] .n4-login-auth .page-card .field-icon { top: 16px; left: 13px; }
body[data-path="login"] .n4-login-auth .email-field input,
body[data-path="login"] .n4-login-auth .password-field input { padding-left: 40px; }
body[data-path="login"] .n4-login-auth .password-field input { padding-right: 65px; }
body[data-path="login"] .n4-login-auth .page-card .toggle-password { top: 16px; right: 13px; font-size: 10px; }
body[data-path="login"] .n4-login-auth .forgot-password-message { margin: 2px 0 0; line-height: 1.6; }
body[data-path="login"] .n4-login-auth .forgot-password-message a { color: #0510ac; font-size: 11px; font-weight: 500; }
body[data-path="login"] .n4-login-auth .page-card-actions { margin-top: 25px; }
body[data-path="login"] .n4-login-auth .btn-primary {
  min-height: 47px; font-size: 12px; font-weight: 600; border: 1px solid #0510ac;
  border-radius: 11px; color: #ffffff; background: #0510ac;
  box-shadow: 0 7px 16px -12px #0510ac80;
}
body[data-path="login"] .n4-login-auth .btn-primary:hover { background: #3847ff; border-color: #3847ff; }
body[data-path="login"] .n4-login-auth a:focus-visible,
body[data-path="login"] .n4-login-auth button:focus-visible { outline: 3px solid #3847ff; outline-offset: 3px; }
body[data-path="login"] .n4-login-auth .sign-up-message { font-size: 11px; line-height: 1.7; }
body[data-path="login"] .n4-login-access-note {
  position: absolute; left: 25px; right: 25px; bottom: 26px;
  text-align: center; font-size: 10px; color: #737988; margin: 0;
}
@media (min-width: 1600px) {
  body[data-path="login"] .n4-login-brand { padding-top: 65px; padding-bottom: 42px; }
  body[data-path="login"] .n4-login-illustration svg { max-height: 380px; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  body[data-path="login"] .n4-login-brand { padding-left: 32px; padding-right: 32px; }
  body[data-path="login"] .n4-login-auth { padding-left: 36px; padding-right: 36px; }
  body[data-path="login"] .n4-login-story h1 { font-size: 36px; }
  body[data-path="login"] .n4-login-description { font-size: 11px; }
}
@media (max-width: 760px) {
  body[data-path="login"] .n4-login-layout { grid-template-columns: minmax(0, 1fr); }
  body[data-path="login"] .n4-login-brand { min-height: 0; padding: 25px 25px 30px; }
  body[data-path="login"] .n4-login-wordmark > span:first-child { font-size: 31px; letter-spacing: -3px; }
  body[data-path="login"] .n4-login-wordmark > span:last-child { font-size: 8px; }
  body[data-path="login"] .n4-login-story { margin: 0; padding-top: 30px; }
  body[data-path="login"] .n4-login-eyebrow { display: none; }
  body[data-path="login"] .n4-login-story h1 { font-size: 32px; line-height: 1.13; }
  body[data-path="login"] .n4-login-description { font-size: 11px; line-height: 1.7; margin-top: 13px; }
  body[data-path="login"] .n4-login-illustration,
  body[data-path="login"] .n4-login-brand-footer { display: none; }
  body[data-path="login"] .n4-login-auth { min-height: 0; padding: 35px 27px 74px; }
  body[data-path="login"] .n4-login-auth > section { max-width: 390px; }
  body[data-path="login"] .n4-login-auth > section > .page-card-head { padding-bottom: 24px; }
  body[data-path="login"] .n4-login-auth > section > .page-card-head .app-logo { display: none; }
  body[data-path="login"] .n4-login-auth > section > .page-card-head h4 { font-size: 25px; }
  body[data-path="login"] .n4-login-access-note { bottom: 22px; }
}
@media (max-height: 740px) and (min-width: 761px) {
  body[data-path="login"] .n4-login-brand { padding-top: 32px; padding-bottom: 25px; }
  body[data-path="login"] .n4-login-story { padding-top: 35px; }
  body[data-path="login"] .n4-login-illustration svg { max-height: 250px; }
}
/* ---- End n4 split sign-in ---- */
