/* ============================================================
   THEME PART 09 — Pasada de UI/UX v3 (toda la app)
   ------------------------------------------------------------
   Va DESPUÉS de 08-skin-oscar y ANTES de mobile.css. Lleva la
   estética que ya tenía Contabilidad (la "de la app de Óscar") al
   resto de la app y arregla los tres males de siempre:

     1. Filas que crecen a lo alto porque las etiquetas y el texto
        se parten en varias líneas.
     2. Tarjetas de KPI descuadradas porque la etiqueta ocupa una
        línea en unas y dos o tres en otras.
     3. Cabeceras, botones y campos con medidas distintas en cada
        módulo.

   LO QUE NO SE TOCA (decisión del dueño):
     · Los colores de las etiquetas de la tabla (meta, objetivo,
       cliente, servicio…). Aquí solo se cambia la GEOMETRÍA de las
       píldoras (alto, radio, que no se partan), nunca su color.
     · Los gastos y las cifras negativas siguen en rojo.
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* Escala de espacio: una sola regla para todos los módulos */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;

  /* Margen de página (el aire que respira el contenido) */
  --page-x: 32px;
  --page-t: 26px;
  --page-b: 96px;

  /* Alto de fila de las tablas de datos.
     Una línea = --row-h. Dos líneas (nombre + dato secundario) = --row-h-2.
     Ninguna fila pasa de ahí: el contenido que sobra se recorta con "…". */
  --row-h: 48px;
  --row-h-2: 58px;
  --head-h: 38px;

  /* El foco deja de ser azul (chocaba con la tinta) */
  --ring: 0 0 0 3px rgba(10, 20, 28, .13);

  /* Tipografía de página */
  --fs-title: 26px;
  --fs-h2: 15px;
  --fs-body: 13px;
}

/* ============================================================
   2. RITMO DE PÁGINA — mismo margen y misma jerarquía en todas
   ============================================================ */
.cont-wrap,
.informes-wrap,
:is(#informesView, #crmInformesRoot) .informes-wrap,
.content .fac-root,
.eq-wrap,
.cli-root, .cli-wrap,
.crm-root, .ppt-root, .forms-root,
#clientesRoot > div, #proyectosRoot > div,
#presupuestosRoot > div, #personasRoot > div, #equipoTablaRoot > div {
  padding: var(--page-t) var(--page-x) var(--page-b);
}

/* Títulos de página: grandes, poco peso, muy pegados (como la maqueta) */
.page-title, .cont-title, .informes-title, .crm-title, .ppt-title,
.settings-title, .templates-title, .content .fac-title, .eq-title {
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.page-sub, .cont-sub, .informes-subtitle, .crm-subtitle, .ppt-subtitle,
.content .fac-subtitle, .eq-sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Cabecera de vista: título a la izquierda, acciones a la derecha, y que
   NUNCA se salga del ancho (era lo que desbordaba en Facturas, Empresa y
   Servicios: el bloque del título no tenía min-width:0). */
.content .fac-header,
.cont-head, .informes-head, .crm-header, .ppt-header, .page-head, .eq-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.content .fac-header { align-items: center; }
.content .fac-header > div,
.cont-head > div, .informes-head > div, .crm-header > div,
.ppt-header > div, .page-head > div, .eq-head > div {
  min-width: 0;
}
.content .fac-title, .content .fac-subtitle {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Baldosa del icono de cabecera: cuadrada, suave, del tamaño del título */
.content .fac-header-icon, .cont-head-icon, .informes-head-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--card-soft);
  color: var(--text-secondary);
  border: 1px solid var(--line-soft);
}
.content .fac-header-icon svg { width: 18px; height: 18px; }

