/* ==========================================================================
   POS-i — Modern theme (Phase 1)
   Overrides AdminLTE 2 / Bootstrap 3 without replacing the stack
   ========================================================================== */

:root {
  --bc-primary: #2563eb;
  --bc-primary-dark: #1d4ed8;
  --bc-primary-light: #dbeafe;
  --bc-accent: #0ea5e9;
  --bc-success: #10b981;
  --bc-warning: #f59e0b;
  --bc-danger: #ef4444;
  --bc-bg: #f1f5f9;
  --bc-surface: #ffffff;
  --bc-border: #e2e8f0;
  --bc-text: #0f172a;
  --bc-text-muted: #64748b;
  --bc-sidebar-width: 250px;
  --bc-radius: 12px;
  --bc-radius-sm: 8px;
  --bc-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --bc-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
}

/* -------------------------------------------------------------------------- */
/* Base                                                                       */
/* -------------------------------------------------------------------------- */

.posi-app {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background: var(--bc-bg) !important;
  color: var(--bc-text);
}

.posi-app .wrapper {
  overflow-x: hidden;
  /* AdminLTE pinta .wrapper de #222d32 (el color del sidebar oscuro original)
     como respaldo detrás del header/contenido/sidebar. En este tema claro ya
     no cumple ningún propósito y es lo que se ve como franja oscura cuando
     algún cálculo de alto (ej. 100vh en navegadores móviles al mostrar/ocultar
     la barra de direcciones) deja un hueco por una fracción de segundo. */
  background: var(--bc-bg);
}

/* -------------------------------------------------------------------------- */
/* Header                                                                     */
/* -------------------------------------------------------------------------- */

.posi-app .main-header {
  background: var(--bc-surface) !important;
  border-bottom: 1px solid var(--bc-border);
  box-shadow: var(--bc-shadow);
  max-height: 60px;
}

.posi-app .main-header .logo,
.posi-app.skin-blue .main-header .logo {
  background: var(--bc-surface) !important;
  color: var(--bc-text) !important;
  border-right: 1px solid var(--bc-border);
  height: 60px;
  line-height: 60px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  width: var(--bc-sidebar-width);
  transition: width 0.3s ease;
}

.posi-app .main-header .logo:hover {
  background: var(--bc-bg) !important;
}

.posi-app .main-header .logo .logo-lg b,
.posi-app .main-header .logo .logo-mini b {
  color: var(--bc-primary);
  font-weight: 700;
}

.posi-app .main-header .navbar {
  background: transparent !important;
  margin-left: var(--bc-sidebar-width);
  min-height: 60px;
  display: flex !important;
  align-items: center;
}

.posi-app .main-header .sidebar-toggle {
  color: var(--bc-text-muted) !important;
  padding: 18px 16px;
  transition: color 0.15s ease;
}

.posi-app .main-header .sidebar-toggle:hover {
  color: var(--bc-primary) !important;
  background: transparent !important;
}

.posi-app .bc-header-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  min-width: 0;
  height: 100%;
}

.posi-app .bc-header-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--bc-text);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

.posi-app .bc-header-logo img {
  height: 58px;
  width: auto;
  object-fit: contain;
}

.posi-app .navbar-custom-menu > .navbar-nav > li > a {
  padding: 18px 16px;
  color: var(--bc-text-muted) !important;
}

.posi-app .navbar-custom-menu .user-menu > a {
  display: flex;
  align-items: center;
  gap: 10px;
}

.posi-app .bc-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ecfdf5;
  color: #059669;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.posi-app .bc-status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

.posi-app .bc-user-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--bc-text) !important;
}

.posi-app .navbar-custom-menu .dropdown-menu {
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-sm);
  box-shadow: var(--bc-shadow-md);
  padding: 0;
  overflow: hidden;
}

.posi-app .navbar-custom-menu .user-header {
  background: linear-gradient(135deg, var(--bc-primary) 0%, var(--bc-accent) 100%) !important;
  padding: 24px 16px;
}

