/* ============================================================================
 * wolf-compact.css — densidad reducida y consistente para toda la app.
 *
 * Loaded LAST en head.html (después de style.css) para ganar especificidad.
 * Cubre: sidebar, navbar, breadcrumb, body padding, cards, tables, inputs,
 * botones, badges. No toca colores ni layout estructural — solo tamaños y
 * paddings.
 *
 * Si querés volver al template original, simplemente quitar el <link> de este
 * archivo en partials/head.html. Cero migración.
 * ============================================================================ */

:root {
  --wolf-sidebar-w: 13.5rem;
  --wolf-sidebar-w-lg: 14.5rem;
  --wolf-font-base: 0.875rem;       /* 14px */
  --wolf-font-sm: 0.8125rem;        /* 13px */
  --wolf-font-xs: 0.75rem;          /* 12px */

  /* Re-escala las variables --font-* del template (style.css:149-157) para
   * que TODAS las utilidades .text-lg / .text-xl / .text-md hereden la nueva
   * densidad. Sin esto, h6.text-lg quedaba 18px mientras el resto era 14px. */
  --font-2xxl: 1.5rem;        /* 32px → 24px */
  --font-2xl: 1.375rem;       /* 28px → 22px */
  --font-xxl: 1.25rem;        /* 24px → 20px */
  --font-xl: 1.0625rem;       /* 20px → 17px */
  --font-lg: 0.9375rem;       /* 18px → 15px */
  --font-md: 0.875rem;        /* 16px → 14px */
  --font-sm: 0.8125rem;       /* 14px → 13px */
  --font-xs: 0.75rem;         /* 12px → 12px (mantener) */
  --font-xxs: 0.625rem;       /* 10px → 10px (mantener) */
}

/* --- Body / main --------------------------------------------------------- */
body { font-size: var(--wolf-font-base); }

/* Sidebar widths consistentes en TODOS los estados (incluyendo .active y
 * .active:hover). El template original revertía a 17.1875rem en hover —
 * eso rompía la armonía visual con el resto de la UI compacta. */
@media (min-width: 1200px) {
  .sidebar:not(.active),
  .sidebar.active:hover {
    width: var(--wolf-sidebar-w) !important;
  }
  .dashboard-main:not(.active) { margin-inline-start: var(--wolf-sidebar-w) !important; }
  .dashboard-main.active { margin-inline-start: 4.25rem !important; }
}
@media (min-width: 1400px) {
  .sidebar:not(.active),
  .sidebar.active:hover {
    width: var(--wolf-sidebar-w-lg) !important;
  }
  .dashboard-main:not(.active) { margin-inline-start: var(--wolf-sidebar-w-lg) !important; }
}
@media (min-width: 1650px) {
  .sidebar:not(.active),
  .sidebar.active:hover {
    width: var(--wolf-sidebar-w-lg) !important;
  }
  .dashboard-main:not(.active) { margin-inline-start: var(--wolf-sidebar-w-lg) !important; }
}

/* Sidebar colapsado más angosto (4.25rem ≈ 68px en lugar de 86px del
 * template). Suficiente para los iconos de 16px + padding. */
.sidebar.active { width: 4.25rem !important; }

.dashboard-main-body {
  padding: 0.875rem 1rem !important;
}
@media (min-width: 1400px) {
  .dashboard-main-body { padding: 1rem 1.25rem !important; }
}

/* --- Sidebar logo + scroll area ----------------------------------------- */
.sidebar-logo {
  height: 3.25rem !important;
  padding: 0.5rem 0.875rem !important;
}
.sidebar-logo img { max-height: 2.25rem !important; }

.sidebar-menu-area {
  height: calc(100vh - 52px) !important;
  padding: 0.5rem 0.625rem !important;
}

/* --- Sidebar items: tighter rows + smaller icons ----------------------- */
.sidebar .sidebar-menu li a,
.sidebar.active:hover .sidebar-menu li a {
  padding: 0.4rem 0.625rem !important;
  font-size: var(--wolf-font-sm) !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
}
@media (min-width: 1650px) {
  .sidebar .sidebar-menu li a,
  .sidebar.active:hover .sidebar-menu li a {
    font-size: var(--wolf-font-sm) !important;
  }
}
/* Sidebar colapsado: centrar iconos */
.sidebar.active:not(:hover) .sidebar-menu li a {
  justify-content: center !important;
  padding: 0.45rem !important;
}
.sidebar-menu li a .menu-icon {
  font-size: 1.05rem !important;
  margin-inline-end: 0.5rem !important;
}
@media (min-width: 1650px) {
  .sidebar-menu li a .menu-icon {
    font-size: 1.05rem !important;
    margin-inline-end: 0.55rem !important;
  }
}
.sidebar.active:not(:hover) .sidebar-menu li a .menu-icon {
  margin-inline-end: 0 !important;
}
.sidebar-menu li a i {
  width: 18px !important;
  font-size: 1rem !important;
  margin-inline-end: 0.5rem !important;
}
.sidebar-menu li.dropdown > a::after {
  font-size: 0.9rem !important;
  inset-inline-end: 0.55rem !important;
}
.sidebar-menu .sidebar-submenu {
  padding-block-start: 0.35rem !important;
  padding-inline-start: 1.5rem !important;
}
.sidebar-menu .sidebar-submenu li a {
  padding: 0.3rem 0px !important;
  font-size: var(--wolf-font-sm) !important;
}
.sidebar-menu li a .circle-icon {
  font-size: 0.5rem !important;
}

