/* comisiones_asesores.css — COMISIONES › Asesores de servicio (SP-COMISION-ASESOR, 04/09/2026)

   TODO scopeado a #page-comisiones_asesores: este módulo no puede alterar un píxel de otro.
   Misma gramática visual que Comisiones de operarios (`comisiones_taller.css`): son las dos
   liquidaciones de la misma casa y tienen que leerse igual. Lo propio de aquí es la MATRIZ
   asesor × categoría, que necesita primera columna fija y scroll horizontal.               */

#page-comisiones_asesores { --ca-radius: 14px; }

/* ── cabecera ──────────────────────────────────────────────────────────────────────────────── */
#page-comisiones_asesores .ca-top { background: var(--surface); border-bottom: 1px solid var(--border); }
#page-comisiones_asesores .ca-top__row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-6) var(--s-2); }
#page-comisiones_asesores .ca-top__t h1 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin: 0; }
#page-comisiones_asesores .ca-top__crumb { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
#page-comisiones_asesores .ca-top__crumb a { color: var(--accent-strong); text-decoration: none; }
#page-comisiones_asesores .ca-top__sp { flex: 1; }
#page-comisiones_asesores .fb-wrap { position: relative; padding: 0 var(--s-6) var(--s-3); margin-bottom: 0; }

/* ── lienzo ────────────────────────────────────────────────────────────────────────────────── */
#page-comisiones_asesores .ca-page { box-sizing: border-box; padding: var(--s-5) var(--s-6) 80px; max-width: var(--page-max); width: 100%; }
#page-comisiones_asesores .ca-sec { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin: var(--s-5) 0 var(--s-2) 2px; display: flex; align-items: baseline; gap: 9px; }
#page-comisiones_asesores .ca-sec:first-child { margin-top: 0; }
#page-comisiones_asesores .ca-sec span { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11.5px; color: var(--text-3); }
#page-comisiones_asesores .ca-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--ca-radius); box-shadow: var(--shadow-card); overflow: hidden; }
#page-comisiones_asesores .ca-card__bd { padding: var(--s-4) var(--s-5); }
#page-comisiones_asesores .ca-n { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "zero" 1; }
#page-comisiones_asesores .ca-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
#page-comisiones_asesores .ca-nota { font-size: 11.5px; color: var(--text-2); margin: var(--s-3) 0 0; text-wrap: pretty; }
#page-comisiones_asesores .ca-alerta { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--ca-radius); background: var(--warn-bg); border: 1px solid #eddaad; color: #7a5406; font-size: 12.5px; text-wrap: pretty; }

/* ── KPIs ──────────────────────────────────────────────────────────────────────────────────── */
#page-comisiones_asesores .ca-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
#page-comisiones_asesores .ca-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--ca-radius); box-shadow: var(--shadow-card); padding: var(--s-4) var(--s-4) var(--s-3); }
#page-comisiones_asesores .ca-kpi--eur { border-color: #bfe6d5; background: linear-gradient(180deg, var(--pos-bg) 0%, var(--surface) 60%); }
#page-comisiones_asesores .ca-kpi__l { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
#page-comisiones_asesores .ca-kpi__v { font-family: var(--font-num); font-size: var(--kpi-val-fs); font-weight: var(--kpi-val-fw); letter-spacing: -.02em; margin-top: 6px; }
#page-comisiones_asesores .ca-kpi__v small { font-size: 13px; color: var(--text-3); margin-left: 3px; }
#page-comisiones_asesores .ca-kpi__s { font-size: 11px; color: var(--text-3); margin-top: 4px; }

