/* ============================================================
   ERP Jaén · Tema profesional (Bootstrap 5.3 + FontAwesome 6)
   Panel de gestión moderno: sidebar oscuro, topbar glass,
   tarjetas KPI, tablas y badges con color por estado.
   ============================================================ */

:root {
    --sidebar-w: 264px;
    --primary: #596b2d;
    --primary-600: #465522;
    --gold: #b88a2b;
    --gold-soft: #c6a15b;
    --sidebar-bg: linear-gradient(180deg, #202919 0%, #11170e 100%);
    --sidebar-active: rgba(198, 161, 91, .17);
    --bg-body: #f6f4ec;
    --card-border: #e6e2d4;
    --text: #252a20;
    --muted: #6d7466;
    --success: #667a32;
    --warning: #a87920;
    --danger: #dc2626;
    --info: #0891b2;
    --secondary: #64748b;
}

* { box-sizing: border-box; }

body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg-body);
    color: var(--text);
    font-size: .92rem;
}

/* ------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------ */
.app-wrapper { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: var(--sidebar-bg);
    color: #cbd5e1;
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    box-shadow: 2px 0 24px rgba(15, 23, 42, .18);
    transition: transform .25s ease;
}
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1.15rem 1.25rem;
    font-weight: 800;
    font-size: 1.06rem;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.07);
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-brand .brand-logo {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--gold-soft), var(--primary));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.05rem;
    flex-shrink: 0;
}

.sidebar-section {
    padding: 1.1rem 1.25rem .35rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #64748b;
    font-weight: 700;
}
.sidebar-nav { flex: 1; overflow-y: auto; padding: .35rem .75rem .75rem; }
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .68rem .8rem;
    color: #cbd5e1;
    text-decoration: none;
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 500;
    margin-bottom: .2rem;
    transition: background .15s, color .15s;
}
.sidebar-nav a i { width: 1.35rem; text-align: center; font-size: 1rem; }
.sidebar-nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.sidebar-nav a.active {
    background: var(--sidebar-active);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--gold-soft);
}
.sidebar-nav a .nav-badge {
    margin-left: auto;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: .7rem;
    border-radius: 20px;
    padding: .1rem .5rem;
}

.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid rgba(255,255,255,.07);
}
.user-box {
    display: flex; align-items: center; gap: .7rem;
    padding: .3rem .25rem .5rem;
}
.user-box .avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-soft), var(--primary));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem;
    flex-shrink: 0;
    text-transform: uppercase;
}
.user-box .user-name { color: #fff; font-weight: 600; font-size: .88rem; line-height: 1.1; }
.user-box .user-mail { color: #94a3b8; font-size: .74rem; word-break: break-all; }

.sidebar-backdrop { display: none; }

.main {
    flex: 1;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ------------------------------------------------------------
   TOPBAR
   ------------------------------------------------------------ */
.topbar {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .65rem 1.4rem;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--card-border);
    position: sticky;
    top: 0;
    z-index: 1020;
}
.topbar-title { font-size: 1.12rem; font-weight: 700; margin: 0; }
.topbar .spacer { flex: 1; }
.topbar .topbar-chip {
    display: flex; align-items: center; gap: .55rem;
    padding: .25rem .85rem .25rem .3rem;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 40px;
    font-size: .82rem;
}
.topbar .topbar-chip .avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-soft), var(--primary));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .78rem;
}
.topbar .topbar-chip .name { font-weight: 600; }

.content { padding: 1.5rem; flex: 1; }

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,.4); }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
    .sidebar-backdrop.show {
        display: block; position: fixed; inset: 0;
        background: rgba(15,23,42,.55); z-index: 1035;
    }
    .content { padding: 1rem; }
}

/* ------------------------------------------------------------
   WELCOME / CABECERAS
   ------------------------------------------------------------ */
.page-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.3rem;
}
.page-head h2 { font-size: 1.4rem; font-weight: 800; margin: 0; }
.page-head .subtitle { color: var(--muted); font-size: .9rem; margin-top: .15rem; }
.page-head .h-intro { color: var(--muted); font-size: .92rem; }

/* ------------------------------------------------------------
   TARJETAS KPI
   ------------------------------------------------------------ */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.kpi-card {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 1.1rem 1.2rem;
    display: flex; align-items: center; gap: 1rem;
    box-shadow: 0 6px 18px rgba(15,23,42,.04);
    transition: transform .15s, box-shadow .15s;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15,23,42,.08); }