.posi-app .navbar-custom-menu .user-header p {
  color: #fff;
  margin: 0;
}

.posi-app .navbar-custom-menu .user-footer {
  background: var(--bc-surface);
  padding: 12px 16px;
}

.posi-app .navbar-custom-menu .user-footer .btn {
  border-radius: var(--bc-radius-sm);
  font-weight: 500;
}

/* -------------------------------------------------------------------------- */
/* Sidebar                                                                    */
/* -------------------------------------------------------------------------- */

.posi-app .main-sidebar,
.posi-app.skin-blue .main-sidebar {
  background: var(--bc-surface) !important;
  border-right: 1px solid var(--bc-border);
  width: var(--bc-sidebar-width);
  padding-top: 60px;
  box-shadow: none;
}

.posi-app .sidebar-menu > li.header {
  background: transparent !important;
  color: var(--bc-text-muted) !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 16px 20px 8px;
}

.posi-app .sidebar-menu > li > a {
  color: var(--bc-text-muted) !important;
  border-left: 3px solid transparent;
  padding: 11px 16px 11px 18px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.posi-app .sidebar-menu > li > a > .fa,
.posi-app .sidebar-menu > li > a > .glyphicon,
.posi-app .sidebar-menu > li > a > .ion {
  color: var(--bc-text-muted);
  width: 20px;
  font-size: 15px;
}

.posi-app .sidebar-menu > li:hover > a,
.posi-app .sidebar-menu > li.active > a {
  background: var(--bc-primary-light) !important;
  color: var(--bc-primary-dark) !important;
  border-left-color: var(--bc-primary);
}

.posi-app .sidebar-menu > li:hover > a > .fa,
.posi-app .sidebar-menu > li.active > a > .fa {
  color: var(--bc-primary);
}

.posi-app .sidebar-menu .treeview-menu {
  background: var(--bc-bg) !important;
  padding: 4px 0 8px;
}

.posi-app .sidebar-menu .treeview-menu > li > a {
  color: var(--bc-text-muted) !important;
  font-size: 13px;
  padding: 8px 16px 8px 36px;
}

.posi-app .sidebar-menu .treeview-menu > li > a:hover,
.posi-app .sidebar-menu .treeview-menu > li.active > a {
  color: var(--bc-primary) !important;
  background: transparent !important;
}

.posi-app .sidebar-menu .treeview-menu > li > a > .fa {
  display: none;
}

/* -------------------------------------------------------------------------- */
/* Content area                                                               */
/* -------------------------------------------------------------------------- */

.posi-app .content-wrapper {
  background: var(--bc-bg) !important;
  margin-left: var(--bc-sidebar-width);
  min-height: calc(100vh - 60px);
  padding-top: 60px;
}

.posi-app .content {
  padding: 24px;
}

.posi-app .bc-page-header {
  margin-bottom: 24px;
}

.posi-app .bc-page-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--bc-text);
  margin: 0 0 4px;
  letter-spacing: -0.03em;
}

.posi-app .bc-page-header p {
  color: var(--bc-text-muted);
  margin: 0;
  font-size: 14px;
}

/* Legacy box wrapper — soften AdminLTE boxes */
.posi-app .box {
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius);
  box-shadow: var(--bc-shadow);
  background: var(--bc-surface);
}

.posi-app .box-header {
  border-bottom: 1px solid var(--bc-border);
  padding: 16px 20px;
  border-radius: var(--bc-radius) var(--bc-radius) 0 0;
}

.posi-app .box-header .box-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--bc-text);
}

.posi-app .box-body {
  padding: 20px;
}

.posi-app.bc-flat-content .box {
  border: none;
  box-shadow: none;
  background: transparent;
}

.posi-app.bc-flat-content .box-header {
  display: none;
}

.posi-app.bc-flat-content .box-body {
  padding: 0;
}

/* -------------------------------------------------------------------------- */
/* Dashboard components                                                       */
/* -------------------------------------------------------------------------- */

.bc-dashboard {
  max-width: 1400px;
  margin: 0 auto;
}

.bc-stat-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px 20px;
}