/* --- Navbar (top bar) --------------------------------------------------- */
.navbar-header {
  /* Padding-top mayor para que el badge absolute (que sale -50% Y del botón)
   * no se clippee contra el borde superior de la barra. */
  padding: 0.625rem 1rem 0.5rem !important;
  overflow: visible !important;
}
.navbar-header .w-40-px,
.navbar-header .h-40-px {
  width: 32px !important;
  height: 32px !important;
}
.navbar-header img.w-40-px {
  width: 32px !important;
  height: 32px !important;
}
.navbar-header iconify-icon.text-2xl,
.navbar-header iconify-icon.text-xl {
  font-size: 1.05rem !important;
}
/* Permitir que el badge sobresalga del botón circular sin que un padre lo
 * recorte. */
.navbar-header .has-indicator,
.navbar-header .dropdown {
  overflow: visible !important;
}
/* Badge de notificaciones (Tareas pendientes): más chico para encajar en el
 * botón de 32px y no sobresalir lateralmente. */
.navbar-header .badge.rounded-pill {
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  padding: 0.15em 0.4em !important;
  min-width: 16px !important;
  line-height: 1.2 !important;
}

/* --- Breadcrumb / page title ------------------------------------------- */
.dashboard-main-body > .d-flex.flex-wrap.align-items-center.justify-content-between.mb-24 {
  margin-bottom: 0.75rem !important;
}
.dashboard-main-body > .d-flex.flex-wrap > h6 {
  font-size: 1rem !important;
  font-weight: 600 !important;
}

/* --- Cards: less padding, tighter border-radius ------------------------ */
.card {
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.card-body { padding: 0.875rem 1rem !important; }
.card-header { padding: 0.75rem 1rem !important; font-size: var(--wolf-font-base) !important; }
.card-footer { padding: 0.625rem 1rem !important; }

/* --- Tables: denser rows ----------------------------------------------- */
.table { font-size: var(--wolf-font-sm) !important; }
.table > :not(caption) > * > * {
  padding: 0.45rem 0.6rem !important;
}
.table thead th,
.basic-border-table thead tr th,
.bordered-table thead tr th,
table#sortable-table thead th {
  font-size: var(--wolf-font-xs) !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--neutral-500, #6b7280) !important;
  font-weight: 600 !important;
  padding: 0.5rem 0.6rem !important;
}
.basic-border-table tbody td,
.bordered-table tbody td {
  font-size: var(--wolf-font-sm) !important;
  padding: 0.5rem 0.6rem !important;
}

/* --- Forms: smaller inputs --------------------------------------------- */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="tel"],
input[type="url"],
textarea,
select {
  font-size: var(--wolf-font-sm) !important;
  padding: 0.375rem 0.625rem !important;
  border-radius: 6px !important;
}
textarea.form-control { min-height: 5rem; }
.form-label, label.form-label {
  font-size: var(--wolf-font-sm) !important;
  margin-bottom: 0.25rem !important;
  font-weight: 500 !important;
}

/* --- Buttons: tighter ---------------------------------------------------- */
.btn {
  padding: 0.375rem 0.75rem !important;
  font-size: var(--wolf-font-sm) !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
}
.btn-sm {
  padding: 0.25rem 0.55rem !important;
  font-size: var(--wolf-font-xs) !important;
}
.btn-lg {
  padding: 0.5rem 1rem !important;
  font-size: var(--wolf-font-base) !important;
}

/* --- Badges + pills ----------------------------------------------------- */
.badge {
  font-size: var(--wolf-font-xs) !important;
  font-weight: 500 !important;
  padding: 0.3em 0.55em !important;
}

/* --- Modal: ligeramente más estrecho de top -------------------------- */
.modal-header { padding: 0.75rem 1rem !important; }
.modal-body { padding: 0.875rem 1rem !important; }
.modal-footer { padding: 0.625rem 1rem !important; }
.modal-title { font-size: 1rem !important; }

/* --- Headings: ajuste sutil para menos peso visual ------------------- *
 * Solo se aplica si el heading NO tiene una utilidad .text-* explícita —
 * esas utilidades ahora heredan las variables --font-* re-escaladas arriba,
 * así que respetar la utilidad cuando esté presente preserva intención. */
h1:not([class*="text-"]) { font-size: 1.5rem !important; }
h2:not([class*="text-"]) { font-size: 1.25rem !important; }
h3:not([class*="text-"]) { font-size: 1.1rem !important; }
h4:not([class*="text-"]) { font-size: 1rem !important; }
h5:not([class*="text-"]) { font-size: 0.95rem !important; }
h6:not([class*="text-"]) { font-size: var(--wolf-font-base) !important; }

