/* /public/css/variables.css */
@charset "UTF-8";

/* =======================================================================
   Poppins local (archivos en /public/fonts)
   ======================================================================= */
@font-face{
  font-family: "Poppins";
  src: url("/fonts/Poppins-Extralight.ttf") format("truetype");
  font-weight: 200; /* ExtraLight */
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Poppins";
  src: url("/fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400; /* Regular */
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Poppins";
  src: url("/fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600; /* SemiBold */
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Poppins";
  src: url("/fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700; /* Bold */
  font-style: normal;
  font-display: swap;
}

/* =======================================================================
   Variables del tema
   ======================================================================= */
:root {
  /* 🎨 Colores base */
  --color-primary: #152542;
  --color-primary-dark: #28343e;
  --color-primary-light: #64737f;
  --color-primary-light-rgba: rgba(100, 115, 127, 0.5);

  --color-secondary: #6c757d;

  /* 🎨 Colores neutrales */
  --color-gray-900: #343a40;
  --color-gray-800: #3F4247;
  --color-gray-700: #6c757d;
  --color-gray-600: #adb5bd;
  --color-gray-500: #ced4da;
  --color-gray-400: #dee2e6;
  --color-gray-300: #e9ecef;
  --color-gray-200: #f1f3f5;
  --color-gray-100: #f8f9fa;
  --color-white: #ffffff;

  /* 🖼️ Colores UI */
  --color-bg: rgba(255, 255, 255, 0.3);
  --color-input-bg: rgba(255, 255, 255, 0.2);
  --color-text: #222;
  --color-placeholder: #777;

  /* 🔹 Topbar (debajo del header) */
  --topbar-bg: var(--color-gray-900);
  --topbar-text: var(--color-white);
  --topbar-font-size: .95rem;
  --topbar-font-weight: 400;
  --topbar-sep-opacity: .45;

  /* 🔹 Toolbar de página (debajo del topbar) */
  --toolbar-bg: var(--color-gray-300);
  --toolbar-text: var(--color-primary);
  --toolbar-btn-bg: var(--color-primary);
  --toolbar-btn-text: var(--color-white);
  --toolbar-btn-shadow: 0 10px 25px rgba(21,37,66,.25);

  /* ⬇️ NUEVO: variables para un alto consistente de la barra */
  --toolbar-card-h: clamp(94px, 10vw, 110px);  /* altura de cada action-card */
  --toolbar-y-pad: 12px;                       /* padding vertical de la barra */
  --toolbar-min-h: calc(var(--toolbar-card-h) + (var(--toolbar-y-pad) * 2));

  /* 🔵 Colores especiales */
  --color-accent: #003087;
  --particles-color: #7f8fa6;

  /* Paleta adicional */
  /* VIOLET */   --violet-100: #5a189a; --violet-200: #7b2cbf; --violet-300: #9d4edd; --violet-400: #c77dff;
  /* GRAPE  */   --grape-100: #231942; --grape-200: #5e548e; --grape-300: #9f86c0; --grape-400: #be95c4; --grape-500: #DDA0DD;
  /* BLEY   */   --baley-100: #0d1b2a; --baley-200: #1b263b; --baley-300: #415a77; --baley-400: #778da9;
  /* SKY    */   --sky-100: #033270; --sky-200: #1368aa; --sky-300: #4091c9; --sky-400: #9dcee2;
  /* BLUE   */   --blue-100: #003554; --blue-200: #006494; --blue-300: #0582ca; --blue-400: #00a6fb; --blume-500: #3696C3; --blume-600: #2196F3;
  /* BLUME  */   --blume-100: #227a7a; --blume-200: #38a3a5; --blume-300: #57cc99; --blume-400: #80ed99;
  /* GRASS  */   --grass-100: #344e41; --grass-200: #3a5a40; --grass-300: #588157; --grass-400: #a3b18a;
  /* GREEN  */   --green-100: #03750d; --green-200: #0c9b18; --green-300: #46ab21; --green-400: #6acc1a; --green-500: #3CB371;
  /* CHERRY */   --cherry-100: #a4133c; --cherry-200: #c9184a; --cherry-300: #ff4d6d; --cherry-400: #ff758f; --cherry-500: #FF4D6E;
  /* RED    */   --red-100: #7a0213; --red-200: #a10220; --red-300: #bf0a26; --red-400: #cd0c2b;
  /* BRICK  */   --brick-100: #620808; --brick-200: #940c0c; --brick-300: #b71b1b; --brick-400: #d41515;
  /* ORANGE */   --orange-100: #fc1e00; --orange-200: #ff2e00; --orange-300: #ff4d00; --orange-400: #ff7020; --orange-500: #FF701F; 
  /* YELLOW */   --yellow-100: #ff9900; --yellow-200: #ffb800; --yellow-300: #ffe000; --yellow-400: #fbff2c; --yellow-500: #FFa500;
  /* BROWN  */   --brown-100: #673120; --brown-200: #6b452e; --brown-300: #99582a; --brown-400: #bb9457;

 /*CHARTS*/   --beige-300: #F5CCA8; --gris-100: #DDDDDD; --rojo-100: #A71330; --gris-200: #595858;
 /* Data sources */ --main-gray-medium:#abb1b7; 

  /* 🖼 Imágenes */
  --logo-url: url('/images/logoLogin.png');
  --logo-header-path: '/images/cth-logo.png';
  --bg-image-url: url('/images/bgLogin.jpg');
  --bg-image-url2: url('/images/bgLogin2.jpg');
  --logo-header-url: url('/images/cth-logo-b.png');
  --logo-header-width: 700px;
  --logo-header-height: 100px;

  /* === Separador vertical para títulos (configurable) === */
  --title-sep-size: 1.3em;   
  --title-sep-gap: clamp(14px, 0.9vw, 18px);  
  --title-sep-color: var(--toolbar-text, currentColor);
  --title-sep-opacity: .95;
  --title-sep-translate-y: 0;   

  /* 📐 Bordes y sombras */
  --radius: 20px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.25);

  /* Neumorfismo */
  --neumo-bg: #ffffff;
  --neumo-shadow-dark: rgba(0, 0, 0, 0.15);
  --neumo-shadow-light: rgba(255, 255, 255, 0.7);

  /* Colores para particles.js */
  --particles-particle-color: var(--particles-color);
  --particles-line-color: var(--particles-color);

  /* 🔤 Tipografía */
  --font-base: 'Poppins', sans-serif;
  --font-navbar: var(--font-base);
  --bs-font-sans-serif: var(--font-base);

  /* 📏 Espaciados */
  --spacing-lg: 40px;
  --spacing-md: 20px;
  --spacing-sm: 10px;

  /* 📐 Layout compartido para page containers */
  --page-container-max-width: none;
  --page-container-x-margin: 1em;

  /*iconos*/
  --i-size: 3.25rem;
  --i-fontsize: 1.625rem;
}

/* =======================================================================
   Base tipográfica
   ======================================================================= */
html, body{
  font-family: var(--bs-font-sans-serif);
  font-weight: 400;
  color: var(--color-text);
  background-color: var(--color-gray-100);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
  font-family: var(--bs-font-sans-serif);
  font-weight: 500;
  margin-top: 0;
  color: var(--color-text);
}

.btn,
.nav, .navbar, .dropdown-menu, .dropdown-item,
.form-control, .form-select, .input-group-text, label,
.table, .badge, .alert, .breadcrumb, .pagination,
.tooltip, .popover, .toast{
  font-family: var(--bs-font-sans-serif);
}