/* Chequeo de salud de las finanzas */
.fin-check{margin-top:12px;display:grid;gap:8px}
.fin-check-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 13px;
  border:1px solid var(--border);border-radius:11px;background:var(--panel2);font-size:12px}
.fin-check-head b{font-size:13.5px}
.fin-check-head span{color:var(--mut);flex:1;min-width:120px}
.fin-check-head.is-ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--border))}
.fin-check-head.is-ok b{color:var(--ok)}
.fin-check-head.is-bad{border-color:color-mix(in srgb,#fb7185 55%,var(--border))}
.fin-check-head.is-bad b{color:#fb7185}
.fin-check-cargando{padding:12px 14px;border:1px dashed var(--border);border-radius:11px;
  color:var(--mut);font-size:12px}
.fin-check-bloque{border:1px solid var(--border);border-left:4px solid var(--border);
  border-radius:11px;background:var(--panel2);padding:10px 13px}
.fin-check-bloque.is-grave{border-left-color:#fb7185}
.fin-check-bloque.is-aviso{border-left-color:#fbbf24}
.fin-check-bloque.is-info{border-left-color:var(--border)}
.fin-check-bloque summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--txt);
  list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fin-check-bloque summary::-webkit-details-marker{display:none}
.fin-check-bloque summary b{margin-left:auto;padding:1px 9px;border-radius:999px;
  background:var(--panel);color:var(--mut);font-size:11px}
.fin-check-txt{margin-top:7px;color:var(--mut);font-size:11.5px;line-height:1.45}
.fin-check-bloque ul{margin:8px 0 0;padding-left:18px;font-size:11.5px;color:var(--txt);
  line-height:1.55;max-height:300px;overflow:auto}
.fin-check-bloque ul ul{max-height:none;margin-top:3px;color:var(--mut)}
.fin-check-mal{color:#fb7185;font-weight:700}
@media(max-width:720px){.fin-check-bloque ul{padding-left:15px;font-size:11px}}

.ops-shell{display:grid;gap:14px}
.ops-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.ops-toolbar input,.ops-toolbar select{min-width:150px}
.ops-toolbar .ops-grow{flex:1;min-width:220px}
.ops-inv-head{align-items:center}
.ops-inv-toolbar{justify-content:flex-end;flex:1}
.ops-inv-toolbar input{width:min(390px,38vw)}
.ops-inv-toolbar .hint{white-space:nowrap}
.ops-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:12px}
.ops-kpi small{display:block;margin-top:5px;color:var(--mut);font-size:9.5px;font-weight:600;letter-spacing:.2px;text-transform:none}
.ops-kpi{padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--panel2)}
.ops-kpi span{display:block;color:var(--mut);font-size:10px;text-transform:uppercase;letter-spacing:.45px}
.ops-kpi b{display:block;margin-top:7px;font-size:23px;color:var(--txt);overflow-wrap:anywhere}
.ops-kpi.in b{color:var(--ok)}
.ops-kpi.out b{color:#fb7185}
.ops-kpi.profit b{color:var(--cy)}
.ops-kpi.profit.is-loss b{color:#fb7185}
.ops-months{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.ops-month{padding:10px;border:1px solid var(--border);border-radius:11px;background:rgba(0,0,0,.025)}
.ops-month strong{display:block;color:var(--title-color);font-size:11px}
.ops-month span{display:block;margin-top:4px;color:var(--mut);font-size:10px}
.ops-month span.is-win{color:var(--ok);font-weight:800}
.ops-month span.is-loss{color:#fb7185;font-weight:800}
.ops-month-carry{padding-top:4px;border-top:1px dashed var(--border);font-style:italic;opacity:.85}
.ops-table-wrap{max-height:580px;overflow:auto;margin-top:10px;border:1px solid var(--border);border-radius:12px}
.ops-table-wrap.fin-table-wrap{max-height:720px}
.ops-table{width:100%;border-collapse:separate;border-spacing:0;font-size:11px}
.ops-table th{position:sticky;top:0;z-index:2;padding:9px 10px;background:var(--table-head);color:var(--mut);text-align:left;text-transform:uppercase;font-size:9px}
.fin-sort{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:800;text-transform:inherit;cursor:pointer;white-space:nowrap}
.fin-sort span{font-size:10px;opacity:.52}.fin-sort.is-active{color:var(--title-color)}.fin-sort.is-active span{color:var(--cy);opacity:1}
.ops-table td{padding:10px;border-top:1px solid var(--border);vertical-align:top;color:var(--txt)}
.ops-table tr:hover td{background:color-mix(in srgb,var(--cy) 4%,transparent)}
.ops-money{white-space:nowrap;font-weight:800}
.ops-money.in{color:var(--ok)}.ops-money.out{color:#fb7185}
.ops-source{display:block;color:var(--mut);font-size:9px;margin-top:3px}
.ops-carry-note{margin:4px 0 12px}
.ops-carry-row{background:color-mix(in srgb,var(--warn,#f59e0b) 7%,transparent)}
.ops-carry-badge{display:inline-block;color:#b66a08;font-size:10px;letter-spacing:.02em}
.ops-actions{display:flex;gap:5px}.ops-actions button{padding:5px 7px;font-size:10px}
.ops-modal{width:min(720px,94vw);max-height:92vh;overflow:auto}
.ops-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ops-grid .mrow{margin:0}.ops-grid input,.ops-grid select,.ops-grid textarea{width:100%}
.ops-span-2{grid-column:1/-1}
.ops-stock{display:inline-flex;min-width:30px;justify-content:center;padding:3px 7px;border-radius:999px;background:var(--panel2);font-weight:800}
.ops-stock.pending{color:var(--warn)}
.fin-client-picker{position:relative}
.fin-client-results{display:none;position:absolute;z-index:30;top:calc(100% + 5px);left:0;right:0;max-height:230px;overflow:auto;border:1px solid var(--border);border-radius:11px;background:var(--panel);box-shadow:0 14px 32px rgba(0,0,0,.22)}
.fin-client-results.show{display:block}
.fin-client-results button{display:block;width:100%;padding:9px 11px;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--txt);text-align:left;cursor:pointer}
.fin-client-results button:last-child{border-bottom:0}
.fin-client-results button:hover{background:color-mix(in srgb,var(--cy) 9%,var(--panel))}
.fin-client-results b,.fin-client-results small{display:block}
.fin-client-results small{margin-top:3px;color:var(--mut);font-size:10px}
.fin-client-empty{padding:11px;color:var(--mut);font-size:11px}
.fin-client-linked{margin-top:6px;padding:7px 9px;border:1px dashed var(--border);border-radius:9px;color:var(--mut);font-size:10.5px}
.fin-client-linked.is-linked{border-style:solid;border-color:color-mix(in srgb,var(--ok) 45%,var(--border));background:color-mix(in srgb,var(--ok) 7%,transparent);color:var(--ok);font-weight:700}
/* El cuadro verde ahora se pulsa para abrir la ficha del cliente. */
.fin-ir-ficha{width:100%;text-align:left;background:transparent;border:0;padding:0;margin:0;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.fin-ir-ficha:hover{text-decoration:underline;transform:none;box-shadow:none}
.fin-ir-ficha:focus-visible{outline:2px solid var(--ok);outline-offset:2px;border-radius:6px}
/* Extras del movimiento: propinas, envío y 4x1000 */
.ops-extras{margin-top:12px;padding:11px 12px;border:1px dashed var(--border);border-radius:12px;background:var(--panel2)}
.ops-extras-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:5px}
.ops-extras-head b{font-size:12px;color:var(--txt)}
/* Cada extra es una caja normal: adentro la rejilla de campos y, debajo,
   la casilla del 4x1000 como bloque suelto. Antes la casilla vivia dentro
   de la rejilla y en el celular caia en una columna sobrante a la derecha. */
.ops-extra-item{margin-top:8px;min-width:0}
.ops-extra-row{display:grid;grid-template-columns:minmax(135px,1fr) 102px auto 30px;gap:6px;align-items:center}
.ops-extra-row input{width:100%}
.ops-extra-title{min-width:0}
.ops-extra-value{min-width:0;text-align:right}
/* Selector Entra / Sale: se elige con un clic en vez de escribir el signo */
.ops-signo{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.ops-signo button{padding:7px 7px;border:0;background:var(--panel2);color:var(--mut);font-size:9.5px;font-weight:800;cursor:pointer;white-space:nowrap}
.ops-signo button.is-on{background:var(--ok);color:#04221a}
.ops-signo button.is-on.is-neg{background:#fb7185;color:#3b0a12}
.ops-extra-delete{width:30px!important;height:30px!important;padding:0!important;display:grid!important;place-items:center;font-size:10px!important}
/* Ya no necesita ocupar columnas: es un bloque. Ademas envuelve, asi el
   texto largo nunca puede empujar el ancho ni salirse de la pantalla. */
.ops-extra-4x{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;margin:4px 0 4px 2px;font-size:10.5px;line-height:1.35;color:var(--mut);cursor:pointer;min-width:0;overflow-wrap:anywhere}
.ops-extra-4x input{flex:0 0 auto;margin-top:1px}
/* Gastos habituales: escala de grises y marco mas oscuro que una fila normal. */
.ops-habitual-mode{margin:8px 0 0 28px;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--panel)}
.ops-habitual-mode>b{display:block;margin-bottom:7px;font-size:13px}
.ops-habitual-mode label{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:start;column-gap:8px;padding:7px 8px;border-radius:8px;cursor:pointer}
.ops-habitual-mode label:hover{background:color-mix(in srgb,var(--cy) 8%,transparent)}
.ops-habitual-mode label input[type=radio]{width:16px;height:16px;margin:2px 0 0;align-self:start}
.ops-habitual-mode label span{display:grid;grid-template-rows:auto auto;align-content:start;gap:2px;min-width:0}
.ops-habitual-mode label strong,.ops-habitual-mode label small{display:block;margin:0;line-height:1.35;text-align:left}
.ops-habitual-mode small{color:var(--mut);font-size:11px}
.ops-hab-row td{
  background:color-mix(in srgb,var(--txt) 7%,var(--panel));
  border-top-color:color-mix(in srgb,var(--txt) 23%,var(--border));
  border-bottom-color:color-mix(in srgb,var(--txt) 23%,var(--border));
}
.ops-hab-row td:first-child{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--txt) 48%,var(--border))}
.ops-hab-row td:nth-child(3),.ops-hab-row .ops-money{color:var(--txt);font-weight:800}
/* Resalta la fila que acabas de guardar, para que no quede duda */
@keyframes opsJustSaved {
  0%   { background: rgba(34,211,238,.35); }
  100% { background: transparent; }
}
.ops-just-saved > td {
  animation: opsJustSaved 2.6s ease-out;
  box-shadow: inset 0 0 0 9999px rgba(34,211,238,.06);
}

.ops-hab-badge{display:inline-block;padding:1px 7px;border:1px solid color-mix(in srgb,var(--txt) 25%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--txt) 12%,var(--panel2));color:var(--txt);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.3px}
.ops-4x.is-hab{border-style:dashed}
.ops-4x{display:flex;align-items:center;gap:7px;margin-top:10px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--panel);font-size:11.5px;color:var(--txt);cursor:pointer}
.ops-4x span{color:var(--mut);font-size:10.5px}
.ops-extras-total{margin-top:9px;padding-top:8px;border-top:1px solid var(--border);text-align:right;font-size:11.5px;color:var(--mut)}
.ops-extras-total b{font-size:15px;margin-left:6px}
/* Se apila desde 560 px y no desde 430: entre esas dos medidas caen los
   celulares grandes, y ahi las cuatro columnas juntas ya no cabian en el
   cuadro y lo obligaban a correrse de lado. */
@media(max-width:560px){.ops-extra-row{grid-template-columns:1fr 90px 30px}.ops-extra-title{grid-column:1/-1}.ops-signo{grid-column:1/2;grid-row:2}.ops-extra-value{grid-column:2/3;grid-row:2}.ops-extra-delete{grid-column:3/4;grid-row:2}.ops-signo{width:100%}.ops-signo button{flex:1}.ops-habitual-mode{margin-left:0}.ops-habitual-mode label{padding-inline:4px}}
@media(max-width:1100px){.ops-months{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.ops-kpis,.ops-grid,.ops-months{grid-template-columns:1fr}.ops-span-2{grid-column:auto}.ops-table{min-width:900px}.ops-kpi b{font-size:19px}.ops-inv-head,.ops-inv-toolbar{align-items:stretch}.ops-inv-toolbar{width:100%;justify-content:flex-start}.ops-inv-toolbar input{width:100%}.ops-inv-toolbar .hint{white-space:normal}}


/* ================= MODO OSCURO: botones legibles =================
   Varios botones no declaraban color ni fondo y quedaban blanco sobre
   blanco. Aquí se les fija fondo de panel y color de texto del tema. */
.ops-actions button,
.ops-toolbar button,
.crm-toolbar button,
.crm-table button,
.lead-head-actions button,
.lead-actions button,
.imp-resumen button,
#invAdd, #finAdd, #crmReload, #cliAgregar,
button.btn-mini {
  background: var(--panel2) !important;
  color: var(--txt) !important;
  border: 1px solid var(--border) !important;
}
.ops-actions button:hover,
.ops-toolbar button:hover,
.crm-toolbar button:hover,
.crm-table button:hover,
.lead-head-actions button:hover,
.lead-actions button:hover,
#invAdd:hover, #finAdd:hover, #crmReload:hover, #cliAgregar:hover,
button.btn-mini:hover {
  border-color: var(--cy) !important;
  color: var(--cy) !important;
}
/* Los de acción principal conservan su color */
.mbtns button.ok, button.ok {
  background: var(--cy) !important;
  color: #04222a !important;
  border: 0 !important;
}
.mbtns button.no, button.no {
  background: var(--panel2) !important;
  color: var(--txt) !important;
  border: 1px solid var(--border) !important;
}


/* Casillas del movimiento: el check pegado a su texto y todo en un renglon.
   Antes el check quedaba a un lado y el texto centrado al otro extremo. */
.ops-check {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 8px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); color: var(--txt);
  font-size: 12.5px; cursor: pointer; text-align: left;
}
.ops-check input[type=checkbox] { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; cursor: pointer; }
.ops-check b { flex: 0 0 auto; font-weight: 700; }
.ops-check span { color: var(--mut); font-size: 11px; }
.ops-check.is-hab { border-style: dashed; }
@media (max-width: 700px) { .ops-check { font-size: 12px; padding: 9px 10px; } }