/* ============================================================
   3. TARJETAS — mismo radio, mismo aire, 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, .crm-card, .tpl-card,
.forms-card, .member-card, .settings-section, .ppt-card {
  border-radius: var(--r-lg);
  box-shadow: none;
}
.cont-card, .inf-block, .fac-card, .settings-section, .chart-card {
  padding: var(--sp-5) 22px;
}

/* Título de tarjeta / sección + contador a la derecha */
.chart-title, .cont-card-title, .inf-block-title, .fac-card-title {
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text);
}

/* ============================================================
   4. TARJETAS DE CIFRA (KPI) — que las cifras queden a la MISMA
      altura aunque la etiqueta ocupe una línea o tres
   ------------------------------------------------------------
   El truco: la tarjeta es una columna flex, la etiqueta se recorta
   a dos líneas como mucho y reserva siempre ese alto, y la cifra se
   empuja abajo. Así una fila de tarjetas queda alineada.
   ============================================================ */
/* OJO: Contabilidad (.cont-stat / .cont-kpi) queda FUERA a propósito. Su
   maqueta la revisó y aprobó el dueño el 09-09; no se toca. */
.inf-mc, .kpi-card, .kpi-fcard, .clid-hcard, .summary-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.inf-mc-l, .kpi-card-label, .kpi-fcard-label, .clid-hcard-l, .summary-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  min-height: 2.7em;            /* dos líneas siempre reservadas: así todas
                                   las cifras de una fila quedan a la misma
                                   altura aunque unas etiquetas sean largas */
  word-break: normal;
  overflow-wrap: anywhere;
}
.kpi-card-head, .kpi-fcard-head { align-items: flex-start; gap: var(--sp-2); }

.inf-mc-v, .kpi-card-value, .kpi-fcard-value, .clid-hcard-v, .summary-stat-num {
  margin-top: auto;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1.1;
  word-break: normal;
}
.inf-mc-s, .clid-hcard-s, .kpi-card-sub {
  margin-top: 5px;
  line-height: 1.35;
}

/* Rejilla de KPIs: que se repartan solas y no queden huérfanas */
.inf-mini, .inf-mini-cards, .kpi-grid, .clid-hcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-3);
}

/* Cabecera de bloque: título + coletilla. En una sola línea si cabe, y la
   coletilla en gris al lado, nunca empujando el título. */
.inf-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.inf-block-t {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  min-width: 0;
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -.015em;
}

/* ============================================================
   5. TABLAS — EL ARREGLO GORDO
   ------------------------------------------------------------
   Regla: UNA FILA = UNA LÍNEA (o dos, en la columna del nombre).
   Nada de texto ni etiquetas partiéndose en cuatro renglones y
   disparando el alto de la fila. Lo que no cabe se recorta con "…"
   y la tabla se desliza en horizontal, como una hoja de cálculo.
   ============================================================ */

/* -- 5.0 Las tablas anchas se DESLIZAN, no se recortan.
   .fac-table-wrap llevaba overflow:hidden, así que en pantallas estrechas
   las últimas columnas quedaban cortadas y sin manera de llegar a ellas. -- */
.fac-table-wrap, .ppt-table-wrap, .eq-tbl-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* -- 5.1 Cabeceras -- */
.data-table th,
.cli-grupo table th,
.fac-table th, .fac-tbl th,
.ppt-table th,
.eq-tbl th {
  height: var(--head-h);
  padding-top: 0; padding-bottom: 0;
  white-space: nowrap;
  vertical-align: middle;
  background: var(--card-soft);
  border-bottom: 1px solid var(--line);
}
/* Excepción: las columnas de estado de Facturas llevan nombre + suma +
   recuento apilados a propósito. */
.fac-table thead th.fac-state-col { height: auto; padding: 9px 12px; }

