/* public_variables.css */
/* Variables globales para tipografía */



:root {
/* Variables de diseño (layout) */
--page-max-width: 1100px;  /* Ancho máximo de la página */
    
/* Variables de colores */
--primary-color: #006bfd;  /* Color principal (azul) */
--secondary-color: #f4f4f7;  /* Color secundario */
--progress-color: #0cdf86;
--color-success:   #0cdf86;
--color-success-b: #0cdf8617;

--color-danger:    #ff5e8e;
--color-danger-b:  #ff5e8e17;

--color-warning:   #ffd066;
--color-warning-b: #ffd06617;

--color-info:      #66c2ff;
--color-info-b:    #66c2ff17;

/* Colores para estado desactivado */
--color-disabled: #e0e0e0;
--color-text-disabled: #9e9e9e;
--color-border-disabled: #d0d0d0;

/* Colores para advertencia */
--color-warning-text: #b71c1c;
--color-warning-bg: #ffebee;
--color-warning-border: #f44336;




/* Variables de tipografía */
--primary-font: 'IBM Plex Sans', 'Lato', sans-serif; /* Fuente primaria */
--secondary-font: 'Roboto', sans-serif;  /* Fuente secundaria */


/* Colores de texto */
--color-text-0: #ffffff;  /* Texto blanco (más claro) */
--color-text-1: #f4f4f7;  /* Texto muy claro */
--color-text-2: #e8e9ef;  /* Texto claro */
--color-text-3: #dddfe7;  /* Texto claro intermedio */
--color-text-4: #d2d4de;  /* Texto medio claro */
--color-text-5: #c6c9d6;  /* Texto medio */
--color-text-6: #bbbece;  /* Texto medio oscuro */
--color-text-7: #afb3c6;  /* Texto oscuro intermedio */
--color-text-8: #a4a8be;  /* Texto más oscuro */
--color-text-9: #999db5;  /* Texto oscuro */
--color-text-10: #8d92ad; /* Texto muy oscuro */

/* Colores para fondos (contenedores) */
--color-background-0: #21232e;   /* Fondo oscuro */
--color-background-1: #292c39;
--color-background-2: #313445;
--color-background-3: #3a3d50;
--color-background-4: #42465c;
--color-background-5: #4a4e67;
--color-background-6: #525773;
--color-background-7: #5a607e;
--color-background-8: #636989;
--color-background-9: #6b7195;
--color-background-10: #767c9d;

/* Definimos los tamaños de texto basados en 1rem = 17px */
--text-xxs: 0.625rem;   /* 10.6px */
--text-xs: 0.6875rem;   /* ~11.7px */
--text-sm: 0.8125rem;   /* ~13.8px  */
--text-base: 1rem;      /* 17px (base) */
--text-lg: 1.125rem;    /* 19.125px */
--text-xl: 1.25rem;     /* 21.25px */
--text-2xl: 1.5rem;  /* 25.5px (17px * 1.5) */
--text-3xl: 1.75rem; /* 29.75px (17px * 1.75) */
--text-4xl: 2rem;    /* 34px (17px * 2) */
--text-5xl: 2.5rem;  /* 42.5px (17px * 2.5) */


/* Variables para elementos básicos */
--button-border-radius: 5px;  /* Radio de borde para los botones */
--input-border-color: #ccc;  /* Color de borde para inputs */
--input-focus-color: #006bfd;  /* Color de borde al enfocar un input */
--button-padding: 10px 20px;  /* Padding para los botones */
--link-hover-color: #006bfd;  /* Color al pasar el ratón sobre los enlaces */

/* Variables de espaciado */
--spacing-xs: 8px;  /* Espaciado extra pequeño */
--spacing-sm: 16px;  /* Espaciado pequeño */
--spacing-md: 24px;  /* Espaciado mediano */
--spacing-lg: 32px;  /* Espaciado grande */
--spacing-xl: 48px;  /* Espaciado extra grande */




    
}
















