/* Colores Institucionales YOLO369 para Oficina */

:root {
    --rojo-principal: #dc2626;
    --rojo-oscuro: #991b1b;
    --rojo-claro: #ef4444;
    --azul-rey: #1e3a8a;
    --azul-rey-oscuro: #1e40af;
    --azul-rey-claro: #2563eb;
    --dorado: #fbbf24;
    --dorado-oscuro: #f59e0b;
    --dorado-claro: #fcd34d;
}

/* Textos con colores institucionales */
.text-rojo {
    color: var(--rojo-principal) !important;
}

.text-azul {
    color: var(--azul-rey) !important;
}

.text-dorado {
    color: var(--dorado) !important;
}

/* Botones con colores institucionales */
.btn-rojo {
    background: linear-gradient(135deg, var(--rojo-principal) 0%, var(--rojo-oscuro) 100%);
    border: none;
    color: #ffffff !important;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.btn-rojo:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
    background: linear-gradient(135deg, var(--rojo-claro) 0%, var(--rojo-principal) 100%);
    color: #ffffff !important;
}

.btn-azul {
    background: linear-gradient(135deg, var(--azul-rey) 0%, var(--azul-rey-oscuro) 100%);
    border: none;
    color: #ffffff !important;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3);
}

.btn-azul:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.4);
    background: linear-gradient(135deg, var(--azul-rey-claro) 0%, var(--azul-rey) 100%);
    color: #ffffff !important;
}

.btn-dorado {
    background: linear-gradient(135deg, var(--dorado) 0%, var(--dorado-oscuro) 100%);
    border: none;
    color: var(--rojo-oscuro) !important;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
}

.btn-dorado:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(251, 191, 36, 0.4);
    background: linear-gradient(135deg, var(--dorado-claro) 0%, var(--dorado) 100%);
    color: var(--rojo-oscuro) !important;
}

/* Input group con colores institucionales */
.input-group-text {
    background: linear-gradient(135deg, var(--azul-rey) 0%, var(--azul-rey-oscuro) 100%);
    color: #ffffff;
    border: 1px solid var(--azul-rey);
}

.input-group-text.text-azul {
    background: linear-gradient(135deg, var(--azul-rey) 0%, var(--azul-rey-oscuro) 100%);
    color: #ffffff;
    border: 1px solid var(--azul-rey);
}

.form-control:focus {
    border-color: var(--azul-rey);
    box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.25);
}

/* Card con bordes institucionales */
.card {
    border: 1px solid rgba(30, 58, 138, 0.1);
    box-shadow: 0 4px 20px rgba(30, 58, 138, 0.1);
}

.card:hover {
    box-shadow: 0 8px 30px rgba(30, 58, 138, 0.15);
    border-color: rgba(30, 58, 138, 0.2);
}

/* Labels con color azul rey */
.form-label {
    color: var(--azul-rey);
    font-weight: 500;
}

/* Checkbox personalizado */
.form-check-input:checked {
    background-color: var(--azul-rey);
    border-color: var(--azul-rey);
}

.form-check-input:focus {
    border-color: var(--azul-rey);
    box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.25);
}

/* Enlaces con colores institucionales */
a {
    color: var(--azul-rey);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--azul-rey-claro);
    text-decoration: underline;
}

/* Footer con colores institucionales */
footer {
    background: linear-gradient(135deg, var(--rojo-principal) 0%, var(--rojo-oscuro) 100%);
    color: #ffffff;
}

footer a {
    color: var(--dorado);
}

footer a:hover {
    color: var(--dorado-claro);
}

/* Alertas con colores institucionales */
.alert {
    border-left: 4px solid var(--azul-rey);
}

.alert-info {
    background-color: rgba(30, 58, 138, 0.1);
    border-color: var(--azul-rey);
    color: var(--azul-rey);
}

.alert-danger {
    background-color: rgba(220, 38, 38, 0.1);
    border-color: var(--rojo-principal);
    color: var(--rojo-principal);
}

.alert-success {
    background-color: rgba(251, 191, 36, 0.1);
    border-color: var(--dorado);
    color: var(--dorado-oscuro);
}

/* Badges con colores institucionales */
.badge {
    background: linear-gradient(135deg, var(--azul-rey) 0%, var(--azul-rey-oscuro) 100%);
}

/* Tables con colores institucionales */
.table {
    border-color: rgba(30, 58, 138, 0.1);
}

.table thead th {
    background: linear-gradient(135deg, var(--azul-rey) 0%, var(--azul-rey-oscuro) 100%);
    color: #ffffff;
    border-color: var(--azul-rey);
}

.table-hover tbody tr:hover {
    background-color: rgba(30, 58, 138, 0.05);
}

/* Nav tabs con colores institucionales */
.nav-tabs .nav-link {
    color: var(--azul-rey);
    border-color: rgba(30, 58, 138, 0.2);
}

.nav-tabs .nav-link.active {
    background: linear-gradient(135deg, var(--azul-rey) 0%, var(--azul-rey-oscuro) 100%);
    color: #ffffff;
    border-color: var(--azul-rey);
}

/* Progress bars con colores institucionales */
.progress {
    background-color: rgba(30, 58, 138, 0.1);
}

.progress-bar {
    background: linear-gradient(135deg, var(--rojo-principal) 0%, var(--rojo-oscuro) 100%);
}