/* Marco Helios: geometría y tokens de crm-carpetas.css y crm-vidrio.css de Cénit. */
:root {
  --paper: #faf6ee; --cover: #fffdf9; --glass: rgb(255 253 249 / .8);
  --edge: rgb(40 55 74 / .14); --light: inset 0 1px 0 rgb(255 255 255 / .95);
  --shadow: var(--light), 0 22px 50px -36px rgb(40 55 74 / .5);
  --radius: 12px;
}
:root[data-look='futuristico'] {
  --bg: #efe6d6; --paper: rgb(255 253 249 / .88); --glass: rgb(255 253 249 / .72);
  --edge: rgb(255 255 255 / .65); --line: rgb(40 55 74 / .14); --muted: #435164;
  background-color: var(--bg);
  background-image: radial-gradient(ellipse 1100px 760px at 4% -10%, rgb(96 128 172 / .58), transparent 75%),
    radial-gradient(ellipse 980px 720px at 102% 2%, rgb(168 64 82 / .24), transparent 75%),
    radial-gradient(ellipse 1040px 780px at 98% 110%, rgb(238 206 150 / .82), transparent 75%),
    radial-gradient(ellipse 860px 660px at -8% 106%, rgb(140 150 100 / .24), transparent 75%);
  background-attachment: fixed;
}
:root[data-tema='noche'] {
  color-scheme: dark; --bg: #0a1018; --ink: #f3eee4; --muted: #c4cbd4; --soft: #243243;
  --paper: #15202c; --cover: #18212d; --glass: rgb(23 32 44 / .88);
  --edge: rgb(255 255 255 / .14); --line: rgb(243 238 228 / .16); --focus: #e0bc9d;
  --light: inset 0 1px 0 rgb(255 255 255 / .14); --shadow: var(--light), 0 22px 50px -36px #000;
}
:root[data-look='futuristico'][data-tema='noche'] {
  --paper: rgb(23 32 44 / .9);
  background-image: radial-gradient(ellipse 1100px 760px at 4% -10%, rgb(72 112 178 / .6), transparent 75%),
    radial-gradient(ellipse 980px 720px at 102% 2%, rgb(160 48 68 / .46), transparent 75%),
    radial-gradient(ellipse 1040px 780px at 98% 110%, rgb(236 131 107 / .24), transparent 75%);
}
body { background: transparent; }
.workspace { max-width: 1500px; margin: auto; padding: 16px 24px 32px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'header' 'nav' 'content'; align-content: start; }
.topbar { grid-area: header; position: relative; z-index: 40; height: auto; min-height: 76px; padding: 12px 18px; gap: 24px; border: 1px solid var(--edge); border-radius: 20px; background: var(--glass); box-shadow: var(--shadow); }
.client-brand { display: flex; align-items: center; gap: 12px; font-size: 22px; letter-spacing: -.4px; }
.brand-monogram { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--edge); border-radius: 13px; font: 400 19px Manrope, sans-serif; background: var(--glass); box-shadow: var(--light); }
.client-brand > span:last-child { max-width: 280px; }
.client-brand small { display: flex; align-items: center; gap: 4px; margin-top: 6px; font: 10px Manrope, sans-serif; letter-spacing: 0; }
.client-brand img { height: 16px; width: 48px; object-fit: contain; }
.topbar .environment { margin-right: auto; }
.topbar-actions { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.sidebar { grid-area: nav; position: relative; top: auto; height: auto; padding: 0 20px; border: 0; display: block; min-width: 0; }
.sidebar > .client-brand, .sidebar > .workspace-label, .sidebar-bottom { display: none; }
.sidebar nav { display: flex; align-items: end; gap: 4px; padding-top: 18px; overflow-x: auto; scrollbar-width: thin; }
.nav-link { min-height: 48px; padding: 12px 15px; border-radius: 14px 14px 0 0; white-space: nowrap; font-size: 12px; background: var(--glass); border: 1px solid transparent; border-bottom: 0; gap: 8px; }
.nav-link .icon { display: none; }
.nav-link:hover { background: var(--cover); }
.nav-link.active { min-height: 54px; border-color: var(--edge); background: var(--paper); box-shadow: var(--light); }
.workspace-main { grid-area: content; min-width: 0; background: var(--paper); border: 1px solid var(--edge); border-radius: 24px; box-shadow: var(--shadow); }
.workspace-main main { padding: 32px; min-height: calc(100dvh - 245px); }
.workspace-footer { padding: 18px 32px; margin-inline: 32px; padding-inline: 0; font-size: 11px; }
.page-heading h1 { font-size: 42px; }
.metrics { gap: 12px; padding: 0; border: 0; margin-bottom: 30px; }
.metric, .metric:first-child, .metric:last-child { border: 1px solid var(--edge); padding: 22px; border-radius: 18px; background: var(--glass); box-shadow: var(--light); }
.metric > strong { font-size: 32px; }
.metric > small { font-size: 11px; }
.metric > .icon { right: 16px; top: 24px; }
.overview-grid { gap: 32px; }
.overview-grid > * { min-width: 0; }
.panel { margin-bottom: 30px; }
.section-heading h2 { font-size: 26px; }
table { font-size: 13px; }
th, td small, .attention-row small, .task-row small, .service-row small { font-size: 11px; }
.attention-row strong, .task-row strong { font-size: 12px; }
.badge { border-radius: 8px; background: var(--glass); font-size: 11px; }
.badge.attention { color: var(--focus); border-color: var(--focus); }
.btn.primary { background: var(--ink); color: var(--cover); box-shadow: 0 6px 12px -10px var(--ink); }
.btn.primary:hover { background: var(--muted); }
.btn.secondary { background: var(--glass); border-color: var(--line); }
.avatar, .segmented button.active { background: var(--cover); }
.appearance { position: relative; }
.appearance > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; cursor: pointer; font-size: 12px; list-style: none; border-radius: 12px; }
.appearance > summary::-webkit-details-marker { display: none; }
.appearance > summary:hover { background: var(--soft); }
.appearance-sheet { position: absolute; z-index: 50; right: 0; top: calc(100% + 12px); width: 280px; max-width: calc(100vw - 32px); padding: 24px; background: var(--cover); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 22px 60px -28px #0006; }
.appearance-sheet h2 { font-size: 27px; margin-bottom: 20px; }
.appearance-sheet label { display: grid; gap: 7px; margin-bottom: 16px; font-size: 12px; font-weight: 600; }
.appearance-sheet select { background: var(--cover); font-size: 13px; }
.appearance-sheet small { font-size: 11px; }
dialog { background: var(--cover); border-radius: 22px; border-color: var(--edge); }
.modal-header { position: sticky; top: 0; z-index: 2; background: var(--cover); }
.aura-card, .subscription-note, .dealer-node, .work-card { background: var(--glass); border: 1px solid var(--edge); border-radius: 18px; padding: 24px; box-shadow: var(--light); }
.aura-grid { gap: 18px; }
.login-panel, .public-form, .calculator-result { background: var(--paper); border-color: var(--edge); box-shadow: var(--shadow); border-radius: 24px; }
:root[data-tema='noche'] img[src$='helios.svg'] { filter: brightness(0) invert(.93); }
:root[data-look='vintage'] { --bg: #ede5d7; --paper: #fbf8f2; --cover: #fbf8f2; --glass: #f4eddf; --edge: #d7cabb; --focus: #875332; background-image: none; }
:root[data-look='vintage'][data-tema='noche'] { --bg: #17120e; --paper: #221b15; --cover: #221b15; --glass: #30261c; --edge: #524438; --focus: #e2ae7f; }
:root[data-look='vintage'] .nav-link .icon { display: block; }
@media (min-width: 761px) {
  :root:is([data-navigation='lateral'][data-look='futuristico'], [data-look='vintage']) .workspace { grid-template-columns: 224px minmax(0, 1fr); grid-template-areas: 'nav header' 'nav content'; gap: 16px; max-width: none; }
  :root:is([data-navigation='lateral'][data-look='futuristico'], [data-look='vintage']) .sidebar { position: sticky; top: 16px; height: calc(100dvh - 32px); padding: 24px 12px; border: 1px solid var(--edge); border-radius: 22px; background: var(--glass); box-shadow: var(--shadow); display: flex; flex-direction: column; }
  :root:is([data-navigation='lateral'][data-look='futuristico'], [data-look='vintage']) .sidebar > .client-brand { display: flex; padding: 0 10px; font-size: 23px; }
  :root:is([data-navigation='lateral'][data-look='futuristico'], [data-look='vintage']) .sidebar .brand-monogram { display: none; }
  :root:is([data-navigation='lateral'][data-look='futuristico'], [data-look='vintage']) .workspace-label { display: block; margin: 24px 12px 8px; }
  :root:is([data-navigation='lateral'][data-look='futuristico'], [data-look='vintage']) .sidebar nav { display: grid; align-items: stretch; overflow-y: auto; padding-top: 10px; }
  :root:is([data-navigation='lateral'][data-look='futuristico'], [data-look='vintage']) .nav-link { min-height: 46px; border-radius: 12px; border: 1px solid transparent; background: transparent; white-space: normal; font-size: 13px; }
  :root:is([data-navigation='lateral'][data-look='futuristico'], [data-look='vintage']) .nav-link.active { border-color: var(--edge); background: var(--cover); }
  :root:is([data-navigation='lateral'][data-look='futuristico'], [data-look='vintage']) .nav-link .icon { display: block; }
  :root:is([data-navigation='lateral'][data-look='futuristico'], [data-look='vintage']) .topbar > .client-brand { display: none; }
  :root:is([data-navigation='lateral'][data-look='futuristico'], [data-look='vintage']) .sidebar-bottom { display: flex; }
}
@media (max-width: 1150px) { .topbar .environment { display: none; } .metric > strong { font-size: 28px; } }
@media (max-width: 1100px) {
  .metrics, .metrics.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics.compact > .metric:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .workspace { display: block; padding: 8px 8px 24px; }
  .topbar { padding: 8px 10px; gap: 8px; min-height: 68px; }
  .topbar .client-brand { font-size: 17px; line-height: 1.15; gap: 6px; }
  .topbar .brand-monogram { display: none; }
  .topbar-actions { gap: 2px; }
  .topbar-actions .catalog-access, .appearance > summary > span { display: none; }
  .appearance-sheet { right: -30px; }
  .sidebar { position: fixed; z-index: 45; left: 8px; top: 84px; bottom: 8px; width: min(290px, calc(100vw - 16px)); height: auto; padding: 20px 12px; background: var(--cover); border: 1px solid var(--edge); border-radius: 22px; transform: translateX(calc(-100% - 16px)); box-shadow: var(--shadow); }
  .sidebar nav { display: grid; overflow-y: auto; max-height: calc(100dvh - 135px); padding: 0; }
  .nav-link, .nav-link.active { border-radius: 12px; min-height: 48px; border: 0; background: transparent; font-size: 13px; }
  .nav-link.active { background: var(--soft); }
  .nav-link .icon { display: block; }
  .workspace-main { margin-top: 12px; border-radius: 20px; }
  .workspace-main main { padding: 25px 17px; }
  .page-heading h1 { font-size: 34px; }
  .page-heading { flex-wrap: wrap; }
  .page-heading > .btn { min-height: 44px; font-size: 12px; }
  .metrics { gap: 9px; }
  .metric, .metric:first-child, .metric:last-child, .metric:nth-child(even) { padding: 16px 13px !important; min-height: 135px; border: 1px solid var(--edge); }
  .metric > strong { font-size: 25px; letter-spacing: -.9px; }
  .metric[href='#credit'] > strong { font-size: clamp(18px, 4.7vw, 25px); }
  .metric > small { font-size: 10px; }
  .workspace-footer { margin-inline: 17px; padding: 16px 0; font-size: 10px; flex-wrap: wrap; }
  .aura-card { padding: 22px; }
}
@media (prefers-reduced-transparency: reduce) { :root { --glass: var(--cover); --paper: var(--cover); } }
@media print { .workspace { display: block; padding: 0; } .sidebar, .appearance { display: none !important; } .workspace-main { border: 0; box-shadow: none; background: white; } }