/* ==========================================================================
   C-TRAN — Paleta de colores institucionales
   Definir aquí los colores corporativos del sistema para usarlos en
   cualquier parte del proyecto mediante:
     - CSS custom properties : var(--color-callsoft-azul)
     - Clases utilitarias    : .btn-callsoft-azul, .bg-callsoft-azul, etc.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (variables nativas)
   Disponibles en cualquier regla CSS/inline style del proyecto.
   -------------------------------------------------------------------------- */
:root {
    /* Azul institucional principal */
    --callsoft-azul:          #426295;
    --callsoft-azul-dark:     #1e3a6e;
    --callsoft-azul-light:    #4a70b5;
    --callsoft-azul-subtle:   rgba(46, 83, 149, 0.12);
    --callsoft-azul-border:   rgba(46, 83, 149, 0.30);

    /* Dorado institucional de acento */
    --callsoft-dorado:        #dbb06b;
    --callsoft-dorado-dark:   #a87c10;
    --callsoft-dorado-light:  #e8c040;
    --callsoft-dorado-subtle: rgba(212, 160, 23, 0.14);

    /* Auxiliares de estado (complementan Bootstrap) */
    --callsoft-exito:         #1a6e3c;
    --callsoft-alerta:        #8a5000;
    --callsoft-peligro:       #8b1a1a;
    --callsoft-info:          #115577;
}

/* --------------------------------------------------------------------------
   2. Botones — .btn-callsoft-azul / .btn-outline-callsoft-azul
   -------------------------------------------------------------------------- */
.btn-callsoft-azul {
    color: #fff;
    background: linear-gradient(110deg, var(--callsoft-azul-dark), var(--callsoft-azul-light));
    border-color: var(--callsoft-azul);
    box-shadow: 0 4px 12px var(--callsoft-azul-subtle);
}
.btn-callsoft-azul:hover,
.btn-callsoft-azul:focus {
    color: #fff;
    background: linear-gradient(110deg, #1b3460, var(--callsoft-azul));
    border-color: var(--callsoft-azul-dark);
    box-shadow: 0 6px 16px rgba(46, 83, 149, 0.25);
}
.btn-callsoft-azul:active {
    background: var(--callsoft-azul-dark);
    border-color: var(--callsoft-azul-dark);
}

.btn-outline-callsoft-azul {
    color: var(--callsoft-azul);
    background: transparent;
    border: 1px solid var(--callsoft-azul-border);
}
.btn-outline-callsoft-azul:hover,
.btn-outline-callsoft-azul:focus {
    color: #fff;
    background: var(--callsoft-azul);
    border-color: var(--callsoft-azul);
}

/* Dorado */
.btn-callsoft-dorado {
    color: #fff;
    background: linear-gradient(110deg, var(--callsoft-dorado-dark), var(--callsoft-dorado-light));
    border-color: var(--callsoft-dorado);
    box-shadow: 0 4px 12px var(--callsoft-dorado-subtle);
}
.btn-callsoft-dorado:hover,
.btn-callsoft-dorado:focus {
    color: #fff;
    background: var(--callsoft-dorado-dark);
    border-color: var(--callsoft-dorado-dark);
}

.btn-outline-callsoft-dorado {
    color: var(--callsoft-dorado-dark);
    background: transparent;
    border: 1px solid rgba(212, 160, 23, 0.4);
}
.btn-outline-callsoft-dorado:hover {
    color: #fff;
    background: var(--callsoft-dorado);
    border-color: var(--callsoft-dorado);
}

/* --------------------------------------------------------------------------
   3. Fondos — .bg-callsoft-azul / .bg-callsoft-dorado / .bg-callsoft-subtle
   -------------------------------------------------------------------------- */
.bg-callsoft-azul         { background-color: var(--callsoft-azul) !important; color: #fff; }
.bg-callsoft-azul-dark    { background-color: var(--callsoft-azul-dark) !important; color: #fff; }
.bg-callsoft-azul-subtle  { background-color: var(--callsoft-azul-subtle) !important; }
.bg-callsoft-dorado       { background-color: var(--callsoft-dorado) !important; color: #fff; }
.bg-callsoft-dorado-subtle{ background-color: var(--callsoft-dorado-subtle) !important; }

/* Gradiente de cabecera / tarjeta institucional */
.bg-callsoft-gradient {
    background: linear-gradient(110deg, var(--callsoft-azul-dark), var(--callsoft-azul-light)) !important;
    color: #fff;
}

/* Alias para usar en configuraciones tipo 'classes' de AdminLTE */
.bg-gradient-callsoft-azul {
    background: linear-gradient(110deg, var(--callsoft-azul-dark), var(--callsoft-azul-light)) !important;
    color: #fff !important;
}

.bg-gradient-callsoft-azul i,
.bg-gradient-callsoft-azul p,
.bg-gradient-callsoft-azul span {
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   4. Texto — .text-callsoft-azul / .text-callsoft-dorado
   -------------------------------------------------------------------------- */
.text-callsoft-azul   { color: var(--callsoft-azul) !important; }
.text-callsoft-dorado { color: var(--callsoft-dorado) !important; }

/* --------------------------------------------------------------------------
   5. Bordes — .border-callsoft-azul / .border-callsoft-dorado
   -------------------------------------------------------------------------- */
.border-callsoft-azul   { border-color: var(--callsoft-azul-border) !important; }
.border-callsoft-dorado { border-color: rgba(212, 160, 23, 0.4) !important; }

/* --------------------------------------------------------------------------
   6. Badges — .badge-callsoft-azul / .badge-callsoft-dorado
   -------------------------------------------------------------------------- */
.badge-callsoft-azul {
    background-color: var(--callsoft-azul);
    color: #fff;
}
.badge-callsoft-dorado {
    background-color: var(--callsoft-dorado);
    color: #fff;
}

/* --------------------------------------------------------------------------
   7. Tarjetas institucionales — .card-callsoft
   Aplica cabecera azul institucional, útil en dashboards de módulos.
   -------------------------------------------------------------------------- */
.card-callsoft > .card-header {
    background: linear-gradient(110deg, var(--callsoft-azul-dark), var(--callsoft-azul-light));
    color: #fff;
    border-bottom: 2px solid var(--callsoft-dorado);
}
.card-callsoft > .card-header .card-title {
    color: #fff;
    font-weight: 700;
}
.card-callsoft > .card-header .card-tools .btn-tool {
    color: rgba(255, 255, 255, 0.85);
}
.card-callsoft > .card-header .card-tools .btn-tool:hover {
    color: #fff;
}

/* --------------------------------------------------------------------------
   8. Sidebar / menú lateral institucional — .nav-callsoft-azul
   -------------------------------------------------------------------------- */
.nav-callsoft-azul {
    background: linear-gradient(135deg, var(--callsoft-azul-dark), var(--callsoft-azul)) !important;
    color: #fff;
    font-weight: 600;
}
.nav-callsoft-azul:hover {
    background: var(--callsoft-azul-dark) !important;
    color: #fff !important;
}