/* Solo layout propio. Colores y componentes los pone el tema fluent (Fomantic sin tocar); aquí solo variables --theme-* / --accent-*.
   Los estados (bien/mal/ojo) usan los mismos tonos que los mensajes positive/negative/warning del tema. */
/* Tamaño de letra: variable del tema (guía de los temas, §5). El tema trae 14px; un poco más grande para leer cifras. */
html:root { --font-size-base: 15px; }
:root {
  --ok-bg: light-dark(#f1faf1, #052505);   --ok-fg: light-dark(#0e700e, #6bc46b);   --ok-borde: light-dark(#9fd89f, #107c10);
  --mal-bg: light-dark(#fdf3f4, #3b0509);  --mal-fg: light-dark(#bc2f32, #ff8e93);  --mal-borde: light-dark(#eeacb2, #c50f1f);
  --ojo-bg: light-dark(#fff9f5, #411200);  --ojo-fg: light-dark(#bc4b09, #ffa66b);  --ojo-borde: light-dark(#fdcfb4, #d83b01);
}
.barra { position: sticky; top: 0; z-index: 5; margin: 0; border-radius: 0; }
.barra .titulo { color: var(--theme-text-muted); }
main { max-width: 1280px; margin: 0 auto; padding: 16px; }
h3.ui.header { margin-top: 28px; }
.seccion { color: var(--accent-1); text-transform: uppercase; font-size: 12px; letter-spacing: .05em; margin: 22px 0 8px; }
.kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 10px 0 16px; }
.kpis .kpi { margin: 0; }
.kpi .k, .kpi .n { font-size: 12px; color: var(--theme-text-muted); }
.kpi .v { font-size: 24px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi.bien { background: var(--ok-bg); border-color: var(--ok-borde); } .kpi.bien .v { color: var(--ok-fg); }
.kpi.mal { background: var(--mal-bg); border-color: var(--mal-borde); } .kpi.mal .v { color: var(--mal-fg); }
.kpi.ojo { background: var(--ojo-bg); border-color: var(--ojo-borde); } .kpi.ojo .v { color: var(--ojo-fg); }
.selector-mes { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.selector-mes b { font-size: 18px; min-width: 150px; text-align: center; }
.grafica { width: 100%; margin: 8px 0 16px; }
.desliza { overflow-x: auto; }
table.ui.table td.num, td.calc { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.num.mal, .neg { color: var(--mal-fg); } td.num.bien { color: var(--ok-fg); }
table.ui.table tr.total td { font-weight: 700; border-top: 2px solid var(--accent-1); }
table.ui.table tr.grupo td { color: var(--accent-1); font-weight: 700; background: var(--theme-fill); }
table.ui.table tr.actual td { background: color-mix(in srgb, var(--accent-1) 14%, transparent); }
.sem { padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.sem.bien { background: var(--ok-bg); color: var(--ok-fg); } .sem.mal { background: var(--mal-bg); color: var(--mal-fg); } .sem.ojo { background: var(--ojo-bg); color: var(--ojo-fg); }
.cero, .suave, .nota { color: var(--theme-text-muted); }
.nota { font-size: 13px; }
.tabla-editable input.pesos { text-align: right; width: 120px; min-width: 0; } .tabla-editable input.corto { width: 80px; }
.tabla-editable input:not(.pesos):not(.corto):not([type=date]) { min-width: 190px; }
.tabla-editable select { min-width: 120px; } .tabla-editable textarea { min-width: 220px; }
.tabla-editable tr.nueva td { opacity: .6; } .tabla-editable tr.nueva:focus-within td { opacity: 1; }
.tabla-editable tr.a-borrar td { text-decoration: line-through; opacity: .45; }
.tabla-editable .borrar input { display: none; } .tabla-editable .borrar { cursor: pointer; color: var(--theme-text-muted); }
.anio input.pesos { width: 96px; text-align: right; } .anio input.cambiado { border-color: var(--accent-1); color: var(--accent-1); }
form.modo, form.inline-saldo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
form.inline-saldo input { max-width: 220px; }
.subir .fila-subir { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filtros { display: flex; gap: 8px; margin: 8px 0; } .filtros input { max-width: 340px; }
table.diario tr.c-ajeno td, table.diario tr.c-bolsillo td, table.diario tr.c-transferencia td { color: var(--theme-text-muted); }
table.diario tr.c-ingreso-propio td.num { color: var(--ok-fg); }
.ui.form .inline.field > label { min-width: 260px; }
body.login { display: grid; place-items: center; min-height: 100vh; }
form.entrar { width: min(360px, 92vw); }
.modo-flotante { position: fixed; top: 12px; right: 12px; }
@media (max-width: 640px) { main { padding: 10px; } .kpi .v { font-size: 20px; } }

/* ---- Ayuda: infografía y manuales ---- */
.info, .manual { max-width: 980px; margin: 0 auto; }
.info .ciclo { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.tarjeta-i, .caja, .indice, .reglas li { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 10px; }
.tarjeta-i, .caja { padding: 12px 16px; margin: 8px 0; }
.tarjeta-i ol, .caja ol, .caja ul { margin: 6px 0 0; padding-left: 20px; } .tarjeta-i li, .caja li { margin: 4px 0; }
.caja h4 { margin: 12px 0 4px; color: var(--accent-1); } .caja h4:first-child { margin-top: 0; }
.caja.alerta { background: var(--ojo-bg); border-color: var(--ojo-borde); }
.caja.si { border-left: 4px solid var(--ok-borde); } .caja.no { border-left: 4px solid var(--ojo-borde); }
.dos { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.linea { list-style: none; margin: 8px 0 8px 8px; padding: 0; border-left: 3px solid var(--theme-border); }
.linea li { position: relative; padding: 4px 0 8px 18px; overflow-wrap: anywhere; }
.linea li::before { content: ""; position: absolute; left: -9px; top: 10px; width: 13px; height: 13px; border-radius: 50%; background: var(--theme-surface); border: 3px solid var(--accent-1); }
.linea li.in::before { border-color: var(--ok-fg); } .linea li.out::before { border-color: var(--ojo-fg); }
.linea .f { display: inline-block; min-width: 86px; color: var(--theme-text-muted); font-size: 14px; }
.reglas { counter-reset: r; list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 10px; }
.reglas li { padding: 10px 14px 10px 52px; position: relative; }
.reglas li::before { counter-increment: r; content: counter(r); position: absolute; left: 12px; top: 8px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-1); color: var(--accent-1-text, #fff); font-weight: 700; display: grid; place-items: center; }
.indice { padding: 10px 16px; margin: 8px 0 16px; }
.indice ol { margin: 6px 0 0; padding-left: 22px; columns: 2; } .indice li { margin: 2px 0; break-inside: avoid; }
.manual h3.ui.header { scroll-margin-top: 64px; }
.manual code { background: var(--theme-fill); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
table.manual-t td, table.manual-t th { vertical-align: top; }
table.manual-t td:first-child { min-width: 130px; }
@media (max-width: 640px) {
  .info .ciclo, .dos { grid-template-columns: 1fr; } .indice ol { columns: 1; }
  table.manual-t td:first-child { min-width: 110px; } table.manual-t { font-size: 13px; }
}
@media print {
  html[data-theme] { color-scheme: light !important; } /* imprimir siempre en claro */
  .barra, #lateral, .aviso, .imprimir, .selector-mes { display: none !important; }
  main { max-width: none; padding: 0; }
  .kpi, .tarjeta-i, .caja, .reglas li, .indice { break-inside: avoid; }
  .caja.alerta { border: 2px solid #000; }
  .grafica { filter: invert(1) hue-rotate(180deg); }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- Proyección ---- */
.selector-proy { margin-bottom: 8px; } .selector-proy .inline.fields { flex-wrap: wrap; }
.frase { font-size: 16px; margin: 0 0 8px; } .frase.bien { color: var(--ok-fg); } .frase.mal { color: var(--mal-fg); }
.acciones-proy { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.editor-proy input[type=month] { min-width: 150px; }
.nowrap { white-space: nowrap; }