/**
 * Trankey Brand CSS — Tosuta Merello 2026
 * Este archivo centraliza colores, tipografía e iconografía.
 * Se incluye en TODOS los HTML y sobreescribe estilos locales.
 */

/* ═══════════════ TIPOGRAFÍA ═══════════════ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ═══════════════ COLORES BRAND ═══════════════ */
:root {
  /* Primarios */
  --azul: #090926;
  --violeta: #3E2BCC;
  --celeste: #1d58fd;
  --aqua: #35f7de;

  /* Neutros */
  --gris: #e4e9f3;
  --blanco: #ffffff;

  /* Semánticos (mapeados a brand) */
  --bg: #F4F5FA;
  --panel: #ffffff;
  --border: #e4e9f3;
  --text: #090926;
  --text-secondary: #4a4a6a;
  --dim: #8889a8;

  /* Status */
  --green: #16a34a;
  --green-dim: rgba(22,163,74,0.08);
  --red: #ef4444;
  --red-dim: rgba(239,68,68,0.08);
  --yellow: #d97706;
  --yellow-dim: rgba(217,119,6,0.08);
  --orange: #ea580c;

  /* Accents */
  --blue: #1d58fd;
  --blue-dim: rgba(29,88,253,0.08);
  --purple: #8b5cf6;
  --purple-dim: rgba(139,92,246,0.08);
  --cyan: #06b6d4;
  --cyan-dim: rgba(6,182,212,0.08);

  /* Layout */
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(9,9,38,0.04), 0 4px 12px rgba(9,9,38,0.06);
  --gradient: linear-gradient(135deg, var(--violeta) 0%, var(--aqua) 100%);

  /* Primary (alias para legacy) */
  --primary: #1d58fd;
  --accent: #3E2BCC;
}

/* ═══════════════ FONT OVERRIDE ═══════════════ */
body, input, select, textarea, button {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Monospace queda JetBrains Mono */
.mono, [class*="mono"], code, pre,
[style*="JetBrains"], [style*="monospace"] {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
}

/* ═══════════════ MOBILE RESPONSIVE ═══════════════ */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  /* Sidebar mobile adjustments */
  #trankey-sidebar {
    font-family: 'Montserrat', sans-serif !important;
  }

  /* Cards más compactas en mobile */
  .kpi, .card, .fin-summary {
    padding: 12px !important;
  }

  /* Tablas scrolleables */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modales full-screen en mobile */
  .modal, .overlay .modal {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 90vh !important;
    margin: 5vh 0 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }
}

/* ═══════════════ GLOBAL POLISH ═══════════════ */

/* Links brand */
a {
  color: var(--celeste);
}

/* Buttons gradient */
.btn-primary, .btn-cta, [class*="btn-primary"] {
  background: linear-gradient(135deg, var(--violeta), var(--celeste)) !important;
  border: none !important;
  color: white !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* Scrollbar sutil */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--gris);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--dim);
}