/* ============================================================
   TALLER.CSS — re-piel Atlas de Taller Mecánico + Carrocería (pareja).
   SOLO CSS. Cada regla scopeada a #page-taller_mecanico y/o
   #page-taller_carroceria (gemelos de presentación). Tokens:
   atlas-tokens.css. Cargar como ÚLTIMA hoja.
   NO redefine las .sg-* globales (las usa el Informe y otras
   pantallas): solo las re-scopea bajo Taller (patrón del Informe).
   Helpers tm* y ambos JS NO se tocan. Sin Chart.js.
   ============================================================ */

/* ---- Barra de filtros canónica .fb-* (P11.1/P12). Las clases .fb-* viven en components.css; aquí SOLO
   el encuadre local: alinear el .fb-wrap con los KPIs (inset 24px), el desplegable compacto de empresa
   (trigger + popover, P12) y el estado activo del botón Multi (aria-pressed). NO toca la zona KPI ni las
   .sg-*. El popover cuelga de .fb-wrap (position:relative) para escapar del overflow-x:auto de .fb-bar. ---- */
#page-taller_mecanico .fb-wrap,
#page-taller_carroceria .fb-wrap { padding:0 24px; margin-bottom:20px; position:relative; }
/* Desplegable de empresa (P12): trigger compacto de 34px con la selección condensada */
#page-taller_mecanico .fb-emp__btn,
#page-taller_carroceria .fb-emp__btn { gap:8px; }
#page-taller_mecanico .fb-emp__btn[aria-expanded="true"],
#page-taller_carroceria .fb-emp__btn[aria-expanded="true"] { background:var(--accent-weak); border-color:var(--accent); color:var(--accent-strong); }
#page-taller_mecanico .fb-emp__lbl,
#page-taller_carroceria .fb-emp__lbl { font-weight:600; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* popover con las tarjetas + Multi; cuelga de .fb-wrap (fuera del clip de .fb-bar) */
#page-taller_mecanico .fb-emp__pop,
#page-taller_carroceria .fb-emp__pop { display:none; position:absolute; top:52px; left:24px; z-index:40; align-items:center; gap:8px; flex-wrap:wrap; max-width:calc(100% - 48px); padding:10px 12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-pop, var(--shadow-card)); }
#page-taller_mecanico .fb-emp__pop.is-open,
#page-taller_carroceria .fb-emp__pop.is-open { display:flex; }
#page-taller_mecanico .fb-ctrl[aria-pressed="true"],
#page-taller_carroceria .fb-ctrl[aria-pressed="true"] { background:var(--accent-weak); border-color:var(--accent); color:var(--accent-strong); }

/* ---- KPI cards (sg-kpi-*) ---- */
#page-taller_mecanico .sg-kpi-grid,
#page-taller_carroceria .sg-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--s-3); margin:var(--s-4) 0; }
#page-taller_mecanico .sg-kpi-card,
#page-taller_carroceria .sg-kpi-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; text-align:center; box-shadow:var(--shadow-card); }
#page-taller_mecanico .sg-kpi-label,
#page-taller_carroceria .sg-kpi-label { font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin-bottom:6px; }
#page-taller_mecanico .sg-kpi-value,
#page-taller_carroceria .sg-kpi-value { font-size:24px; font-weight:600; font-family:var(--font-num); font-variant-numeric:tabular-nums; color:var(--text); line-height:1.2; }
#page-taller_mecanico .sg-kpi-sub,
#page-taller_carroceria .sg-kpi-sub { font-size:11px; color:var(--text-3); margin-top:4px; }
#page-taller_mecanico .sg-kpi-pending,
#page-taller_carroceria .sg-kpi-pending { color:var(--text-3); font-size:13px; font-weight:500; }

/* ---- eficiencia / semáforo (solo bajo scope Taller; las globales sg-* quedan intactas) ---- */
#page-taller_mecanico .sg-verde,
#page-taller_carroceria .sg-verde { color:var(--pos); }
#page-taller_mecanico .sg-ambar,
#page-taller_carroceria .sg-ambar { color:var(--warn); }
#page-taller_mecanico .sg-rojo,
#page-taller_carroceria .sg-rojo { color:var(--neg); }

