/* Elour Aqua v130 · lenguaje visual compacto basado en ISP Gestión. */
body.app-page {
  --bg:#f4f3ef;
  --surface:#fff;
  --surface-soft:#f8f7f4;
  --ink:#20242c;
  --muted:#5f6878;
  --line:#d9dce3;
  --blue:#5b4fd8;
  --blue-dark:#4136b4;
  --cyan:#167c85;
  --violet:#7257c7;
  --green:#0d7a5b;
  --amber:#a96408;
  --red:#bd3847;
  --navy:#071b34;
  --shadow:0 4px 14px rgba(36,39,47,.07);
  --radius:12px;
  background:linear-gradient(145deg,var(--bg),var(--surface-soft));
  color:var(--ink);
  font-size:13px;
}

html[data-theme="dark"] body.app-page {
  --bg:#06172b;
  --surface:#0b2340;
  --surface-soft:#102e50;
  --ink:#eef6ff;
  --muted:#a9c0d7;
  --line:#274d72;
  --blue:#aa9cff;
  --blue-dark:#c1b7ff;
  --cyan:#73cad0;
  --violet:#bca8f0;
  --green:#61d3ad;
  --amber:#f1bd69;
  --red:#f28a94;
  --navy:#061b35;
  --shadow:0 5px 16px rgba(0,0,0,.22);
  background:linear-gradient(145deg,#06172b,#0a2644);
}

body.app-page::before { opacity:.35; }
body.app-page .app-shell { grid-template-columns:226px minmax(0,1fr); }
body.app-page .sidebar {
  width:226px;padding:16px 12px 13px;
  background:linear-gradient(175deg,#0d3158,var(--navy) 72%);
  border-color:#284f78;box-shadow:8px 0 30px rgba(0,0,0,.10);
}
body.app-page .brand {min-height:46px;padding:0 7px;gap:9px}
body.app-page .brand img {width:43px;height:32px}
body.app-page .brand strong {font-size:15px}
body.app-page .brand small {font-size:9px;color:#b9c7d6}
body.app-page .side-nav {gap:2px;margin-top:15px;padding-right:2px}
body.app-page .side-nav a,
body.app-page .side-group>summary {min-height:36px;padding:0 9px;gap:9px;border-radius:8px;font-size:11px;color:#c4cad2}
body.app-page .side-nav .nav-icon {width:17px;height:17px;flex-basis:17px;color:#70d0b0}
body.app-page .side-nav a:hover,
body.app-page .side-nav a.active,
body.app-page .side-group>summary:hover,
body.app-page .side-group>summary.active {background:#12365c;color:#fff}
body.app-page .side-nav a.active {box-shadow:inset 3px 0 0 #70d0b0}
body.app-page .side-subnav {gap:1px;padding:3px 0 5px 27px}
body.app-page .side-subnav a {min-height:29px;padding:0 8px;font-size:10px;border-radius:7px}
body.app-page .sidebar-foot {gap:8px;padding:8px 7px 0}

body.app-page .topbar {height:58px;padding:0 21px;gap:12px;background:color-mix(in srgb,var(--surface) 91%,transparent)}
body.app-page .topbar-title {font-size:10px}
body.app-page .topbar-actions {gap:8px}
body.app-page .icon-button {width:34px;height:34px;border-radius:9px;background:var(--surface);border-color:var(--line)}
body.app-page .user-chip {gap:7px;padding-left:9px}
body.app-page .user-chip>span {width:31px;height:31px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--green))}
body.app-page .user-chip strong {font-size:11px}
body.app-page .user-chip small {font-size:9px}
body.app-page .text-button {font-size:11px}

body.app-page .content-wrap {width:min(1600px,100%);padding:18px 22px 28px}
body.app-page .content-wrap::before {display:none}
body.app-page .page-head {align-items:center;gap:14px;margin-bottom:14px}
body.app-page .page-head h1 {margin:3px 0;font-size:clamp(23px,2vw,29px);letter-spacing:-.03em}
body.app-page .page-head p {font-size:12px;line-height:1.4}
body.app-page .kicker {font-size:9px;letter-spacing:.12em;color:var(--green)}

body.app-page .card {padding:15px;border-radius:12px;border-color:var(--line);box-shadow:var(--shadow)}
body.app-page .card::before {height:2px;background:linear-gradient(90deg,var(--blue),var(--green),var(--amber));opacity:.8}
body.app-page .card-head {gap:10px;margin-bottom:12px}
body.app-page .card-head h2 {font-size:15px}
body.app-page .card-head p {font-size:10px}
body.app-page .data-section>.card-head {padding:14px 15px 11px}
body.app-page .stats-grid,
body.app-page .detail-grid {gap:10px;margin-bottom:12px}
body.app-page .stat-card {min-height:98px;padding:14px;gap:3px}
body.app-page .stat-card strong {font-size:24px}
body.app-page .stat-card>span,
body.app-page .summary-card>span {font-size:9px}
body.app-page .summary-card {gap:6px}
body.app-page .summary-card>strong:not(.status) {font-size:18px}
body.app-page .summary-card p {font-size:10px}

body.app-page .button {min-height:36px;padding:0 12px;gap:7px;border-radius:9px;font-size:11px;box-shadow:none}
body.app-page .button.primary {background:linear-gradient(135deg,var(--blue),var(--blue-dark));box-shadow:0 4px 12px rgba(91,79,216,.20)}
body.app-page .button.secondary {color:var(--blue-dark);background:color-mix(in srgb,var(--blue) 9%,var(--surface));border-color:color-mix(in srgb,var(--blue) 28%,var(--line))}
body.app-page .compact-button {min-height:31px;padding:0 9px;font-size:10px}
body.app-page input,
body.app-page select {height:39px;padding:0 11px;border-radius:9px;background:var(--surface-soft);border-color:color-mix(in srgb,var(--line) 78%,var(--muted))}
body.app-page textarea {min-height:78px;padding:10px 11px;border-radius:9px;background:var(--surface-soft)}
body.app-page label {gap:5px;font-size:11px}
body.app-page .form-stack {gap:12px}
body.app-page .form-grid,
body.app-page .mini-grid {gap:12px}
body.app-page .filter-bar,
body.app-page .filters-bar {gap:9px;padding:11px}

body.app-page .table-wrap {margin:0 -15px -15px;border-radius:0 0 12px 12px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
body.app-page .data-section .table-wrap {margin:0}
body.app-page table {width:100%;background:var(--surface);color:var(--ink);font-variant-numeric:tabular-nums}
body.app-page th {padding:9px 12px;color:color-mix(in srgb,var(--ink) 72%,var(--muted));background:color-mix(in srgb,var(--surface-soft) 78%,var(--line));font-size:9px;letter-spacing:.065em;border-color:var(--line);white-space:nowrap}
body.app-page td {padding:8px 12px;color:var(--ink);border-color:var(--line);font-size:11px;line-height:1.25}
body.app-page tbody tr:nth-child(even) {background:var(--surface-soft)}
body.app-page .table-wrap tbody tr:hover {background:color-mix(in srgb,var(--blue) 9%,var(--surface));box-shadow:inset 3px 0 0 var(--blue)}
body.app-page .entity {gap:8px}
body.app-page .entity>span {width:31px;height:31px;border-radius:9px}
body.app-page .entity strong {font-size:11px}
body.app-page .table-actions {gap:7px;flex-wrap:wrap}
body.app-page .table-tools {gap:9px;margin:0 0 9px}
body.app-page .table-search input {height:35px;font-size:10px}
body.app-page .table-pagination {min-height:40px;gap:7px;margin:0;padding:8px 8px 0}
body.app-page .table-page-button {min-height:29px}
body.app-page .status {min-height:21px;padding:0 7px;font-size:8px}

body.app-page .config-modal {width:min(720px,calc(100vw - 28px))}
body.app-page .config-modal.compact-modal {width:min(590px,calc(100vw - 28px))}
body.app-page .config-modal .modal-card {border-radius:14px}
body.app-page .config-modal .card-head {padding:16px 18px 12px}
body.app-page .config-modal .card-head h2 {font-size:17px}
body.app-page .config-modal .form-stack {padding:15px 18px 18px}
body.app-page .config-modal .modal-actions {bottom:-18px;margin:4px -18px -18px;padding:11px 18px}
body.app-page .flash {margin-bottom:11px;padding:10px 12px;border-radius:9px;font-size:11px}

@media (max-width:1100px) {
  body.app-page .app-shell {grid-template-columns:210px minmax(0,1fr)}
  body.app-page .sidebar {width:210px}
  body.app-page .content-wrap {padding:16px}
}

@media (max-width:780px) {
  body.app-page .app-shell {grid-template-columns:1fr}
  body.app-page .sidebar {left:-286px;width:270px;padding:15px 12px}
  body.app-page.menu-open .sidebar {left:0}
  body.app-page .topbar {height:54px;padding:0 11px}
  body.app-page .content-wrap {padding:13px 10px 22px}
  body.app-page .page-head {align-items:stretch;gap:10px;margin-bottom:11px}
  body.app-page .page-head .button {width:100%}
  body.app-page .card {padding:12px}
  body.app-page .table-wrap {margin:0 -12px -12px;overscroll-behavior-inline:contain}
  body.app-page .data-section .table-wrap {margin:0}
  body.app-page table {min-width:680px}
  body.app-page .table-tools {align-items:stretch;flex-direction:column}
  body.app-page .table-search {width:100%}
  body.app-page .config-modal .card-head,
  body.app-page .config-modal .form-stack {padding-right:14px;padding-left:14px}
  body.app-page .config-modal .modal-actions {margin-right:-14px;margin-left:-14px;padding-right:14px;padding-left:14px}
}

@media (max-width:520px) {
  body.app-page .stats-grid,
  body.app-page .detail-grid {grid-template-columns:1fr 1fr}
  body.app-page .stat-card {min-height:83px;padding:11px}
  body.app-page .stat-card strong {font-size:20px}
  body.app-page .topbar-actions {gap:5px}
  body.app-page .user-chip {padding-left:5px}
}

@media (prefers-reduced-motion:reduce) {
  body.app-page *,body.app-page *::before,body.app-page *::after {animation:none!important;transition:none!important}
}