/*
  BravoERP UI (Bootstrap 5)
  - Layout dashboard: sidebar + topbar
  - Tema oscuro grafito + toggle claro/oscuro (data-bs-theme)
  - Botones compactos

  Acento: --app-primary (tenant puede sobrescribirlo)
*/

:root{
  --app-primary: #4f8cff;
  --app-primary-rgb: 79, 140, 255;

  --app-radius: 18px;
  --app-radius-sm: 14px;
  --app-shadow-sm: 0 6px 18px rgba(0,0,0,.18);
  --app-shadow: 0 14px 40px rgba(0,0,0,.32);
  --app-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

[data-bs-theme="dark"]{
  --app-bg:#0f1216;
  --app-surface:#151a20;
  --app-surface-2:#11161c;
  --app-sidebar:#11161c;
  --app-topbar:#0f1216;

  --app-border: rgba(255,255,255,.10);
  --app-border-strong: rgba(255,255,255,.14);
  --app-text: rgba(255,255,255,.92);
  --app-muted: rgba(255,255,255,.64);
  --app-muted-2: rgba(255,255,255,.52);
  --app-hover: rgba(255,255,255,.06);

  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-border-color: var(--app-border);
  --bs-primary: var(--app-primary);
  --bs-secondary-color: var(--app-muted);
  --bs-body-font-family: var(--app-font);
  --bs-link-color: var(--app-text);
  --bs-link-hover-color: #ffffff;
}

[data-bs-theme="light"]{
  --app-bg:#f6f7f9;
  --app-surface:#ffffff;
  --app-surface-2:#f1f3f6;
  --app-sidebar:#ffffff;
  --app-topbar:#ffffff;

  --app-border: rgba(17,24,39,.10);
  --app-border-strong: rgba(17,24,39,.14);
  --app-text: rgba(17,24,39,.90);
  --app-muted: rgba(17,24,39,.66);
  --app-muted-2: rgba(17,24,39,.54);
  --app-hover: rgba(17,24,39,.05);

  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-border-color: var(--app-border);
  --bs-primary: var(--app-primary);
  --bs-secondary-color: var(--app-muted);
  --bs-body-font-family: var(--app-font);
  --bs-link-color: rgba(17,24,39,.92);
  --bs-link-hover-color: rgba(17,24,39,1);
}

*{box-sizing:border-box}
html, body{height:100%}
body{
  margin:0;
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--app-font);
}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:none}

/* Helpers */
.text-muted-2{color: var(--app-muted-2) !important}

/* Buttons */
.btn{
  border-radius: var(--app-radius-sm);
  padding: .42rem .72rem;
  font-weight: 650;
}
.btn-sm{padding: .32rem .62rem}
.btn-primary{
  background: var(--app-primary);
  border-color: rgba(var(--app-primary-rgb), .85);
}
.btn-primary:hover{
  background: rgba(var(--app-primary-rgb), .92);
  border-color: rgba(var(--app-primary-rgb), .95);
}
.btn-outline-light{border-color: var(--app-border-strong)}
.btn-ghost{
  background: transparent;
  border: 1px solid var(--app-border);
  color: var(--app-text);
}
.btn-ghost:hover{
  background: var(--app-hover);
  border-color: var(--app-border-strong);
}

/* Badges */
.badge{
  border: 1px solid var(--app-border);
  background: var(--app-hover);
  color: var(--app-text);
  font-weight: 650;
  padding: .30rem .55rem;
}

/* Cards */
.card{
  background: var(--app-surface);
  border-color: var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-sm);
}
.card .card-header{
  background: transparent;
  border-bottom-color: var(--app-border);
  font-weight: 750;
}
.card.compact{box-shadow:none;background: var(--app-surface-2)}

/* Forms */
.form-control, .form-select{
  background: var(--app-surface-2);
  border-color: var(--app-border);
  color: var(--app-text);
}
.form-control::placeholder{color: var(--app-muted-2)}
.form-control:focus, .form-select:focus{
  border-color: rgba(var(--app-primary-rgb), .55);
  box-shadow: 0 0 0 .25rem rgba(var(--app-primary-rgb), .16);
}
.form-text{color: var(--app-muted-2)}