/* ---- tablas (data-table) ---- */
#page-taller_mecanico .data-table,
#page-taller_carroceria .data-table { width:100%; border-collapse:collapse; font-size:12.5px; }
#page-taller_mecanico .data-table thead th,
#page-taller_carroceria .data-table thead th { background:var(--thead-bg); color:var(--text-3); font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; text-align:left; padding:10px 14px; white-space:nowrap; border-bottom:1px solid var(--border-strong); }
#page-taller_mecanico .data-table thead th.num,
#page-taller_carroceria .data-table thead th.num { text-align:right; }
#page-taller_mecanico .data-table tbody td,
#page-taller_carroceria .data-table tbody td { padding:10px 14px; border-bottom:1px solid var(--row-border); color:var(--text-2); }
#page-taller_mecanico .data-table tbody td.num,
#page-taller_carroceria .data-table tbody td.num { text-align:right; font-family:var(--font-num); font-variant-numeric:tabular-nums; color:var(--text); white-space:nowrap; }
#page-taller_mecanico .data-table tbody tr:hover,
#page-taller_carroceria .data-table tbody tr:hover { background:var(--row-hover); }

/* ---- controles (form-select + botones) scopeados ---- */
#page-taller_mecanico .form-select,
#page-taller_carroceria .form-select { font-family:var(--font-sans); font-size:13px; color:var(--text); background:var(--surface) var(--select-arrow) no-repeat right 10px center; border:1px solid var(--border); border-radius:var(--radius-sm); padding:7px 28px 7px 10px; -webkit-appearance:none; appearance:none; cursor:pointer; }
#page-taller_mecanico .btn,
#page-taller_carroceria .btn { font-family:var(--font-sans); cursor:pointer; transition:all .13s; border-radius:var(--radius-sm); }
#page-taller_mecanico .btn-outline,
#page-taller_carroceria .btn-outline { border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-size:13px; font-weight:600; padding:7px 14px; }
#page-taller_mecanico .btn-outline:hover,
#page-taller_carroceria .btn-outline:hover { background:var(--hover); color:var(--text); border-color:var(--border-strong); }
#page-taller_mecanico .btn-primary,
#page-taller_carroceria .btn-primary { border:0; background:var(--accent); color:var(--accent-on); font-size:13px; font-weight:600; padding:8px 16px; }
#page-taller_mecanico .btn-primary:hover,
#page-taller_carroceria .btn-primary:hover { background:var(--accent-strong); }

/* ---- relayout F2: tarjetas-panel + layout 2 columnas (envuelven bloques ya existentes) ---- */
#page-taller_mecanico .tpanel,
#page-taller_carroceria .tpanel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:4px var(--s-5) var(--s-5); margin-bottom:var(--s-4); }
#page-taller_mecanico .tpanel__h,
#page-taller_carroceria .tpanel__h { font-size:14px; font-weight:700; color:var(--text); margin:var(--s-4) 0 var(--s-3); }
#page-taller_mecanico .tgrid2,
#page-taller_carroceria .tgrid2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); align-items:start; margin-bottom:var(--s-4); }
#page-taller_mecanico .tgrid2 .tpanel,
#page-taller_carroceria .tgrid2 .tpanel { margin-bottom:0; }
@media(max-width:760px){
  #page-taller_mecanico .tgrid2,
  #page-taller_carroceria .tgrid2 { grid-template-columns:1fr; }
}

/* ============================================================
   PORTE FORMA-MAQUETA Atlas — Taller Mecánico + Carrocería (piel viva, pareja).
   Componentes copiados del bundle atlas-bundle/css/taller.css
   (.tk-kpi / .gauge / .orpend / .panel), re-scopeados a
   #page-taller_mecanico y #page-taller_carroceria. Tokens = atlas-tokens.css (todos los que
   usa el mockup ya existen). #fff -> var(--accent-on). SIN barras de
   objetivo. NO toca sg-, tpanel ni tgrid2 del relayout cerrado.
   ============================================================ */

/* ---- KPI: la tira migró al canónico .kc-card--icon (components.css, P11.2). Las reglas
   .tk-kpis/.tk-kpi/.tk-kpi__*/.tk-kpi.is-ok|warn|bad quedaron muertas y se retiraron. ---- */
#page-taller_mecanico .tk-delta, #page-taller_carroceria .tk-delta { display:inline-flex; align-items:center; gap:3px; font-family:var(--font-num); font-weight:600; padding:2px 7px; border-radius:var(--radius-pill); font-size:11.5px; }
#page-taller_mecanico .tk-delta--pos, #page-taller_carroceria .tk-delta--pos { color:var(--pos); background:var(--pos-bg); }
#page-taller_mecanico .tk-delta--neg, #page-taller_carroceria .tk-delta--neg { color:var(--neg); background:var(--neg-bg); }
#page-taller_mecanico .tk-delta--neu, #page-taller_carroceria .tk-delta--neu { color:var(--text-2); background:var(--surface-2); }