/* --- Toasts / alerts ---------------------------------------------------- */
.alert {
  padding: 0.5rem 0.875rem !important;
  font-size: var(--wolf-font-sm) !important;
  border-radius: 6px !important;
}

/* --- Org chart toolbar (organigrama page): inputs heredan compacto -- */
#org-toolbar {
  padding: 0.5rem 0.875rem !important;
}
#org-toolbar input[type="search"],
#org-toolbar select {
  padding: 0.375rem 0.625rem !important;
  font-size: var(--wolf-font-sm) !important;
  border-radius: 6px !important;
}
#org-chart-container {
  height: calc(100vh - 180px) !important;
}

/* --- Admin users table: ajuste fino para foto miniatura --------------- */
.users-table .photo-mini {
  width: 28px !important;
  height: 28px !important;
}
.users-table .inline-form select {
  min-width: 160px !important;
  font-size: var(--wolf-font-sm) !important;
}

/* --- Stat cards (admin/users index, etc) ------------------------------ */
.stat-card {
  padding: 0.625rem 0.875rem !important;
  border-radius: 8px !important;
}
.stat-card .stat-num { font-size: 1.25rem !important; }
.stat-card .stat-label { font-size: 0.7rem !important; }

/* --- Dropdown menus: tighter ------------------------------------------ */
.dropdown-menu { font-size: var(--wolf-font-sm) !important; }
.dropdown-item { padding: 0.375rem 0.875rem !important; }

/* --- Footer: minimal ---------------------------------------------------- */
.dashboard-footer, footer.dashboard-footer {
  padding: 0.5rem 1rem !important;
  font-size: var(--wolf-font-xs) !important;
}

/* --- Pagination (DataTables, etc.) ------------------------------------ */
.pagination .page-link {
  padding: 0.3rem 0.6rem !important;
  font-size: var(--wolf-font-sm) !important;
}

/* --- Tabs ---------------------------------------------------------- */
.nav-tabs .nav-link, .nav-pills .nav-link {
  padding: 0.45rem 0.875rem !important;
  font-size: var(--wolf-font-sm) !important;
}

/* --- Org toolbar gestión usuarios button (color fix tras compact) --- */
#org-orphans-badge .btn { font-size: var(--wolf-font-xs) !important; }

/* ============================================================================
 * Auth (login/signin) — densidad consistente con el resto de la app.
 * Aplica a contenedores marcados `.auth-form-compact` (signin.html).
 * ============================================================================ */
.auth-form-compact h4,
.auth-form-compact h2 {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  line-height: 1.3;
}

.auth-form-compact p {
  font-size: var(--wolf-font-sm) !important;
  line-height: 1.4;
}

/* Inputs del login: alto consistente con el resto de la app (~40px),
   antes 56px desentonaba contra todos los demás form-control. */
.auth-form-compact .form-control {
  height: 2.5rem !important;
  padding: 0.4rem 0.75rem 0.4rem 2.5rem !important;
  font-size: var(--wolf-font-base) !important;
  border-radius: 0.5rem !important;
}

/* Icono del input — alineado con el field más bajo. */
.auth-form-compact .icon-field .icon {
  left: 0.875rem;
  font-size: 1rem;
  color: #94a3b8;
}

.auth-form-compact .toggle-password {
  font-size: 0.95rem;
}

/* Botón Microsoft: altura igual a inputs + tipografía consistente. */
.auth-form-compact .ms-login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: 0.5rem;
  background: #0f172a;
  color: #ffffff;
  font-size: var(--wolf-font-base);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease;
}
.auth-form-compact .ms-login-button:hover {
  background: #1e293b;
  color: #ffffff;
}
.auth-form-compact .ms-login-button .ms-logo {
  width: 18px;
  height: 18px;
}

/* Botón "Iniciar sesión" estándar — sin el py-16 del template. */
.auth-form-compact button[type="submit"].btn-primary {
  height: 2.5rem;
  padding: 0 1rem !important;
  font-size: var(--wolf-font-base) !important;
  font-weight: 500;
  border-radius: 0.5rem !important;
}

.auth-form-compact .max-w-220-px {
  max-width: 200px;
}

.auth-form-compact .center-border-horizontal span {
  font-size: var(--wolf-font-xs) !important;
  color: #64748b;
}

/* ============================================================================
 * Sidebar — divider de sección (separa "Operación" / "Sistema" del menu personal)
 * ============================================================================ */
.sidebar-menu .sidebar-section-divider {
  list-style: none;
  pointer-events: none;
  margin: 0.625rem 0 0.25rem;
  padding: 0.25rem 1rem;
  border-top: 1px solid #e2e8f0;
}
.sidebar-menu .sidebar-section-divider span {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin-top: 0.4rem;
}
/* En sidebar colapsada (active), ocultamos el texto pero mantenemos la línea. */
.sidebar.active .sidebar-menu .sidebar-section-divider span {
  display: none;
}
.sidebar.active .sidebar-menu .sidebar-section-divider {
  margin: 0.5rem 0.5rem;
  padding: 0;
}