/* ============================================================
   La Casa del Tornillo S.R.L. — custom.css v2
   Paleta: Primario #1a3c5e | Secundario #e8a020
   ============================================================ */

:root {
  --ct-primary:   #1a3c5e;
  --ct-secondary: #e8a020;
  --ct-navbar-h:  56px;
}

/* ── BASE ─────────────────────────────────────────────────── */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: .9375rem;
  background: #f0f2f5;
}

/* ── NAVBAR ────────────────────────────────────────────────── */
#mainNav {
  background: var(--ct-primary) !important;
  height: var(--ct-navbar-h);
}
.brand-icon  { color: var(--ct-secondary); font-size: 1.4rem; }
.brand-text  { color: #fff; font-size: 1rem; }
.sidebar-toggle { background: transparent; border: none; color: var(--ct-secondary); padding: 4px 8px; }
.sidebar-toggle:hover { color: #fff; }
.rol-badge { background: var(--ct-secondary); color: var(--ct-primary); font-weight: 700; }

/* ── CAMPANA NOTIFICACIONES ────────────────────────────────── */
.notification-bell { position: relative; text-decoration: none; }
.notification-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  background: #dc3545;
  color: #fff;
  border-radius: 10px;
  font-size: .65rem;
  font-weight: 700;
  padding: 1px 5px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
  border: 2px solid var(--ct-primary);
}

/* ── SIDEBAR ───────────────────────────────────────────────── */
.sidebar-offcanvas { width: 265px !important; background: var(--ct-primary) !important; }
.sidebar-header { background: rgba(0,0,0,.2); }
.sidebar-body { display: flex; flex-direction: column; height: 100%; overflow-y: auto; }
.sidebar-section {
  color: rgba(255,255,255,.4);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .75rem 1.25rem .2rem;
  margin-top: .2rem;
}
.sidebar-link {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,.8) !important;
  padding: .55rem 1.25rem;
  font-size: .875rem;
  border-left: 3px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  text-decoration: none;
}
.sidebar-link:hover { background: rgba(255,255,255,.1); color: #fff !important; border-left-color: var(--ct-secondary); }
.sidebar-link.active { background: rgba(232,160,32,.15); color: var(--ct-secondary) !important; border-left-color: var(--ct-secondary); font-weight: 600; }
.sidebar-footer { margin-top: auto; padding: .75rem 1.25rem; color: rgba(255,255,255,.4); font-size: .78rem; border-top: 1px solid rgba(255,255,255,.1); }

/* ── MAIN CONTENT ──────────────────────────────────────────── */
.main-content { padding-top: var(--ct-navbar-h); min-height: calc(100vh - 40px); }
.footer-bar { background: var(--ct-primary); color: rgba(255,255,255,.5); font-size: .78rem; }

/* ── CARDS Y MÉTRICAS ──────────────────────────────────────── */
.card { border-radius: .75rem !important; }
.card-header { border-radius: .75rem .75rem 0 0 !important; }

.metric-card { border-radius: .75rem !important; transition: transform .2s, box-shadow .2s; }
.metric-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.1) !important; }
.metric-icon {
  width: 48px; height: 48px; border-radius: .6rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bg-primary-soft  { background: rgba(13,110,253,.12);  }
.bg-success-soft  { background: rgba(25,135,84,.12);   }
.bg-orange-soft   { background: rgba(255,193,7,.18);   }
.bg-danger-soft   { background: rgba(220,53,69,.12);   }

.metric-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: var(--ct-primary); }
.metric-label { font-size: .78rem; color: #6c757d; }

/* ── AVATAR PERFIL ─────────────────────────────────────────── */
.avatar-circle {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--ct-primary);
  color: var(--ct-secondary);
  font-size: 1.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── PROVEEDOR CARD ────────────────────────────────────────── */
.proveedor-card { transition: transform .15s, box-shadow .15s; }
.proveedor-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.08) !important; }

/* ── CATEGORÍA ICON ────────────────────────────────────────── */
.category-icon {
  width: 44px; height: 44px;
  border-radius: .5rem;
  background: rgba(232,160,32,.12);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ── BADGES DE MOVIMIENTO ──────────────────────────────────── */
.badge-entrada { background: rgba(25,135,84,.15); color: #155724; border: 1px solid rgba(25,135,84,.3); }
.badge-salida  { background: rgba(220,53,69,.12); color: #721c24; border: 1px solid rgba(220,53,69,.25); }

/* ── TABLAS ────────────────────────────────────────────────── */
.table thead th { font-size: .8rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.table-hover tbody tr:hover { background: rgba(26,60,94,.04); }
.table-success-light { background: rgba(25,135,84,.06); }

/* ── FORMULARIOS ───────────────────────────────────────────── */
.required-field::after { content: ' *'; color: var(--ct-secondary); }
.form-control:focus, .form-select:focus { border-color: var(--ct-primary); box-shadow: 0 0 0 .2rem rgba(26,60,94,.15); }

/* ── PAGINACIÓN ────────────────────────────────────────────── */
.page-link { color: var(--ct-primary); }
.page-item.active .page-link { background: var(--ct-primary); border-color: var(--ct-primary); }

/* ── ALERTAS ANIMADAS ──────────────────────────────────────── */
.auto-dismiss { animation: slideIn .3s ease; }
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── PRINT STYLES ──────────────────────────────────────────── */
@media print {
  #mainNav, #sidebarOffcanvas, .sidebar-toggle,
  .btn, .btn-close, .alert-dismissible .btn-close,
  nav[aria-label="Paginación"],
  .card-footer .btn,
  .footer-bar { display: none !important; }

  .main-content { padding-top: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #dee2e6 !important; }
  .card-header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff !important; font-size: 11pt; }

  @page { margin: 1.5cm; }
}

/* ── SELECT2 ───────────────────────────────────────────────── */

/* Altura mínima coherente con Bootstrap form-control */
.select2-container--bootstrap-5 .select2-selection {
  min-height: calc(1.5em + .75rem + 2px);
  border-color: #dee2e6;
  font-size: .9375rem;
}
.select2-container--bootstrap-5 .select2-selection:focus,
.select2-container--bootstrap-5 .select2-container--focus .select2-selection {
  border-color: var(--ct-primary);
  box-shadow: 0 0 0 .2rem rgba(26,60,94,.15);
  outline: 0;
}

/* Input de búsqueda dentro del dropdown */
.select2-container--bootstrap-5 .select2-search__field {
  border-color: #dee2e6;
  font-size: .875rem;
}
.select2-container--bootstrap-5 .select2-search__field:focus {
  border-color: var(--ct-primary);
  box-shadow: 0 0 0 .2rem rgba(26,60,94,.12);
}

/* Opción resaltada */
.select2-container--bootstrap-5 .select2-results__option--highlighted {
  background: var(--ct-primary);
  color: #fff;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted code {
  color: rgba(255,255,255,.8);
}

/* Resultado seleccionado */
.select2-container--bootstrap-5 .select2-results__option--selected {
  background: rgba(26,60,94,.08);
  color: var(--ct-primary);
  font-weight: 600;
}

/* Placeholder color */
.select2-container--bootstrap-5 .select2-selection__placeholder {
  color: #6c757d;
}

/* Badge dentro de resultado */
.select2-results__option .badge {
  font-size: .68rem;
}

/* Form-select-sm compatible */
.input-group .select2-container {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 576px) {
  .metric-value { font-size: 1.25rem; }
  .metric-icon  { width: 40px; height: 40px; }
  .table-responsive { font-size: .82rem; }
}