/* ============================================================
   LIBRO DE OBRA — Custom CSS
   ============================================================ */

/* ── Fonts & Base ─────────────────────────────────────────── */
:root {
    --obra-blue:       #2d4a7a;
    --obra-blue-dark:  #1e3356;
    --obra-blue-light: #4a6fa5;
    --obra-green:      #27a560;
    --obra-yellow:     #e6a817;
    --obra-bg:         #f0f2f5;
    --sidebar-width:   250px;
}

body, .content-wrapper, .main-footer {
    font-family: 'Inter', sans-serif;
}

/* ── Sidebar Obra ─────────────────────────────────────────── */
.sidebar-obra {
    background: linear-gradient(180deg, #1a2e4a 0%, #1e3a57 60%, #243f5e 100%) !important;
}

.sidebar-obra .brand-link {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 14px 16px;
    background: rgba(0,0,0,0.15);
}

.sidebar-obra .brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--obra-blue-light);
    border-radius: 8px;
    margin-right: 8px;
    font-size: 1rem;
}

.sidebar-obra .nav-sidebar .nav-link {
    border-radius: 6px;
    margin: 2px 8px;
    transition: all 0.2s ease;
}

.sidebar-obra .nav-sidebar .nav-link:hover,
.sidebar-obra .nav-sidebar .nav-link.active {
    background: rgba(74, 111, 165, 0.5) !important;
    color: #fff !important;
}

.sidebar-obra .nav-header {
    color: rgba(255,255,255,0.4);
    font-size: 0.65rem;
    letter-spacing: 1.2px;
    padding: 12px 16px 4px;
}

/* ── Navbar Obra ──────────────────────────────────────────── */
.navbar-obra {
    background: linear-gradient(90deg, var(--obra-blue) 0%, var(--obra-blue-light) 100%) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ── User Avatars ─────────────────────────────────────────── */
.user-avatar-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--obra-blue-light);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--obra-blue-light);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Cards ────────────────────────────────────────────────── */
.card-obra {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    margin-bottom: 20px;
}

.card-obra .card-header {
    background: var(--obra-blue);
    color: #fff;
    border-radius: 10px 10px 0 0;
    padding: 12px 18px;
    font-weight: 600;
}

.card-obra .card-header .card-title {
    color: #fff;
}

.card-proyecto {
    border-radius: 10px;
    border: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-proyecto:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-obra {
    background: var(--obra-blue) !important;
    border-color: var(--obra-blue) !important;
    color: #fff !important;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-obra:hover {
    background: var(--obra-blue-dark) !important;
    border-color: var(--obra-blue-dark) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.btn-xs {
    padding: 2px 7px;
    font-size: 0.75rem;
    border-radius: 4px;
}

/* ── Login Page ───────────────────────────────────────────── */
.login-page {
    background: linear-gradient(135deg, #1a2e4a 0%, #2d4a7a 50%, #4a6fa5 100%);
}

.login-card-body {
    border-radius: 12px !important;
    border: none;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2) !important;
}

.login-logo {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    margin-bottom: 24px;
}

/* ── Info Boxes ───────────────────────────────────────────── */
.bg-obra-blue {
    background: var(--obra-blue) !important;
    color: #fff;
}

.bg-gradient-obra-blue {
    background: linear-gradient(135deg, var(--obra-blue), var(--obra-blue-light)) !important;
}

.bg-gradient-obra-green {
    background: linear-gradient(135deg, #1a7a4a, #27a560) !important;
}

.bg-gradient-obra-yellow {
    background: linear-gradient(135deg, #b5830e, var(--obra-yellow)) !important;
}

.bg-gradient-obra-dark {
    background: linear-gradient(135deg, #2c3e50, #3d5166) !important;
}

/* ── Page title ───────────────────────────────────────────── */
.page-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e3a57;
}

/* ── Content wrapper ──────────────────────────────────────── */
.content-wrapper {
    background: var(--obra-bg);
}

/* ── Badge obra ───────────────────────────────────────────── */
.badge-obra-role {
    background: var(--obra-blue-light);
    color: #fff;
}

/* ── Progress small ───────────────────────────────────────── */
.progress-sm {
    height: 6px;
    border-radius: 3px;
}

/* ── Border left utility ──────────────────────────────────── */
.border-left-success { border-left: 4px solid #28a745 !important; }
.border-left-warning { border-left: 4px solid #ffc107 !important; }
.border-left-secondary { border-left: 4px solid #6c757d !important; }
.border-left-info { border-left: 4px solid #17a2b8 !important; }
.border-left-primary { border-left: 4px solid var(--obra-blue) !important; }

/* ── Footer ───────────────────────────────────────────────── */
.main-footer {
    background: #fff;
    color: #6c757d;
    font-size: 0.85rem;
    border-top: 1px solid #e9ecef;
}

/* ── Table improvements ───────────────────────────────────── */
.table thead.thead-dark th {
    background: #1e3a57;
    color: #fff;
    border: none;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Animations ───────────────────────────────────────────── */
.small-box {
    transition: transform 0.2s ease;
}

.small-box:hover {
    transform: translateY(-2px);
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--obra-blue-light); border-radius: 3px; }