:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172a33;
  background: #f3f7f8;
  --petrol-950: #0a2b36;
  --petrol-900: #0c3040;
  --petrol-800: #123f4d;
  --petrol-700: #165264;
  --teal-600: #148b8b;
  --teal-500: #18a1a0;
  --teal-100: #dff4f1;
  --amber: #e8a62a;
  --surface: #ffffff;
  --background: #f3f7f8;
  --text: #172a33;
  --muted: #687b84;
  --border: #dfe8eb;
  --shadow: 0 12px 34px rgba(18, 63, 77, .08);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--background); }
button, a { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.loading {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: var(--background); color: var(--petrol-800); font-weight: 700;
}
.loading::before {
  content: ""; width: 30px; height: 30px; margin-right: 12px; display: inline-block;
  border: 3px solid var(--teal-100); border-top-color: var(--teal-600);
  border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 272px; z-index: 20;
  display: flex; flex-direction: column; padding: 26px 18px 20px;
  color: #fff; background:
    radial-gradient(circle at 15% 92%, rgba(24,161,160,.22), transparent 34%),
    linear-gradient(165deg, var(--petrol-900), var(--petrol-950));
  box-shadow: 8px 0 30px rgba(10,43,54,.12);
}
.brand { display: flex; align-items: center; gap: 13px; padding: 0 8px 25px; }
.brand img { width: 48px; height: 48px; filter: drop-shadow(0 8px 15px rgba(0,0,0,.18)); }
.brand-eyebrow { margin: 0 0 2px; color: #a9d4d4; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.brand-name { margin: 0; font-size: 21px; line-height: 1; letter-spacing: -.02em; }
.nav-label { padding: 4px 12px 8px; color: #84abb3; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nav { display: grid; gap: 6px; }
.nav-button {
  width: 100%; min-height: 46px; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid transparent; border-radius: 12px;
  color: #d9e8eb; background: transparent; text-align: left; transition: .18s ease;
}
.nav-button:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-button[aria-current="page"] {
  color: #fff; background: rgba(24,161,160,.19); border-color: rgba(115,220,212,.18);
  box-shadow: inset 3px 0 var(--amber);
}
.nav-icon {
  width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto;
  border-radius: 9px; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 850;
}
.sidebar-footer { margin-top: auto; padding: 18px 10px 0; border-top: 1px solid rgba(255,255,255,.09); }
.sidebar-context { color: #aac1c7; font-size: 12px; line-height: 1.5; }
.sidebar-context strong { display: block; color: #fff; font-size: 13px; }
.workspace { min-height: 100vh; margin-left: 272px; }
.topbar {
  height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 34px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px);
}
.welcome { min-width: 0; }
.welcome p { margin: 0 0 3px; color: var(--muted); font-size: 12px; font-weight: 650; }
.welcome h1 { margin: 0; font-size: 20px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.context-pill {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 11px; background: #f9fbfb;
  color: var(--petrol-800); font-size: 12px; font-weight: 750;
}
.context-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-500); }
.action {
  min-height: 39px; padding: 8px 13px; border: 1px solid var(--border); border-radius: 11px;
  color: var(--petrol-800); background: #fff; font-size: 12px; font-weight: 750; text-decoration: none;
}
.action:hover { border-color: #b8cbcf; background: #f8fbfb; }
.main { max-width: 1380px; margin: 0 auto; padding: 34px; }
/* Descargas is an exclusive superadmin view, never an extra section of Resumen. */
.main[data-carga360-view="downloads"] > :not(#superadminDownloads) {
  display: none !important;
}
.hero {
  display: grid; grid-template-columns: minmax(0,1.55fr) minmax(270px,.65fr); gap: 20px;
  margin-bottom: 22px;
}
.hero-main, .access-card, .module-card, .notice {
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow);
}
.hero-main {
  position: relative; overflow: hidden; min-height: 214px; padding: 32px;
  background: linear-gradient(135deg, #fff 55%, #ecf7f5);
}
.hero-main::after {
  content: ""; position: absolute; width: 220px; height: 220px; right: -75px; bottom: -100px;
  border: 34px solid rgba(20,139,139,.08); border-radius: 50%;
}
.eyebrow { margin: 0 0 11px; color: var(--teal-600); font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.hero-main h2 { max-width: 650px; margin: 0 0 13px; color: var(--petrol-900); font-size: clamp(27px,3vw,40px); line-height: 1.08; letter-spacing: -.035em; }
.hero-main p { max-width: 610px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.status-line { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: #26705d; font-size: 12px; font-weight: 750; }
.status-line::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #38b584; box-shadow: 0 0 0 5px #e5f7ef; }
.access-card { padding: 24px; }
.access-card h3, .section-heading h2 { margin: 0; color: var(--petrol-900); }
.access-card h3 { font-size: 15px; }
.access-list { display: grid; gap: 15px; margin-top: 22px; }
.access-item span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; }
.access-item strong { display: block; color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
.section-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin: 30px 2px 15px; }
.section-heading h2 { font-size: 18px; }
.section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.module-count { color: var(--teal-600); font-size: 12px; font-weight: 800; }
.modules { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.module-card {
  min-height: 178px; padding: 22px; display: flex; flex-direction: column;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.module-card:hover { transform: translateY(-2px); border-color: #bed4d7; box-shadow: 0 16px 36px rgba(18,63,77,.11); }
.module-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.module-symbol {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 12px; color: var(--petrol-800); background: var(--teal-100); font-size: 11px; font-weight: 850;
}
.prepared { padding: 5px 8px; border-radius: 999px; color: #8a641c; background: #fff5dd; font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.module-card h3 { margin: 17px 0 7px; color: var(--petrol-900); font-size: 16px; }
.module-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.module-link { margin-top: auto; padding-top: 15px; border: 0; color: var(--teal-600); background: transparent; font-size: 12px; font-weight: 800; text-align: left; }
.notice { margin-top: 18px; padding: 18px 20px; color: var(--petrol-800); background: #f8fbfb; font-size: 13px; line-height: 1.55; }
.notice strong { color: var(--petrol-900); }
.error-screen { max-width: 660px; margin: 10vh auto; padding: 40px; text-align: center; }
.error-screen img { width: 64px; }
.error-screen h1 { color: var(--petrol-900); }
.error-screen p { color: var(--muted); line-height: 1.6; }
@media (max-width: 1080px) {
  .modules { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .context-pill { display: none; }
}
@media (max-width: 820px) {
  .sidebar { position: static; width: auto; min-height: auto; padding: 18px; }
  .brand { padding-bottom: 16px; }
  .nav-label, .sidebar-footer { display: none; }
  .nav { display: flex; overflow-x: auto; padding-bottom: 2px; }
  .nav-button { width: auto; min-width: max-content; }
  .workspace { margin-left: 0; }
  .topbar { height: auto; min-height: 72px; padding: 14px 20px; }
  .main { padding: 22px 18px 32px; }
  .hero { grid-template-columns: 1fr; }
  .top-actions .action:first-of-type { display: none; }
}
@media (max-width: 560px) {
  .modules { grid-template-columns: 1fr; }
  .hero-main { padding: 24px; }
  .access-card { padding: 20px; }
  .welcome p { display: none; }
  .top-actions { gap: 6px; }
  .action { padding: 8px 10px; }
}