/*
 * Tradivel — variables de marca (Nov-2022 Visual Brand Book)
 * Copiar a public/css/tradivel-brand.css y cargar con Tag::css('tradivel-brand')
 * en el template principal, DESPUÉS de bootstrap.min.css / admin.min.css
 * para que estas variables sobrescriban las de Bootstrap/AdminLTE.
 */

:root {
    /* Colores corporativos principales */
    --tradivel-petrol: #103A42;      /* Pantone 309C — color principal, texto/fondos oscuros */
    --tradivel-aquamarine: #659FA6;  /* Pantone 2233C — color principal, acentos/CTA */

    /* Color secundario */
    --tradivel-umbro: #404040;       /* Pantone 447C — texto secundario, uso en escala de grises */

    /* Tintas al 20/40/60/80% sobre blanco (fondos degradados admitidos por el manual, sec. 2.1.4) */
    --tradivel-petrol-80: #406168;
    --tradivel-petrol-60: #70898e;
    --tradivel-petrol-40: #9fb0b3;
    --tradivel-petrol-20: #cfd8d9;

    /* Tintas al 20/40/60/80% sobre aquamarine */
    --tradivel-aqua-80: #84b2b8;
    --tradivel-aqua-60: #a3c5ca;
    --tradivel-aqua-40: #c1d9db;
    --tradivel-aqua-20: #e0eced;

    /* Tipografía: ver README del skill — Artegra Sans es solo para el logotipo,
       nunca para texto. Century Gothic es el equivalente de uso interno (Windows). */
    --tradivel-font-family: "Century Gothic", "CenturyGothic", "Poppins", "Questrial", Verdana, sans-serif;
}

body {
    font-family: var(--tradivel-font-family);
    color: var(--tradivel-umbro);
}

/* Bootstrap 4 / AdminLTE 3 — overrides de paleta */
.bg-primary        { background-color: var(--tradivel-petrol) !important; }
.text-primary      { color: var(--tradivel-petrol) !important; }
.btn-primary       {
    background-color: var(--tradivel-petrol) !important;
    border-color: var(--tradivel-petrol) !important;
}
.btn-primary:hover {
    background-color: var(--tradivel-petrol-80) !important;
    border-color: var(--tradivel-petrol-80) !important;
}

.bg-secondary      { background-color: var(--tradivel-aquamarine) !important; }
.text-secondary    { color: var(--tradivel-aquamarine) !important; }
.btn-secondary      {
    background-color: var(--tradivel-aquamarine) !important;
    border-color: var(--tradivel-aquamarine) !important;
    color: #fff !important;
}
.btn-secondary:hover {
    background-color: var(--tradivel-aqua-80) !important;
    border-color: var(--tradivel-aqua-80) !important;
}

/* AdminLTE: sidebar y navbar con el color principal de marca */
.main-sidebar, .main-header.navbar {
    background-color: var(--tradivel-petrol) !important;
}

a { color: var(--tradivel-aquamarine); }
a:hover { color: var(--tradivel-petrol); }

/* Titulares en mayúsculas — patrón del manual (2.2.2) */
h1, h2, .titular {
    font-family: var(--tradivel-font-family);
    font-weight: bold;
    text-transform: uppercase;
    color: var(--tradivel-petrol);
}