/* ═══════════════════════════════════════════════════════════════
   PORTAL VIAS3D — main.css
   Variables globales · Reset · Tipografía · Layout base
   v1.0 · Junio 2026
═══════════════════════════════════════════════════════════════ */

/* ── Variables ────────────────────────────────────────────────── */
:root {
  /* Marca */
  --orange:        #ed8020;
  --orange-h:      #d9721a;
  --orange-soft:   rgba(237,128,32,.12);
  --orange-border: rgba(237,128,32,.22);
  --purple:        #6607c4;
  --gradient:      linear-gradient(135deg, #ed8020, #6607c4);

  /* Fondos */
  --bg-dark:       #0d0e10;
  --bg-dark2:      #111214;
  --bg-dark3:      #16181b;
  --bg-card:       #1a1c1f;
  --bg-light:      #f5f5f6;
  --bg-light2:     #eff0f2;

  /* Superficies claras (secciones de contenido) */
  --surface:       #ffffff;
  --surface2:      #f7f8fa;
  --surface3:      #eff1f5;

  /* Bordes */
  --border-dark:   rgba(255,255,255,.06);
  --border-light:  rgba(31,33,35,.08);
  --border-mid:    rgba(31,33,35,.13);

  /* Texto oscuro (sobre fondos claros) */
  --tx-dark:       #1a1f2e;
  --tx-mid:        #4a5060;
  --tx-muted:      #9ca3af;

  /* Texto claro (sobre fondos oscuros) */
  --tx-white:      #ffffff;
  --tx-dim:        rgba(255,255,255,.55);
  --tx-dimmer:     rgba(255,255,255,.30);

  /* Sidebar */
  --sb-w:          264px;
  --sb-bg:         #0d0e10;
  --sb-bg2:        #141618;
  --sb-text:       rgba(255,255,255,.60);
  --sb-hover:      rgba(255,255,255,.055);
  --sb-active:     rgba(237,128,32,.13);
  --sb-active-b:   rgba(237,128,32,.22);

  /* Topbar */
  --topbar-h:      52px;
  --topbar-bg:     rgba(255,255,255,.96);

  /* Radio */
  --r-s:   6px;
  --r-m:   10px;
  --r-l:   14px;
  --r-xl:  20px;

  /* Tipografía */
  --font:  'Montserrat', sans-serif;

  /* Sombras */
  --shadow-s:  0 1px 4px rgba(0,0,0,.08);
  --shadow-m:  0 4px 16px rgba(0,0,0,.10);
  --shadow-l:  0 8px 32px rgba(0,0,0,.14);

  /* Transición estándar */
  --t: .18s ease;

  /* Status colors */
  --green:      #166534;
  --green-bg:   #dcfce7;
  --amber:      #92400e;
  --amber-bg:   #fef3c7;
  --blue:       #1e3a5f;
  --blue-bg:    #dbeafe;
  --red:        #991b1b;
  --red-bg:     #fee2e2;
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--tx-dark);
  background: var(--bg-light);
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font-family: var(--font); cursor: pointer; }
ul { list-style: none; }
input, select, textarea { font-family: var(--font); }

/* ── Material Icons ───────────────────────────────────────────── */
.mi {
  font-family: 'Material Icons Outlined';
  font-size: 20px;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}

/* ── Layout master ────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: var(--sb-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  height: 100vh;
  overflow: hidden;
}

/* ── Scrollbar global ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.12) transparent; }

/* ── Animaciones base ─────────────────────────────────────────── */
@keyframes fadeIn   { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp  { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: translateY(0) } }
@keyframes spin     { to { transform: rotate(360deg) } }
@keyframes pulse    { 0%,100% { opacity: 1 } 50% { opacity: .4 } }

.fade-in  { animation: fadeIn  .22s ease; }
.slide-up { animation: slideUp .25s cubic-bezier(.4,0,.2,1); }

/* ── Utilitarios ──────────────────────────────────────────────── */
.hidden   { display: none !important; }
.sr-only  { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Badges de estado */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.badge-orange  { background: var(--orange-soft);  color: var(--orange); border: 1px solid var(--orange-border); }
.badge-green   { background: var(--green-bg);  color: var(--green);  }
.badge-amber   { background: var(--amber-bg);  color: var(--amber);  }
.badge-blue    { background: var(--blue-bg);   color: var(--blue);   }
.badge-red     { background: var(--red-bg);    color: var(--red);    }
.badge-dark    { background: rgba(255,255,255,.08); color: var(--tx-dim); }

/* Spinner */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
.spinner-dark {
  border-color: rgba(0,0,0,.12);
  border-top-color: var(--orange);
}

/* ── Responsive breakpoints ───────────────────────────────────── */
@media (max-width: 960px) {
  :root { --sb-w: 0px; }
  .app { grid-template-columns: 1fr; }
}