.kpi-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}
.kpi-value { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.kpi-label { color: var(--muted); font-size: .82rem; font-weight: 500; margin-top: .15rem; }
.kpi-foot { color: var(--muted); font-size: .75rem; margin-top: .35rem; }

/* ------------------------------------------------------------
   CARDS GENÉRICAS
   ------------------------------------------------------------ */
.card { border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 6px 18px rgba(15,23,42,.03); }
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--card-border);
    font-weight: 700;
    padding: .95rem 1.2rem;
    border-radius: 16px 16px 0 0 !important;
    display: flex; align-items: center; gap: .6rem;
}
.card-header .card-icon { color: var(--primary); }
.card-body { padding: 1.2rem; }
.card-footer { background: #fff; border-top: 1px solid var(--card-border); }

/* ------------------------------------------------------------
   TABLAS
   ------------------------------------------------------------ */
.table { --bs-table-hover-bg: #f3f4ea; }
.table > :not(caption) > * > * { padding: .68rem .85rem; }
.table thead th {
    background: #f8fafc !important;
    color: #475569;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    border-bottom: 1px solid var(--card-border) !important;
    white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table a { color: var(--text); font-weight: 600; text-decoration: none; }
.table a:hover { color: var(--primary); }

.cell-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700; color: #fff;
    margin-right: .55rem; vertical-align: middle;
}
.acciones-cell .btn { padding: .28rem .5rem; }

.estado-badge { font-weight: 600; border-radius: 8px; padding: .3rem .6rem; font-size: .72rem; }
.estado-badge.b-success { background: #dcfce7; color: #15803d; }
.estado-badge.b-warning { background: #fef3c7; color: #b45309; }
.estado-badge.b-danger  { background: #fee2e2; color: #b91c1c; }
.estado-badge.b-info    { background: #cffafe; color: #0e7490; }
.estado-badge.b-secondary { background: #e2e8f0; color: #475569; }

/* ------------------------------------------------------------
   BARRAS DE PROGRESO (estados)
   ------------------------------------------------------------ */
.estado-bar-row { margin-bottom: .85rem; }
.estado-bar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .25rem; }
.estado-bar-head .e-label { font-size: .84rem; font-weight: 600; }
.estado-bar-head .e-count { font-size: .84rem; font-weight: 700; color: var(--muted); }
.progress { height: 8px; border-radius: 6px; background: #eef1f7; }
.progress-bar { border-radius: 6px; }

/* ------------------------------------------------------------
   BOTONES
   ------------------------------------------------------------ */
.btn { border-radius: 9px; font-weight: 600; }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-600); border-color: var(--primary-600); }
.btn-sm { border-radius: 8px; }

/* ------------------------------------------------------------
   FORMULARIOS
   ------------------------------------------------------------ */
.form-control, .form-select { border-radius: 9px; border-color: var(--card-border); }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(89,107,45,.14); }

/* ------------------------------------------------------------
   LOGIN
   ------------------------------------------------------------ */
.login-body {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 20% 20%, #3b462e, #11170e 70%);
    padding: 1rem;
}
.login-wrap { width: 100%; max-width: 420px; }
.login-card { border: 0; border-radius: 20px; overflow: hidden; }
.login-logo {
    width: 64px; height: 64px; border-radius: 18px;
    background: linear-gradient(135deg, var(--gold-soft), var(--primary));
    color: #fff; font-size: 1.6rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(89,107,45,.35);
}

/* ------------------------------------------------------------
   MAPA / DROPZONE / TOASTS / MODALES
   ------------------------------------------------------------ */
#mapa {
    height: calc(100vh - 210px);
    min-height: 460px;
    border-radius: 12px;
    z-index: 1;
}
.map-marker {
    background: var(--gold); color: #fff;
    width: 28px; height: 28px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.45);
    border: 2px solid #fff;
}
.map-marker i { transform: rotate(45deg); font-size: 12px; }

.dropzone-zone {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 1.8rem 1rem;
    text-align: center;
    color: var(--muted);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: #f8fafc;
}
.dropzone-zone:hover { border-color: #94a3b8; }
.dropzone-zone.dragover { border-color: var(--primary); background: #f1f3e8; color: var(--primary); }
.dropzone-zone i { color: var(--primary); }

.toast-container { z-index: 2100; }

.modal-content { border: 0; border-radius: 16px; }
.modal-header { border-bottom: 1px solid var(--card-border); }
.modal-footer { border-top: 1px solid var(--card-border); }

/* Scrollbars discretos */
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------
   ERP 1.1 · CUENTAS, ESTABLECIMIENTOS, CONTACTOS Y CUOTAS
   ------------------------------------------------------------ */
.eyebrow { display:block; color:var(--primary); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.25rem; }
.metric-pill { display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--card-border); background:#fff; border-radius:999px; padding:.55rem .9rem; color:var(--muted); box-shadow:0 4px 14px rgba(15,23,42,.04); }
.metric-pill span { color:var(--text); font-weight:800; }
.filter-card { background:linear-gradient(135deg,#fff,#fbfdff); }
.filter-card .form-label { color:#475569; font-size:.76rem; font-weight:700; margin-bottom:.35rem; }
.search-control .input-group-text { background:#fff; border-right:0; color:#94a3b8; }
.search-control .form-control { border-left:0; }
.search-control .form-control:focus { border-color:var(--card-border); box-shadow:none; }
.data-card { overflow:hidden; }
.list-footer { display:flex; justify-content:space-between; align-items:center; min-height:54px; padding:.6rem 1rem; }
.loading-cell,.error-cell,.empty-cell { padding:3rem 1rem !important; text-align:center; color:var(--muted); }
.error-cell { color:var(--danger); }
.empty-cell i { display:block; font-size:1.8rem; color:#cbd5e1; margin-bottom:.55rem; }
.empty-cell strong,.empty-cell span { display:block; }
.empty-cell span { font-size:.82rem; margin-top:.25rem; }
.entity-cell { display:flex; align-items:center; gap:.15rem; min-width:220px; color:var(--text); text-decoration:none; }
.entity-cell > span:last-child { min-width:0; }
.entity-cell strong,.entity-cell small { display:block; }
.entity-cell strong { overflow:hidden; text-overflow:ellipsis; max-width:280px; }
.entity-cell small { color:var(--muted); font-weight:500; margin-top:.12rem; }
.money-cell strong,.money-cell small { display:block; white-space:nowrap; }
.money-cell small { color:var(--muted); font-size:.72rem; font-weight:500; }
.count-bubble { display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 .45rem; border-radius:10px; background:#eff2e5; color:var(--primary); font-weight:800; }
.btn-icon { width:36px; height:36px; display:inline-grid; place-items:center; padding:0; }
.pagination .page-link { border-radius:8px !important; margin:0 2px; border-color:var(--card-border); color:#475569; }
.pagination .active .page-link { background:var(--primary); border-color:var(--primary); color:#fff; }

.account-hero { color:#fff; background:radial-gradient(circle at 90% 15%,rgba(198,161,91,.3),transparent 34%),linear-gradient(135deg,#182015,#303b22 70%,#596b2d); padding:1.5rem; border-radius:22px; box-shadow:0 18px 38px rgba(31,42,24,.2); }
.account-hero h2 { font-size:clamp(1.35rem,3vw,2rem); font-weight:800; overflow:hidden; text-overflow:ellipsis; }
.account-hero .eyebrow { color:#e3c77f; }
.account-hero .text-muted { color:#cbd5e1 !important; }
.account-monogram { width:58px; height:58px; border-radius:18px; display:grid; place-items:center; background:linear-gradient(135deg,#c6a15b,#7c8a46); box-shadow:0 10px 24px rgba(31,42,24,.35); font-weight:900; font-size:1.15rem; flex:0 0 auto; }
.account-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.account-stat { display:flex; align-items:center; gap:.7rem; padding:.8rem; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.07); border-radius:14px; backdrop-filter:blur(8px); }
.account-stat > i { color:#e3c77f; width:22px; text-align:center; }
.account-stat strong,.account-stat small { display:block; }
.account-stat strong { color:#fff; font-size:1rem; }
.account-stat small { color:#cbd5e1; font-size:.7rem; }
.account-tabs { gap:.35rem; padding:.4rem; background:#fff; border:1px solid var(--card-border); border-radius:14px; overflow-x:auto; flex-wrap:nowrap; }
.account-tabs .nav-link { white-space:nowrap; color:#475569; font-weight:700; border-radius:10px; }
.account-tabs .nav-link.active { background:#eff2e5; color:var(--primary); }
.tab-count { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 .3rem; border-radius:999px; background:#e2e8f0; font-size:.68rem; margin-left:.25rem; }
.account-tabs .active .tab-count { background:#fff; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem 1.5rem; }
.detail-item span,.detail-item strong { display:block; }
.detail-item span,.note-panel span { color:var(--muted); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.25rem; }
.detail-item strong { font-size:.92rem; font-weight:650; overflow-wrap:anywhere; }
.note-panel { background:#f8fafc; border-left:3px solid var(--primary); padding:.85rem 1rem; border-radius:0 10px 10px 0; white-space:pre-line; }
.quick-action { display:flex; align-items:center; gap:.8rem; padding:.8rem; border:1px solid var(--card-border); border-radius:12px; text-decoration:none; color:var(--text); margin-bottom:.65rem; transition:.16s ease; }
.quick-action:hover { transform:translateX(3px); border-color:#cfd6b7; background:#fafbf5; color:var(--primary); }
.quick-action > i { width:34px; height:34px; display:grid; place-items:center; background:#eff2e5; border-radius:10px; color:var(--primary); }
.quick-action strong,.quick-action small { display:block; }
.quick-action small { color:var(--muted); font-size:.72rem; overflow-wrap:anywhere; }

.establishment-card { background:#fff; border:1px solid var(--card-border); border-radius:18px; padding:1.1rem; box-shadow:0 8px 22px rgba(15,23,42,.04); transition:.18s ease; }
.establishment-card:hover { transform:translateY(-3px); box-shadow:0 16px 32px rgba(31,42,24,.09); border-color:#d8cfad; }
.store-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(135deg,#f4ead1,#eff2e5); color:var(--primary); }
.establishment-card h3 { font-size:1rem; font-weight:800; margin:1rem 0 .45rem; }
.establishment-card p { display:flex; gap:.55rem; color:var(--muted); font-size:.82rem; min-height:2.5rem; margin:.65rem 0; }
.establishment-card p i { color:#94a3b8; margin-top:.15rem; }
.account-link { font-size:.78rem; font-weight:700; color:var(--primary); text-decoration:none; }
.establishment-links { display:flex; flex-direction:column; gap:.35rem; padding-top:.65rem; border-top:1px solid #f1f5f9; }
.establishment-links a { color:#475569; text-decoration:none; font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.establishment-links i { width:20px; color:#94a3b8; }
.card-footline { display:flex; justify-content:space-between; align-items:center; margin-top:.9rem; padding-top:.75rem; border-top:1px solid #f1f5f9; color:var(--muted); font-size:.72rem; }
.status-dot { display:inline-flex; align-items:center; gap:.35rem; font-size:.7rem; font-weight:700; color:#64748b; }
.status-dot::before { content:""; width:7px; height:7px; border-radius:50%; background:#94a3b8; }
.status-dot.active { color:#15803d; }.status-dot.active::before { background:#22c55e; box-shadow:0 0 0 4px #dcfce7; }

.status-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .55rem; border-radius:999px; font-size:.7rem; font-weight:750; white-space:nowrap; }
.status-paid { background:#dcfce7; color:#15803d; }.status-pending { background:#fef3c7; color:#a16207; }.status-cancelled { background:#fee2e2; color:#b91c1c; }
.kpi-card.compact { padding:.85rem 1rem; }
.kpi-card.compact .kpi-icon { width:42px; height:42px; font-size:1rem; }
.kpi-card.compact small,.kpi-card.compact strong { display:block; }.kpi-card.compact small { color:var(--muted); font-size:.72rem; }.kpi-card.compact strong { font-size:1.05rem; }
.bg-blue { background:#eff2e5; color:#596b2d; }.bg-green { background:#e5edda; color:#4f6729; }.bg-amber { background:#f5ead2; color:#8b641d; }
.file-name { display:flex; align-items:center; gap:.7rem; min-width:220px; }.file-name strong,.file-name small { display:block; }.file-name small { color:var(--muted); font-size:.7rem; }
.file-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#eff2e5; color:var(--primary); flex:0 0 auto; }

/* Equivalencias Bootstrap para conservar contraste con la marca. */
.text-primary { color:var(--primary) !important; }
.btn-outline-primary { color:var(--primary); border-color:var(--primary); }
.btn-outline-primary:hover,.btn-outline-primary:focus { color:#fff; background:var(--primary); border-color:var(--primary); }
.btn-primary:focus,.btn-primary:active { background:var(--primary-600) !important; border-color:var(--primary-600) !important; box-shadow:0 0 0 .2rem rgba(89,107,45,.2) !important; }
.source-chip { padding:.25rem .5rem; border-radius:7px; background:#f1f5f9; color:#475569; font-size:.7rem; font-weight:700; white-space:nowrap; }
.file-missing { display:inline-flex; align-items:center; gap:.35rem; color:#b45309; font-size:.72rem; font-weight:700; margin-right:.35rem; }
.min-w-0 { min-width:0; }

@media (max-width: 991.98px) {
    .account-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .detail-grid { grid-template-columns:1fr; }
}
@media (max-width: 575.98px) {
    .account-hero { padding:1rem; border-radius:16px; }
    .account-monogram { width:46px; height:46px; border-radius:14px; }
    .account-hero .btn-light { width:38px; height:38px; overflow:hidden; white-space:nowrap; padding:.5rem .65rem; color:transparent; }
    .account-hero .btn-light i { color:var(--text); margin:0 !important; }
    .account-stats { grid-template-columns:1fr 1fr; gap:.45rem; }
    .account-stat { padding:.6rem; }.account-stat small { font-size:.62rem; }
    .list-footer { align-items:flex-start; flex-direction:column; gap:.65rem; }
}