.bc-stat-grid > [class*="col-"] {
  padding: 0 10px;
  margin-bottom: 20px;
}

.bc-stat-card {
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius);
  padding: 20px;
  box-shadow: var(--bc-shadow);
  height: 100%;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.bc-stat-card:hover {
  box-shadow: var(--bc-shadow-md);
}

/* Tarjetas KPI que además son acceso directo (ej. Clientes registrados) */
.bc-stat-card-link {
  display: block;
  text-decoration: none !important;
  color: inherit !important;
}

.bc-stat-card-link:hover .bc-stat-card {
  border-color: var(--bc-primary);
  box-shadow: var(--bc-shadow-md);
  transform: translateY(-2px);
}

.bc-stat-card__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--bc-text-muted);
  margin-bottom: 8px;
}

.bc-stat-card__value {
  font-size: 28px;
  font-weight: 700;
  color: var(--bc-text);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.bc-stat-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 14px;
}

.bc-stat-card__icon--blue { background: #dbeafe; color: #2563eb; }
.bc-stat-card__icon--green { background: #d1fae5; color: #059669; }
.bc-stat-card__icon--amber { background: #fef3c7; color: #d97706; }
.bc-stat-card__icon--slate { background: #f1f5f9; color: #475569; }
.bc-stat-card__icon--red { background: #fee2e2; color: #dc2626; }

.bc-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--bc-text);
  margin: 8px 0 16px;
  letter-spacing: -0.01em;
}

.bc-quick-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px 24px;
}

.bc-quick-grid > [class*="col-"] {
  padding: 0 8px;
  margin-bottom: 16px;
}

.bc-quick-link {
  display: block;
  text-decoration: none !important;
  color: inherit !important;
}

.bc-quick-tile {
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius);
  padding: 20px 16px;
  text-align: center;
  box-shadow: var(--bc-shadow);
  transition: all 0.2s ease;
  height: 100%;
}

.bc-quick-link:hover .bc-quick-tile {
  border-color: var(--bc-primary);
  box-shadow: var(--bc-shadow-md);
  transform: translateY(-2px);
}

.bc-quick-tile__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--bc-primary-light);
  color: var(--bc-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 10px;
}

.bc-quick-tile__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--bc-text);
}

.bc-panel {
  background: var(--bc-surface);
  border: 1px solid #cbd5e1;
  border-radius: var(--bc-radius);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
  margin-bottom: 20px;
  overflow: hidden;
}

