/* =========================
   Variables globales (Tema)
   ========================= */
:root{
  /* Tipografía */
  --font-sans: 'Inter', sans-serif;

  /* Paleta (base Platzi-like) */
  --bg: #121f3d;            /* fondo principal */
  --bg-2: #202d4a;          /* inputs / superficies */
  --card: #1c2b4a;          /* tarjetas */
  --text: #ffffff;          /* texto principal */
  --text-2: #b2bdd3;        /* texto secundario */
  --border: #4b6d91;        /* borde inputs */
  --scroll-track: #121f3d;
  --scroll-thumb: #2d3e5e;
  --scroll-thumb-hover: #3a4f74;

  /* Marca / acentos */
  --primary: #98ca3f;       /* verde */
  --primary-hover: #7fa733;
  --primary-contrast: #202d4a;

  /* Layout */
  --radius-sm: 5px;
  --radius-md: 12px;
  --radius-pill: 30px;

  /* Espaciados */
  --pad-header: 10px;

  /* Transiciones */
  --tr: 180ms ease;
}

/* =========================
   Base
   ========================= */
body{
  font-family: var(--font-sans);
  background-color: var(--bg);
  color: var(--text);
}

/* =========================
   Scrollbar
   ========================= */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background: var(--scroll-track); }
::-webkit-scrollbar-thumb{
  background: var(--scroll-thumb);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover{
  background: var(--scroll-thumb-hover);
}

/* =========================
   Sidebar logo (tipo Platzi)
   ========================= */
.logo-wrap{
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  overflow: hidden; /* recorta márgenes blancos del PNG */
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-img{
  width: 100%;
  height: 100%;
  transform: scale(1.18);
}

/* En desktop el logo puede verse un poquito más grande */
@media (min-width:1024px){
  .logo-wrap{ width:100px; height:60px; }
  .logo-img{ transform:scale(1.12); }
}

/* =========================
   Header (si lo usas fuera de Tailwind)
   ========================= */
header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--pad-header);
  background-color: var(--bg);
}

header input{
  width: 100%;
  background-color: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  transition: border-color var(--tr), background-color var(--tr);
}

header .flex{
  display: flex;
  align-items: center;
}

header .cursor-pointer{
  cursor: pointer;
}

/* Botón en header (si lo estás usando) */
header button{
  background-color: var(--primary);
  color: var(--primary-contrast);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: background-color var(--tr);
}

header button:hover{
  background-color: var(--primary-hover);
}

/* =========================
   Secciones / botones generales
   ========================= */
section{
  margin-bottom: 20px;
}

button{
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  background-color: var(--primary);
  border: none;
  cursor: pointer;
  transition: background-color var(--tr);
}

button:hover{
  background-color: var(--primary-hover);
}

section .grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

/* Si alguna parte usa este class (ojo: Tailwind también lo usa) */
section .bg-gradient-to-br{
  background: linear-gradient(to bottom right，让 var(--card), var(--bg));
}

/* =========================
   Responsive
   ========================= */
@media (max-width:768px){
  header input{ width: 80%; }
}