:root {
    --bg: #0b1220;
    --sidebar: #1e293b; /* gris pizarra claro */
    --sidebar-line: rgba(255,255,255,.12);
    --sidebar-text: #e8f2ff;
    --sidebar-muted: #9fb0c9;
    --card: #0f172a;
    --line: rgba(255,255,255,.10);
    --text: #e2e8f0;
    --blue700: #0d3e8a;
    --blue500: #1e5fbf;
    --orange: #f97316;
    --clients: #4f46e5; /* morado-azulado */
    --vehiculos: #22c55e; /* verde */
    --ot: #f59e0b; /* ámbar */
    --logout: #ef4444; /* rojo */
}

html, body {
    height: 100%
}

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

a {
    color: var(--blue500);
    text-decoration: none
}
    /* ⬇️ Evita que la opacidad afecte a botones */
    a:not(.btn):hover {
        opacity: .92
    }

/* ===== Sidebar ===== */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 270px;
    background: var(--sidebar);
    border-right: 1px solid var(--sidebar-line);
    padding: 14px 10px;
    z-index: 1030;
    transition: width .2s ease;
}

    .sidebar.collapsed {
        width: 76px;
    }

    .sidebar .brand.only-logo {
        display: flex;
        justify-content: center;
        margin: 4px 6px 14px;
    }

/* --- Tile del logo con contención --- */
.logo-tile {
    background: #fff;
    border-radius: 14px;
    padding: 8px 10px;
    display: grid; /* centra el contenido */
    place-items: center;
    width: 100%;
    height: 64px; /* alto fijo en modo normal */
    overflow: hidden; /* evita que la imagen se salga */
}

    .logo-tile img {
        max-width: 100%;
        max-height: 100%;
        height: auto;
        width: auto;
        object-fit: contain; /* mantiene proporción dentro del tile */
    }
/* Estado colapsado: tile cuadrado compacto y centrado */
.sidebar.collapsed .logo-tile {
    width: 48px;
    height: 48px;
    padding: 6px;
    border-radius: 12px;
    margin: 4px auto 12px; /* centra el tile */
}

.sidebar .section-title {
    color: var(--sidebar-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12rem;
    margin: 12px 6px 6px;
}

.sidebar .menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 4px 0;
    color: var(--sidebar-text);
    border: 1px solid transparent;
    border-radius: 12px;
    transition: background .15s, border-color .15s, transform .08s;
}

    .menu-item:hover {
        background: rgba(255,255,255,.10);
        transform: translateX(2px);
        color: #fff;
    }

    .menu-item.active {
        background: rgba(255,255,255,.12);
        border-color: rgba(255,255,255,.18);
        color: #fff;
    }

.menu-ico {
    font-size: 1.05rem;
    width: 20px;
    text-align: center;
}

.menu-dashboard .menu-ico {
    color: #06b6d4;
}
/* cyan */
.menu-clients .menu-ico {
    color: #7c3aed;
}
/* violeta (ya tenías parecido) */
.menu-vehiculos .menu-ico {
    color: #22c55e;
}
/* verde */
.menu-ot .menu-ico {
    color: #f59e0b;
}
/* ámbar */
.menu-users .menu-ico {
    color: #f43f5e;
}
/* rosado/rojo vivo */
.menu-reportes .menu-ico {
    color: #38bdf8;
}
/* celeste/sky */

.menu-logout .menu-ico {
    color: var(--logout);
}

/* Colapsado: oculta labels, centra íconos */
.sidebar.collapsed .item-label {
    display: none;
}

.sidebar.collapsed .menu-item {
    justify-content: center;
    padding: 10px 8px;
}

.sidebar.collapsed .section-title {
    display: none;
}

/* ===== Main / Topbar ===== */
.main {
    margin-left: 270px;
    padding: 22px;
    min-height: 100vh;
    transition: margin-left .2s ease;
}

.sidebar.collapsed ~ .main {
    margin-left: 76px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

    .topbar .title {
        font-size: 28px;
        font-weight: 800;
        color: #fff;
    }

.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===== Cards / Tables ===== */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.card-header {
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: #dbeafe
}

.table {
    color: #e2e8f0;
}

    .table thead th {
        background: #0f1b2d;
        color: #cfe1ff;
        border-bottom: 1px solid var(--line)
    }

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(255,255,255,.03);
    color: inherit;
}

/* ===== Forms (mejor contraste) ===== */
.form-label {
    color: #cfe1ff;
    font-weight: 600;
}
/* títulos de los campos */
.form-control, .form-select {
    background: #0b1326;
    border-color: var(--line);
    color: #e2e8f0;
    box-shadow: none;
}

    .form-control::placeholder {
        color: #9aa6b2;
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--blue500);
        box-shadow: 0 0 0 .2rem rgba(30,95,191,.20);
    }

.search-input {
    background: #101a2c !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #e2e8f0 !important;
}

/* ===== Badges / Buttons ===== */
.badge-soft {
    background: rgba(255,255,255,.08);
    color: #cbd5e1;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .35rem .6rem
}

.badge-state {
    border: 1px solid rgba(255,255,255,.12);
    padding: .35rem .6rem;
    border-radius: 999px
}

    .badge-state[data-s="Abierta"] {
        background: rgba(30,95,191,.20);
        color: #dbeafe;
        border-color: rgba(30,95,191,.35)
    }

    .badge-state[data-s="En proceso"] {
        background: rgba(249,115,22,.15);
        color: #fed7aa;
        border-color: rgba(249,115,22,.35)
    }

    .badge-state[data-s="Terminada"] {
        background: rgba(34,197,94,.18);
        color: #bbf7d0;
        border-color: rgba(34,197,94,.35)
    }

    .badge-state[data-s="Entregada"] {
        background: rgba(34,197,94,.22);
        color: #dcfce7;
        border-color: rgba(34,197,94,.35)
    }

    .badge-state[data-s="Cancelada"] {
        background: rgba(239,68,68,.18);
        color: #fecaca;
        border-color: rgba(239,68,68,.35)
    }

.btn-brand {
    --bs-btn-bg: var(--orange);
    --bs-btn-border-color: var(--orange);
    --bs-btn-hover-bg: #ea580c;
    --bs-btn-hover-border-color: #ea580c;
    --bs-btn-color: #0b1220;
    font-weight: 700;
    border-radius: 10px;
}

    .btn-brand.btn-sm {
        padding: .42rem .9rem;
        line-height: 1.1;
    }

/* ===== Footer ===== */
footer {
    color: #9db3d1
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .25s
    }

        .sidebar.open {
            transform: translateX(0)
        }

    .main {
        margin-left: 0
    }
}

/* === Ajuste fino del logo === */
.logo-tile {
    background: #fff;
    border-radius: 14px;
    /* Altura un poco mayor en modo expandido para que respire */
    height: 72px; /* antes 64px */
    padding: 8px 10px;
    display: grid;
    place-items: center;
    width: 100%;
    overflow: hidden; /* nunca se sale */
}

    .logo-tile img {
        max-width: 92%; /* evita que toque los bordes laterales */
        max-height: 56px; /* encaja verticalmente en 72px de alto */
        width: auto;
        height: auto;
        object-fit: contain;
    }
/* Colapsado: tile cuadrado compacto */
.sidebar.collapsed .logo-tile {
    width: 48px;
    height: 48px;
    padding: 6px;
    border-radius: 12px;
    margin: 4px auto 12px;
}

    .sidebar.collapsed .logo-tile img {
        max-width: 100%;
        max-height: 100%;
    }

/* ===== Toolbar limpia (sin título interno) ===== */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.toolbar-wrap {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px 12px;
}

.toolbar .group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.toolbar .form-control {
    height: 38px;
    padding-top: .4rem;
    padding-bottom: .4rem;
}