.bc-panel__header {
  padding: 16px 20px;
  background: var(--bc-bg);
  border-bottom: 1px solid #cbd5e1;
  font-size: 14px;
  font-weight: 600;
  color: var(--bc-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.bc-panel__header .fa {
  color: var(--bc-primary);
}

.bc-panel__body {
  padding: 16px 20px;
}

.bc-panel__body--scroll {
  max-height: 280px;
  overflow-y: auto;
}

.bc-progress-item {
  margin-bottom: 14px;
}

.bc-progress-item:last-child {
  margin-bottom: 0;
}

.bc-progress-item__label {
  font-size: 13px;
  color: var(--bc-text);
  margin-bottom: 6px;
}

.bc-progress-item__label strong {
  font-weight: 600;
}

.bc-progress {
  height: 6px;
  background: var(--bc-bg);
  border-radius: 999px;
  overflow: hidden;
}

.bc-progress__bar {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.bc-progress__bar--ok { background: var(--bc-success); }
.bc-progress__bar--warn { background: var(--bc-danger); }

.bc-alert-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--bc-radius);
  border: 1px solid var(--bc-border);
  background: var(--bc-surface);
  margin-bottom: 16px;
}

.bc-alert-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.bc-alert-card--success .bc-alert-card__icon { background: #d1fae5; color: #059669; }
.bc-alert-card--warning .bc-alert-card__icon { background: #fef3c7; color: #d97706; }
.bc-alert-card--danger .bc-alert-card__icon { background: #fee2e2; color: #dc2626; }

.bc-alert-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--bc-text);
  margin: 0 0 4px;
}

.bc-alert-card__text {
  font-size: 13px;
  color: var(--bc-text-muted);
  margin: 0;
}

.bc-notif-item {
  padding: 10px 14px;
  border-radius: var(--bc-radius-sm);
  font-size: 13px;
  margin-bottom: 8px;
  line-height: 1.5;
}

.bc-notif-item:last-child {
  margin-bottom: 0;
}

.bc-notif-item--danger { background: #fef2f2; color: #991b1b; border-left: 3px solid #ef4444; }
.bc-notif-item--warning { background: #fffbeb; color: #92400e; border-left: 3px solid #f59e0b; }
.bc-notif-item--info { background: #fefce8; color: #713f12; border-left: 3px solid #eab308; }
.bc-notif-item--envio { background: #4c1d95; color: #fff; border-left: 3px solid #7c3aed; }
.bc-notif-item--envio a { color: #fff; }
.bc-notif-item--facturar { background: #9a3412; color: #fff; border-left: 3px solid #ea580c; }
.bc-notif-item--facturar a { color: #fff; }

.bc-notif-item a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

/* -------------------------------------------------------------------------- */
/* Buttons, forms, tables (global polish)                                     */
/* -------------------------------------------------------------------------- */

.posi-app .btn-primary {
  background: var(--bc-primary) !important;
  border-color: var(--bc-primary) !important;
  border-radius: var(--bc-radius-sm);
  font-weight: 500;
}

.posi-app .btn-primary:hover,
.posi-app .btn-primary:focus {
  background: var(--bc-primary-dark) !important;
  border-color: var(--bc-primary-dark) !important;
}

.posi-app .btn-success {
  border-radius: var(--bc-radius-sm);
  font-weight: 500;
}

.posi-app .btn-danger,
.posi-app .btn-warning {
  border-radius: var(--bc-radius-sm);
  font-weight: 500;
}

.posi-app .form-control {
  border-radius: var(--bc-radius-sm);
  border-color: var(--bc-border);
  box-shadow: none;
}

.posi-app .form-control:focus {
  border-color: var(--bc-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.posi-app .table > thead > tr > th {
  border-bottom: 2px solid var(--bc-border);
  color: var(--bc-text-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.posi-app .table > tbody > tr > td {
  border-top-color: var(--bc-border);
  vertical-align: middle;
}

.posi-app .main-footer {
  background: var(--bc-surface);
  border-top: 1px solid var(--bc-border);
  color: var(--bc-text-muted);
  margin-left: var(--bc-sidebar-width);
  padding: 14px 24px;
  font-size: 13px;
}

/* En móvil (<768px) el sidebar de AdminLTE queda fuera de pantalla (translateX),
   pero estas reglas fijaban el margen/ancho del header, contenido y footer
   como si el sidebar siempre ocupara espacio, dejando expuesto el fondo oscuro
   de .wrapper (el mismo color del sidebar) en el hueco resultante.
   Además, AdminLTE traslada el sidebar con un valor fijo de -230px de fábrica,
   pero --bc-sidebar-width es 250px, así que sobraban 20px de sidebar visibles
   pegados al borde izquierdo en todo alto de la pantalla. */
@media (max-width: 767px) {
  .posi-app .main-sidebar {
    transform: translate(calc(-1 * var(--bc-sidebar-width)), 0);
  }

  .posi-app.sidebar-open .main-sidebar {
    transform: translate(0, 0);
  }

  .posi-app .main-header .logo {
    width: 100%;
  }

  .posi-app .main-header .navbar {
    margin-left: 0;
  }

  .posi-app .content-wrapper {
    margin-left: 0;
  }

  .posi-app .main-footer {
    margin-left: 0;
  }
}

.posi-app .main-footer a {
  color: var(--bc-primary);
}

/* -------------------------------------------------------------------------- */
/* Login page                                                                 */
/* -------------------------------------------------------------------------- */

.bc-login-page {
  min-height: 100vh;
  display: flex;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bc-bg);
}

@media (max-width: 991.98px) {
  .bc-login-page {
    background:
      linear-gradient(135deg, rgba(30, 64, 175, 0.4) 0%, rgba(37, 99, 235, 0.4) 50%, rgba(14, 165, 233, 0.4) 100%),
      url('../img/wallpaper.jpg') center/cover no-repeat;
  }
}

.bc-login-page__brand {
  flex: 1;
  display: none;
  position: relative;
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #0ea5e9 100%);
  padding: 48px;
  color: #fff;
  overflow: hidden;
}

@media (min-width: 992px) {
  .bc-login-page__brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.bc-login-page__brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/wallpaper.jpg') center/cover no-repeat;
  opacity: 0.60;
}

.bc-login-page__brand-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 360px;
}

.bc-login-page__brand-content img {
  max-height: 80px;
  margin-bottom: 24px;
}

.bc-login-page__brand h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: -0.03em;
}

.bc-login-page__brand p {
  font-size: 15px;
  opacity: 0.85;
  line-height: 1.6;
  margin: 0;
}

.bc-login-page__form-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px 24px;
  min-width: 0;
}

.bc-login-card {
  width: 100%;
  max-width: 400px;
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: 16px;
  padding: 40px 36px;
  box-shadow: var(--bc-shadow-md);
}

.bc-login-card__logo {
  text-align: center;
  margin-bottom: 28px;
}

.bc-login-card__logo img {
  max-height: 72px;
}

.bc-login-card__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--bc-text);
  text-align: center;
  margin: 0 0 28px;
  letter-spacing: -0.03em;
}

.bc-login-field {
  margin-bottom: 18px;
}

.bc-login-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--bc-text);
  margin-bottom: 6px;
}

.bc-login-field input {
  box-sizing: border-box;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-sm);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--bc-surface);
}

.bc-login-field input:focus {
  outline: none;
  border-color: var(--bc-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.bc-login-password-wrap {
  position: relative;
}

.bc-login-password-wrap input {
  padding-right: 42px;
}

.bc-login-password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--bc-text-muted);
  cursor: pointer;
  padding: 0;
}

.bc-login-password-toggle:hover {
  color: var(--bc-text);
}

.bc-login-submit {
  width: 100%;
  padding: 12px;
  background: var(--bc-primary);
  color: #fff;
  border: none;
  border-radius: var(--bc-radius-sm);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
  margin-top: 8px;
}

.bc-login-submit:hover {
  background: var(--bc-primary-dark);
}

.bc-login-alert {
  padding: 12px 14px;
  border-radius: var(--bc-radius-sm);
  font-size: 13px;
  margin-bottom: 18px;
  line-height: 1.5;
}

.bc-login-alert--error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.bc-login-alert--success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.bc-login-social {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.bc-login-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.15s;
}

.bc-login-social a:hover {
  transform: scale(1.08);
}

.bc-login-social .fb { background: #1877f2; }
.bc-login-social .ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.bc-login-social .wp { background: #25d366; }

.bc-login-social-label {
  text-align: center;
  font-size: 12px;
  color: var(--bc-text-muted);
  margin-top: 20px;
}

/* Collapsed sidebar adjustments */
.sidebar-collapse.posi-app .main-header .logo {
  width: 50px;
}

.sidebar-collapse.posi-app .main-header .navbar,
.sidebar-collapse.posi-app .content-wrapper,
.sidebar-collapse.posi-app .main-footer {
  margin-left: 50px;
}

.sidebar-collapse.posi-app .main-sidebar {
  width: 50px;
}

/* Ventana flotante de submenús con el sidebar contraído.
   Se muestra con :hover (comportamiento nativo de AdminLTE) o con la clase
   .bc-force-open, que un pequeño script en admin.blade.php agrega/quita al
   entrar/salir el mouse (ver ese archivo). Con display:none por defecto
   (igual que el AdminLTE original) el submenú NO ocupa espacio en el sidebar
   cuando está cerrado.
   "left" queda un poco por debajo del ancho real del sidebar (50px) para que
   el ícono y el submenú se solapen unos pixeles a propósito: así no puede
   quedar ni un hueco de por medio (por redondeo de píxeles del navegador,
   zoom, etc.) que el mouse tenga que cruzar sin nada debajo, ya que eso es
   lo que hacía que se cerrara si el mouse no se movía lo bastante rápido. */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
.sidebar-mini.sidebar-collapse .sidebar-menu > li.bc-force-open > a > span:not(.pull-right),
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu,
.sidebar-mini.sidebar-collapse .sidebar-menu > li.bc-force-open > .treeview-menu {
  display: block !important;
  position: absolute;
  width: 210px;
  left: 44px;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu,
.sidebar-mini.sidebar-collapse .sidebar-menu > li.bc-force-open > .treeview-menu {
  top: 44px;
  margin-left: 0;
}

.sidebar-mini.sidebar-collapse.posi-app .sidebar-menu .treeview-menu > li > a {
  white-space: normal;
  word-break: break-word;
}

/* Contraste: la lista de opciones usaba el mismo fondo que el contenido de la
   página, por lo que se confundía visualmente con lo que hay detrás */
.sidebar-mini.sidebar-collapse.posi-app .sidebar-menu .treeview-menu {
  background: var(--bc-surface) !important;
  border: 1px solid var(--bc-border);
  box-shadow: var(--bc-shadow-md);
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Etiqueta superior: color original (resaltado azul), solo se le agrega
   borde/sombra para separarla visualmente de la página */
.sidebar-mini.sidebar-collapse.posi-app .sidebar-menu > li:hover > a > span:not(.pull-right),
.sidebar-mini.sidebar-collapse.posi-app .sidebar-menu > li.bc-force-open > a > span:not(.pull-right) {
  border: 1px solid var(--bc-border);
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: var(--bc-shadow-md);
}

/* Header usuario esquina derecha */

.main-header .navbar-custom-menu {

    position:absolute;

    right:0;

    top:0;

}


.main-header .navbar-custom-menu .navbar-nav > li > a {

    height:60px;

    display:flex;

    align-items:center;

}


.main-header .navbar {

    position:relative;

}

/* -------------------------------------------------------------------------- */
/* Selector de caja registradora                                             */
/* -------------------------------------------------------------------------- */

.bc-register-page {
  max-width: 880px;
  margin: 48px auto 0;
  text-align: center;
}

.bc-register-page__icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--bc-primary-light);
  color: var(--bc-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 16px;
}

.bc-register-page h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--bc-text);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.bc-register-page p {
  font-size: 14px;
  color: var(--bc-text-muted);
  margin: 0 0 32px;
}

.bc-register-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.bc-register-card {
  width: 220px;
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius);
  box-shadow: var(--bc-shadow);
  padding: 28px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bc-register-card:hover {
  border-color: var(--bc-primary);
  box-shadow: var(--bc-shadow-md);
  transform: translateY(-3px);
}

.bc-register-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--bc-primary-light);
  color: var(--bc-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 14px;
}

.bc-register-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--bc-text);
  margin-bottom: 8px;
}

.bc-register-card__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bc-register-card__status--free {
  background: #ecfdf5;
  color: #059669;
}

.bc-register-card__status--free::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

/* Modal de confirmación */
.bc-register-modal .modal-content {
  border: none;
  border-radius: var(--bc-radius);
  box-shadow: var(--bc-shadow-md);
  overflow: hidden;
}

.bc-register-modal .modal-header {
  background: var(--bc-surface);
  border-bottom: 1px solid var(--bc-border);
  padding: 18px 22px;
}

.bc-register-modal .modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--bc-text);
}

