/* ============================================================
   COMISIONES_TALLER.CSS — Posventa › Comisiones de operarios (SP-TIEMPOS-TÉCNICO f2)

   TODO scopeado a #page-comisiones_taller: este módulo no puede alterar un píxel de otro.
   Tokens canónicos de /css/atlas-tokens.css; nada nuevo en :root. El único local es el radio, por
   coherencia con Control de tiempos, que es el módulo hermano del que se entra y se sale.
   ============================================================ */
#page-comisiones_taller { --cm-radius: 14px; }

/* ── cabecera ──────────────────────────────────────────────────────────────────────────────── */
#page-comisiones_taller .cm-top { background: var(--surface); border-bottom: 1px solid var(--border); }
#page-comisiones_taller .cm-top__row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-6) var(--s-2); }
#page-comisiones_taller .cm-top__t h1 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin: 0; }
#page-comisiones_taller .cm-top__crumb { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
#page-comisiones_taller .cm-top__sp { flex: 1; }
/* `position: relative` NO es decorativo: el desplegable de empresa es `position:absolute` y FB lo
   emite como HERMANO de la barra; sin contexto aquí se ancla al viewport (mismo caso que taller). */
#page-comisiones_taller .fb-wrap { position: relative; padding: 0 var(--s-6) var(--s-3); margin-bottom: 0; }

/* ── página ────────────────────────────────────────────────────────────────────────────────── */
#page-comisiones_taller .cm-page { box-sizing: border-box; padding: var(--s-5) var(--s-6) 80px; max-width: var(--page-max); width: 100%; }
#page-comisiones_taller .cm-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_taller .cm-sec:first-child { margin-top: 0; }
#page-comisiones_taller .cm-sec span { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11.5px; color: var(--text-3); }
#page-comisiones_taller .cm-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--cm-radius); box-shadow: var(--shadow-card); overflow: hidden; }
#page-comisiones_taller .cm-card__bd { padding: var(--s-4) var(--s-5); }
#page-comisiones_taller .cm-n, #page-comisiones_taller .cm-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "zero" 1; }
#page-comisiones_taller .cm-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
#page-comisiones_taller .cm-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }

/* ── notas y avisos ────────────────────────────────────────────────────────────────────────── */
#page-comisiones_taller .cm-nota { font-size: 11.5px; color: var(--text-2); margin: var(--s-3) 0 0; text-wrap: pretty; }
/* El aviso de ticaje NO es decorativo: esto acaba en una nómina y quien la firma tiene que verlo. */
#page-comisiones_taller .cm-alerta { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--cm-radius); background: var(--warn-bg); border: 1px solid #eddaad; color: #7a5406; font-size: 12.5px; text-wrap: pretty; }

/* ── KPIs ──────────────────────────────────────────────────────────────────────────────────── */
#page-comisiones_taller .cm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
#page-comisiones_taller .cm-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--cm-radius); box-shadow: var(--shadow-card); padding: var(--s-4) var(--s-4) var(--s-3); }
#page-comisiones_taller .cm-kpi--eur { border-color: #bfe6d5; background: linear-gradient(180deg, var(--pos-bg) 0%, var(--surface) 60%); }
#page-comisiones_taller .cm-kpi__l { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
#page-comisiones_taller .cm-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_taller .cm-kpi__v small { font-size: 13px; color: var(--text-3); margin-left: 3px; }
#page-comisiones_taller .cm-kpi__s { font-size: 11px; color: var(--text-3); margin-top: 4px; }

/* ── tabla ─────────────────────────────────────────────────────────────────────────────────── */
#page-comisiones_taller .cm-tw { overflow-x: auto; }
#page-comisiones_taller .cm-dt { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
#page-comisiones_taller .cm-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_taller .cm-dt th.r, #page-comisiones_taller .cm-dt td.r { text-align: right; }
#page-comisiones_taller .cm-dt td { padding: 11px var(--cell-px); border-bottom: 1px solid var(--row-border); vertical-align: top; }
#page-comisiones_taller .cm-dt tbody tr:hover { background: var(--row-hover); }
#page-comisiones_taller .cm-th { cursor: pointer; user-select: none; }
#page-comisiones_taller .cm-th:hover { color: var(--text-2); }
#page-comisiones_taller .cm-th.is-on { color: var(--accent-strong); }
#page-comisiones_taller .cm-dt tr[data-anom="1"] td { background: #fffaf0; }
#page-comisiones_taller .cm-dt .is-yo { background: var(--accent-weak); }
#page-comisiones_taller .cm-op { font-weight: 600; }
#page-comisiones_taller .cm-eur { font-weight: 600; color: var(--accent-strong); }
#page-comisiones_taller .cm-eur.is-cero { color: var(--text-3); font-weight: 400; }
#page-comisiones_taller .cm-total td { background: var(--row-total-bg); border-top: var(--row-total-border); font-weight: 600; }