/* Tables */
.table{
  --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--app-hover);
  --bs-table-hover-bg: rgba(var(--app-primary-rgb), .06);
  border-color: var(--app-border);
  color: var(--app-text);
}
.table thead th{
  /* IMPORTANT: in dark mode the header can look like it "disappears" because
     Bootstrap keeps table header backgrounds transparent by default.
     We force a solid surface + stacking so it always reads well. */
  background: var(--app-surface-2);
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--app-muted);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom-color: var(--app-border);
}

/* If a table is wrapped in a scrolling container, keep header above rows */
.table-responsive .table thead th{z-index: 3}

/* Respect theme when legacy "table-dark" is used in some screens */
html[data-bs-theme="light"] .table.table-dark{
  --bs-table-bg: transparent;
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--app-border);
}
html[data-bs-theme="light"] .table.table-dark thead th{background: var(--app-surface-2)}

/* Dropdowns */
.dropdown-menu{
  background: var(--app-surface);
  border-color: var(--app-border);
  border-radius: var(--app-radius-sm);
  box-shadow: var(--app-shadow);
}
.dropdown-item{color: var(--app-text)}
.dropdown-item:hover{background: var(--app-hover); color: var(--app-text)}
.dropdown-divider{border-top-color: var(--app-border)}
.dropdown-header{color: var(--app-muted)}

/* Alerts */
.alert{
  border-radius: var(--app-radius-sm);
  border-color: var(--app-border);
  background: var(--app-surface);
  color: var(--app-text);
}
.alert-success{border-color: rgba(57,217,138,.25); background: rgba(57,217,138,.08)}
.alert-danger{border-color: rgba(255,107,107,.25); background: rgba(255,107,107,.08)}
.alert-warning{border-color: rgba(246,193,119,.25); background: rgba(246,193,119,.08)}

/* Code */
.code{
  margin:0;
  padding: .85rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: var(--app-surface-2);
  overflow:auto;
  font-size: .85rem;
  color: var(--app-text);
}

/* Legacy navbar (welcome pages) */
.app-navbar{background: var(--app-topbar);border-bottom: 1px solid var(--app-border)}
.app-brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.2px}
.app-dot{width:12px;height:12px;border-radius:999px;background: var(--app-primary)}

/* Shell layout */
.app-shell{min-height:100vh;display:flex;width:100%}
.app-sidebar{width:260px;background: var(--app-sidebar);border-right: 1px solid var(--app-border)}
.app-sidebar-inner{height:100vh;position:sticky;top:0;display:flex;flex-direction:column}
.app-brand-wrap{padding: 1rem 1rem .75rem;border-bottom: 1px solid var(--app-border)}
.app-brand-link{display:flex;align-items:center;gap:.75rem;color: var(--app-text);font-weight:850}
.app-logo{width:36px;height:36px;flex:0 0 36px;overflow:hidden;border-radius:12px;display:flex;align-items:center;justify-content:center;background: rgba(var(--app-primary-rgb), .14);border: 1px solid rgba(var(--app-primary-rgb), .25);color: var(--app-primary);font-weight:950}
.app-brand-text .name{line-height:1.05}
.app-brand-text .sub{color: var(--app-muted-2);font-weight:650;font-size:.78rem;margin-top:.12rem}

.app-nav{padding:.75rem;overflow:auto}
.app-nav-section{margin:.75rem 0 .35rem;padding:0 .75rem;font-size:.72rem;letter-spacing:.10em;text-transform:uppercase;color: var(--app-muted-2)}
.app-nav-link, .app-sub-link{display:flex;align-items:center;gap:.65rem;padding:.55rem .75rem;border-radius:12px;color: var(--app-muted)}
.app-nav-sub{padding-left:.75rem;margin:.25rem 0 .5rem}
.app-sub-link{padding:.45rem .75rem;border-radius:12px;font-size:.95rem}
.app-sub-link i{font-size:1rem;opacity:.9}
.app-nav-link:hover, .app-sub-link:hover{background: var(--app-hover);color: var(--app-text)}
.app-nav-link.active, .app-sub-link.active{background: rgba(var(--app-primary-rgb), .12);border: 1px solid rgba(var(--app-primary-rgb), .20);color: var(--app-text)}
.app-nav-link i, .app-sub-link i{font-size:1.05rem}

