/* ============================================================
   Control Kimo — sistema de diseño
   Marca KIMO: negro #171717 · amarillo #FFC300 · naranja #FF5C17
   Titulares League Spartan · cuerpo Lato · símbolo «>» = avance
   ============================================================ */

:root, :root[data-theme="light"] {
    --bg: #F6F6F3;
    --surface: #FFFFFF;
    --surface-2: #FAFAF7;
    --text: #171717;
    --muted: #6E6E68;
    --border: #E7E7E1;
    --accent: #8F6E00;
    --alert: #D64A12;
    --brand: #FFC300;
    --shadow: 0 1px 2px rgba(23,23,23,.04), 0 4px 16px rgba(23,23,23,.05);
    /* compatibilidad con estilos previos */
    --card-bg: var(--surface);
    --input-bg: #FFFFFF;
}
:root[data-theme="dark"] {
    --bg: #141414;
    --surface: #1D1D1C;
    --surface-2: #232322;
    --text: #F5F5F2;
    --muted: #9E9E97;
    --border: #2E2E2C;
    --accent: #FFC300;
    --alert: #FF5C17;
    --brand: #FFC300;
    --shadow: none;
    --card-bg: var(--surface);
    --input-bg: #262625;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 15.5px; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Lato', system-ui, sans-serif;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'League Spartan', sans-serif; font-weight: 300; letter-spacing: .01em; }
h1 strong, h2 strong { font-weight: 500; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Estructura: sidebar + contenido ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: 232px;
    flex-shrink: 0;
    background: #171717;           /* la barra siempre es negra: es la marca */
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    padding: 1.4rem 1rem 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.sidebar .logo {
    font-family: 'League Spartan', sans-serif;
    font-size: 1.25rem;
    color: #FFFFFF;
    padding: 0 .6rem;
    margin-bottom: 1.6rem;
    display: block;
}
.sidebar .logo .chev { color: #FFC300; font-weight: 500; margin-right: .35rem; }
.sidebar .logo strong { font-weight: 500; }
.sidebar .group {
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.38);
    padding: 1.1rem .6rem .4rem;
}
.sidebar a.nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: rgba(255,255,255,.72);
    padding: .5rem .6rem;
    border-radius: 8px;
    font-size: .95rem;
    text-decoration: none;
}
.sidebar a.nav-link:hover { color: #FFFFFF; background: rgba(255,255,255,.06); text-decoration: none; }
.sidebar a.nav-link.active {
    color: #FFC300;
    background: rgba(255,195,0,.10);
    font-weight: 700;
}
.sidebar a.nav-link .icon { width: 1.15rem; text-align: center; opacity: .9; }
.sidebar .foot {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.10);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.sidebar .foot button {
    background: none;
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.72);
    padding: .35rem .8rem;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: .85rem;
}
.sidebar .foot button:hover { color: #FFFFFF; border-color: rgba(255,255,255,.4); }

.content { flex: 1; min-width: 0; }
main { max-width: 1180px; margin: 0 auto; padding: 2.2rem 2.4rem 4rem; }

.page-title { font-size: 1.55rem; margin-bottom: .4rem; }
.page-sub { color: var(--muted); margin-bottom: 1.6rem; max-width: 70ch; }

/* barra móvil */
.mobile-bar { display: none; }
@media (max-width: 860px) {
    .app { flex-direction: column; }
    .sidebar { position: static; height: auto; width: 100%; padding-bottom: .6rem; }
    .sidebar nav { display: none; }
    .sidebar.open nav { display: block; }
    .sidebar .foot { display: none; }
    .sidebar.open .foot { display: flex; }
    .mobile-bar { display: flex; justify-content: space-between; align-items: center; }
    .mobile-bar button { background: none; border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 8px; padding: .3rem .7rem; font-size: 1rem; cursor: pointer; }
    main { padding: 1.4rem 1.1rem 3rem; }
}

/* ---------- Tarjetas / KPI ---------- */
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); margin-bottom: 1.6rem; }
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.15rem 1.25rem;
    box-shadow: var(--shadow);
}
.card .label { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; }
.card .value { font-family: 'League Spartan', sans-serif; font-size: 1.65rem; font-weight: 500; margin-top: .4rem; font-variant-numeric: tabular-nums; }
.card .value.neg { color: var(--alert); }
.card .value.pos { color: var(--accent); }
.card .sub { color: var(--muted); font-size: .84rem; margin-top: .35rem; line-height: 1.45; }