.bc-register-modal .modal-body {
  padding: 32px 22px;
  text-align: center;
}

.bc-register-modal .modal-body strong {
  display: block;
  color: var(--bc-text);
  font-size: 17px;
  margin-bottom: 6px;
}

.bc-register-modal .modal-body p {
  color: var(--bc-text-muted);
  font-size: 14px;
  margin: 0;
}

.bc-register-modal .modal-footer {
  border-top: 1px solid var(--bc-border);
  text-align: center;
  padding: 16px 22px;
}

.bc-register-empty {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 40px 24px;
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius);
  box-shadow: var(--bc-shadow);
}

.bc-register-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #fef2f2;
  color: #dc2626;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}

.bc-register-empty__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--bc-text);
  margin: 0 0 6px;
}

.bc-register-empty__text {
  font-size: 13px;
  color: var(--bc-text-muted);
  margin: 0 0 20px;
}

/* -------------------------------------------------------------------------- */
/* Pantalla de Venta — panel superior (Cliente / Documento / Totales)        */
/* -------------------------------------------------------------------------- */

.bc-section-card {
  background: var(--bc-surface);
  border: 1px solid #cbd5e1;
  border-radius: var(--bc-radius);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
  margin-bottom: 20px;
  overflow: hidden;
}

.bc-section-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--bc-bg);
  border-bottom: 1px solid #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  color: var(--bc-text);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.bc-section-card__header i {
  color: var(--bc-primary);
  font-size: 14px;
}