/* ── tablas ────────────────────────────────────────────────────────────────────────────────── */
#page-comisiones_asesores .ca-tw { overflow-x: auto; }
#page-comisiones_asesores .ca-dt { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
#page-comisiones_asesores .ca-dt th { position: sticky; top: 0; z-index: 1; background: var(--thead-bg); text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); padding: 10px var(--cell-px); border-bottom: 1px solid var(--border); white-space: nowrap; }
#page-comisiones_asesores .ca-dt th.r, #page-comisiones_asesores .ca-dt td.r { text-align: right; }
#page-comisiones_asesores .ca-dt td { padding: 11px var(--cell-px); border-bottom: 1px solid var(--row-border); vertical-align: top; }
#page-comisiones_asesores .ca-dt tbody tr:hover { background: var(--row-hover); }
#page-comisiones_asesores .ca-th { cursor: pointer; user-select: none; }
#page-comisiones_asesores .ca-th:hover { color: var(--text-2); }
#page-comisiones_asesores .ca-th.is-on { color: var(--accent-strong); }
#page-comisiones_asesores .ca-nom { font-weight: 600; }
#page-comisiones_asesores .ca-cod { font-size: 11px; color: var(--text-3); font-family: var(--font-num); }
#page-comisiones_asesores .ca-eur { font-weight: 600; color: var(--accent-strong); }
#page-comisiones_asesores .ca-eur.is-cero { color: var(--text-3); font-weight: 400; }
#page-comisiones_asesores .ca-total td { background: var(--row-total-bg); border-top: var(--row-total-border); font-weight: 600; }
#page-comisiones_asesores .ca-pod { display: inline-block; width: 18px; text-align: center; }

/* MATRIZ asesor × categoría — el «Detalle CANTIDAD» del cuadro, con la primera columna fija: sin
   ella, al desplazarse a la derecha se pierde de vista de quién es la fila que se está leyendo. */
#page-comisiones_asesores .ca-mtx th:first-child,
#page-comisiones_asesores .ca-mtx td:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); box-shadow: 1px 0 0 var(--row-border); }
#page-comisiones_asesores .ca-mtx th:first-child { z-index: 3; background: var(--thead-bg); }
#page-comisiones_asesores .ca-mtx tbody tr:hover td:first-child { background: var(--row-hover); }
#page-comisiones_asesores .ca-mtx td { white-space: nowrap; }
#page-comisiones_asesores .ca-mtx .is-cero { color: var(--text-3); }

/* ── etiquetas y botones ───────────────────────────────────────────────────────────────────── */
#page-comisiones_asesores .ca-tag { display: inline-block; padding: 1px 7px; border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 700; border: 1px solid transparent; }
#page-comisiones_asesores .ca-tag--warn { background: var(--warn-bg); color: var(--warn); border-color: #eddaad; }
#page-comisiones_asesores .ca-tag--est { background: var(--surface-2); color: var(--text-3); border-color: var(--border); font-weight: 600; }
#page-comisiones_asesores .ca-linkbtn { background: none; border: 0; padding: 0; color: var(--accent-strong); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
#page-comisiones_asesores .ca-linkbtn:hover { text-decoration: underline; }
#page-comisiones_asesores .ca-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0 0 var(--s-3); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }

/* ── ficha ─────────────────────────────────────────────────────────────────────────────────── */
#page-comisiones_asesores .ca-hd { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-6); align-items: flex-start; }
#page-comisiones_asesores .ca-fichanom { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
#page-comisiones_asesores .ca-kv__l { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
#page-comisiones_asesores .ca-kv__v { font-size: 17px; font-weight: 600; margin-top: 3px; }

/* Barra de composición: de qué categorías sale el incentivo de un asesor. Es GEOMETRÍA —el ancho—,
   nunca una cifra: el número siempre viaja resuelto del servidor. */