/* ── etiquetas y botones ───────────────────────────────────────────────────────────────────── */
#page-comisiones_taller .cm-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_taller .cm-tag--neg { background: var(--neg-bg); color: var(--neg); border-color: #f3cdc2; }
#page-comisiones_taller .cm-tag--warn { background: var(--warn-bg); color: var(--warn); border-color: #eddaad; }
#page-comisiones_taller .cm-tag--est { background: var(--surface-2); color: var(--text-3); border-color: var(--border); font-weight: 600; }
#page-comisiones_taller .cm-linkbtn { background: none; border: 0; padding: 0; color: var(--accent-strong); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
#page-comisiones_taller .cm-linkbtn:hover { text-decoration: underline; }
#page-comisiones_taller .cm-btn { min-height: 36px; padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
#page-comisiones_taller .cm-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_taller .cm-hd { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-6); align-items: flex-start; }
#page-comisiones_taller .cm-fichanom { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
#page-comisiones_taller .cm-kv__l { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
#page-comisiones_taller .cm-kv__v { font-size: 17px; font-weight: 600; margin-top: 3px; }

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

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

/* ── El mes, abierto hasta la orden ─────────────────────────────────────────────────────────────
   La fila del mes de la ficha abre las órdenes que forman su eficiencia. El modal cuelga de
   `#page-comisiones_taller` (no de <body>): este fichero está scopeado a esa página. */
#page-comisiones_taller .cm-rowlink { cursor: pointer; }
#page-comisiones_taller .cm-rowlink__t { color: var(--accent-strong); font-weight: 600; }
#page-comisiones_taller .cm-rowlink:hover .cm-rowlink__t { text-decoration: underline; }

#page-comisiones_taller .cm-modal { display: none; }
#page-comisiones_taller .cm-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_taller .cm-modal__box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--cm-radius); box-shadow: var(--shadow-card); width: min(1080px, 100%); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
#page-comisiones_taller .cm-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_taller .cm-modal__hd h3 { margin: 0; font-size: 15px; font-weight: 700; text-transform: capitalize; }
#page-comisiones_taller .cm-modal__x { border: 0; background: transparent; color: var(--text-3); font-size: 18px; line-height: 1; padding: 4px 8px; cursor: pointer; }
#page-comisiones_taller .cm-modal__x:hover { color: var(--text); }
#page-comisiones_taller .cm-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_taller .cm-modal__kpis .cm-kv__l { display: flex; align-items: center; gap: 6px; }
#page-comisiones_taller .cm-modal__bd { overflow: auto; }
#page-comisiones_taller .cm-modal__bd .cm-legs { border-top: 1px solid var(--border); }
#page-comisiones_taller .cm-cargando { padding: var(--s-5); color: var(--text-3); font-size: 12.5px; }

/* Las órdenes que no computan siguen a la vista, atenuadas: esconderlas dejaría un total que no
   cuadra con la lista y nadie sabría por qué. */
#page-comisiones_taller .cm-dt--ord tbody tr.is-nocomputa td { opacity: .55; }
#page-comisiones_taller .cm-dt--ord th, #page-comisiones_taller .cm-dt--ord td { white-space: nowrap; }

@media (max-width: 760px) {
  #page-comisiones_taller .cm-modal__ov { align-items: flex-end; padding: 8px; }
  #page-comisiones_taller .cm-modal__box { width: 100%; max-height: 90vh; }
  #page-comisiones_taller .cm-modal__hd,
  #page-comisiones_taller .cm-modal__kpis { padding: 12px; }
}