/* ============================================================
   THEME PART 08 — Capa "Dos Llaves" (la estética de la app de Óscar)
   Va la ÚLTIMA de las hojas del tema, así que remata lo que los tokens
   no alcanzan: tipografía mono en las etiquetas, botones y pastillas
   redondas, pastilla de tinta en el menú activo, tarjetas radio 20 sin
   sombra y más aire. Solo estética: no cambia ninguna estructura.
   ============================================================ */

/* ---------- Tipografía ---------- */
body, input, select, textarea, button { font-family: var(--sans); }

/* Etiquetas en mayúsculas: mono, pequeñas y muy espaciadas (el detalle que
   más "ordena" la maqueta) */
.t-label,
.content thead th,
.cont-stat-lbl, .cont-kpi-label, .cont-tbl th, .cont-hm th,
.kpi-card-label, .kpi-fcard-label, .inf-mc-l, .inf-chain-l, .inf-kb-t,
.summary-label, .chart-title, .com-l, .metrics-field-label,
.fac-tbl th, .cli-grupo-head .cli-grupo-t {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
/* El título de grupo de Clientes se lee mejor sin mayúsculas */
.cli-grupo-head .cli-grupo-t { font-family: var(--sans); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: -.01em; }

/* Cifras siempre tabulares */
.t-big, .cont-stat-val, .cont-kpi-val, .kpi-card-value, .kpi-fcard-value,
.inf-mc-v, .inf-chain-v, .inf-kb-n, .summary-stat-num, .stat .s-v {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -.03em;
}

/* Títulos de página: más grandes y con menos peso, como en la maqueta */
.cont-title, .informes-title, .fac-title, .page-title {
  font-size: var(--fs-title); font-weight: 600; letter-spacing: -.025em;
}

/* ---------- Botones y pastillas: todo redondo ---------- */
.btn, .btn.mini, .btn.sm, .btn.lg,
.fac-btn, .cont-addbtn, .cont-period-btn, .cont-month,
.range-selector-btn, .edit-metrics-btn, .metrics-save-btn {
  border-radius: 999px;
}
.btn.btn-primary, .btn.primary { font-weight: 600; }
.btn:active { transform: none; }

/* ---------- Tarjetas: radio 20, borde fino, sin sombra ---------- */
.t-card, .cont-card, .cont-stat, .cont-kpi, .cont-deuda,
.inf-block, .kpi-card, .kpi-fcard, .summary-card, .chart-card,
.cli-grupo, .fac-card, .metrics-editor {
  border-radius: var(--r-lg);
  box-shadow: none;
}
.cont-stat:hover, .kpi-card:hover, .kpi-fcard:hover, .inf-block:hover { box-shadow: none; }

/* La tarjeta protagonista: tinta plana, sin degradado. Van ancladas al id
   porque las hojas 04/05 las pintan con selectores de id. */
:is(#contabilidadRoot, #informesView, #crmInformesRoot) :is(.cont-stat.dark, .cont-kpi.dark, .inf-total),
:is(#informesView, #crmInformesRoot) .kpi-fcard:nth-child(4) {
  background: var(--primary);
  background-image: none;
  border-color: var(--primary);
  box-shadow: none;
}
:is(#contabilidadRoot, #informesView, #crmInformesRoot) .cont-stat.dark:hover,
:is(#informesView, #crmInformesRoot) .kpi-fcard:nth-child(4):hover { box-shadow: none; }

/* ---------- Menú: pastilla de tinta en lo activo ---------- */
.view-item.active {
  background: var(--primary); color: #fff; font-weight: 600; border-radius: var(--r-sm);
}
.view-item.active .view-icon,
.view-item.active .view-item-lock { color: rgba(255, 255, 255, .82); }
.view-item.active::before { display: none; }
.nav-dept.active.solo { background: var(--primary); color: #fff; }
.nav-dept.active.solo .nav-ico { color: rgba(255, 255, 255, .82); }
.dashboard-main.active { background: var(--primary); color: #fff; }
.dashboard-main.active .dashboard-title,
.dashboard-main.active .dashboard-icon { color: #fff; }

/* Pestañas de subvista: subrayado fino, como la subbar de la maqueta */
.subview-bar .tab.active, #subViewBar .tab.active {
  color: var(--text); font-weight: 600; border-bottom-color: var(--text);
}

/* ---------- Aire ---------- */
.cont-wrap { padding: 28px 32px 90px; }
:is(#informesView, #crmInformesRoot) .informes-wrap { padding: 28px 32px 90px; max-width: none; }
.content .fac-root { padding: 28px 32px 90px; }
.cont-card, .inf-block { padding: 20px 22px; }
.content thead th { padding-top: 11px; padding-bottom: 11px; }

/* ---------- Detalles sueltos ---------- */
/* En Clientes la cabecera de grupo ya no se pliega: que no parezca pulsable */
.cli-grupo-head.fija { cursor: default; }
.cli-grupo-head.fija:hover { background: var(--card-soft); }
/* Ventana de ~5 filas de la lista de clientes */
.cli-tabla-caja { max-height: 264px; overflow: auto; overscroll-behavior: contain; }

/* ---------- Todo a lo ancho de la pantalla ----------
   Ninguna vista se queda centrada en una columna estrecha: el ancho lo pone
   la pantalla. Los formularios no se estiran, reparten en más columnas. */
.cont-wrap,
.informes-wrap,
:is(#informesView, #crmInformesRoot) .informes-wrap,
.content .fac-root,
.eq-wrap,
.cli-root, .cli-wrap,
#clientesRoot > div, #proyectosRoot > div,
#presupuestosRoot > div, #personasRoot > div, #equipoTablaRoot > div {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Mi empresa: el panel ocupa el ancho y los campos se reparten en rejilla */
.content .fac-empresa-panel { max-width: none; }
.content .fac-empresa-panel .fac-form-row,
.content .fac-empresa-panel .fac-form-row-3,
.content .fac-empresa-panel .fac-form-row-single {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
/* Los campos de una sola línea (dirección, notas) siguen a lo ancho */
.content .fac-empresa-panel .fac-form-row-single { grid-template-columns: 1fr; }

/* ---------- Contabilidad: los gastos, en rojo ----------
   Decisión del dueño (09-09): todas las cifras de gasto se leen en rojo, no
   solo las que salen negativas. Las tarjetas ya mandan `neg`; aquí van las
   celdas de las tablas y las franjas de gasto. */
#contabilidadRoot .cont-stat-val.neg,
#contabilidadRoot .cont-kpi-val.neg { color: var(--bad); }
#contabilidadRoot .cont-tbl tr.total td.num:last-of-type { color: var(--bad); }
#contabilidadRoot .cont-flowicon.out { background: var(--bad-soft); color: var(--bad); }
#contabilidadRoot .chipres.rojo { background: var(--bad-soft); color: var(--bad); }
#contabilidadRoot .cont-io-row .val.gasto { color: var(--bad); }