/* =====================================================================
   Cierre de turno / cierre de planilla (P-16). Estilos migrados VERBATIM de los <style> de
   Pages/Herramientas/CierreTurnoPage.razor, con todos los selectores acotados a ".cierre-diario"
   (en el original eran globales y pisaban .card / .bg-success / .bg-info del resto de la app).
   ===================================================================== */
    .cierre-diario {
        --cb: #1a4fba;
        --cbd: #0f3494;
        --cbl: #2d6ae0;
        --cbp: #e8eef9;
        --cbs: #f4f7fd;
        --txt: #1e3a5f;
        --txt2: #6b84ab;
        --brd: #dbe6fa;
        --wh: #ffffff;
        --r5: 5px;
        --r10: 10px;
        --r14: 12px;
    }

        /* ── KPIs ────────────────────────────────────── */
    .cierre-diario .kpi-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
    }

    .cierre-diario .kpi-card {
        position: relative;
        background: var(--wh);
        border: 1px solid var(--brd);
        border-radius: var(--r14);
        padding: 14px 16px 14px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        overflow: hidden;
        transition: transform .12s ease, box-shadow .12s ease;
    }

        .cierre-diario .kpi-card::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: var(--kpi-accent, var(--cb));
        }

        .cierre-diario .kpi-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(26,79,186,.12);
        }

    .cierre-diario .kpi-title {
        font-size: 10.5px;
        font-weight: 700;
        color: var(--txt2);
        letter-spacing: .4px;
        text-transform: uppercase;
        margin-bottom: 6px;
    }

    .cierre-diario .kpi-value {
        font-size: 16px;
        font-weight: 700;
        color: var(--txt);
        line-height: 1.35;
    }

    .cierre-diario .kpi-value small {
        display: block;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--txt2);
        margin-top: 1px;
    }

    .cierre-diario .kpi-icon-wrap {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        color: #ffffff;
        box-shadow: 0 3px 8px rgba(0,0,0,.14);
    }

    /* Colores sólidos y distinguibles por categoría (usa los mismos nombres que ya trae k.CssBg) */
    .cierre-diario .bg-success { background: linear-gradient(145deg, #34c281, #1f9c63); }
    .cierre-diario .bg-success ~ .kpi-card::before, .cierre-diario .kpi-card:has(.bg-success)::before { background: #1f9c63; }

    .cierre-diario .bg-danger { background: linear-gradient(145deg, #f0685f, #d63e3e); }
    .cierre-diario .kpi-card:has(.bg-danger)::before { background: #d63e3e; }

    .cierre-diario .bg-info { background: linear-gradient(145deg, #35b6cf, #1c8fa6); }
    .cierre-diario .kpi-card:has(.bg-info)::before { background: #1c8fa6; }

    .cierre-diario .bg-warning { background: linear-gradient(145deg, #ffb648, #e8940f); }
    .cierre-diario .kpi-card:has(.bg-warning)::before { background: #e8940f; }

    .cierre-diario .bg-dark, .cierre-diario .bg-primary { background: linear-gradient(145deg, var(--cbl), var(--cbd)); }
    .cierre-diario .kpi-card:has(.bg-dark)::before, .cierre-diario .kpi-card:has(.bg-primary)::before { background: var(--cb); }

    

    /* ── Cards genéricas ─────────────────────────── */
    .cierre-diario .card {
        border-radius: var(--r14);
        border: 1px solid var(--brd) !important;
    }

    .cierre-diario .card-header {
        border-top-left-radius: var(--r14);
        border-top-right-radius: var(--r14);
        font-weight: 700;
        font-size: 12px;
        color: var(--cb);
        background: var(--cbp) !important;
        border-bottom: 1px solid var(--brd) !important;
    }

    /* ── Mini gráficos CSS (barras) ──────────────── */
    .cierre-diario .barchart {
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

    .cierre-diario .barchart-row {
        display: grid;
        grid-template-columns: 90px 1fr 64px;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        color: var(--txt);
    }

    .cierre-diario .barchart-track {
        background: var(--cbp);
        border-radius: 6px;
        height: 9px;
        overflow: hidden;
    }

    .cierre-diario .barchart-fill {
        height: 100%;
        border-radius: 6px;
        background: linear-gradient(90deg, var(--cbl), var(--cb));
    }

        .cierre-diario .barchart-fill.alt {
            background: linear-gradient(90deg, #97b6ec, var(--cbl));
        }

    .cierre-diario .barchart-val {
        text-align: right;
        font-weight: 600;
        font-size: 10.5px;
        color: var(--txt2);
    }

    /* ── Donut (CSS puro, sin JS) ─────────────────── */
    .cierre-diario .donut-wrap {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
    }

    .cierre-diario .donut {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .cierre-diario .donut-legend {
        font-size: 10.5px;
        line-height: 2;
        color: var(--txt);
    }

    .cierre-diario .donut-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 2px;
        margin-right: 5px;
    }

    /* ── Tablas compactas responsivas (reemplazo de SfGrid) ── */
    .cierre-diario .rt-card {
        background: var(--wh);
        border: 1px solid var(--brd);
        border-radius: var(--r14);
        overflow: hidden;
    }

    .cierre-diario .rt-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 12px;
        border-bottom: 1px solid var(--brd);
        background: var(--cbp);
        flex-wrap: wrap;
    }

    .cierre-diario .rt-head-ttl {
        font-size: 11px;
        font-weight: 700;
        color: var(--cb);
    }

    .cierre-diario .rt-search-wrap {
        position: relative;
    }

    .cierre-diario .rt-search {
        border: 1px solid var(--brd);
        border-radius: var(--r5);
        padding: 4px 8px 4px 24px;
        font-size: 11px;
        width: 190px;
        outline: none;
        background: var(--wh);
        color: var(--txt);
    }

        .cierre-diario .rt-search:focus {
            border-color: var(--cbl);
        }

    .cierre-diario .rt-search-wrap i {
        position: absolute;
        left: 7px;
        top: 6px;
        font-size: 10px;
        color: var(--txt2);
    }

    .cierre-diario .rt-scroll {
        overflow-x: auto;
        max-height: 420px;
        overflow-y: auto;
    }

    .cierre-diario .rt-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 11px;
        min-width: 560px;
    }

        .cierre-diario .rt-table thead th {
            position: sticky;
            top: 0;
            background: #eef4fd;
            color: var(--cb);
            font-weight: 700;
            font-size: 10.5px;
            text-align: left;
            padding: 7px 8px;
            border-bottom: 1px solid var(--brd);
            white-space: nowrap;
            z-index: 1;
        }

        .cierre-diario .rt-table tbody td {
            padding: 6px 8px;
            border-bottom: 1px solid #eef2fb;
            color: var(--txt);
            vertical-align: middle;
        }

        .cierre-diario .rt-table tbody tr:nth-child(even) {
            background: #f8fafd;
        }

        .cierre-diario .rt-table tbody tr:hover {
            background: #eef4fd;
        }

    .cierre-diario .rt-badge {
        background: var(--cbp);
        color: var(--cb);
        border-radius: 8px;
        padding: 2px 8px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
    }

        .cierre-diario .rt-badge.ok {
            background: #e6f8ec;
            color: #1a7d3a;
        }

        .cierre-diario .rt-badge.bad {
            background: #fbe9ea;
            color: #b02a37;
        }

    .cierre-diario .rt-expand-btn {
        background: none;
        border: none;
        color: var(--txt2);
        cursor: pointer;
        font-size: 12px;
        padding: 2px;
    }

        .cierre-diario .rt-expand-btn:hover {
            color: var(--cb);
        }

    .cierre-diario .rt-detail-row td {
        background: #f8fafd;
        padding: 8px 10px 10px 30px !important;
    }

    .cierre-diario .rt-detail-table {
        width: 100%;
        font-size: 10.5px;
        border-collapse: collapse;
    }

        .cierre-diario .rt-detail-table th {
            text-align: left;
            color: var(--txt2);
            font-weight: 600;
            padding: 3px 6px;
        }

        .cierre-diario .rt-detail-table td {
            padding: 3px 6px;
            border-bottom: 1px dashed #e3ebf9;
        }

    .cierre-diario .rt-empty {
        text-align: center;
        color: var(--txt2);
        padding: 18px;
        font-size: 11px;
    }

    .cierre-diario .rt-count {
        font-size: 10px;
        color: var(--txt2);
        white-space: nowrap;
    }

    @media (max-width: 576px) {
        .cierre-diario .rt-search {
            width: 130px;
        }

        .cierre-diario .kpi-value {
            font-size: 13px;
        }
    }
    /* ── Botonera de acciones (header) ────────────── */
    .cierre-diario .hdr-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        justify-content: flex-end;
    }

    .cierre-diario .hbtn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 600;
        padding: 7px 12px;
        border-radius: var(--r5);
        border: 1px solid var(--brd);
        background: var(--wh);
        color: var(--txt);
        cursor: pointer;
        line-height: 1.2;
        white-space: nowrap;
        transition: background .12s ease, border-color .12s ease, transform .08s ease;
    }

        .cierre-diario .hbtn i { font-size: 12px; }

        .cierre-diario .hbtn:hover {
            background: var(--cbp);
            border-color: var(--cbl);
            color: var(--cb);
        }

        .cierre-diario .hbtn:active { transform: scale(.97); }

    .cierre-diario .hbtn-ghost {
        background: var(--wh);
        border-color: var(--brd);
        color: var(--txt2);
    }

    .cierre-diario .hbtn-primary {
        background: var(--cb);
        border-color: var(--cb);
        color: #ffffff;
    }

        .cierre-diario .hbtn-primary:hover {
            background: var(--cbd);
            border-color: var(--cbd);
            color: #ffffff;
        }

    .cierre-diario .hbtn-danger {
        background: #fbe9ea;
        border-color: #f3c3c5;
        color: #b02a37;
    }

        .cierre-diario .hbtn-danger:hover {
            background: #b02a37;
            border-color: #b02a37;
            color: #ffffff;
        }

    @media (max-width: 576px) {
        .cierre-diario .hdr-actions {
            justify-content: flex-start;
            width: 100%;
        }

        .cierre-diario .hbtn {
            flex: 1 1 auto;
            justify-content: center;
            font-size: 11px;
            padding: 7px 8px;
        }

        .cierre-diario .hbtn span.hbtn-text { display: none; }
    }

/* ── CloudERP: pestañas nativas (reemplazan SfTab) ── */
.cierre-diario .cd-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--brd); margin-bottom: 12px; flex-wrap: wrap; }
.cierre-diario .cd-tab { border: none; background: transparent; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--txt2); border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.cierre-diario .cd-tab.on { color: var(--cb); border-bottom-color: var(--cb); }

/* ── CloudERP: contenedor modal (reemplaza SfDialog "poptionsdialog") y overlay de progreso ── */
.cc-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); z-index: var(--z-modal); display: flex; align-items: flex-start; justify-content: center; padding: 16px; }
.cc-panel { background: #f4f7fd; width: min(1400px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 14px; box-shadow: 0 20px 60px rgba(15, 23, 42, .35); }
.cc-cargando { display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; height: 300px; color: #1a4fba; font-size: 14px; }
.cc-cargando i { font-size: 28px; }
.cc-progreso { position: fixed; inset: 0; z-index: var(--z-bloqueo); background: rgba(15, 23, 42, .75); display: flex; align-items: center; justify-content: center; padding: 16px; }
.cc-progreso-card { background: #fff; border-radius: 14px; padding: 24px; min-width: min(420px, 100%); max-width: 480px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.cc-progreso-card h5 { font-weight: 600; margin-bottom: 16px; white-space: pre-line; }
.cc-barra { height: 25px; background: #e8eef9; border-radius: 5px; overflow: hidden; }
.cc-barra > div { height: 100%; background: linear-gradient(90deg, #2d6ae0, #1a4fba); color: #fff; font-size: 12px; font-weight: 600; line-height: 25px; transition: width .4s ease; }
.cc-contador { margin-top: 14px; color: #6b84ab; font-size: 13px; }
.cc-contador b { color: #1a4fba; }
@media (max-width: 576px) { .cc-overlay { padding: 0; } .cc-panel { border-radius: 0; max-height: 100vh; } }