.nav-group-toggle{justify-content:space-between}
.nav-group-toggle .chev{opacity:.7}
.nav-sublinks{margin-left:.25rem;border-left: 1px solid var(--app-border);padding-left:.5rem}

.app-sidebar-footer{padding:.75rem;border-top: 1px solid var(--app-border)}

.app-main{flex:1;min-width:0;display:flex;flex-direction:column}
.app-topbar{height:56px;display:flex;align-items:center;gap:.75rem;padding:0 .75rem;background: var(--app-topbar);border-bottom: 1px solid var(--app-border);position:sticky;top:0;z-index:1030}
.app-page-title{font-weight:850;font-size:.95rem;color: var(--app-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-content{padding:1.25rem}
@media (min-width: 992px){.app-content{padding:1.5rem 2rem}}

/* Offcanvas (mobile sidebar) */
.offcanvas.app-offcanvas{background: var(--app-sidebar);color: var(--app-text)}
.app-offcanvas .offcanvas-header{border-bottom: 1px solid var(--app-border)}

/* Auth */
.auth-page{min-height:100vh;background: var(--app-bg)}
.auth-shell{min-height:100vh;display:flex;flex-direction:column}
.auth-top{display:flex;align-items:center;justify-content:space-between;padding:1rem;background: var(--app-topbar);border-bottom: 1px solid var(--app-border)}
.auth-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}
.auth-card{width:min(460px, 100%)}

/* Accordion */
.accordion-item{background: var(--app-surface);border-color: var(--app-border);border-radius: var(--app-radius) !important;overflow:hidden}
.accordion-button{background: transparent;color: var(--app-text);font-weight:750}
.accordion-button:focus{box-shadow:none}
.accordion-button:not(.collapsed){background: rgba(var(--app-primary-rgb), .10);color: var(--app-text)}
.accordion-body{color: var(--app-text)}

/* Settings UI */
.logo-preview{width:72px;height:72px;border-radius:18px;border:1px solid var(--app-border);background: var(--app-surface-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo-preview img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;display:block}
.logo-fallback{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;background: rgba(var(--app-primary-rgb), .14);border: 1px solid rgba(var(--app-primary-rgb), .25);color: var(--app-primary);font-weight:950}

.swatches{display:flex;gap:.5rem;flex-wrap:wrap}
.swatch{width:28px;height:28px;border-radius:10px;border:1px solid var(--app-border-strong);background-color: var(--sw);box-shadow: inset 0 0 0 2px rgba(255,255,255,.12);display:inline-block;flex:0 0 auto;padding:0;cursor:pointer;appearance:none}
[data-bs-theme="light"] .swatch{box-shadow: inset 0 0 0 2px rgba(0,0,0,.08)}
.swatch:hover{transform: translateY(-1px)}

/* Icon picker (Bootstrap Icons) */
.bi-icon-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));gap:.5rem}
.bi-icon-item{border:1px solid var(--app-border);border-radius:14px;background: var(--app-surface-2);color: var(--app-text);padding:.7rem .6rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;transition:transform .08s ease, border-color .08s ease, background .08s ease}
.bi-icon-item i{font-size:1.4rem;opacity:.95}
.bi-icon-item:hover{transform: translateY(-1px);border-color: rgba(var(--app-primary-rgb), .35);background: rgba(var(--app-primary-rgb), .07)}
.bi-icon-label{font-size:.75rem;color: var(--app-muted-2);text-align:center;word-break:break-word}

/* Brand logos in header/sidebar */
.app-logo img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;display:block}

.preview-card{border:1px solid var(--app-border);border-radius: var(--app-radius);padding:1rem;background: var(--app-surface-2)}
.preview-top{display:flex;align-items:center;gap:.75rem;margin-bottom:.85rem}
.preview-logo{width:44px;height:44px;border-radius:14px;border:1px solid rgba(var(--app-primary-rgb), .25);background: rgba(var(--app-primary-rgb), .14);display:flex;align-items:center;justify-content:center;font-weight:950;color: var(--app-primary);overflow:hidden}
.preview-logo img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;display:block}

