@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@theme {
    --default-font-family: "Poppins";
    --color-fondo700: #10101C;
    --color-fondo600: #151525;
    --color-primario: #FFF;
    --color-primario50: #FFDCE5;
    --color-primario400: #FF517D;
    --color-primario800: #970026;
    --color-secundario: #C4C4C4;
    --color-secundario50: #D1FDFD;
    --color-acento: #FFD369;
    --color-exito: #32E875;
    --color-error: #FF4C4C;
    --color-superficie500: #16213E;
    --color-superficie600: #121A32;
    --color-superficie700: #0D1425;
    --color-separador: #E5E5E5;
}
/* ===== Scrollbar para Chrome, Edge y Safari ===== */
::-webkit-scrollbar {
  width: 8px; /* ancho */
  height: 8px; /* alto si hay scroll horizontal */
}

::-webkit-scrollbar-track {
  background: transparent; /* fondo de la pista */
}

::-webkit-scrollbar-thumb {
  background-color: #888; /* color del scroll */
  border-radius: 10px;    /* bordes redondeados */
  border: 2px solid transparent; /* espacio alrededor */
  background-clip: content-box;  /* evita que el borde se rellene */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* al pasar el mouse */
}

/* ===== Scrollbar en Firefox ===== */
* {
  scrollbar-width: thin;          /* thin | auto | none */
  scrollbar-color: #888 transparent; /* thumb | track */
}