#page-comisiones_asesores .ca-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-2); margin-top: 8px; }
#page-comisiones_asesores .ca-bar i { display: block; height: 100%; }
#page-comisiones_asesores .ca-leyc { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 11.5px; color: var(--text-2); }
#page-comisiones_asesores .ca-leyc b { font-weight: 600; }
#page-comisiones_asesores .ca-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* ── leyenda, vacíos y esqueletos ──────────────────────────────────────────────────────────── */
#page-comisiones_asesores .ca-legs { padding: var(--s-3) var(--s-5) var(--s-4); border-top: 1px solid var(--border); display: grid; gap: 6px; }
#page-comisiones_asesores .ca-leg { font-size: 11.5px; color: var(--text-3); text-wrap: pretty; }
#page-comisiones_asesores .ca-blank { text-align: center; padding: 48px 24px; }
#page-comisiones_asesores .ca-blank__t { font-size: 15px; font-weight: 700; margin-top: 8px; }
#page-comisiones_asesores .ca-blank__s { font-size: 12.5px; color: var(--text-3); margin-top: 4px; text-wrap: pretty; }
#page-comisiones_asesores .ca-sk { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: ca-sh 1.3s ease infinite; border-radius: 6px; height: 12px; }
#page-comisiones_asesores .ca-skrow { padding: 9px 0; }
@keyframes ca-sh { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (max-width: 1100px) {
  #page-comisiones_asesores .ca-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── BLOQUE 2 · bono semestral ───────────────────────────────────────────────────────────────
   Conmutador de bloque (Mensual / Semestral) y selector de semestre. Son dos periodos distintos
   —un mes y medio año— y por eso son dos pantallas: mezclarlos obligaría a explicar dos
   calendarios en una sola tabla. */
#page-comisiones_asesores .ca-seg { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px; }
#page-comisiones_asesores .ca-seg__b { min-height: 30px; padding: 5px 14px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
#page-comisiones_asesores .ca-seg__b.is-on { background: var(--surface); color: var(--accent-strong); box-shadow: var(--shadow-card); }

#page-comisiones_asesores .ca-sems { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--s-4); }
#page-comisiones_asesores .ca-sempill { min-height: 32px; padding: 6px 13px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
#page-comisiones_asesores .ca-sempill.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }

/* La tabla del semestre lleva dos filas de cabecera (concepto y, debajo, sus tres columnas): la
   sticky por defecto solo fija la primera y la segunda quedaba flotando sobre los datos. */
#page-comisiones_asesores .ca-dt thead tr:nth-child(2) th { top: 34px; }

/* La columna del BONO va fija a la derecha. Es la cifra por la que se abre esta pantalla y con seis
   columnas de bases y crecimientos quedaba fuera del viewport: había que desplazarse a ciegas hasta
   el final de la fila para leer el euro. La primera columna ya está fija a la izquierda, así que el
   asesor y su bono se leen siempre juntos y lo que se desplaza es el detalle de en medio. */
#page-comisiones_asesores .ca-mtx--sem th:last-child,
#page-comisiones_asesores .ca-mtx--sem td:last-child { position: sticky; right: 0; z-index: 2; background: var(--surface); box-shadow: -1px 0 0 var(--row-border); }
#page-comisiones_asesores .ca-mtx--sem thead th:last-child { z-index: 3; background: var(--thead-bg); }
#page-comisiones_asesores .ca-mtx--sem tbody tr:hover td:last-child { background: var(--row-hover); }
#page-comisiones_asesores .ca-mtx--sem .ca-total td:last-child { background: var(--row-total-bg); }

/* La barra de la vista semestral: los semestres a la izquierda y el selector de empresa a la
   derecha. No reutiliza la barra de filtros compartida porque aquí no hay periodo que elegir —el
   periodo es el semestre— y un selector de fechas muerto al lado invitaría a moverlo. */
#page-comisiones_asesores .ca-sembar { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }
#page-comisiones_asesores .ca-sembar .ca-sems { margin-bottom: 0; }
#page-comisiones_asesores .ca-sememp { position: relative; margin-left: auto; }

/* ── El mes, abierto ────────────────────────────────────────────────────────────────────────────
   La fila del mes de la ficha se abre en un modal con las categorías que han generado ese incentivo.
   El modal cuelga de `#page-comisiones_asesores` (no de <body>): todo este fichero está scopeado a
   la página y desde el body saldría sin estilo. */
#page-comisiones_asesores .ca-rowlink { cursor: pointer; }
#page-comisiones_asesores .ca-rowlink__t { color: var(--accent-strong); font-weight: 600; }
#page-comisiones_asesores .ca-rowlink:hover .ca-rowlink__t { text-decoration: underline; }

#page-comisiones_asesores .ca-modal { display: none; }
#page-comisiones_asesores .ca-modal__ov { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
#page-comisiones_asesores .ca-modal__box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--ca-radius); box-shadow: var(--shadow-card); width: min(860px, 100%); max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; }
#page-comisiones_asesores .ca-modal__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
#page-comisiones_asesores .ca-modal__hd h3 { margin: 0; font-size: 15px; font-weight: 700; text-transform: capitalize; }
#page-comisiones_asesores .ca-modal__x { border: 0; background: transparent; color: var(--text-3); font-size: 18px; line-height: 1; padding: 4px 8px; cursor: pointer; }
#page-comisiones_asesores .ca-modal__x:hover { color: var(--text); }
#page-comisiones_asesores .ca-modal__kpis { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-6); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
#page-comisiones_asesores .ca-modal__bd { overflow: auto; }
#page-comisiones_asesores .ca-modal__bd .ca-legs { border-top: 1px solid var(--border); }
#page-comisiones_asesores .ca-cargando { padding: var(--s-5); color: var(--text-3); font-size: 12.5px; }

/* Nivel 2 del modal: la barra de vuelta y las cifras de la categoría abierta, para que la lista de
   líneas nunca se lea sin el número que tiene que justificar. */
#page-comisiones_asesores .ca-nivel2 { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border); background: var(--surface-2); flex: none; }
#page-comisiones_asesores .ca-nivel2__k { display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
#page-comisiones_asesores .ca-nivel2__k b { font-family: var(--font-num); font-weight: 600; color: var(--text); }

/* La descripción es la única columna que puede crecer; el resto son códigos y no deben partirse. */
#page-comisiones_asesores .ca-dt--lin th, #page-comisiones_asesores .ca-dt--lin td { white-space: nowrap; }
#page-comisiones_asesores .ca-dt--lin th:nth-child(5), #page-comisiones_asesores .ca-dt--lin td:nth-child(5) { white-space: normal; min-width: 130px; }


@media (max-width: 700px) {
  #page-comisiones_asesores .ca-modal__ov { align-items: flex-end; padding: 8px; }
  #page-comisiones_asesores .ca-modal__box { width: 100%; max-height: 88vh; }
  #page-comisiones_asesores .ca-modal__hd,
  #page-comisiones_asesores .ca-modal__kpis { padding: 12px; }
}

/* ── Los dos conceptos del bono semestral, separados ────────────────────────────────────────────
   Las tablas del Bloque 2 llevan un grupo de columnas por concepto (MANO DE OBRA y RECAMBIOS). Sin
   marca, los dos tríos se leían como un solo bloque de seis columnas y no había forma de saber
   dónde acababa la facturación de obra y empezaba la de recambio.
   `ca-grp` = primera celda del grupo (la línea que lo abre). El tinte va SOLO en la cabecera: en el
   cuerpo taparía el hover de fila, que es la otra ayuda de lectura de una tabla ancha. */
#page-comisiones_asesores .ca-mtx--sem .ca-grp { border-left: 2px solid var(--border); }
#page-comisiones_asesores .ca-mtx--sem thead th.ca-grp--0 { background: color-mix(in srgb, var(--accent) 7%, var(--thead-bg)); }
#page-comisiones_asesores .ca-mtx--sem thead th.ca-grp--1 { background: color-mix(in srgb, var(--accent) 14%, var(--thead-bg)); }
#page-comisiones_asesores .ca-mtx--sem thead tr:first-child th.ca-grp { font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--text); }