/* Portal branding mock */
.portal-mock{border:1px solid var(--app-border);border-radius: var(--app-radius);background: var(--app-surface-2);overflow:hidden}
.portal-mock-top{height:54px;display:flex;align-items:center;justify-content:space-between;padding:.65rem .9rem;border-bottom:1px solid var(--app-border)}
.portal-mock-brand{display:flex;align-items:center;gap:.55rem;font-weight:800}
.portal-mock-icon{width:28px;height:28px;border-radius:10px;border:1px solid var(--app-border);background: rgba(255,255,255,.05);overflow:hidden;flex:0 0 28px}
.portal-mock-icon img{width:100%;height:100%;object-fit:contain;display:block}
.portal-mock-links{display:flex;gap:.4rem;flex-wrap:wrap}
.portal-mock-link{font-size:.8rem;padding:.25rem .55rem;border-radius:999px;border:1px solid rgba(var(--t-primary-rgb), .25);background: rgba(var(--t-primary-rgb), .12);color: var(--app-text)}
.portal-mock-body{padding:1rem}
.portal-mock-card{border:1px solid var(--app-border);border-radius: var(--app-radius);background: var(--app-surface);padding:1rem}
.portal-mock-btn{display:inline-flex;align-items:center;gap:.4rem;border-radius:12px;padding:.45rem .75rem;border:1px solid rgba(var(--t-primary-rgb), .35);background: rgba(var(--t-primary-rgb), .18);color: var(--app-text);font-weight:700}
.preview-actions{display:flex;gap:.5rem;margin-bottom:.75rem}


/* Sprint2 layout helpers */
.page-header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.page-eyebrow{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(0,0,0,.55)}
.page-title{margin:0}
.page-subtitle{color:rgba(0,0,0,.6)}
.page-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}


/* ===========================
   tenant-menu-v4 (sutil, sin look botón)
   =========================== */

.tenant-ui button.app-nav-link,
.tenant-ui button.app-sub-link{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
}

/* Mantener accesibilidad: foco visible pero sutil */
.tenant-ui button.app-nav-link:focus,
.tenant-ui button.app-sub-link:focus{
  outline: none;
}
.tenant-ui button.app-nav-link:focus-visible,
.tenant-ui button.app-sub-link:focus-visible{
  box-shadow: 0 0 0 .18rem rgba(var(--app-primary-rgb), .18) !important;
  border-radius: 12px;
}

/* Hover y active más sutil */
.tenant-ui .app-nav-link:hover,
.tenant-ui .app-sub-link:hover{
  background: rgba(var(--app-primary-rgb), .06);
}

.tenant-ui .app-nav-link.active,
.tenant-ui .app-sub-link.active{
  background: rgba(var(--app-primary-rgb), .08);
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 600;
  position: relative;
}

/* Indicador lateral para activo (sutil) */
.tenant-ui .app-nav-link.active::before,
.tenant-ui .app-sub-link.active::before{
  content: "";
  position: absolute;
  left: .25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 3px;
  background: rgba(var(--app-primary-rgb), .75);
}

/* Quitar borde heredado si existiese */
.tenant-ui .app-nav-link,
.tenant-ui .app-sub-link{
  border: 0;
}

/* Chevron */
.tenant-ui .chev i{
  transition: transform .15s ease;
}
.tenant-ui button[aria-expanded="true"] .chev i{
  transform: rotate(180deg);
}

/* Subnivel con línea guía */
.tenant-ui .app-nav-sub{
  margin-left: .65rem;
  padding-left: .65rem;
  border-left: 1px solid rgba(127,127,127,.28);
}

/* -------------------------------------------------------------------------- */
/* Form helpers (used in tenant + central views)                               */
/* -------------------------------------------------------------------------- */

.form-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 18px;
}

@media (min-width: 992px){
  .form-grid{ grid-template-columns: 1fr 1fr; }
}

.form-row{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}

.form-row--full{ grid-column: 1 / -1; }

.form-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: .25rem;
  grid-column: 1 / -1;
}

.form-label{
  font-weight: 600;
  font-size: .9rem;
  color: var(--bs-body-color);
}

.help{
  font-size: .875rem;
  color: var(--bs-secondary-color);
  line-height: 1.35;
}

.chip-list{
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.chip{
  position: relative;
  display: inline-flex;
}

.chip input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip span{
  display: inline-flex;
  align-items: center;
  padding: .45rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--bs-border-color);
  background: var(--app-surface-2);
  color: var(--bs-body-color);
  font-size: .875rem;
  font-weight: 600;
  transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}