/* -- 5.2 Celdas: una línea, recorte con "…" -- */
.data-table tbody td,
.cli-grupo table tbody td,
.fac-table tbody td, .fac-tbl tbody td,
.ppt-table tbody td,
.eq-tbl tbody td {
  height: var(--row-h);
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Solo Clientes lleva un dato secundario debajo del nombre (razón social y
   NIF): esa tabla usa la fila de dos líneas. Las demás, una. */
.cli-grupo table tbody td { height: var(--row-h-2); }

/* Los bloques apilados dentro de una celda (email + teléfono, razón
   social + NIF) se recortan cada uno en su línea */
.cli-grupo .cli-ct,
.cli-grupo .cli-nif,
.cli-grupo table td > div,
.fac-table td > div:not(.fac-table-actions):not(.cell-chips),
.ppt-table td > div:not(.ppt-actions):not(.cell-chips) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

/* Techo de ancho por columna: sin esto, una sola celda larga (el nombre
   fiscal, la nota de una factura) estira la columna y estrecha el resto. */
.cli-grupo table td, .cli-grupo table th { max-width: 260px; }
.fac-table td, .fac-table th,
.ppt-table td, .ppt-table th { max-width: 240px; }

/* Numéricas: siempre a la derecha, cifras tabulares, sin recorte */
.data-table td.num, .cli-grupo table td[style*="right"],
.fac-table td.num, .ppt-table td.num, .cont-tbl td.num,
.number-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Zebra no: separador finito y hover claro (como la referencia) */
.cli-grupo table tbody tr,
.fac-table tbody tr, .ppt-table tbody tr {
  transition: background .12s;
}
.cli-grupo table tbody tr:hover td,
.fac-table tbody tr:hover td,
.ppt-table tbody tr:hover td { background: var(--bg-subtle); }

/* -- 5.3 La celda del nombre en la Tabla: texto en UNA línea -- */
.cell-content { min-width: 0; overflow: hidden; }
.cell-txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* -- 5.4 La ventana de la lista de Clientes: filas enteras, nunca a medias.
   Antes eran 264px con filas de alto variable → se veía media fila cortada
   y encima salía una segunda barra de scroll. Ahora la ventana mide un
   número exacto de filas y la cabecera se queda pegada arriba. -- */
.cli-tabla-caja {
  max-height: calc(var(--head-h) + var(--row-h-2) * 6);
  overflow: auto;
  overscroll-behavior: contain;
}
.cli-tabla-caja table { min-width: 100%; }
.cli-grupo table thead th { position: sticky; top: 0; z-index: 3; }

/* -- 5.5 Contenedores de scroll horizontal: barra fina y discreta -- */
.cli-tabla-caja::-webkit-scrollbar,
.dt-scroll::-webkit-scrollbar,
.fac-table-wrap::-webkit-scrollbar,
.ppt-table-wrap::-webkit-scrollbar,
.cont-tbl-wrap::-webkit-scrollbar { width: 9px; height: 9px; }
.cli-tabla-caja::-webkit-scrollbar-thumb,
.dt-scroll::-webkit-scrollbar-thumb,
.fac-table-wrap::-webkit-scrollbar-thumb,
.ppt-table-wrap::-webkit-scrollbar-thumb,
.cont-tbl-wrap::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ============================================================
   6. ETIQUETAS Y PÍLDORAS — geometría (los COLORES no se tocan)
   ------------------------------------------------------------
   Nunca se parten, nunca bajan a una segunda línea dentro de la
   celda y todas miden lo mismo de alto.
   ============================================================ */
.pill, .ms-chip, .cli-sv, .chipres, .fac-estado, .ppt-estado, .tag-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.pill svg, .ms-chip svg { width: 11px; height: 11px; flex-shrink: 0; }

/* Fila de etiquetas dentro de una celda: UNA sola línea + contador "+N"
   (el "+N" lo pinta el JS; aquí se le da forma). */
.ms-chips, .cell-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}
.multi-select-cell { padding: 0 12px; min-height: 0; height: 100%; overflow: hidden; }
.chip-more {
  flex-shrink: 0;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--gray-soft);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  cursor: default;
}

/* Chip de persona: inicial redonda + nombre recortado */
.person-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px;
}
.person-ini {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-grid; place-items: center; flex-shrink: 0;
  background: var(--card-soft); border: 1px solid var(--line);
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--text-secondary);
}