.toolbar .btn {
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .toolbar .btn i {
        font-size: 1rem;
    }

/* versión compacta en pantallas chicas */
@media (max-width: 768px) {
    .toolbar {
        gap: 10px;
    }

        .toolbar .group {
            width: 100%;
        }

            .toolbar .group form {
                flex: 1;
            }

            .toolbar .group .form-control {
                width: 100%;
            }
}

/* ===== Estilo premium para la toolbar ===== */
.toolbar-wrap {
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
    border: 1px solid rgba(148, 163, 184, .20);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px rgba(0,0,0,.20);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .toolbar-wrap:hover {
        border-color: rgba(148,163,184,.30);
        box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 28px rgba(0,0,0,.24);
    }
    /* Línea fina superior “polish” */
    .toolbar-wrap::before {
        content: "";
        display: block;
        height: 1px;
        width: 100%;
        margin: -12px 0 12px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
        border-radius: 16px 16px 0 0;
    }

/* ===== Focus glow en buscador ===== */
.toolbar .form-control.search-input {
    transition: box-shadow .2s ease, border-color .2s ease;
}

    .toolbar .form-control.search-input:focus {
        border-color: rgba(30,95,191,.55) !important;
        box-shadow: 0 0 0 .15rem rgba(30,95,191,.20), 0 6px 18px rgba(30,95,191,.18);
    }

/* ===== Botones: hover/focus con micro-glow ===== */
.btn-brand {
    transition: transform .06s ease, box-shadow .2s ease;
    box-shadow: 0 6px 18px rgba(249,115,22,.25);
}

    .btn-brand:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 22px rgba(249,115,22,.32);
    }

    .btn-brand:active {
        transform: translateY(0);
    }

.btn.btn-outline-light {
    border-color: rgba(255,255,255,.25);
    color: #eaf2ff;
    transition: border-color .2s ease, box-shadow .2s ease, transform .06s ease;
}

    .btn.btn-outline-light:hover {
        border-color: rgba(255,255,255,.45);
        box-shadow: 0 6px 18px rgba(148,163,184,.20);
        transform: translateY(-1px);
    }

/* ===== Lista de clientes — contraste real (override) ===== */
/* ===== Clientes: texto nítido y sin hover ===== */

/* Contraste real en celdas */
.table.table-clients tbody td {
    color: #eaf2ff !important; /* texto claro */
    vertical-align: middle;
    font-weight: 500;
}
    /* Nombre e ID un poco más fuertes */
    .table.table-clients tbody td.td-name {
        color: #ffffff !important;
        font-weight: 700;
    }

    .table.table-clients tbody td.td-id {
        color: #dbeafe !important;
        font-weight: 600;
    }
    /* Campos secundarios (email/dirección/fecha) con buen contraste */
    .table.table-clients tbody td.td-muted {
        color: #c9d6ec !important;
        font-weight: 500;
    }

/* Zebra muy sutil (sin “lavar” el texto) */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(255,255,255,.03) !important;
    color: inherit !important;
}

/* ===== Acciones como iconos circulares ===== */
.td-actions {
    text-align: right;
    white-space: nowrap;
}

.action-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    margin-left: 6px;
    color: #0b1220;
    background: #94a3b8; /* fallback */
    border: 0;
    text-decoration: none;
    transition: transform .06s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}

    .action-icon i {
        font-size: 1.05rem;
    }
/* Colores por acción */
.ai-vehiculos {
    background: #22c55e;
}
/* verde */
.ai-ot {
    background: #f59e0b;
}
/* ámbar */
.ai-bitacora {
    background: #a855f7;
}
/* púrpura */
.ai-editar {
    background: #3b82f6;
}
/* azul */
.ai-eliminar {
    background: #ef4444;
}
/* rojo */

/* Accesibilidad (teclado) */
.action-icon:focus {
    outline: 2px solid rgba(255,255,255,.35);
    outline-offset: 2px;
}

/* ====== FIX DEFINITIVO TABLA CLIENTES ====== */
/* Fondo oscuro consistente en TODAS las celdas */
.table.table-clients > :not(caption) > * > * {
    background-color: #0f172a !important; /* igual que var(--card) */
    color: #eaf2ff !important;
}
/* Zebra oscuro (no lava texto) */
.table.table-clients.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #101a2c !important; /* un tono arriba */
    color: #eaf2ff !important;
}
/* Sin hover (ni cambia color ni fondo) */
.table.table-clients.table-hover > tbody > tr:hover > * {
    background-color: inherit !important;
    color: inherit !important;
}
/* Refuerzos de contraste por columna */
.table.table-clients td.td-name {
    color: #ffffff !important;
    font-weight: 700;
}