:root {
    
    /* VARIABLES ANTIGUAS HAHA */
    /* Colores para fondos (contenedores) */
    --do0: #21232e;   /* Fondo oscuro */
    --do1: #292c39;
    --do2: #313445;
    --do3: #3a3d50;
    --do4: #42465c;
    --do5: #4a4e67;
    --do6: #525773;
    --do7: #5a607e;
    --do8: #636989;
    --do9: #6b7195;
    --do10: #767c9d;

    /* Colores de los halos o bordes (si los vas a usar para resaltar elementos como botones o cajas) */
    --halo0: #8d92ad;
    --halo1: #999db5;
    --halo2: #a4a8be;
    --halo3: #afb3c6;
    --halo4: #bbbece;
    --halo5: #c6c9d6;
    --halo6: #d2d4de;
    --halo7: #dddfe7;
    --halo8: #e8e9ef;

    /* Colores de texto */
    --tx0: #ffffff;  /* Texto blanco (más claro) */
    --tx1: #f4f4f7;  /* Texto muy claro */
    --tx2: #e8e9ef;  /* Texto claro */
    --tx3: #dddfe7;  /* Texto claro intermedio */
    --tx4: #d2d4de;  /* Texto medio claro */
    --tx5: #c6c9d6;  /* Texto medio */
    --tx6: #bbbece;  /* Texto medio oscuro */
    --tx7: #afb3c6;  /* Texto oscuro intermedio */
    --tx8: #a4a8be;  /* Texto más oscuro */
    --tx9: #999db5;  /* Texto oscuro */
    --tx10: #8d92ad; /* Texto muy oscuro */
    
    --color-success-1: #162312;
    --color-success-2: #1d3712;
    --color-success-3: #274916;
    --color-success-4: #306317;
    --color-success-5: #3c8618;
    --color-success-6: #49aa19;
    --color-danger-1: #2a1215;
    --color-danger-2: #431418;
    --color-danger-3: #58181c;
    --color-danger-4: #791a1f;
    --color-danger-5: #a61d24;
    --color-danger-6: #d32029;
    --color-warning-1: #2b1611;
    --color-warning-2: #441d12;
    --color-warning-3: #2b1611;
    --color-warning-4: #7c3118;
    --color-warning-5: #aa3e19;
    --color-warning-6: #d84a1b;
    --color-info-1: #111d2c;
    --color-info-2: #112a45;
    --color-info-3: #15395b;
    --color-info-4: #164c7e;
    --color-info-5: #1765ad;
    --color-info-6: #177ddc;
    --color-info-7: #177ddc;
    --color-warning-light-1: #2b2111;
    --color-warning-light-2: #2b2111;
    --color-warning-light-3: #594214;
    --color-warning-light-4: #7c5914;
    --color-warning-light-5: #aa7714;
    --color-warning-light-6: #d89614;
    --color-premium-7: #183d6d;
    --color-text-secondary: #fff;
    --color-background-primary: #191a23;
    --color-background-secondary: #21232e;
    --color-background-menu: #191a23;
    --color-menu-border: rgba(54, 78, 101, .5);
    --color-menu-border-right: rgba(54, 78, 101, .2);
    --color-table-secondary-row: rgba(54, 78, 101, .2);
    --color-base: #21232e;
    --color-base-2: #364e65;
    --color-dark-0: #000;
    --color-black: #fff;
    --banner-gradient-color-4: #191a23;
    --mc-banner-background: var(--color-dark-2);
    --color-edge-rule-bg: var(--color-dark-2);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 8%);
    --shadow-2: 0 1px 2px -1px rgb(0 0 0 / 10%), 0 1px 3px rgb(12 12 12 / 10%);
    --shadow-3: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
    --shadow-4: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
    --shadow-5: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
    --shadow-7: 0 2.8px 4.2px -.7px rgb(0 0 0 / 10%), 0 1.4px 2.8px -1.4px rgb(0 0 0 / 10%);
    --shadow-8: 0 2px 3px -.5px rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
    --shadow-box-light: 0 2px 10px rgb(0 0 0 / 50%);
    --gradient-info-card-background: linear-gradient(0deg, #21232e 0%, #3a3b45 100%);
    --gradient-linear-blue--mc-welcome: linear-gradient(0deg, var(--color-background-primary) 0%, var(--color-info-3) 100%);
}