.bc-section-card__body {
  padding: 18px 18px 4px;
}

/* Fila de tarjetas .bc-section-card de igual altura (flexbox estira las
   columnas al alto de la más alta; sin esto Bootstrap 3 no lo hace solo). */
.bc-row-equal {
  display: flex;
  flex-wrap: wrap;
}

.bc-row-equal > [class*="col-"] > .bc-section-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bc-row-equal > [class*="col-"] > .bc-section-card > .bc-section-card__body {
  flex: 1 1 auto;
}

/* Campos de solo lectura: distinguir claramente de los editables (global) */
.posi-app .form-control[readonly] {
  background: var(--bc-bg) !important;
  color: var(--bc-text-muted);
  cursor: default;
}

/* Tarjeta de Totales */
.bc-totals-card {
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius);
  box-shadow: var(--bc-shadow);
  padding: 18px;
}

.bc-totals-card__row {
  margin-bottom: 16px;
}

.bc-totals-card__row label {
  font-size: 12px;
  font-weight: 600;
  color: var(--bc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
  display: block;
}

.bc-totals-card__row--total {
  border-top: 1px solid var(--bc-border);
  padding-top: 16px;
  margin-bottom: 0;
}

.bc-totals-card__row--total label {
  color: var(--bc-text);
  font-size: 13px;
}

.bc-totals-card__row--total input {
  font-size: 22px;
  font-weight: 700;
  color: var(--bc-primary);
  border-color: var(--bc-primary);
  height: auto;
  padding: 8px 10px;
}

/* -------------------------------------------------------------------------- */
/* Pantalla de Venta — tabla de artículos (Fase B)                          */
/* -------------------------------------------------------------------------- */

.bc-section-card__body--flush {
  padding: 0;
}

.bc-sale-table {
  margin-bottom: 0;
}

.bc-sale-table {
  border-collapse: collapse;
}

.bc-sale-table > tbody > tr > td {
  padding: 8px 5px !important;
  vertical-align: middle;
  border-bottom: 1px solid var(--bc-border);
}

.bc-sale-table > thead > tr > th {
  background: var(--bc-primary-light);
  color: var(--bc-primary);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 6px;
  vertical-align: middle;
  border-bottom: 2px solid #7DD3FC !important;
}

.bc-sale-table .form-control {
  height: 30px;
  padding: 2px 6px;
}

/* Líneas aún no usadas (deshabilitadas) se ven más sutiles */
.bc-sale-table input:disabled,
.bc-sale-table select:disabled {
  opacity: 0.35;
}

.bc-row-delete {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 6px;
}

/* Desplegable del buscador de articulos de Cuentas por Cliente: el <select>
   vive en una celda angosta de la tabla, asi que se le da un ancho minimo
   comodo para que las columnas CODIGO/NOMBRE/STOCK no salgan amontonadas
   (tamano parecido al de Ventas). El max-width evita que se desborde en
   pantallas chicas. Se aplica via dropdownCssClass en cuentas/create.blade.php;
   OJO: select2 pone esa clase en el .select2-dropdown, no en el contenedor. */
.select2-dropdown.bc-dropdown-articulos {
  min-width: 620px;
  max-width: 95vw;
}
/* El nombre puede ser largo: que corte en varias lineas en vez de desbordar. */
.bc-dropdown-articulos .select2-results__option .row > div {
  word-break: break-word;
}

/* Fila de linea con stock insuficiente: tono sutil, no un rojo solido. */
.bc-sale-table > tbody > tr.bc-row-stock-warn > td {
  background: rgba(239, 68, 68, 0.08);
}
.bc-sale-table > tbody > tr.bc-row-stock-warn-msg > td {
  padding-top: 0 !important;
  padding-bottom: 6px !important;
  background: rgba(239, 68, 68, 0.08);
  color: var(--bc-danger);
  font-size: 12px;
  border-bottom: 1px solid var(--bc-border);
}
.bc-stock-btn {
  display: inline-block;
  color: var(--bc-primary);
  opacity: 1;
  font-size: 15px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  float: none !important;
}

.bc-stock-btn:hover {
  color: var(--bc-primary);
  opacity: 0.7;
}

/* -------------------------------------------------------------------------- */
/* Pantalla de Venta — botones de acción (Fase C)                           */
/* -------------------------------------------------------------------------- */

.bc-action-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 0 8px;
}