.table.table-clients td.td-id {
    color: #dbeafe !important;
    font-weight: 600;
}

.table.table-clients td.td-muted {
    color: #c9d6ec !important;
}

/* Encabezado ya oscuro (por si otro CSS lo pisa) */
.table.table-clients thead th {
    background: #0f1b2d !important;
    color: #e6efff !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* ===== KPI Cards elegantes ===== */
.kpi-card {
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
    border: 1px solid rgba(148,163,184,.20);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px rgba(0,0,0,.18);
}

    .kpi-card .kpi-head {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #cfe1ff;
        font-weight: 700;
        letter-spacing: .02em;
    }

        .kpi-card .kpi-head i {
            font-size: 1.1rem;
            opacity: .95
        }

    .kpi-card .kpi-value {
        font-size: 32px;
        font-weight: 800;
        color: #fff;
        margin: 6px 0 2px;
    }

    .kpi-card .kpi-foot {
        margin-top: 4px
    }

    .kpi-card .kpi-link {
        color: #eaf2ff;
        text-decoration: none;
        opacity: .9
    }

        .kpi-card .kpi-link:hover {
            text-decoration: underline;
            opacity: 1
        }

/* sutiles variaciones de borde/glow por color */
.kpi-blue {
    box-shadow: 0 6px 18px rgba(59,130,246,.18);
}

.kpi-green {
    box-shadow: 0 6px 18px rgba(34,197,94,.18);
}

.kpi-amber {
    box-shadow: 0 6px 18px rgba(245,158,11,.18);
}

.kpi-purple {
    box-shadow: 0 6px 18px rgba(168,85,247,.18);
}

/* progress bar tono azul */
.progress {
    background: rgba(255,255,255,.06);
    border-radius: 999px;
}

.progress-bar {
    background: #1e5fbf;
}

/* ===== Botones generales: nunca cambian opacidad/efectos indeseados ===== */
.btn, a.btn,
.btn:hover, a.btn:hover,
.btn:focus, a.btn:focus,
.btn:active, a.btn:active {
    opacity: 1 !important;
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ===== Botones de acción del dashboard (colores fijos, sin hover) ===== */
.btn-new-client,
.btn-new-vehicle,
.btn-new-ot {
    border: none;
    color: #0b1220; /* texto oscuro para buen contraste */
    font-weight: 700;
    border-radius: 10px;
    padding: .42rem .9rem;
    line-height: 1.1;
    box-shadow: none !important;
    transform: none !important;
}

/* Colores por botón */
.btn-new-client {
    background: #f97316;
    border-color: #f97316;
}

.btn-new-vehicle {
    background: #3b82f6;
    border-color: #3b82f6;
}

.btn-new-ot {
    background: #a855f7;
    border-color: #a855f7;
}

/* Sin cambios al pasar el mouse/focus/active (mismo color) */
.btn-new-client:hover,
.btn-new-client:focus,
.btn-new-client:active {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #0b1220 !important;
}

.btn-new-vehicle:hover,
.btn-new-vehicle:focus,
.btn-new-vehicle:active {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #0b1220 !important;
}

.btn-new-ot:hover,
.btn-new-ot:focus,
.btn-new-ot:active {
    background: #a855f7 !important;
    border-color: #a855f7 !important;
    color: #0b1220 !important;
}

/* ===== Tabla de usuarios: contraste real y sin hover que lave el texto ===== */
.table.table-users > :not(caption) > * > * {
    background-color: #0f172a !important; /* mismo tono que las cards */
    color: #eaf2ff !important;
    vertical-align: middle;
}

.table.table-users.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #101a2c !important; /* zebra sutil */
    color: #eaf2ff !important;
}

.table.table-users thead th {
    background: #0f1b2d !important;
    color: #e6efff !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.table.table-users.table-hover > tbody > tr:hover > * {
    background-color: rgba(30,95,191,.08) !important; /* leve, sin perder contraste */
    color: #fff !important;
}

/* ===== Acciones como iconos circulares (reuso del patrón de clientes) ===== */
.td-actions {
    text-align: right;
    white-space: nowrap;
}

.action-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    margin-left: 6px;
    color: #0b1220;
    background: #94a3b8;
    border: 0;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

    .action-icon i {
        font-size: 1.05rem;
    }

/* Colores para acciones en usuarios */
.ai-edit {
    background: #3b82f6;
}
/* azul */
.ai-reset {
    background: #f59e0b;
}
/* ámbar */
.ai-delete {
    background: #ef4444;
}
/* rojo */

/* Badges de rol (por claridad) */
.badge-role {
    border-radius: 999px;
    padding: .35rem .7rem;
    font-weight: 700;
}

    .badge-role.admin {
        background: #7f1d1d;
        color: #fecaca;
    }

    .badge-role.supervisor {
        background: #4c1d95;
        color: #e9d5ff;
    }

    .badge-role.asesor {
        background: #0b3a6e;
        color: #cfe1ff;
    }

/* ===== Modales oscuros: contraste profesional ===== */
.modal-content {
    background: #0f172a; /* mismo tono que las cards */
    color: #eaf2ff;
    border: 1px solid rgba(148,163,184,.22);
    border-radius: 16px;
    box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

.modal-header,
.modal-footer {
    border-color: rgba(148,163,184,.18);
}

.modal-title {
    color: #e6efff; /* título más nítido */
    font-weight: 800;
}

/* X de cerrar visible en fondo oscuro */
.btn-close {
    filter: invert(1) contrast(120%) opacity(.85);
}

    .btn-close:hover {
        opacity: 1;
    }

/* Etiquetas y ayudas dentro de modales */
.modal-content .form-label {
    color: #d8e7ff; /* más fuerte que el resto */
    font-weight: 700;
}

.modal-content .form-text {
    color: #9fb0c9; /* texto auxiliar */
}

/* Inputs/Select en modal (refuerza lo que ya tienes) */
.modal-content .form-control,
.modal-content .form-select {
    background: #0b1326;
    border-color: rgba(148,163,184,.28);
    color: #eaf2ff;
    box-shadow: none;
}

    .modal-content .form-control::placeholder {
        color: #b9c6d6; /* placeholder legible */
    }

    .modal-content .form-control:focus,
    .modal-content .form-select:focus {
        border-color: #1e5fbf;
        box-shadow: 0 0 0 .18rem rgba(30,95,191,.20);
    }

/* Botones del modal */
.modal-content .btn-brand {
    --bs-btn-color: #0b1220;
}

.modal-content .btn-secondary {
    background: #4b5563;
    border-color: #4b5563;
    color: #f8fafc;
}

    .modal-content .btn-secondary:hover {
        background: #5b6675;
        border-color: #5b6675;
    }

/* ===== Bitácora — contraste en dark ===== */
:root {
    --crm-bg-card: #0b1220; /* fondo de tarjetas/controles */
    --crm-text: #e5e7eb; /* texto principal */
    --crm-text-muted: #a1aecb; /* texto secundario */
    --crm-border: #1f2a3a; /* bordes suaves */
    --crm-accent: #7dd3fc; /* hover links/acento */
}

/* Timeline / Detalle */
.timeline,
.timeline .card,
.bitacora-card {
    background-color: var(--crm-bg-card);
    border-color: var(--crm-border);
}

    .timeline .item .title,
    .timeline .item .desc,
    .timeline .item .body,
    .bitacora-descripcion {
        color: var(--crm-text) !important;
    }

    .timeline .item .meta,
    .timeline .item .subtitle,
    .text-muted,
    .form-text {
        color: var(--crm-text-muted) !important;
    }

/* Controles del formulario (tipo, asunto, detalle) */
.form-control,
.form-select {
    background-color: var(--crm-bg-card);
    color: var(--crm-text);
    border-color: var(--crm-border);
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--crm-accent);
        box-shadow: 0 0 0 .2rem rgba(125, 211, 252, .15);
    }

    /* Placeholders en dark */
    .form-control::placeholder {
        color: var(--crm-text-muted);
        opacity: 1;
    }

/* Footer (créditos) */
.app-footer,
.app-footer * {
    color: var(--crm-text-muted) !important;
}

    .app-footer a {
        color: var(--crm-text) !important;
        text-decoration: underline dotted;
    }

        .app-footer a:hover {
            color: var(--crm-accent) !important;
        }