/* Tema moderno (claro) - ajustes sobre Bootstrap */
:root {
    --ol-bg: #f6f7fb;
    --ol-surface: #ffffff;
    --ol-text: #0f172a;
    --ol-muted: #64748b;
    --ol-border: rgba(15, 23, 42, 0.12);
    --ol-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
    --ol-radius: 14px;
}

html, body {
    height: 100%;
}

body {
    background: var(--ol-bg);
    color: var(--ol-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Evita que el footer fijo tape contenido */
body {
    padding-bottom: 90px;
}

.navbar {
    backdrop-filter: saturate(140%) blur(6px);
}

.navbar .navbar-brand {
    letter-spacing: 0.2px;
}

.navbar .brand-logo {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 8px;
    object-fit: cover;
}

.navbar .brand-text {
    font-weight: 700;
    letter-spacing: 0.5px;
}

.card,
.modal-content {
    border: 1px solid var(--ol-border);
    border-radius: var(--ol-radius);
    box-shadow: var(--ol-shadow);
}

.ol-card {
    border: 1px solid var(--ol-border);
    border-radius: var(--ol-radius);
    box-shadow: var(--ol-shadow);
}

.form-label {
    color: var(--ol-muted);
    font-weight: 700;
}

.form-control,
.form-select {
    font-weight: 650;
    border: 1px solid var(--ol-border);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

.btn {
    border-radius: 10px;
    font-weight: 750;
}

.table {
    background: var(--ol-surface);
}

.table thead th {
    background: rgba(15, 23, 42, 0.04);
    color: var(--ol-text);
    border-bottom: 1px solid var(--ol-border);
}

.table-hover{
    border: 1px solid var(--ol-border);
}

footer {
    margin-top: 5px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
}

/* Footer styles */
.footer {
    background: var(--ol-surface);
    border-top: 1px solid var(--ol-border);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--ol-muted);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
}

.footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.footer-item {
    display: flex;
    align-items: center;
}

.footer-icon {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--ol-muted);
    transition: color 0.2s;
}

.footer-icon:hover {
    color: var(--ol-text);
}

.footer-icon img {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
    filter: grayscale(1) opacity(0.7);
    transition: filter 0.2s;
}

.footer-icon:hover img {
    filter: grayscale(0) opacity(1);
}

/* Login background helper */
.ol-auth {
    background: radial-gradient(1200px 600px at 20% 10%, rgba(13,110,253,0.25), transparent 55%),
                radial-gradient(900px 500px at 80% 0%, rgba(32,201,151,0.18), transparent 55%),
                var(--ol-bg);
}
/* Estilo para el contenedor del GIF */
        #loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.9); /* Fondo semitransparente */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999; /* Asegúrate de que se muestre encima de todo */
        }
        
        /* Opcional: estilo para el GIF */
        #loader img {
            width: 200px; /* Ancho del GIF */
            height: 150px; /* Alto del GIF */
        }