/* =========================================================
   GRODEN — Hoja de marca (variables + componentes base)
   "Crecer con orden."
   Cargar DESPUÉS de los CSS actuales para que sobrescriba.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap');

:root {
  /* Paleta oficial */
  --gr-navy:        #0A2A5E;  /* Azul marino principal: textos, sidebar, títulos */
  --gr-blue:        #1F5EFF;  /* Azul eléctrico: botones primarios, links, activo */
  --gr-cyan:        #2CC8F2;  /* Azul cielo: acentos, gráficas, badges */
  --gr-light:       #EAF2FF;  /* Azul claro: fondos suaves, hover, chips */

  /* Derivados (no inventar otros) */
  --gr-navy-700:    #0D3577;  /* sidebar degradado / hover navy */
  --gr-blue-600:    #1A4FDB;  /* hover botón primario */
  --gr-blue-50:     #F5F8FF;  /* fondo general de la app */
  --gr-text:        #0A2A5E;
  --gr-text-muted:  #5B6B8C;
  --gr-border:      #DCE5F5;
  --gr-white:       #FFFFFF;

  /* Estados (se conservan semánticos) */
  --gr-success:     #16A34A;
  --gr-success-bg:  #E8F7EE;
  --gr-warning:     #D97706;
  --gr-warning-bg:  #FFF6E5;
  --gr-danger:      #DC2626;
  --gr-danger-bg:   #FDECEC;

  /* Forma */
  --gr-radius-sm:   8px;
  --gr-radius:      12px;
  --gr-radius-lg:   16px;
  --gr-shadow:      0 1px 2px rgba(10,42,94,.06), 0 4px 16px rgba(10,42,94,.06);
  --gr-font:        'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
  font-family: var(--gr-font);
  background: var(--gr-blue-50);
  color: var(--gr-text);
}
h1, h2, h3, h4 { color: var(--gr-navy); font-weight: 700; letter-spacing: -.01em; }
a { color: var(--gr-blue); }

/* Sidebar */
.gr-sidebar {
  background: linear-gradient(180deg, var(--gr-navy-700), var(--gr-navy));
  color: #C9D6F0;
}
.gr-sidebar a { color: #C9D6F0; border-radius: var(--gr-radius-sm); }
.gr-sidebar a:hover { background: rgba(255,255,255,.06); color: #fff; }
.gr-sidebar a.active { background: var(--gr-blue); color: #fff; }

/* Tarjetas */
.gr-card {
  background: var(--gr-white);
  border: 1px solid var(--gr-border);
  border-radius: var(--gr-radius-lg);
  box-shadow: var(--gr-shadow);
}
.gr-stat-label { color: var(--gr-text-muted); font-size: .85rem; font-weight: 600; }
.gr-stat-value { color: var(--gr-navy); font-size: 1.75rem; font-weight: 800; }

/* Botones */
.gr-btn {
  font-family: var(--gr-font); font-weight: 600;
  border-radius: var(--gr-radius); padding: .65rem 1.2rem;
  border: 1px solid transparent; cursor: pointer;
}
.gr-btn-primary { background: var(--gr-blue); color: #fff; }
.gr-btn-primary:hover { background: var(--gr-blue-600); }
.gr-btn-outline { background: #fff; color: var(--gr-blue); border-color: var(--gr-blue); }
.gr-btn-outline:hover { background: var(--gr-light); }

/* Inputs */
.gr-input, input, select, textarea {
  font-family: var(--gr-font);
  border: 1px solid var(--gr-border); border-radius: var(--gr-radius-sm);
}
.gr-input:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gr-blue);
  box-shadow: 0 0 0 3px rgba(31,94,255,.15);
}

/* Badges */
.gr-badge { display:inline-block; padding:.2rem .6rem; border-radius:999px; font-size:.75rem; font-weight:600; }
.gr-badge-info    { background: var(--gr-light);      color: var(--gr-blue); }
.gr-badge-success { background: var(--gr-success-bg); color: var(--gr-success); }
.gr-badge-warning { background: var(--gr-warning-bg); color: var(--gr-warning); }
.gr-badge-danger  { background: var(--gr-danger-bg);  color: var(--gr-danger); }

/* Tablas */
.gr-table th { background: var(--gr-light); color: var(--gr-navy); font-weight: 600; }
.gr-table td { border-bottom: 1px solid var(--gr-border); }