/* ---- columnas + panel forma-maqueta ---- */
#page-taller_mecanico .tk-cols, #page-taller_carroceria .tk-cols { display:grid; gap:var(--s-5); margin-bottom:var(--s-5); }
#page-taller_mecanico .tk-cols--2, #page-taller_carroceria .tk-cols--2 { grid-template-columns:1fr 1fr; }
@media (max-width:1000px){ #page-taller_mecanico .tk-cols--2, #page-taller_carroceria .tk-cols--2 { grid-template-columns:1fr; } }
#page-taller_mecanico .panel, #page-taller_carroceria .panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; }
#page-taller_mecanico .panel__head, #page-taller_carroceria .panel__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--border); }
#page-taller_mecanico .panel__head h2, #page-taller_carroceria .panel__head h2 { font-size:14.5px; font-weight:700; letter-spacing:-.01em; }
#page-taller_mecanico .panel__head .sub, #page-taller_carroceria .panel__head .sub { font-size:11.5px; color:var(--text-3); font-family:var(--font-num); }
#page-taller_mecanico .panel__body, #page-taller_carroceria .panel__body { padding:var(--s-5); }

/* ---- medidor circular (donut conic-gradient + máscara, sin Chart.js) ---- */
#page-taller_mecanico .gauges, #page-taller_carroceria .gauges { display:flex; gap:var(--s-5); flex-wrap:wrap; justify-content:space-around; }
#page-taller_mecanico .gauge, #page-taller_carroceria .gauge { display:flex; flex-direction:column; align-items:center; gap:9px; flex:1; min-width:120px; }
#page-taller_mecanico .gauge__ring, #page-taller_carroceria .gauge__ring { position:relative; width:108px; height:108px; }
#page-taller_mecanico .gauge__dial, #page-taller_carroceria .gauge__dial { --p:0; --gc:var(--accent); position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(var(--gc) calc(var(--p)*3.6deg), var(--surface-2) 0);
  -webkit-mask: radial-gradient(circle at center, transparent 40px, #000 41px);
          mask: radial-gradient(circle at center, transparent 40px, #000 41px); }
#page-taller_mecanico .gauge__val, #page-taller_carroceria .gauge__val { position:absolute; inset:0; display:grid; place-content:center; text-align:center; font-family:var(--font-num); font-size:23px; font-weight:600; color:var(--text); z-index:1; line-height:1; }
#page-taller_mecanico .gauge__val small, #page-taller_carroceria .gauge__val small { font-size:12px; color:var(--text-3); }
#page-taller_mecanico .gauge__name, #page-taller_carroceria .gauge__name { font-size:12.5px; font-weight:600; color:var(--text-2); text-align:center; }
#page-taller_mecanico .gauge__meta, #page-taller_carroceria .gauge__meta { font-size:11px; color:var(--text-3); font-family:var(--font-num); text-align:center; }

/* ---- grupos de sección Chapa/Pintura del panel Venta de horas (solo carrocería) ---- */
#page-taller_carroceria .cseccion { padding:var(--s-4) 0; border-top:1px solid var(--border); }
#page-taller_carroceria .cseccion:first-child { padding-top:0; border-top:0; }
#page-taller_carroceria .cseccion--efic .gauges { justify-content:center; }
#page-taller_carroceria .cseccion__hdr { display:flex; align-items:baseline; gap:8px; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-2); margin-bottom:var(--s-3); }
#page-taller_carroceria .cseccion__n { font-size:11px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--text-3); font-family:var(--font-num); }

/* ---- control de OR pendientes (tiles) ---- */
#page-taller_mecanico .orpend, #page-taller_carroceria .orpend { display:flex; flex-direction:column; gap:var(--s-4); }
#page-taller_mecanico .orpend-tiles, #page-taller_carroceria .orpend-tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
#page-taller_mecanico .orpend-tile, #page-taller_carroceria .orpend-tile { border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; background:var(--surface); position:relative; }
#page-taller_mecanico .orpend-tile.is-alert, #page-taller_carroceria .orpend-tile.is-alert { border-left:3px solid var(--neg); }
#page-taller_mecanico .orpend-tile__lbl, #page-taller_carroceria .orpend-tile__lbl { font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); display:flex; align-items:center; gap:6px; }
#page-taller_mecanico .orpend-tile__val, #page-taller_carroceria .orpend-tile__val { font-family:var(--font-num); font-size:24px; font-weight:600; color:var(--text); line-height:1; margin-top:7px; }
#page-taller_mecanico .orpend-tile__val small, #page-taller_carroceria .orpend-tile__val small { font-size:13px; color:var(--text-3); font-weight:500; }
#page-taller_mecanico .orpend-tile__sub, #page-taller_carroceria .orpend-tile__sub { font-size:11px; color:var(--text-3); margin-top:4px; }
#page-taller_mecanico .orpend-tile__sub b, #page-taller_carroceria .orpend-tile__sub b { color:var(--neg); font-family:var(--font-num); }
/* Tile material: desglose PVP/Costo (apoyo, izquierda) + margen protagonista (grande, derecha, color por signo) */
#page-taller_mecanico .tk-matmargen, #page-taller_carroceria .tk-matmargen { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:7px; }
#page-taller_mecanico .tk-matmargen__desglose, #page-taller_carroceria .tk-matmargen__desglose { display:flex; flex-direction:column; gap:3px; min-width:0; }
#page-taller_mecanico .tk-matmargen__row, #page-taller_carroceria .tk-matmargen__row { display:flex; align-items:baseline; gap:6px; font-size:11px; color:var(--text-3); white-space:nowrap; }
#page-taller_mecanico .tk-matmargen__k, #page-taller_carroceria .tk-matmargen__k { text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
#page-taller_mecanico .tk-matmargen__v, #page-taller_carroceria .tk-matmargen__v { font-family:var(--font-num); color:var(--text-2); white-space:nowrap; }
#page-taller_mecanico .tk-matmargen__margen, #page-taller_carroceria .tk-matmargen__margen { font-family:var(--font-num); font-size:26px; font-weight:700; line-height:1; white-space:nowrap; }
#page-taller_mecanico .tk-margen--pos, #page-taller_carroceria .tk-margen--pos { color:var(--pos); }
#page-taller_mecanico .tk-margen--warn, #page-taller_carroceria .tk-margen--warn { color:var(--warn); }
#page-taller_mecanico .tk-margen--neg, #page-taller_carroceria .tk-margen--neg { color:var(--neg); }
#page-taller_mecanico .orpend-foot, #page-taller_carroceria .orpend-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:var(--s-3); border-top:1px solid var(--border); }
#page-taller_mecanico .orpend-foot__note, #page-taller_carroceria .orpend-foot__note { font-size:11.5px; color:var(--text-3); }
#page-taller_mecanico .btn-detalle, #page-taller_carroceria .btn-detalle { display:inline-flex; align-items:center; gap:7px; border:0; background:var(--accent); color:var(--accent-on); font-weight:600; font-size:12.5px; padding:9px 15px; border-radius:var(--radius-sm); transition:background .14s; }
#page-taller_mecanico .btn-detalle:hover, #page-taller_carroceria .btn-detalle:hover { background:var(--accent-strong); }
#page-taller_mecanico .btn-detalle:disabled, #page-taller_carroceria .btn-detalle:disabled { background:var(--surface-2); color:var(--text-3); cursor:not-allowed; }
@media (max-width:560px){ #page-taller_mecanico .orpend-tiles, #page-taller_carroceria .orpend-tiles { grid-template-columns:1fr; } }
#page-taller_mecanico .orpend-tile.is-pending, #page-taller_carroceria .orpend-tile.is-pending { border-style:dashed; background:var(--surface-2); }
#page-taller_mecanico .orpend-tabla, #page-taller_carroceria .orpend-tabla { margin-top:var(--s-4); }

/* ---- modal detalle de OR pendientes (sin PII) ---- */
#page-taller_mecanico .tm-modal__overlay, #page-taller_carroceria .tm-modal__overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; }
#page-taller_mecanico .tm-modal__box, #page-taller_carroceria .tm-modal__box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); width:min(900px,100%); max-height:86vh; display:flex; flex-direction:column; overflow:hidden; }
#page-taller_mecanico .tm-modal__head, #page-taller_carroceria .tm-modal__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--border); }
#page-taller_mecanico .tm-modal__head h3, #page-taller_carroceria .tm-modal__head h3 { margin:0; font-size:15px; font-weight:700; }
#page-taller_mecanico .tm-modal__actions, #page-taller_carroceria .tm-modal__actions { display:flex; align-items:center; gap:10px; }
#page-taller_mecanico .tm-modal__x, #page-taller_carroceria .tm-modal__x { border:0; background:transparent; color:var(--text-3); font-size:18px; cursor:pointer; line-height:1; padding:4px 8px; }
#page-taller_mecanico .tm-modal__x:hover, #page-taller_carroceria .tm-modal__x:hover { color:var(--text); }
#page-taller_mecanico .tm-modal__note, #page-taller_carroceria .tm-modal__note { padding:8px var(--s-5); font-size:11.5px; color:var(--text-3); border-bottom:1px solid var(--border); }
#page-taller_mecanico .tm-modal__body, #page-taller_carroceria .tm-modal__body { padding:0 var(--s-5) var(--s-5); overflow:auto; }
#page-taller_mecanico .tm-modal__body table, #page-taller_carroceria .tm-modal__body table { margin-top:var(--s-4); }