/* ============================================================
   7. CONTROLES — una sola medida para toda la app
   ============================================================ */
.btn, .fac-btn, .cont-addbtn, .cont-period-btn, .cont-month,
.range-selector-btn, .edit-metrics-btn, .metrics-save-btn, .cli-btn, .ppt-btn {
  height: var(--h-ctl);
  padding: 0 15px;
  border-radius: var(--r-pill);
  font-size: var(--fs-ctl);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.btn.lg { height: 42px; padding: 0 20px; font-size: 14px; }
.btn.mini, .btn.sm { height: var(--h-ctl-sm); padding: 0 12px; font-size: 12px; }

/* Campos: mismo alto que los botones y foco de tinta */
.form-input, .form-select, .form-textarea,
.settings-field input, .settings-field select, .settings-field textarea,
.fac-input, .fac-select, .cli-input, .ppt-input {
  height: var(--h-ctl);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  font-size: var(--fs-ctl);
}
.form-textarea, .settings-field textarea { height: auto; }
.form-input:focus, .form-select:focus, .form-textarea:focus,
.fac-input:focus, .fac-select:focus, .cli-input:focus {
  outline: none;
  border-color: var(--text-secondary);
  box-shadow: var(--ring);
}

/* Grupo de botones segmentado (Anual · Mensual · Deudas, Resumen · Todas
   las columnas): pastilla dentro de una bandeja, como la referencia */
.tabla-toolbar-btns, .cont-period, .range-selector, .seg-group {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--card-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.tabla-modo-btn, .cont-period-btn, .range-selector-btn {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-muted);
}
.tabla-modo-btn.active, .cont-period-btn.active, .range-selector-btn.active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

/* ============================================================
   8. PESTAÑAS DE SUBVISTA
   ------------------------------------------------------------
   En escritorio: subrayado fino. En móvil son píldoras y la
   activa va en tinta — por eso aquí se deja el color de texto SIN
   anclar al id, que era lo que dejaba la pestaña activa negra sobre
   negro en el móvil.
   ============================================================ */
.subbar2 .tab, #subViewBar .tab {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
.subbar2 .tab.active, #subViewBar .tab.active {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--text);
}
/* El filtro "Ver como" no vive dentro de la tira de pestañas */
.subbar2-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.subbar2-right .sv-label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.subbar2-right select {
  height: 30px;
  max-width: 200px;
  border-radius: var(--r-pill);
  padding: 0 28px 0 12px;
  font-size: 12.5px;
}

/* ============================================================
   9. NAVEGACIÓN LATERAL — un punto más de contraste y de aire
   ============================================================ */
.nav-section-header {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.nav-item, .nav-dept, .dashboard-main { border-radius: var(--r-md); }
.view-item { border-radius: var(--r-sm); }
.sidebar-footer { padding: var(--sp-3) var(--sp-3); }

/* ============================================================
   10. ESTADOS VACÍOS — centrados y con su sitio
   ============================================================ */
.tabla-vacia, .crm-empty-state, .templates-empty, .planner-empty,
.gantt-empty, .fac-empty, .cli-empty, .ppt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 44px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* ============================================================
   11. DETALLES
   ============================================================ */
/* Barras de progreso: más gruesas y redondas (se veían como astillas) */
.progress-track, .kpi-bar { height: 7px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.progress-fill, .kpi-fill { border-radius: 999px; }

/* Separadores y bordes de tarjeta siempre del mismo tono */
hr, .divider { border: 0; border-top: 1px solid var(--line-soft); }

/* Iconos de acción de fila: visibles pero discretos */
.cli-grupo .cli-ico, .fac-ico, .ppt-ico { width: 30px; height: 30px; border-radius: var(--r-sm); }

/* Selección de texto con la tinta de marca */
::selection { background: rgba(60, 193, 160, .45); color: var(--text); }