/* ---------- Secciones ---------- */
.section-title { margin: 2.2rem 0 1rem; font-size: 1.22rem; }
.section-title::before { content: '> '; color: var(--brand); font-weight: 500; }

/* ---------- Tablas ---------- */
.table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    margin-bottom: 1.4rem;
}
table { width: 100%; border-collapse: collapse; font-size: .91rem; }
th {
    text-align: left;
    color: var(--muted);
    font-weight: 700;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: .8rem .9rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    white-space: nowrap;
}
td { padding: .62rem .9rem; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:hover td { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
tfoot td { border-bottom: none; border-top: 2px solid var(--border); background: var(--surface-2); padding: .7rem .9rem; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount-pos { color: var(--accent); }
.amount-neg { color: var(--text); }

.tag.ok { border-color: #1A7F37; color: #1A7F37; }
.tag.warn { border-color: var(--alert); color: var(--alert); font-weight: 700; }
.tag.alert { background: var(--alert); border-color: var(--alert); color: #fff; font-weight: 700; }
.tag {
    display: inline-block;
    padding: .12rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    font-size: .74rem;
    white-space: nowrap;
}

/* ---------- Formularios ---------- */
label { font-size: .88rem; color: var(--muted); }
.input, select, input[type=email], input[type=password], textarea {
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: .55rem .8rem;
    border-radius: 9px;
    font-family: inherit;
    font-size: .93rem;
    width: 100%;
}
.input:focus, select:focus, input:focus, textarea:focus {
    outline: 2px solid rgba(255,195,0,.45);
    outline-offset: 0;
    border-color: var(--brand);
}
select { width: auto; min-width: 170px; }
.mono { font-family: ui-monospace, monospace; font-size: .84rem; }

.btn {
    background: var(--brand);
    color: #171717;
    border: none;
    padding: .58rem 1.35rem;
    border-radius: 9px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    font-size: .92rem;
}
.btn:hover { filter: brightness(1.06); }
.btn-ghost { background: none; border: 1px solid var(--border); color: var(--muted); font-weight: 400; }
.btn-ghost:hover { color: var(--text); border-color: var(--muted); filter: none; }
.btn-accent-ghost { background: none; border: 1px solid var(--accent); color: var(--accent); font-weight: 400; }
.btn-danger-ghost { background: none; border: 1px solid var(--alert); color: var(--alert); font-weight: 400; }

.filters { display: flex; gap: .7rem; margin-bottom: 1.1rem; flex-wrap: wrap; align-items: center; }
.filters .input { width: auto; min-width: 230px; }

/* ---------- Flash / errores ---------- */
.flash, .flash-error {
    border-radius: 12px;
    padding: .85rem 1.1rem;
    margin-bottom: 1.1rem;
    font-size: .92rem;
    border: 1px solid;
}
.flash { background: rgba(255,195,0,.08); border-color: rgba(255,195,0,.5); color: var(--accent); }
.flash-error { background: rgba(214,74,18,.07); border-color: var(--alert); color: var(--alert); }

/* ---------- Paginación ---------- */
.pagination { display: flex; gap: .5rem; margin-top: 1.1rem; align-items: center; }
.pagination a, .pagination span { padding: .32rem .75rem; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: var(--surface); font-size: .88rem; }
.pagination a:hover { color: var(--text); text-decoration: none; }

.muted { color: var(--muted); }

@media (max-width: 860px) {
    .sidebar .logo.desk-only { display: none; }
}
/* switch simple */
.switch { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .88rem; color: var(--muted); user-select: none; }
.switch input { accent-color: #FFC300; width: 1.05rem; height: 1.05rem; }

/* ---------- Mensual: resultado por banco con desglose ---------- */
.mensual-bancos table { font-size: .86rem; }
.mensual-bancos th.grp, .mensual-bancos td.grp { border-left: 1px solid var(--border); }
.mensual-bancos th.total, .mensual-bancos td.total { background: var(--surface-2); }
.mensual-bancos thead tr:first-child th { text-align: center; border-bottom: none; padding-bottom: .3rem; }
.mensual-bancos thead tr:first-child th.grp, .mensual-bancos thead tr:first-child th.total { font-size: .8rem; color: var(--text); }
.mensual-bancos .mes-row { cursor: pointer; }
.mensual-bancos .mes-row td { white-space: nowrap; }
.mensual-bancos .mes-row .chev-toggle { display: inline-block; color: var(--brand); font-weight: 700; transition: transform .15s; width: .9em; }
.mensual-bancos .mes-row.open .chev-toggle { transform: rotate(90deg); }
.mensual-bancos .mes-row.open td { background: var(--surface-2); }
.mensual-bancos .mes-detalle td { background: var(--surface-2); padding: .9rem 1rem 1.1rem; border-bottom: 2px solid var(--border); }
.mensual-bancos .mes-detalle:hover td { background: var(--surface-2); }
.detalle-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.detalle-banco { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .75rem .9rem; min-width: 0; }
.detalle-titulo { font-family: 'League Spartan', sans-serif; font-weight: 500; font-size: 1.02rem; margin-bottom: .4rem; }
.detalle-titulo::before { content: '> '; color: var(--brand); }
.detalle-sub { display: flex; justify-content: space-between; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin: .7rem 0 .3rem; }
.detalle-sub .num { color: var(--text); }
details.cat { border-top: 1px solid var(--border); }
details.cat summary { display: flex; justify-content: space-between; gap: .6rem; padding: .4rem 0; cursor: pointer; list-style: none; }
details.cat summary::-webkit-details-marker { display: none; }
details.cat summary > span:first-child::before { content: '▸ '; color: var(--muted); font-size: .8em; }
details.cat[open] summary > span:first-child::before { content: '▾ '; }
details.cat ul { list-style: none; margin: 0 0 .5rem .9rem; font-size: .82rem; }
details.cat li { display: flex; gap: .5rem; padding: .18rem 0; align-items: baseline; }
details.cat li a { color: var(--text); text-decoration: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.cat li a:hover { text-decoration: underline; }
details.cat li .num, details.cat summary .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Tarjetas clicables (dashboard → detalle de cuenta) ---------- */
a.card-link { display: block; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
a.card-link:hover { border-color: var(--brand); transform: translateY(-1px); }
a.card-link .go { color: var(--brand); font-weight: 700; float: right; }

/* Costo por hora */
.ch-table input.input, .ch-table select { width: 100%; min-width: 7rem; padding: .35rem .5rem; }
.ch-table input.sm, .ch-q input.sm { min-width: 4.5rem; width: 5.5rem; }
.ch-table input.num, .ch-q input.num { text-align: right; }
.ch-table td.actions { white-space: nowrap; }
.ch-table td.actions form { display: inline; }
.ch-table td.actions .btn { padding: .3rem .6rem; font-size: .8rem; }
.ch-table tr.ch-new td { background: rgba(255,195,0,.04); }
.ch-q { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin: .45rem 0; font-size: .9rem; }
.ch-q input { width: 8rem; }
.ch-r { display: flex; justify-content: space-between; gap: .8rem; padding: .3rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }