/* === Zoyo Compact overrides — global scale-down v1 === */
/* Loaded AFTER each module's inline <style> to take precedence */

:root {
  --radius-xl: 16px !important;
  --radius-lg: 12px !important;
  --radius-md: 10px !important;
  --radius-sm: 6px !important;
  --shadow-premium: 0 8px 20px rgba(31, 49, 51, 0.06) !important;
  --topbar-h: 44px !important;
  --sidebar-w: 208px !important;
  --sidebar-collapsed: 56px !important;
}

/* ---- Module header (the big purple gradient box) ---- */
.grg-module { padding: 10px 14px !important; }
.grg-header { padding: 10px 16px !important; gap: 10px !important; border-radius: 12px !important; box-shadow: 0 4px 14px rgba(139,23,92,0.12) !important; }
.grg-header h1 { font-size: 15px !important; font-weight: 700 !important; }
.grg-header .sub { font-size: 10px !important; margin-top: 1px !important; }

/* ---- Buttons ---- */
.btn-grg, .btn-grg-outline { padding: 6px 12px !important; font-size: 11px !important; border-radius: 10px !important; font-weight: 600 !important; }
.btn-grg i, .btn-grg-outline i { font-size: 11px !important; }
.btn-submit { padding: 9px 14px !important; font-size: 12px !important; border-radius: 10px !important; }
.btn-ver { padding: 3px 10px !important; font-size: 10px !important; border-radius: 8px !important; }

/* ---- KPI chips ---- */
.kpis { gap: 6px !important; padding: 6px 0 !important; }
.kpi-chip { padding: 6px 6px !important; border-radius: 8px !important; }
.kpi-chip .kpi-code { font-size: 9px !important; }
.kpi-chip .kpi-val { font-size: 16px !important; }
.kpi-chip .kpi-label { font-size: 8px !important; }

/* ---- Tabs / filter buttons ---- */
.filter-bar { gap: 5px !important; padding: 4px 0 !important; }
.tab-btn { padding: 5px 10px !important; font-size: 10px !important; border-radius: 8px !important; border-width: 1px !important; }
.tab-btn i { font-size: 10px !important; }
.count-badge { font-size: 9px !important; padding: 2px 6px !important; min-width: 16px !important; }

/* ---- Search ---- */
.search-wrap { min-width: 180px !important; }
.search-wrap i { left: 10px !important; font-size: 11px !important; }
.search-input { padding: 7px 12px 7px 32px !important; font-size: 12px !important; border-radius: 10px !important; }

/* ---- Tables ---- */
th { padding: 7px 10px !important; font-size: 9.5px !important; letter-spacing: 0.4px !important; }
td { padding: 7px 10px !important; font-size: 12px !important; }
.badge { padding: 2px 8px !important; font-size: 9.5px !important; }

/* ---- Pagination ---- */
.pagination { padding: 6px 0 !important; gap: 10px !important; }
.pagination button { padding: 5px 14px !important; font-size: 11px !important; border-radius: 9px !important; }
.pagination .page-info { font-size: 11px !important; }

/* ---- Modals ---- */
.modal-content { padding: 22px !important; border-radius: 18px !important; max-width: 500px !important; }
.modal-content.wide { max-width: 720px !important; }
.modal-title { font-size: 15px !important; margin-bottom: 14px !important; }
.modal-close { top: 12px !important; right: 14px !important; font-size: 16px !important; }
.form-group { margin-bottom: 10px !important; }
.form-group label { font-size: 10px !important; margin-bottom: 4px !important; }
.form-group input, .form-group select, .form-group textarea {
  padding: 7px 11px !important; font-size: 12px !important; border-radius: 9px !important;
}

/* ---- Cards and drop zones ---- */
.drop-zone { padding: 20px !important; border-radius: 12px !important; font-size: 12px !important; }
.empty { padding: 28px !important; font-size: 12px !important; }
.loading { padding: 40px !important; gap: 10px !important; font-size: 12px !important; }
.spinner { width: 28px !important; height: 28px !important; border-width: 2.5px !important; }

/* ---- Shell (app.html) ---- */
.sidebar-brand { padding: 10px 14px 8px !important; min-height: 48px !important; gap: 10px !important; }
.sidebar-brand img { width: 28px !important; height: 28px !important; border-radius: 8px !important; }
.sidebar-brand .brand-text { font-size: 13px !important; }
.nav-group-label { font-size: 9.5px !important; padding: 12px 16px 4px !important; letter-spacing: 1px !important; }
/* Sidebar colapsado (escritorio): ocultar texto de grupos — solo iconos */
.collapsed .nav-group-label { font-size: 0 !important; padding: 6px 0 2px !important; text-align: center !important; letter-spacing: 0 !important; height: 6px !important; overflow: hidden !important; }
.nav-item { padding: 7px 16px !important; font-size: 12px !important; gap: 10px !important; }
.nav-item i { font-size: 14px !important; width: 18px !important; }
.collapsed .nav-item i { font-size: 16px !important; }
.sidebar-footer { padding: 8px 12px !important; gap: 8px !important; }
.user-avatar { width: 28px !important; height: 28px !important; font-size: 11px !important; }
.user-info .user-name { font-size: 12px !important; }
.user-info .user-role { font-size: 10px !important; }
.sidebar-clock { font-size: 10px !important; padding: 6px !important; }
.btn-logout { font-size: 14px !important; }

/* ---- Generic tightening ---- */
h1 { font-size: clamp(15px, 1.2vw, 18px) !important; }
h2 { font-size: 13px !important; }
h3 { font-size: 12px !important; }

/* ============================================================
   MOBILE — ≤ 768px. Keep desktop intact; tight reflow for phone.
   ============================================================ */
@media (max-width: 768px) {

  /* Shell / sidebar: off-canvas slide-in */
  body { overflow-x: hidden !important; }
  .sidebar {
    position: fixed !important;
    left: 0; top: 0;
    height: 100vh !important;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(.4,0,.2,1) !important;
    box-shadow: 6px 0 24px rgba(0,0,0,0.18);
    width: 230px !important;
    z-index: 1000 !important;
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar.collapsed { width: 230px !important; } /* on mobile collapsed == same full width when opened */
  .collapsed .nav-label, .collapsed .brand-text, .collapsed .user-info { display: revert !important; }

  /* Backdrop when sidebar open */
  .sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 999;
  }
  .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

  /* Hamburger button: white arrow tab, vertically centered on left edge */
  .mobile-menu-btn {
    position: fixed !important; top: 50% !important; left: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 1001 !important; width: 30px !important; height: 56px !important;
    border-radius: 0 14px 14px 0 !important; background: var(--brand) !important;
    color: #fff !important; border: none !important; font-size: 20px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: 2px 4px 14px rgba(139,23,92,0.35) !important; cursor: pointer !important;
    padding: 0 !important;
  }
  .mobile-menu-btn i { font-size: 18px !important; margin-left: 2px !important; }
  /* When sidebar is open, flip the arrow and shift it with the sidebar */
  .sidebar.mobile-open ~ .mobile-menu-btn,
  body.sidebar-open .mobile-menu-btn { left: 230px !important; }
  body.sidebar-open .mobile-menu-btn i { transform: rotate(180deg); }

  .main { width: 100vw !important; }
  .content-frame { width: 100vw !important; }

  /* Module header: CSS grid — title+controls on row 1, buttons on row 2. */
  .grg-module { padding: 8px !important; padding-top: 8px !important; }
  .grg-header {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 8px 10px !important;
    padding: 10px 12px !important;
    align-items: center !important;
  }
  /* Row 1 col 1: title block */
  .grg-header > div:first-child {
    grid-column: 1 !important; grid-row: 1 !important;
    min-width: 0 !important;
  }
  .grg-header h1 { font-size: 15px !important; margin: 0 !important; }
  .grg-header h1 i { margin-right: 6px !important; }
  .grg-header .sub { font-size: 10px !important; margin-top: 2px !important; opacity: 0.85; }
  /* Row 1 col 2: user/theme controls — compact, avatar only, no name */
  .grg-header .header-right-controls {
    grid-column: 2 !important; grid-row: 1 !important;
    margin-left: 0 !important;
    gap: 6px !important;
  }
  .grg-header #headerUserName, .grg-header .user-name { display: none !important; }
  .grg-header #headerAvatar { width: 28px !important; height: 28px !important; font-size: 10px !important; }
  .grg-header #btnThemeToggle { padding: 6px 9px !important; }
  /* Row 2: action buttons span full width, equal 1fr */
  .grg-header .header-actions {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
  .grg-header .btn-grg, .grg-header .btn-grg-outline {
    padding: 7px 4px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }
  .grg-header .btn-grg i, .grg-header .btn-grg-outline i { margin-right: 3px !important; font-size: 10px !important; }

  /* KPI chips: 2-column grid so every card is visible without scrolling */
  .kpis {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    overflow: visible !important;
    flex-wrap: unset !important;
    padding: 4px 0 !important;
  }
  .kpi-chip, .kpi {
    flex: unset !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
  .kpi-chip .kpi-value, .kpi-chip .value, .kpi-chip .kpi-val,
  .kpi .val, .kpi .value { font-size: 18px !important; }
  .kpi-chip .kpi-label, .kpi-chip .label, .kpi .label { font-size: 9px !important; }

  /* Filter tabs: scrollable row */
  .filter-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding: 4px 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .tab-btn { flex-shrink: 0 !important; }

  /* Search bar full width, view toggles below */
  .search-wrap { min-width: 0 !important; width: 100% !important; }
  .search-row, .toolbar, .controls { flex-wrap: wrap !important; gap: 6px !important; }

  /* Tables: horizontal scroll wrapper */
  .table-wrap, .table-container, .lista, .list-view {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table { min-width: 560px !important; } /* force horizontal scroll on narrow screens */
  th, td { padding: 6px 8px !important; font-size: 11px !important; }
  th { font-size: 9px !important; }

  /* Modals full screen */
  .modal-overlay, .modal { align-items: flex-end !important; }
  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 95vh !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 16px !important;
  }
  .modal-content.wide { max-width: 100% !important; }
  .form-grid { grid-template-columns: 1fr !important; }

  /* KPI layout inside dashboard cards */
  .card-grid, .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }

  /* Pagination compact */
  .pagination { padding: 6px 2px !important; gap: 6px !important; flex-wrap: wrap !important; }
  .pagination .page-info { width: 100% !important; text-align: center !important; }

  /* Login page */
  .login-wrap, .login-card, .auth-container { padding: 12px !important; }
}