/* =====================================================================
 *  OFICINA CONTROL · Estilos propios (sobre Bootstrap 5)
 * ===================================================================== */
:root {
    --azul:        #1e3a5f;
    --azul-claro:  #2c5282;
    --sidebar-w:   250px;
    --gris-fondo:  #f4f6f9;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--gris-fondo);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: #2d3748;
}

/* ---------- Estructura general ---------- */
.app-layout { min-height: 100vh; }

.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    background: var(--azul);
    color: #cbd5e0;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .25s ease;
}
.sidebar-marca {
    display: flex; align-items: center; gap: .6rem;
    padding: 1.1rem 1.25rem;
    font-size: 1.15rem; font-weight: 700; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.sidebar-marca i { font-size: 1.5rem; color: #63b3ed; }

.sidebar-nav { padding: .75rem 0; flex: 1; overflow-y: auto; }
.sidebar-pie { padding: .5rem 0 1rem; border-top: 1px solid rgba(255,255,255,.1); }

.sidebar .nav-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem 1.25rem;
    color: #cbd5e0; text-decoration: none;
    font-size: .95rem; border-left: 3px solid transparent;
}
.sidebar .nav-item i { font-size: 1.1rem; width: 1.3rem; text-align: center; }
.sidebar .nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar .nav-item.active {
    background: rgba(99,179,237,.15);
    color: #fff; border-left-color: #63b3ed; font-weight: 600;
}

.sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    z-index: 1035; display: none;
}
.sidebar-backdrop.visible { display: block; }

/* ---------- Contenido ---------- */
.contenido { margin-left: var(--sidebar-w); min-height: 100vh; }

.topbar {
    display: flex; align-items: center; gap: 1rem;
    background: #fff; padding: .65rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    position: sticky; top: 0; z-index: 1020;
}
.topbar-titulo { font-size: 1.15rem; font-weight: 600; margin: 0; flex: 1; }
.topbar .avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--azul-claro); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
}

.main { padding: 1.5rem 1.25rem; }

/* ---------- Tarjetas y elementos ---------- */
.card { border: 1px solid #e2e8f0; border-radius: .6rem; }
.card-metric { border: none; border-radius: .6rem; color: #fff; }
.card-metric .num { font-size: 2rem; font-weight: 700; line-height: 1; }
.card-metric .lbl { opacity: .9; font-size: .85rem; }
.card-metric i { font-size: 2rem; opacity: .35; }

.bg-grad-azul  { background: linear-gradient(135deg,#2c5282,#1e3a5f); }
.bg-grad-rojo  { background: linear-gradient(135deg,#e53e3e,#9b2c2c); }
.bg-grad-verde { background: linear-gradient(135deg,#38a169,#276749); }
.bg-grad-ambar { background: linear-gradient(135deg,#dd6b20,#9c4221); }
.bg-grad-cyan  { background: linear-gradient(135deg,#3182ce,#2c5282); }
.bg-grad-violeta { background: linear-gradient(135deg,#805ad5,#553c9a); }

.avatar-lista {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--azul-claro); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700; flex: 0 0 auto;
}

.table > :not(caption) > * > * { vertical-align: middle; }
.tabla-hover tbody tr { cursor: pointer; }

.filtros-barra {
    background: #fff; border: 1px solid #e2e8f0; border-radius: .6rem;
    padding: 1rem; margin-bottom: 1.25rem;
}

.chip-filtro {
    text-decoration: none; font-size: .85rem;
    padding: .35rem .8rem; border-radius: 2rem;
    border: 1px solid #cbd5e0; color: #4a5568; background:#fff;
    white-space: nowrap;
}
.chip-filtro:hover { background: #edf2f7; }
.chip-filtro.activo { background: var(--azul); color: #fff; border-color: var(--azul); }

.login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#1e3a5f,#2c5282); padding: 1rem;
}
.login-card {
    background: #fff; border-radius: .8rem; padding: 2.25rem;
    width: 100%; max-width: 410px; box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.login-card .marca { text-align: center; margin-bottom: 1.5rem; }
.login-card .marca i { font-size: 2.6rem; color: var(--azul); }

.text-prewrap { white-space: pre-wrap; }

.servicio-card { transition: transform .15s ease, box-shadow .15s ease; }
.servicio-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(15, 23, 42, .08); }
.servicio-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex: 0 0 auto;
}
.servicio-icon-lg { width: 3.5rem; height: 3.5rem; font-size: 1.6rem; }
.sticky-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    padding: .85rem;
    background: rgba(255,255,255,.95);
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    box-shadow: 0 -.35rem 1rem rgba(15,23,42,.08);
}

/* ---------- Tablero (Kanban) ---------- */
.kanban { display: flex; gap: .9rem; overflow-x: auto; padding-bottom: .5rem; }
.kanban-col {
    flex: 1 1 0; min-width: 250px;
    background: #eef1f5; border-radius: .6rem; display: flex; flex-direction: column;
}
.kanban-col .col-head {
    padding: .6rem .8rem; font-weight: 600; color: #fff;
    border-radius: .6rem .6rem 0 0; display: flex; align-items: center; justify-content: space-between;
}
.kanban-col .col-body { padding: .6rem; display: flex; flex-direction: column; gap: .55rem; min-height: 60px; }
.kanban-card {
    background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #cbd5e0;
    border-radius: .5rem; padding: .6rem .7rem;
}
.kanban-card.b-urgente   { border-left-color: #e53e3e; }
.kanban-card.b-hoy       { border-left-color: #3182ce; }
.kanban-card.b-delegar   { border-left-color: #805ad5; }
.kanban-card.b-pendiente { border-left-color: #a0aec0; }
.kanban-card.b-completada{ border-left-color: #38a169; opacity: .85; }
.kanban-card .titulo { font-weight: 600; font-size: .92rem; }
.kanban-card .meta { font-size: .78rem; color: #718096; }
.kanban-add { text-decoration: none; font-size: .85rem; color: #fff; opacity: .9; }
.kanban-add:hover { color: #fff; opacity: 1; }

/* ---------- Clientes especiales ---------- */
.cliente-especial-card { border-top: 4px solid #f6c344; }
.cliente-especial-card .card-header { border-bottom-color: #f7e4a7; }

/* ---------- Móvil ---------- */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.abierto { transform: translateX(0); }
    .contenido { margin-left: 0; }
}