/* ===== Formaliza360 CRM — tema oscuro de marca ===== */
.f360crm-wrap, .f360crm-panel {
    --f360-bg: #081C31;
    --f360-bg-soft: #0C2438;
    --f360-bg-card: #0F2C44;
    --f360-border: #17405C;
    --f360-text: #E9F2FA;
    --f360-text-muted: #9AB0C4;
    --f360-green: #07A037;
    --f360-green-dark: #05812C;
    --f360-red: #FF6B6B;
    --f360-amber: #F5B942;
    --f360-blue: #4DA3FF;
    --f360-purple: #A78BFA;
}

.f360crm-wrap {
    max-width: 1100px; background: var(--f360-bg); color: var(--f360-text);
    padding: 20px 22px 36px; border-radius: 14px; margin-top: 12px;
}
.f360crm-wrap h1, .f360crm-wrap h2, .f360crm-wrap h3 { color: #fff; }
.f360crm-wrap code { background: var(--f360-bg-soft); color: var(--f360-text); padding: 2px 6px; border-radius: 4px; }
.f360crm-wrap .description { color: var(--f360-text-muted); }

.f360crm-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.f360crm-head select, .f360crm-filtros select, .f360crm-filtros input, .f360crm-form-gasto input {
    padding: 7px 10px; border-radius: 8px; border: 1px solid var(--f360-border);
    background: var(--f360-bg-soft); color: var(--f360-text);
}
.f360crm-head select option, .f360crm-filtros select option { background: var(--f360-bg-soft); color: var(--f360-text); }
.f360crm-filtros { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.f360crm-nota { color: var(--f360-text-muted); font-size: 12.5px; max-width: 720px; line-height: 1.6; margin: 10px 0 16px; }
.f360crm-vacio { color: var(--f360-text-muted); font-size: 13px; }

.f360crm-cards { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 24px; }
.f360crm-card {
    background: var(--f360-bg-card); border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.28);
    padding: 16px 20px; min-width: 130px; flex: 1 1 130px; text-align: center; border-top: 4px solid var(--f360-green);
}
.f360crm-card.chica { padding: 10px 14px; min-width: 100px; }
.f360crm-card.verde { border-top-color: var(--f360-green); }
.f360crm-card.amarillo { border-top-color: var(--f360-amber); }
.f360crm-card.rojo { border-top-color: var(--f360-red); }
.f360crm-card.azul { border-top-color: var(--f360-blue); }
.f360crm-card.morado { border-top-color: var(--f360-purple); }
.f360crm-card b { display: block; font-size: 26px; color: #fff; }
.f360crm-card span { display: block; font-size: 11px; color: var(--f360-text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .03em; }
.f360crm-card-sub { display: block; font-size: 11px; color: var(--f360-text-muted); margin-top: 6px; text-transform: none; letter-spacing: 0; }
.f360crm-var-verde { color: var(--f360-green) !important; font-weight: 600; }
.f360crm-var-rojo { color: var(--f360-red) !important; font-weight: 600; }
.f360crm-var-gris { color: var(--f360-text-muted) !important; }

.f360crm-badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #fff; margin-right: 4px; margin-top: 3px;
}
.f360crm-badge.f29-declarada, .f360crm-badge.pago-pagado { background: var(--f360-green); }
.f360crm-badge.f29-guardada { background: #4C6478; }
.f360crm-badge.f29-pendiente, .f360crm-badge.pago-pendiente { background: var(--f360-amber); color: #1e293b; }
.f360crm-badge.f29-girada, .f360crm-badge.pago-atrasado { background: var(--f360-red); }
.f360crm-badge.f29-sin_datos { background: #4C6478; }

/* Estado de vencimiento por fecha de pago (independiente del estado manual de pago) */
.f360crm-venc { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; margin-top: 3px; }
.f360crm-venc-al_dia { background: rgba(7,160,55,.18); color: #5FE08A; }
.f360crm-venc-proximo { background: rgba(245,185,66,.2); color: var(--f360-amber); }
.f360crm-venc-hoy { background: rgba(255,140,66,.22); color: #FF9C4D; animation: f360crm-pulso 1.6s infinite; }
.f360crm-venc-atrasado { background: rgba(255,107,107,.2); color: var(--f360-red); animation: f360crm-pulso 1.6s infinite; }
.f360crm-venc-sin_fecha { background: rgba(154,176,196,.15); color: var(--f360-text-muted); }
.f360crm-venc-pagado { color: var(--f360-text-muted); }
@keyframes f360crm-pulso { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.f360crm-fila-urgente td, tr.f360crm-fila-urgente { background: rgba(255,107,107,.06); }

.f360crm-tabla th, .f360crm-tabla td, .f360crm-tabla-gastos th, .f360crm-tabla-gastos td { padding: 10px 12px; color: var(--f360-text); border-color: var(--f360-border) !important; }
.f360crm-tabla, .f360crm-tabla-gastos { background: var(--f360-bg-card) !important; }
.f360crm-tabla.striped tr:nth-child(odd), .f360crm-tabla-gastos.striped tr:nth-child(odd) { background: var(--f360-bg-soft) !important; }
.pay-sel { padding: 4px 6px; border-radius: 6px; background: var(--f360-bg-soft); color: var(--f360-text); border: 1px solid var(--f360-border); }
.monto-input, .fecha-input { width: 108px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--f360-border); background: var(--f360-bg-soft); color: var(--f360-text); }

/* --- Gráficos --- */
.f360crm-chart-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .f360crm-chart-grid { grid-template-columns: 1fr; } }
.f360crm-chart-card {
    background: var(--f360-bg-card); border: 1px solid var(--f360-border); border-radius: 14px;
    padding: 16px 18px 10px; margin: 4px 0 20px;
}
.f360crm-chart-head { display: flex; justify-content: space-between; align-items: center; }
.f360crm-chart-head h3 { margin: 0 0 4px; }
.f360crm-leyenda { font-size: 12px; color: var(--f360-text-muted); display: flex; align-items: center; gap: 6px; }
.f360crm-leyenda .dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-left: 8px; }
.f360crm-leyenda .dot:first-child { margin-left: 0; }
.f360crm-leyenda .dot.ingreso { background: var(--f360-green); }
.f360crm-leyenda .dot.gasto { background: var(--f360-red); }
.f360crm-chart-svg { width: 100%; height: 230px; display: block; }
.f360crm-chart-svg-mini { height: 150px; }
.f360crm-area-ingreso { fill: rgba(7,160,55,.22); stroke: none; }
.f360crm-linea-ingreso { fill: none; stroke: var(--f360-green); stroke-width: 2.4; }
.f360crm-linea-gasto { fill: none; stroke: var(--f360-red); stroke-width: 2; stroke-dasharray: 5 4; }
.f360crm-punto-ingreso { fill: var(--f360-green); }
.f360crm-punto-gasto { fill: var(--f360-red); }
.f360crm-guia { stroke: var(--f360-border); stroke-width: 1; }
.f360crm-eje-label { font-size: 10px; fill: var(--f360-text-muted); }
.f360crm-barra-valor { font-size: 11px; fill: #fff; font-weight: 600; }

.f360crm-chart-dona .f360crm-dona-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.f360crm-dona-total { font-size: 15px; fill: #fff; font-weight: 700; }
.f360crm-dona-total-sub { font-size: 9px; fill: var(--f360-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.f360crm-dona-leyenda { list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--f360-text); flex: 1; min-width: 130px; }
.f360crm-dona-leyenda li { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.f360crm-dona-leyenda .dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.f360crm-dona-leyenda b { margin-left: auto; color: #fff; }

/* --- Gestión de gastos --- */
.f360crm-form-gasto { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.f360crm-form-gasto input { flex: 1 1 130px; }
.f360crm-btn-borrar-gasto {
    background: rgba(255,107,107,.15); color: var(--f360-red); border: 1px solid rgba(255,107,107,.4);
    border-radius: 6px; padding: 2px 8px; cursor: pointer;
}

/* --- Panel público (mobile-first) --- */
.f360crm-panel {
    width: 100vw;
    max-width: none;
    min-height: 100vh;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    margin-bottom: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--f360-bg);
    color: var(--f360-text);
    padding: 24px clamp(14px, 3vw, 40px) 40px;
    border-radius: 0;
    overflow-x: hidden;
}
.f360crm-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.f360crm-panel-head h2 { margin: 0; font-size: 18px; color: #fff; }
.f360crm-seccion-titulo { color: var(--f360-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin: 22px 0 8px; }
.f360crm-panel .f360crm-cards { gap: 10px; }
.f360crm-panel .f360crm-card { padding: 12px; min-width: 100px; border-radius: 14px; }
.f360crm-tabla-mobile { width: 100%; border-collapse: collapse; margin-top: 10px; }
.f360crm-tabla-mobile tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--f360-border); }
.f360crm-tabla-mobile tr.f360crm-fila-urgente { background: rgba(255,107,107,.07); border-radius: 10px; padding: 12px 8px; }

.f360crm-buscar {
    width: 100%; box-sizing: border-box; padding: 10px 12px; margin: 6px 0 14px;
    border-radius: 10px; border: 1px solid var(--f360-border); font-size: 15px;
    background: var(--f360-bg-soft); color: var(--f360-text);
}
.f360crm-buscar::placeholder { color: var(--f360-text-muted); }
.f360crm-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.f360crm-btn {
    display: inline-block; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600;
    background: var(--f360-green); color: #fff; text-decoration: none;
}
.f360crm-btn:hover { background: var(--f360-green-dark); color: #fff; }
.f360crm-btn.ghost { background: var(--f360-bg-soft); color: var(--f360-text); border: 1px solid var(--f360-border); }
.f360crm-btn.urgente { background: var(--f360-red); }
.f360crm-nofono { font-size: 11px; color: var(--f360-text-muted); align-self: center; }

.f360crm-login { max-width: 300px; margin: 60px auto; text-align: center; background: var(--f360-bg); color: var(--f360-text); padding: 24px 18px; border-radius: 16px; }
.f360crm-login h2 { color: #fff; }
.f360crm-login input[type=password] {
    display: block; width: 100%; margin: 14px 0; padding: 12px; font-size: 20px; box-sizing: border-box;
    text-align: center; letter-spacing: 6px; border-radius: 10px; border: 1px solid var(--f360-border);
    background: var(--f360-bg-soft); color: var(--f360-text);
}
.f360crm-login button {
    background: var(--f360-green); color: #fff; border: none; padding: 10px 24px; border-radius: 10px; font-size: 15px; cursor: pointer;
}
.f360crm-login button:hover { background: var(--f360-green-dark); }
.f360crm-error { color: var(--f360-red); font-weight: 600; }


/* ===== Mi Negocio 5.1.1 — pantalla completa PC + móvil ===== */
html.f360-mi-negocio-active,
body.f360-mi-negocio-active {
    margin: 0 !important;
    padding: 0 !important;
}
body.f360-mi-negocio-active #wpadminbar {
    z-index: 100000;
}
body.f360-mi-negocio-active .f360crm-panel {
    min-height: 100dvh;
}
.f360crm-panel .f360crm-panel-head,
.f360crm-panel > * {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}
.f360crm-panel > .f360crm-panel-head {
    padding-left: 0;
    padding-right: 0;
}
@media (max-width: 700px) {
    .f360crm-panel {
        width: 100vw;
        min-height: 100dvh;
        padding: 16px 12px 28px;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        border-radius: 0;
    }
    .f360crm-panel .f360crm-panel-head {
        position: sticky;
        top: 0;
        z-index: 20;
        margin-left: -12px;
        margin-right: -12px;
        padding: 12px;
        background: var(--f360-bg);
        border-bottom: 1px solid var(--f360-border);
    }
}


/* ===== Cobranza 5.2.0 ===== */
.f360crm-cobranza-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin:10px 0 24px}
.f360crm-cobro-card{background:var(--f360-bg-card);border:1px solid var(--f360-border);border-left:5px solid var(--f360-amber);border-radius:14px;padding:14px;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.f360crm-cobro-card.hoy{border-left-color:#ff9c4d}.f360crm-cobro-card.rojo{border-left-color:var(--f360-red)}
.f360crm-cobro-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.f360crm-cobro-top strong{display:block;color:#fff;font-size:14px}.f360crm-cobro-top small{display:block;color:var(--f360-text-muted);margin-top:3px}.f360crm-cobro-top>span{font-size:10px;font-weight:800;color:#fff;background:rgba(245,185,66,.18);padding:5px 7px;border-radius:999px;white-space:nowrap}.f360crm-cobro-card.hoy .f360crm-cobro-top>span{background:rgba(255,156,77,.2)}.f360crm-cobro-card.rojo .f360crm-cobro-top>span{background:rgba(255,107,107,.2)}
.f360crm-cobro-info{display:flex;justify-content:space-between;align-items:center;margin:13px 0;color:var(--f360-text-muted);font-size:12px}.f360crm-cobro-info b{color:#fff}.f360crm-cobro-info span{font-weight:800;color:#fff}.f360crm-cobro-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.f360crm-recordado{font-size:11px;color:#5FE08A;font-weight:700}.f360crm-btn.recordado{background:rgba(7,160,55,.16);color:#5FE08A;border:1px solid rgba(7,160,55,.35)}
.f360crm-cobranza-vacia{background:rgba(7,160,55,.09);border:1px solid rgba(7,160,55,.25);border-radius:12px;padding:13px;color:#8be5a7;font-size:13px;margin:10px 0 24px}
.f360crm-cobranza-etapa{display:flex;align-items:center;gap:7px;margin-top:8px}.f360crm-cobranza-etapa span{font-size:10px;font-weight:800;padding:4px 7px;border-radius:999px;background:rgba(245,185,66,.16);color:var(--f360-amber)}.f360crm-cobranza-etapa.urgente span{background:rgba(255,107,107,.16);color:var(--f360-red)}.f360crm-cobranza-etapa small{color:var(--f360-text-muted);font-size:10px}
@media(max-width:700px){.f360crm-cobranza-grid{grid-template-columns:1fr}.f360crm-cobro-card{padding:13px}.f360crm-cobro-actions .f360crm-btn{flex:1 1 auto;text-align:center}}


/* ===== v5.6.0 — Acceso con logo, panel de control de pagos / F29 / balances ===== */
.f360crm-access, .f360crm-panel, .f360crm-wrap {
    --f360-bg: #081C31; --f360-bg-soft: #0C2438; --f360-bg-card: #0F2C44; --f360-border: #17405C;
    --f360-text: #E9F2FA; --f360-text-muted: #9AB0C4; --f360-green: #07A037; --f360-green-dark: #05812C;
    --f360-red: #FF6B6B; --f360-amber: #F5B942; --f360-blue: #4DA3FF; --f360-purple: #A78BFA;
}
html.f360-mi-negocio-active, body.f360-mi-negocio-active { background: #081C31 !important; }

/* Acceso: centrado real, pantalla completa, sin heredar el estilo de panel */
.f360crm-access {
    box-sizing: border-box; display: flex; align-items: center; justify-content: center;
    min-height: 100vh; min-height: 100dvh; width: 100vw; max-width: none !important;
    margin: 0 calc(50% - 50vw) !important; padding: 24px 16px;
    background: radial-gradient(1200px 500px at 50% -10%, #12406a 0%, #081C31 60%);
    color: var(--f360-text); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.f360crm-access *, .f360crm-panel * { box-sizing: border-box; }
.f360crm-access-card {
    width: 100%; max-width: 360px; text-align: center; background: var(--f360-bg-card);
    border: 1px solid var(--f360-border); border-radius: 22px; padding: 30px 24px 22px;
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.f360crm-access-logo { display: flex; justify-content: center; margin-bottom: 16px; }
.f360crm-access-card h2 { margin: 0 0 4px; color: #fff; font-size: 24px; letter-spacing: -.4px; }
.f360crm-access-sub { margin: 0 0 20px; color: var(--f360-text-muted); font-size: 13px; }
.f360crm-access-label { display: block; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--f360-text-muted); margin-bottom: 6px; }
.f360crm-access-card input[type=password] {
    display: block; width: 100%; margin: 0 0 14px; padding: 14px 12px; font-size: 24px; text-align: center; letter-spacing: 8px;
    border-radius: 12px; border: 1px solid var(--f360-border); background: var(--f360-bg-soft); color: #fff; outline: none;
}
.f360crm-access-card input[type=password]:focus { border-color: var(--f360-green); box-shadow: 0 0 0 3px rgba(7,160,55,.25); }
.f360crm-access-card button {
    width: 100%; background: var(--f360-green); color: #fff; border: 0; padding: 13px 20px; border-radius: 12px;
    font-size: 15px; font-weight: 700; cursor: pointer;
}
.f360crm-access-card button:hover { background: var(--f360-green-dark); }
.f360crm-access-card .f360crm-error { margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; background: rgba(255,107,107,.12); font-size: 13px; }
.f360crm-access-foot { margin-top: 16px; font-size: 11.5px; color: var(--f360-text-muted); }

/* Logo */
.f360crm-logo-lockup { display: inline-flex; align-items: center; gap: 10px; }
.f360crm-logo-img { display: block; height: 44px; width: auto; max-width: 100%; object-fit: contain; }
.f360crm-logo-img.icon { height: 46px; width: 46px; }
.f360crm-brand { font-size: 24px; font-weight: 800; letter-spacing: -1.2px; color: #fff; }
.f360crm-brand span { color: #2fd27a; }
.f360crm-logo-chip { display: inline-flex; align-items: center; background: #fff; padding: 8px 14px; border-radius: 14px; }
.f360crm-logo-chip .f360crm-logo-img { height: 40px; max-width: 220px; }

/* Cabecera del panel */
.f360crm-panel .f360crm-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.f360crm-head-brand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.f360crm-head-brand .f360crm-logo-img { height: 38px; }
.f360crm-head-brand .f360crm-logo-img.icon { height: 38px; width: 38px; }
.f360crm-head-brand .f360crm-brand { font-size: 20px; }
.f360crm-head-title { color: var(--f360-text-muted); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding-left: 14px; border-left: 1px solid var(--f360-border); }
.f360crm-panel #periodo-sel { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--f360-border); background: var(--f360-bg-soft); color: var(--f360-text); font-size: 14px; }

/* Barras de avance */
.f360crm-progress-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0 0 26px; }
.f360crm-progress { background: var(--f360-bg-card); border: 1px solid var(--f360-border); border-radius: 14px; padding: 14px 16px; }
.f360crm-progress-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: var(--f360-text-muted); }
.f360crm-progress-top b { color: #fff; font-size: 18px; }
.f360crm-bar { height: 9px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; margin: 10px 0 8px; }
.f360crm-bar i { display: block; height: 100%; border-radius: 999px; background: var(--f360-green); transition: width .4s; }
.f360crm-bar i.azul { background: var(--f360-blue); } .f360crm-bar i.morado { background: var(--f360-purple); }
.f360crm-progress small { display: block; color: var(--f360-text-muted); font-size: 11.5px; line-height: 1.5; }
.f360crm-delta.sube { color: #5FE08A !important; } .f360crm-delta.baja { color: var(--f360-red) !important; } .f360crm-delta.igual { color: var(--f360-text-muted) !important; }

/* Filtros */
.f360crm-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; -webkit-overflow-scrolling: touch; }
.f360crm-chip { flex: 0 0 auto; border: 1px solid var(--f360-border); background: var(--f360-bg-soft); color: var(--f360-text); border-radius: 999px; padding: 7px 13px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.f360crm-chip b { margin-left: 4px; color: #fff; }
.f360crm-chip.on { background: var(--f360-green); border-color: var(--f360-green); color: #fff; }

/* Lista de clientes */
.f360crm-cli-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.f360crm-cli-monto { font-weight: 800; color: #fff; font-size: 14px; white-space: nowrap; }
.f360crm-cli-monto.sin { color: var(--f360-text-muted); font-weight: 600; font-size: 12px; }
.f360crm-badge.bal-listo { background: #6d4fd6; }
.f360crm-badge.bal-falta { background: transparent; border: 1px dashed #5b7389; color: var(--f360-text-muted); }

@media (max-width: 700px) {
    .f360crm-head-title { display: none; }
    .f360crm-card b { font-size: 21px; }
}