/*
 * Sistema visual unificado para la aplicación principal.
 * Esta hoja sólo actúa en pantalla: no altera documentos, catálogos ni reportes impresos.
 */
@media screen {
  :root {
    color-scheme: light;
    --ink: #20283a;
    --muted: #6d7585;
    --soft: #f1f4f8;
    --line: #dfe4ec;
    --panel: #ffffff;
    --accent: #1472c9;
    --accent-dark: #125f9f;
    --success: #0f8a5f;
    --warning: #d87816;
    --danger: #c44343;
    --violet: #5b63d3;
    --page: #f5f7fb;
    --shadow: 0 12px 34px rgba(31, 40, 58, 0.07);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  }

  html {
    background: var(--page);
  }

  body {
    color: var(--ink);
    background:
      radial-gradient(circle at 92% 4%, rgba(20, 114, 201, 0.06), transparent 27rem),
      var(--page);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  }

  ::selection {
    color: #172033;
    background: #cfe6fb;
  }

  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 3px solid rgba(20, 114, 201, 0.22);
    outline-offset: 2px;
  }

  /* Navegación común */
  .sidebar {
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background:
      radial-gradient(circle at 20% 0, rgba(91, 99, 211, 0.2), transparent 19rem),
      linear-gradient(180deg, #20283a 0%, #182033 100%);
    box-shadow: 12px 0 38px rgba(20, 28, 45, 0.12);
  }

  .brand-mark,
  .login-brand > span,
  .loading-mark {
    background: linear-gradient(135deg, #2c8ddd, #6657c7);
    box-shadow: 0 9px 24px rgba(31, 113, 190, 0.3);
  }

  .brand span {
    color: #aeb9cd;
  }

  .nav-group {
    --nav-accent: #2f8ed9;
  }

  .control-center-nav-group {
    --nav-accent: #27a477;
  }

  .sidebar nav > div.nav-group:nth-of-type(1) {
    --nav-accent: #2f8ed9;
  }

  .sidebar nav > div.nav-group:nth-of-type(2) {
    --nav-accent: #7770dc;
  }

  .sidebar nav > div.nav-group:nth-of-type(3) {
    --nav-accent: #db842c;
  }

  .nav-group > small {
    color: var(--nav-accent);
    opacity: 0.92;
  }

  .sidebar nav button {
    color: #c8d0df;
    border: 1px solid transparent;
    border-radius: 11px;
  }

  .sidebar nav button:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.07);
  }

  .sidebar nav button.active,
  body .sidebar nav button.control-center-nav-entry.active,
  body .sidebar nav button.finance-nav-entry.active,
  body .sidebar nav button.payroll-nav-entry.active {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 4px 0 var(--nav-accent) !important;
  }

  body .sidebar nav button.control-center-nav-entry.active span,
  body .sidebar nav button.finance-nav-entry.active span,
  body .sidebar nav button.payroll-nav-entry.active span {
    color: #ffffff !important;
  }

  .sidebar nav button span {
    color: #dbe3f1;
  }

  .sidebar-foot {
    border-color: rgba(255, 255, 255, 0.09);
  }

  .data-dot {
    background: #33bf88;
    box-shadow: 0 0 0 4px rgba(51, 191, 136, 0.13);
  }

  /* Barra superior */
  .topbar {
    border-bottom-color: #dfe5ed;
    background: rgba(255, 255, 255, 0.91);
    box-shadow: 0 5px 20px rgba(31, 40, 58, 0.045);
  }

  .breadcrumb span {
    color: #788398;
  }

  .breadcrumb b {
    color: #b8c0cd;
  }

  .period-selector {
    border-right-color: #dce2eb;
  }

  .period-selector select,
  .role-preview select,
  .sign-out-link {
    color: #374154 !important;
    border-color: #cfd7e2;
    background: #ffffff;
    box-shadow: 0 2px 7px rgba(31, 40, 58, 0.04);
  }

  .period-selector select:hover,
  .role-preview select:hover,
  .sign-out-link:hover {
    color: #125f9f !important;
    border-color: #8fb9dc;
    background: #f5faff;
  }

  .avatar {
    background: linear-gradient(135deg, #48566f, #273148);
    box-shadow: 0 0 0 3px #edf1f6;
  }

  .avatar.liliana {
    background: linear-gradient(135deg, #d78a35, #ad5d19);
  }

  .avatar.gimena {
    background: linear-gradient(135deg, #6f70d5, #4e54a8);
  }

  .avatar.gonzalo {
    background: linear-gradient(135deg, #27a477, #147052);
  }

  /* Color por familia de módulo */
  .page-content {
    --module-accent: #1472c9;
    --module-soft: #eaf4ff;
    --module-deep: #125f9f;
    --module-glow: rgba(20, 114, 201, 0.24);
  }

  .page-content:has(.product-master-panel),
  .page-content:has(.stock-tabs),
  .page-content:has(.clickable-row) {
    --module-accent: #0f8a5f;
    --module-soft: #e9f7f1;
    --module-deep: #0b6d4b;
    --module-glow: rgba(15, 138, 95, 0.23);
  }

  .page-content:has(.calculator-layout),
  .page-content:has(.proposal-kpis),
  .page-content:has(.commission-grid),
  .page-content:has(.user-cards) {
    --module-accent: #5b63d3;
    --module-soft: #efefff;
    --module-deep: #454bac;
    --module-glow: rgba(91, 99, 211, 0.25);
  }

  .page-content:has(.catalog-grid),
  .page-content:has(.maintenance-layout),
  .page-content:has(.receipt-panel) {
    --module-accent: #d87816;
    --module-soft: #fff3e5;
    --module-deep: #a85b0e;
    --module-glow: rgba(216, 120, 22, 0.24);
  }

  .page-content:has(.close-layout) {
    --module-accent: #0f8a5f;
    --module-soft: #e9f7f1;
    --module-deep: #0b6d4b;
    --module-glow: rgba(15, 138, 95, 0.23);
  }

  /* Encabezado común de cada pantalla */
  .page-content > .section-head {
    position: relative;
    isolation: isolate;
    align-items: center;
    overflow: hidden;
    min-height: 168px;
    margin-bottom: 22px;
    padding: 28px 30px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    background: linear-gradient(128deg, #20283a 0%, #33415e 100%);
    box-shadow: 0 18px 45px rgba(31, 40, 58, 0.14);
  }

  .page-content > .section-head::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -115px;
    right: -70px;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: var(--module-accent);
    opacity: 0.2;
    filter: blur(2px);
  }

  .page-content > .section-head .eyebrow {
    color: #c9d8ef;
  }

  .page-content > .section-head h1 {
    max-width: 900px;
    color: #ffffff;
    font-size: clamp(30px, 3.5vw, 44px);
  }

  .page-content > .section-head .section-description {
    max-width: 880px;
    color: #d8dfec;
  }

  .page-content > .section-head .primary-button,
  .page-content > .section-head .secondary-button {
    color: #20283a;
    border-color: #ffffff;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(9, 17, 31, 0.2);
  }

  .page-content > .section-head .readonly-badge {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.12);
  }

  /* Botones, filtros y campos */
  .primary-button {
    color: #ffffff;
    border-color: #20283a;
    border-radius: 11px;
    background: #20283a;
    box-shadow: 0 7px 18px rgba(31, 40, 58, 0.18);
  }

  .primary-button:hover {
    border-color: #33415e;
    background: #33415e;
  }

  .secondary-button,
  .danger-button {
    border-radius: 11px;
  }

  .secondary-button {
    color: #374154;
    border-color: #cfd7e2;
    background: #ffffff;
  }

  .secondary-button:hover {
    color: var(--module-deep);
    border-color: #99bad8;
    background: #f5faff;
  }

  .text-button {
    color: var(--module-deep);
  }

  .search-field,
  .filter-row select,
  .panel-head input[type="month"],
  .calculator-toolbar select,
  .form-grid input,
  .form-grid select,
  .form-grid textarea,
  .notes-label textarea,
  .order-quantity,
  .order-notes textarea,
  .calculator-lines input {
    color: #374154;
    border-color: #cbd4e0;
    border-radius: 10px;
    background: #ffffff;
  }

  .search-field:focus-within,
  .form-grid input:focus,
  .form-grid select:focus,
  .form-grid textarea:focus,
  .notes-label textarea:focus,
  .calculator-lines input:focus {
    border-color: var(--module-accent);
    box-shadow: 0 0 0 3px var(--module-glow);
  }

  .form-grid input[readonly] {
    color: #687386;
    background: #f3f5f8;
  }

  /* Indicadores */
  .kpi-grid {
    gap: 14px;
    margin-bottom: 18px;
  }

  .kpi-card {
    --card-accent: #1472c9;
    --card-soft: #eef7ff;
    min-height: 136px;
    padding: 19px 20px 17px;
    border-color: #dfe5ed;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--card-soft), #ffffff 64%);
    box-shadow: 0 8px 24px rgba(31, 40, 58, 0.055);
  }

  .kpi-card:nth-child(4n + 1) {
    --card-accent: #1472c9;
    --card-soft: #eef7ff;
  }

  .kpi-card:nth-child(4n + 2) {
    --card-accent: #5b63d3;
    --card-soft: #f2f1ff;
  }

  .kpi-card:nth-child(4n + 3) {
    --card-accent: #d87816;
    --card-soft: #fff6eb;
  }

  .kpi-card:nth-child(4n) {
    --card-accent: #0f8a5f;
    --card-soft: #eef9f4;
  }

  .kpi-card.positive {
    --card-accent: #0f8a5f;
    --card-soft: #eef9f4;
  }

  .kpi-card.warning {
    --card-accent: #d87816;
    --card-soft: #fff6eb;
  }

  .kpi-card::after,
  .kpi-card.positive::after,
  .kpi-card.warning::after {
    inset: 0 auto 0 0;
    width: 5px;
    height: 100%;
    background: var(--card-accent);
  }

  .kpi-card p {
    color: #697386;
  }

  .kpi-card strong {
    color: #20283a;
  }

  .kpi-card span,
  .kpi-card.positive span,
  .kpi-card.warning span {
    color: #737e90;
  }

  /* Paneles y tablas */
  .panel,
  .commission-card,
  .user-card {
    border-color: #dfe5ed;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(31, 40, 58, 0.05);
  }

  .panel-head .eyebrow,
  .guided-step-title .eyebrow {
    color: var(--module-deep);
  }

  .panel-head h2,
  .form-title h2,
  .commission-card h2,
  .user-card h2,
  .detail-drawer h2 {
    color: #20283a;
  }

  .dashboard-grid > .panel:not(.attention-panel),
  .analytics-grid > .panel {
    border-top: 4px solid var(--module-accent);
  }

  .dashboard-grid > .panel:nth-child(2),
  .analytics-grid > .panel:nth-child(2) {
    border-top-color: #5b63d3;
  }

  .dashboard-grid > .panel:nth-child(3),
  .analytics-grid > .panel:nth-child(3) {
    border-top-color: #d87816;
  }

  .table-scroll {
    border: 1px solid #e2e7ef;
    border-radius: 14px;
    background: #ffffff;
  }

  th {
    color: #4d596c;
    border-bottom-color: #dce2eb;
    background: #f1f4f8;
  }

  td {
    color: #4a5568;
    border-bottom-color: #edf0f5;
  }

  td strong {
    color: #273247;
  }

  td small {
    color: #7d8798;
  }

  tbody tr:hover td {
    background: #f7faff;
  }

  .attention-panel {
    color: #ffffff;
    border-color: #33415e;
    background:
      radial-gradient(circle at 90% 20%, rgba(20, 114, 201, 0.3), transparent 18rem),
      linear-gradient(135deg, #20283a, #2e3a54);
  }

  .attention-panel .eyebrow {
    color: #a9d1f3;
  }

  .attention-panel p:not(.eyebrow) {
    color: #d2dae8;
  }

  .attention-panel .secondary-button {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
  }

  /* Formularios y pasos */
  .sale-form .form-section {
    border-top: 4px solid #1472c9;
  }

  .sale-form .form-section:nth-child(2) {
    border-top-color: #5b63d3;
  }

  .sale-form .form-section:nth-child(3) {
    border-top-color: #0f8a5f;
  }

  .form-title {
    border-right-color: #dfe5ed;
  }

  .form-title > span,
  .guided-step-title > span:first-child {
    background: var(--module-accent);
    box-shadow: 0 5px 14px var(--module-glow);
  }

  .product-hint,
  .followup-box,
  .conversion-box,
  .friendly-empty,
  .tier-row {
    background: #f5f7fa;
  }

  .friendly-empty {
    border-color: #d5dce6;
  }

  .readonly-badge,
  .readonly-notice {
    color: #0b6d4b;
    border-color: #b9dfcd;
    background: #edf9f4;
  }

  /* Selectores y estados */
  .soft-chip {
    color: #526074;
    background: #edf1f6;
  }

  .status-chip.pending,
  .proposal-status.negotiating,
  .completion-badge.pending {
    color: #9a5a0c;
    background: #fff1df;
  }

  .status-chip.active,
  .proposal-status.accepted,
  .completion-badge.complete,
  .stock-pill.ok {
    color: #08744f;
    background: #e8f6ef;
  }

  .proposal-status.rejected,
  .danger-button {
    color: #a73333;
    border-color: #efbcbc;
    background: #fff2f2;
  }

  .stock-pill.low {
    color: #9a5a0c;
    background: #fff1df;
  }

  .stock-pill.out {
    color: #a73333;
    background: #fff0f0;
  }

  .stock-tabs button,
  .import-tabs button,
  .audience-switch button {
    border-color: #d9e0e9;
    border-radius: 13px;
    background: #ffffff;
  }

  .stock-tabs button:hover,
  .import-tabs button:hover,
  .audience-switch button:hover {
    border-color: #aab8c9;
  }

  .stock-tabs button.active,
  .import-tabs button.active,
  .audience-switch button.active {
    color: var(--module-deep);
    border-color: var(--module-accent);
    background: var(--module-soft);
    box-shadow: 0 0 0 3px var(--module-glow);
  }

  .audience-switch button.active > span,
  .tier-row button.active:not(.secondary-button) {
    color: #ffffff;
    border-color: var(--module-accent);
    background: var(--module-accent);
  }

  input[type="checkbox"],
  input[type="radio"] {
    accent-color: var(--module-accent);
  }

  /* Tarjetas métricas secundarias */
  .product-master-summary > div,
  .proposal-kpis > div,
  .import-kpis article,
  .close-summary div,
  .detail-kpis div,
  .product-detail-kpis > div,
  .price-result > div {
    position: relative;
    overflow: hidden;
    border-color: #dfe5ed;
    border-radius: 14px;
    background: #f8fafc;
    box-shadow: 0 5px 16px rgba(31, 40, 58, 0.035);
  }

  .product-master-summary > div:nth-child(4n + 1),
  .proposal-kpis > div:nth-child(4n + 1),
  .import-kpis article:nth-child(4n + 1),
  .close-summary div:nth-child(4n + 1) {
    border-left: 4px solid #1472c9;
    background: #f2f8fe;
  }

  .product-master-summary > div:nth-child(4n + 2),
  .proposal-kpis > div:nth-child(4n + 2),
  .import-kpis article:nth-child(4n + 2),
  .close-summary div:nth-child(4n + 2) {
    border-left: 4px solid #5b63d3;
    background: #f5f4ff;
  }

  .product-master-summary > div:nth-child(4n + 3),
  .proposal-kpis > div:nth-child(4n + 3),
  .import-kpis article:nth-child(4n + 3),
  .close-summary div:nth-child(4n + 3) {
    border-left: 4px solid #d87816;
    background: #fff8ef;
  }

  .product-master-summary > div:nth-child(4n),
  .proposal-kpis > div:nth-child(4n),
  .import-kpis article:nth-child(4n),
  .close-summary div:nth-child(4n) {
    border-left: 4px solid #0f8a5f;
    background: #f1faf6;
  }

  /* Gráficos */
  .key-current,
  .bar.current,
  .rank-main b,
  .annual-bar.current {
    background: var(--module-accent);
  }

  .key-previous,
  .bar.previous {
    background: #cfd6e0;
  }

  .monthly-chart,
  .annual-chart {
    border-bottom-color: #dce2eb;
    background: linear-gradient(
      transparent 24.5%, #edf0f5 25%, transparent 26% 49.5%,
      #edf0f5 50%, transparent 51% 74.5%, #edf0f5 75%, transparent 76%
    );
  }

  /* Productos, catálogos y herramientas comerciales */
  .product-picker-grid article,
  .catalog-grid article {
    border-color: #dfe5ed;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(31, 40, 58, 0.035);
  }

  .product-picker-grid article:hover,
  .catalog-grid article:hover {
    border-color: #aab8c9;
    box-shadow: 0 13px 30px rgba(31, 40, 58, 0.1);
  }

  .product-picker-grid article.selected,
  .visual-catalog-grid article.selected {
    border-color: var(--module-accent);
    box-shadow: 0 0 0 3px var(--module-glow);
  }

  .product-photo,
  .catalog-card-photo,
  .line-photo,
  .proposal-mini-photo,
  .stock-product-photo,
  .stock-photo-placeholder {
    background: #f4f6f9;
  }

  .product-picker-copy > small,
  .catalog-family,
  .service-totals span,
  .proposal-total,
  .proposal-doc-total strong,
  .selection-actions > span strong {
    color: var(--module-deep);
  }

  .admin-only,
  .admin-finance-section,
  .admin-summary,
  .price-result .admin-result {
    background: #f6f4ff;
  }

  .price-result .featured {
    border-color: #9bc6e8;
    background: #eef7ff;
  }

  .price-result .featured strong {
    color: #125f9f;
  }

  /* Comisiones, usuarios y cierres */
  .commission-card,
  .user-card {
    position: relative;
    overflow: hidden;
  }

  .commission-card::before,
  .user-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: #5b63d3;
  }

  .commission-card:nth-child(3n + 2)::before,
  .user-card:nth-child(3n + 2)::before {
    background: #0f8a5f;
  }

  .commission-card:nth-child(3n)::before,
  .user-card:nth-child(3n)::before {
    background: #d87816;
  }

  .commission-person > span {
    background: linear-gradient(135deg, #6973dc, #454bac);
    box-shadow: 0 6px 16px rgba(91, 99, 211, 0.23);
  }

  .commission-card:nth-child(3n + 2) .commission-person > span {
    background: linear-gradient(135deg, #20a273, #0b6d4b);
  }

  .commission-card:nth-child(3n) .commission-person > span {
    background: linear-gradient(135deg, #e18b34, #a85b0e);
  }

  .commission-equation,
  .scale-steps span,
  .close-report-grid > div {
    border: 1px solid #e1e6ee;
    background: #f6f8fb;
  }

  .commission-equation strong,
  .scale-steps b {
    color: #5058bb;
  }

  .close-icon {
    color: #ffffff;
    background: #0f8a5f;
  }

  /* Paneles laterales y modales */
  .modal-backdrop {
    background: rgba(15, 22, 36, 0.64);
  }

  .detail-drawer {
    border-left: 1px solid #dce2eb;
    box-shadow: -24px 0 70px rgba(15, 22, 36, 0.2);
  }

  .close-button,
  .remove-line {
    color: #526074;
    background: #edf1f6;
  }

  .detail-list label,
  .product-detail-list label {
    border-bottom-color: #e8ecf2;
  }

  .product-detail-section {
    border-color: #dfe5ed;
    border-radius: 16px;
  }

  /* Inicio de sesión */
  .siteground-login {
    background:
      radial-gradient(circle at 12% 12%, rgba(20, 114, 201, 0.42), transparent 27rem),
      radial-gradient(circle at 90% 88%, rgba(91, 99, 211, 0.36), transparent 29rem),
      linear-gradient(145deg, #182033 0%, #2e3a54 100%);
  }

  .login-card {
    border-color: rgba(255, 255, 255, 0.46);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 30px 90px rgba(9, 16, 29, 0.34);
  }

  .login-card .eyebrow {
    color: #5058bb;
  }

  .login-card form input {
    color: #273247;
    border-color: #cbd4e0;
    background: #ffffff;
  }

  .login-card form input:focus {
    border-color: #1472c9;
    box-shadow: 0 0 0 4px rgba(20, 114, 201, 0.15);
  }

  .password-toggle {
    color: #526074;
    border-color: #d4dbe5;
    background: #f1f4f8;
  }

  .password-toggle:hover {
    color: #125f9f;
    border-color: #9bc6e8;
    background: #eef7ff;
  }

  .install-notice,
  .access-denied > div {
    border-color: #dfe5ed;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: var(--shadow);
  }
}

@media screen and (max-width: 860px) {
  .page-content > .section-head {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
    padding: 23px;
    border-radius: 19px;
  }

  .page-content > .section-head .section-action,
  .page-content > .section-head .primary-button,
  .page-content > .section-head .secondary-button {
    width: 100%;
  }

  .form-title {
    border-right: 0;
    border-bottom-color: #dfe5ed;
  }
}

@media screen and (max-width: 620px) {
  .page-content > .section-head {
    padding: 20px;
  }

  .page-content > .section-head h1 {
    font-size: 30px;
  }

  .kpi-card {
    min-height: 118px;
  }

  .panel,
  .commission-card,
  .user-card {
    border-radius: 16px;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  .primary-button,
  .secondary-button,
  .sidebar nav button,
  .product-picker-grid article,
  .catalog-grid article {
    transition: none;
  }
}