.chip input:checked + span{
  background: rgba(var(--app-primary-rgb), .14);
  border-color: rgba(var(--app-primary-rgb), .55);
}

[data-bs-theme="dark"] .chip span{ background: rgba(255,255,255,.03); }
[data-bs-theme="dark"] .chip input:checked + span{ background: rgba(var(--app-primary-rgb), .22); }

.chip input:focus-visible + span{
  outline: 2px solid rgba(var(--app-primary-rgb), .45);
  outline-offset: 2px;
}

.chip span:active{ transform: translateY(1px); }


/* -------------------------------------------------------------------------- */
/* Mobile polish (XS/S)                                                        */
/* Objetivo: evitar desbordamientos, mejorar densidad y legibilidad en móvil.   */
/* -------------------------------------------------------------------------- */

@media (max-width: 576px){
  /* Evitar scroll horizontal accidental */
  body{ overflow-x: hidden; }

  /* Espaciados más compactos */
  .app-content{ padding: .9rem .8rem; }
  .container, .container-fluid{ padding-left: .75rem; padding-right: .75rem; }

  /* Topbar: evitar que el email/títulos rompan el layout */
  .app-topbar{ padding: 0 .55rem; }
  .app-topbar > .d-flex:first-child{ flex: 1 1 auto; min-width: 0; }
  .app-page-title{ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .app-topbar .dropdown-toggle{
    max-width: 64vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Offcanvas: ancho cómodo en teléfonos */
  .offcanvas.app-offcanvas{ width: min(86vw, 360px); }
  .app-offcanvas .app-nav{ padding: .55rem; }

  /* Tipografía: títulos más razonables en pantallas pequeñas */
  h1,.h1{ font-size: 1.35rem; }
  h2,.h2{ font-size: 1.20rem; }
  h3,.h3{ font-size: 1.10rem; }
  h4,.h4{ font-size: 1.05rem; }

  /* Cards y botones: un poco más compactos */
  .card{ border-radius: 16px; }
  .btn{ padding: .38rem .62rem; }
  .btn-sm{ padding: .30rem .54rem; }

  /* Media */
  img, svg, video, canvas{ max-width: 100%; height: auto; }

  /* Flex: permitir wrap en contenido (pero NO en topbar) */
  .app-content .d-flex{ flex-wrap: wrap; }
  .app-topbar .d-flex{ flex-wrap: nowrap; }
  .app-content .d-flex > *{ min-width: 0; }

  /* Inputs: no reventar dentro de flex / input-groups */
  .input-group > .form-control,
  .input-group > .form-select{ min-width: 0; }

  /* Tablas: envolver en scroll horizontal en móvil (sin romper la semántica) */
.app-content .table-responsive{
  overflow-x: auto;
  /* Permitir que dropdowns / popovers se vean completos en tablas con scroll X */
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* Utilidad: desactivar header sticky en tablas donde el usuario prefiera scroll normal */
.table.table-head-static thead th,
.table-responsive .table.table-head-static thead th{
  position: static;
  top: auto;
  z-index: auto;
}

/* Si una tabla NO viene con wrapper, el JS la envolverá en .table-responsive.mobile-table-wrap */
.app-content .table-responsive.mobile-table-wrap{
  border-radius: 16px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
}
.app-content .table-responsive.mobile-table-wrap > table{
  margin-bottom: 0;
}

/* Mantener columnas legibles: evitar "texto vertical" por quiebres agresivos */
.app-content .table-responsive > table{
  min-width: 520px; /* permite scroll en X en teléfonos */
}
.app-content .table-responsive th,
.app-content .table-responsive td{
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

/* Modales: que no queden pegados a los bordes */
  .modal-dialog{ margin: .55rem; }
  .modal-content{ border-radius: 16px; }
}



/* Utilities */
.min-w-0{min-width:0 !important;}

/* Utilities: tablas */
/* Permite que una tabla envuelva texto (sin romper el estándar global nowrap). */
.table.table-wrap th,
.table.table-wrap td{
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Quita el min-width forzado del wrapper responsive cuando se requiere */
.table.table-min-w-0{ min-width: 0 !important; }