.bc-action-bar .btn {
  min-width: 130px;
  height: 38px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--bc-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* -------------------------------------------------------------------------- */
/* Etiqueta de campo en desuso / por eliminar                                 */
/* -------------------------------------------------------------------------- */

.bc-field-flag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid var(--bc-warning);
  vertical-align: middle;
}

.bc-field-deprecated {
  position: relative;
  padding: 10px 12px;
  border: 1px dashed var(--bc-warning);
  border-radius: var(--bc-radius-sm);
  background: rgba(245, 158, 11, 0.05);
}

.bc-field-deprecated .form-control {
  border-color: var(--bc-warning);
}

.bc-field-deprecated .bc-field-note {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: #92400e;
}

/* -------------------------------------------------------------------------- */
/* Tabla de información clave/valor (vistas de solo lectura)                   */
/* -------------------------------------------------------------------------- */

.bc-info-list {
  width: 100%;
  border-collapse: collapse;
}

.bc-info-list tr {
  border-bottom: 1px solid var(--bc-border);
}

.bc-info-list tr:last-child {
  border-bottom: none;
}

.bc-info-list td {
  padding: 11px 4px;
  vertical-align: middle;
}

.bc-info-list .bc-info-key {
  width: 38%;
  color: var(--bc-text-muted);
  font-size: 13px;
}

.bc-info-list .bc-info-val {
  color: var(--bc-text);
  font-weight: 600;
  font-size: 14px;
}

/* -------------------------------------------------------------------------- */
/* Módulo de Artículos (Detalles / Nuevo / Editar)                            */
/* -------------------------------------------------------------------------- */

.item-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.item-type-badge--articulo { background: var(--bc-primary-light); color: var(--bc-primary-dark); }
.item-type-badge--servicio { background: #d1fae5; color: #059669; }
.item-type-badge--combo    { background: #ffedd5; color: #c2410c; }

.item-chip {
  display: inline-block;
  font-size: 12px;
  background: var(--bc-bg);
  color: var(--bc-text);
  border: 1px solid var(--bc-border);
  border-radius: 999px;
  padding: 3px 10px;
  margin: 0 4px 4px 0;
}

/* Icono "i" de ayuda contextual (data-toggle="popover"), reutilizable en
   cualquier label del sistema - ver inicializador global en layouts/admin. */
.bc-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bc-primary-light);
  color: var(--bc-primary-dark);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  cursor: pointer;
  margin-left: 5px;
  vertical-align: middle;
}

.bc-info-icon:hover, .bc-info-icon:focus {
  background: var(--bc-primary);
  color: #fff;
  outline: none;
}