/* Tablero madre · estilos de la app.
   La base es el kit de marca (marca/marca.css, bloque 8 "TABLERO": tokens, .ui-*, semáforo, tabla). Acá va solo lo
   que el kit deja a la app (reglas-interfaz.md §6 y §7): la app a pantalla completa, el modo oscuro automático,
   el celular (barra inferior de 4 lugares, tablas apiladas) y los estados (cargando, error, vacío, dato viejo,
   "Sin dato" distinto de "No aplica"). Sin estilos en línea: la política de seguridad no los permite. */

/* ---------- tema ---------- */
html { background: #FFFFFF; color-scheme: light dark; }
body { background: var(--bg, #FFFFFF); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; font-weight: 400; color: #16161D; }
.tablero { --bad-velo: #F6E8EB; --sd-borde: #B8B8C6; }
@media (prefers-color-scheme: dark) {
  html { background: #111116; }
  body { color: #F2F2F6; }
  .tablero {
    --bg:#111116;--panel:#1B1B22;--panel-2:#26262F;--fg:#F2F2F6;--fg2:#B0B0BF;--fg3:#8C8C9B;--marca:#8C97FF;--accion:#8C97FF;--accion-velo:#23264A;
    --ok:#4CC27E;--atencion:#E3A34A;--mal:#E07A8C;--tono:#5C5C6E;--velo:#23264A;--bad-velo:#2E1A1F;--sd-borde:#4A4A58;color-scheme:dark;
  }
}

/* ---------- la app ocupa toda la pantalla (la plantilla del kit mide 1440 fijo) ---------- */
.tablero.app, .tablero.entrada { width: auto; min-height: 100vh; min-height: 100dvh; }
.tablero.app { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
.tablero button, .tablero select, .tablero input { font: inherit; color: inherit; }
.tablero :focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; border-radius: 6px; }
.tablero h3 { font-size: 15px; font-weight: 650; margin: 0; color: var(--fg); }
.tablero p { margin: 0; }
.saltar { position: absolute; left: 8px; top: -60px; z-index: 20; background: var(--bg); color: var(--accion); padding: 12px 16px; border-radius: 8px; font-weight: 600; }
.saltar:focus { top: 8px; }

/* lateral */
.tablero.app .ui-lado { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: auto; }
.tablero .ui-nav button { all: unset; box-sizing: border-box; display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; font-size: 15px; color: var(--fg); cursor: pointer; }
.tablero .ui-nav button:hover { background: var(--panel-2); }
.tablero .ui-nav button[aria-current="page"] { background: var(--accion-velo); color: var(--accion); font-weight: 600; }
.tablero .ui-nav button:focus-visible { outline: 2px solid var(--accion); outline-offset: -2px; }
.lado-pie { margin-top: auto; padding: 24px 8px 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--fg2); }

/* barra superior: cliente a la izquierda, período a la derecha */
.tablero .ui-barra { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tablero .ui-clientes { min-width: 0; }
.tablero .ui-clientes button { all: unset; box-sizing: border-box; display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 8px; font-size: 14px; color: var(--fg2); white-space: nowrap; cursor: pointer; }
.tablero .ui-clientes button[aria-pressed="true"] { background: var(--bg); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.tablero .ui-clientes button:focus-visible { outline: 2px solid var(--accion); outline-offset: -2px; }
.barra-der { display: flex; align-items: center; gap: 12px; flex: none; }
.tablero .ui-periodo { display: flex; align-items: center; gap: 8px; }
.tablero select { min-height: 44px; padding: 0 32px 0 12px; border-radius: 8px; border: 0; background: var(--panel); color: var(--fg); font-size: 14px; font-weight: 600; cursor: pointer;
  appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg2) 50%), linear-gradient(135deg, var(--fg2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }

/* contenido */
.tablero .ui-contenido { padding: 24px 32px 96px; gap: 32px; }
.tablero .ui-contenido:focus { outline: none; }
.cab-pantalla { display: flex; flex-direction: column; gap: 8px; }
.tablero.app h1 { font-size: clamp(28px, 4.2vw, 46px); text-wrap: balance; overflow-wrap: anywhere; }
.tablero.app h1:focus { outline: none; }
.tablero .ui-pregunta, .tablero .ui-resp { margin-top: 0; }
.membrete-ui { font-size: 14px; color: var(--fg2); }
.membrete-ui .ft, .entrada-marca small, .tablero .ui-firma small { font-family: var(--f-etiqueta); }
.membrete-ui .ft { font-size: 1em; margin: 0 .1em; }
.tablero .ui-ejemplo { color: var(--fg); border: 1px dashed var(--accion); background: transparent; }
.aviso-falla { font-size: 14px; background: var(--bad-velo); border-radius: 8px; padding: 8px 16px; }
.tablero .ui-bloque { gap: 16px; }
.nota { font-size: 13px; color: var(--fg2); }
.tenue { color: var(--fg2); }
.sub { display: block; font-size: 13px; color: var(--fg2); font-weight: 400; font-family: var(--f-ui); white-space: normal; letter-spacing: 0; }
.cifra { font-family: var(--f-dato); font-weight: 500; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 1.3; padding: 2px 10px; border-radius: 99px; background: var(--panel-2); color: var(--fg); white-space: nowrap; font-weight: 500; }
.chip.viejo { background: transparent; border: 1px solid var(--atencion); }
.chip.demo { background: transparent; border: 1px dashed var(--accion); color: var(--fg); }

/* Sin dato (se mide pero no llegó) ≠ No aplica (no corresponde): se ven distintos y nunca como 0 */
.sd { font-family: var(--f-ui); font-weight: 600; color: var(--fg2); letter-spacing: 0; display: inline-flex; align-items: center; gap: 6px; }
.sd::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px dashed var(--fg2); flex: none; }
.na { font-family: var(--f-ui); font-weight: 400; color: var(--fg2); letter-spacing: 0; font-style: italic; }

/* Atención y objetivo */
.atencion.hay { background: var(--bad-velo); }
.atencion .cab { display: flex; align-items: center; gap: 8px; }
.tablero .ui-franja ul { list-style: disc; padding-left: 20px; }
.tablero .ui-franja p { font-size: 14px; }
.tablero .ui-objetivo .pq { background: var(--bg); border-radius: 8px; padding: 8px 12px; margin: -8px -12px; }
.tablero .ui-objetivo.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* lectura */
.lectura { border-left: 3px solid var(--tono); padding: 2px 0 2px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.lectura p { max-width: 72ch; }
.lectura > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lectura .meta { font-size: 13px; color: var(--fg2); }

/* semáforo: el color vive solo en el icono (máscara del icono del kit, así sigue al modo oscuro) */
.tablero .semaforo::before { background-image: none; background-color: var(--gris); -webkit-mask: url(marca/iconos/azul/chico/sin-revisar.svg) center / 100% 100% no-repeat; mask: url(marca/iconos/azul/chico/sin-revisar.svg) center / 100% 100% no-repeat; }
.tablero .semaforo.verde::before { background-color: var(--ok); -webkit-mask-image: url(marca/iconos/azul/chico/hecho.svg); mask-image: url(marca/iconos/azul/chico/hecho.svg); }
.tablero .semaforo.ambar::before { background-color: var(--atencion); -webkit-mask-image: url(marca/iconos/azul/chico/atencion.svg); mask-image: url(marca/iconos/azul/chico/atencion.svg); }
.tablero .semaforo.rojo::before { background-color: var(--mal); -webkit-mask-image: url(marca/iconos/azul/chico/urgente.svg); mask-image: url(marca/iconos/azul/chico/urgente.svg); }
.tablero .semaforo.gris::before { background-color: var(--fg2); }
.tablero .semaforo.salida::before { background-color: var(--fg2); -webkit-mask-image: url(marca/iconos/azul/chico/en-curso.svg); mask-image: url(marca/iconos/azul/chico/en-curso.svg); }
.tablero .semaforo.solo-icono { gap: 0; }
.tablero .semaforo.solo-icono::before { width: 20px; height: 20px; }
.tablero .var::before { background-image: none !important; background-color: var(--fg2); }
.tablero .var.sube::before { -webkit-mask: url(marca/iconos/azul/chico/sube.svg) center / 100% 100% no-repeat; mask: url(marca/iconos/azul/chico/sube.svg) center / 100% 100% no-repeat; }
.tablero .var.baja::before { -webkit-mask: url(marca/iconos/azul/chico/baja.svg) center / 100% 100% no-repeat; mask: url(marca/iconos/azul/chico/baja.svg) center / 100% 100% no-repeat; }
.indicadores { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.indicadores li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* KPI */
.tablero .ui-kpis { grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); }
.tablero .ui-kpis.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tablero .ui-kpi { padding: 16px 20px; }
.tablero .ui-kpi .v { font-size: 28px; overflow-wrap: anywhere; }
.tablero .ui-kpi.foco .v { font-size: 34px; }
.mon, .tablero .ui-kpi .v small.mon { font-family: var(--f-ui); font-size: max(13px, .5em); font-weight: 500; color: var(--fg2); letter-spacing: 0; margin-right: .3em; }
.tablero .ui-kpi.foco .l { color: var(--fg); font-weight: 600; }
.tablero .ui-kpi .v.sin { font-size: 17px; padding-top: 6px; }
.tablero .ui-kpi .var { white-space: normal; }
.kpi-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; position: relative; }
.ayuda { position: static; }
/* la ayuda: se ve un círculo de 24 px, pero el área tocable es de 44 × 44 */
.ayuda > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; margin: -12px -14px -8px 0; border-radius: 50%; }
.ayuda > summary > span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--fg2); background: var(--panel-2); }
.ayuda > summary::-webkit-details-marker { display: none; }
.ayuda[open] > summary > span { background: var(--accion); color: var(--bg); }
.ayuda > p { position: absolute; z-index: 3; left: -8px; right: -8px; top: calc(100% + 8px); background: var(--bg); color: var(--fg); border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0,0,0,.14); }

/* tablas */
.tabla-caja { overflow-x: auto; }
.tablero .tabla th { white-space: normal; text-align: left; vertical-align: bottom; min-width: 64px; }
.tablero .tabla th.num { text-align: right; }
.tablero .tabla td { height: auto; min-height: 48px; padding: 12px 16px; vertical-align: top; }
.tablero .tabla td.num { text-align: right; white-space: nowrap; }
.tablero .tabla td.num .sub { text-align: right; }
.tablero .tabla td.txt { white-space: normal; min-width: 220px; max-width: 420px; line-height: 1.4; }
.tablero .tabla td .cifra { font-size: 15px; }
.tablero .tabla tr.fila-ir { cursor: pointer; }
.tablero .tabla tr.fila-ir:hover td { background: var(--panel-2); }
.tablero .enlace { all: unset; cursor: pointer; color: var(--accion); font-weight: 600; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.tablero .enlace:hover { text-decoration: underline; }
.tablero .enlace.ver-mas { align-self: flex-start; min-height: 44px; }
.tablero td .enlace { color: var(--fg); }
.tablero a { color: var(--accion); font-weight: 600; }

/* tarjetas de servicio */
.ui-dos-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.servicios { display: flex; flex-direction: column; gap: 12px; }
.serv { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; border-radius: 12px; background: var(--panel); cursor: pointer; }
.serv:hover { background: var(--panel-2); }
.serv:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }
.serv-t { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; flex-wrap: wrap; }
.serv-t > span:first-child { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.serv-par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.serv-par > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.serv-par .l { font-size: 13px; color: var(--fg2); }
.serv-par b { font-family: var(--f-dato); font-weight: 500; font-size: 20px; }
.serv-par b .sd, .serv-par b .na { font-size: 15px; }
.serv-por { font-size: 14px; color: var(--fg2); }
.serv-r { font-size: 13px; color: var(--fg2); }

/* bitácora */
.bit { display: flex; flex-direction: column; gap: 8px; }
.bit article { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 16px 20px; border-radius: 12px; background: var(--panel); font-size: 14px; }
.bit-f { color: var(--fg2); font-size: 14px; }
.bit-q { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bit-q b { font-size: 15px; font-weight: 600; }
.filtros { display: flex; flex-wrap: wrap; gap: 16px; }
.filtros label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg2); }

/* detalle plegado */
.tablero details.detalle { padding: 0 24px; }
.tablero details.detalle > summary { color: var(--accion); list-style: none; gap: 8px; }
.tablero details.detalle > summary::-webkit-details-marker { display: none; }
.tablero details.detalle > summary::before { content: "+"; font-family: var(--f-dato); width: 16px; }
.tablero details.detalle[open] > summary::before { content: "−"; }
.detalle-cuerpo { display: flex; flex-direction: column; gap: 32px; padding: 8px 0 16px; }
.tablero details.detalle .ui-kpi { background: var(--bg); }

/* gráfico de barras: serie principal en azul (la semana en curso), las anteriores en gris */
.graf { display: flex; flex-direction: column; gap: 8px; width: fit-content; max-width: 100%; background: var(--panel); border-radius: 12px; padding: 16px 24px; }
details .graf { background: var(--bg); }
.graf.con-meta .graf-area, .graf.con-meta .graf-ejes { padding-right: 128px; }
.graf-area { position: relative; height: 200px; display: flex; align-items: flex-end; gap: 16px; padding-top: 24px; }
.graf-col { flex: 0 1 80px; width: 80px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; }
.graf-v { font-family: var(--f-dato); font-weight: 500; font-size: 13px; color: var(--fg); white-space: nowrap; }
.graf-barra { width: 100%; max-width: 56px; background: var(--tono); border-radius: 4px 4px 0 0; min-height: 2px; }
.graf-barra.actual { background: var(--accion); }
.graf-meta { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--ok); pointer-events: none; }
.graf-meta span { position: absolute; right: 0; bottom: 0; transform: translateY(50%); font-family: var(--f-dato); font-size: 13px; color: var(--fg2); background: var(--panel); padding: 0 4px; }
.graf-ejes { display: flex; gap: 16px; }
.graf-ejes span { flex: 0 1 80px; width: 80px; text-align: center; font-size: 13px; color: var(--fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details .graf-meta span { background: var(--bg); }

/* estados */
.vacio { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; border-radius: 12px; border: 1px dashed var(--sd-borde); color: var(--fg2); font-size: 14px; }
.vacio b { color: var(--fg); font-size: 15px; }
.vacio.error { border: 0; background: var(--bad-velo); color: var(--fg); }
.vacio.na-bloque { border-style: solid; }
.cargando { display: flex; flex-direction: column; gap: 16px; color: var(--fg2); font-size: 14px; }
.esq { height: 72px; border-radius: 12px; background: var(--panel); }
.esq.alta { height: 200px; }
.esq.fila { height: auto; background: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.esq.fila div { height: 104px; border-radius: 12px; background: var(--panel); }
@media (prefers-reduced-motion: no-preference) {
  .esq, .esq.fila div { animation: latido 1.4s ease-in-out infinite; }
  .ui-contenido > * { animation: entra .18s ease-out both; }
}
@keyframes latido { 50% { opacity: .55; } }
@keyframes entra { from { opacity: .4; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* botones */
.tablero .boton { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 10px; background: var(--accion); color: #FFFFFF; font-weight: 600; font-size: 15px; cursor: pointer; align-self: flex-start; }
@media (prefers-color-scheme: dark) { .tablero .boton { color: #111116; } }
.tablero .boton:disabled { opacity: .6; cursor: default; }
.tablero .boton.secundario { background: var(--panel); color: var(--fg); }
.boton:focus-visible { outline: 2px solid var(--accion); outline-offset: 3px; }

/* entrada */
.tablero.entrada { display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.entrada-caja { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; }
.tablero .entrada-marca { font-family: var(--f-titulo); font-weight: 800; text-transform: uppercase; letter-spacing: -.035em; line-height: .9; color: var(--marca); font-size: 34px; margin-bottom: 24px; }
.entrada-marca small { display: block; font-family: var(--f-etiqueta); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 15px; color: var(--fg2); margin-top: 10px; line-height: 1.2; }
.tablero.entrada h1 { font-family: var(--f-ui); text-transform: none; letter-spacing: 0; font-size: 22px; font-weight: 650; color: var(--fg); }
#form-entrada { display: flex; flex-direction: column; gap: 8px; }
#form-entrada label { font-size: 14px; color: var(--fg2); }
#form-entrada input { min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--sd-borde); background: var(--bg); font-size: 16px; }
#form-entrada input:focus-visible { outline: 2px solid var(--accion); outline-offset: 1px; border-color: transparent; }
#form-entrada .boton { margin-top: 8px; width: 100%; }
.estado-form { font-size: 14px; min-height: 20px; color: var(--fg); }
.estado-form.mal { color: var(--fg); background: var(--bad-velo); border-radius: 8px; padding: 8px 12px; }
.estado-form:empty { display: none; }

/* celular: barra inferior de 4 lugares */
.abajo, .menu-hoja, .menu-fondo { display: none; }
@media (max-width: 860px) {
  .tablero.app { grid-template-columns: minmax(0, 1fr); }
  .tablero.app .ui-lado { display: none; }
  .tablero .ui-barra { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px; }
  .barra-der { justify-content: space-between; }
  .tablero .ui-periodo { width: 100%; justify-content: space-between; font-size: 14px; }
  .tablero .ui-contenido { padding: 20px 16px calc(96px + env(safe-area-inset-bottom, 0px)); gap: 28px; }
  .ui-dos-col { grid-template-columns: minmax(0, 1fr); }
  .tablero .ui-objetivo, .tablero .ui-objetivo.tres { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tablero .ui-franja { padding: 16px; }
  .tablero details.detalle { padding: 0 16px; }
  .abajo { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; background: var(--bg); border-top: 1px solid var(--panel-2); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .abajo button { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: 56px; font-size: 13px; color: var(--fg2); cursor: pointer; text-align: center; }
  .abajo button[aria-current="page"], .abajo button[aria-expanded="true"] { color: var(--accion); font-weight: 600; }
  .abajo:has(button[aria-expanded="true"]) button[aria-current="page"]:not([aria-expanded="true"]) { color: var(--fg2); font-weight: 400; }
  .abajo button:focus-visible { outline: 2px solid var(--accion); outline-offset: -4px; }
  .menu-fondo { display: block; position: fixed; inset: 0; z-index: 6; background: rgba(0,0,0,.25); }
  .menu-hoja { display: flex; flex-direction: column; gap: 2px; position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); z-index: 7; background: var(--bg); padding: 8px 16px 12px; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,.12); }
  .menu-hoja button { all: unset; box-sizing: border-box; min-height: 48px; display: flex; align-items: center; padding: 0 12px; border-radius: 8px; font-size: 16px; cursor: pointer; }
  .menu-hoja button[aria-current="page"] { background: var(--accion-velo); color: var(--accion); font-weight: 600; }
  .menu-hoja button.salir { color: var(--fg2); font-size: 15px; }
  .menu-hoja button:focus-visible { outline: 2px solid var(--accion); outline-offset: -2px; }
  .tablero .ui-kpi .v { font-size: 24px; }
  .tablero .ui-kpi.foco .v { font-size: 30px; }
  .bit article { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 16px; }
  .esq.fila { grid-template-columns: repeat(2, 1fr); }
}
/* celular: una tabla de más de 3 columnas pasa a lista apilada (cada fila, una tarjeta con etiqueta y valor) */
@media (max-width: 640px) {
  .tablero .ui-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tablero .ui-kpi { padding: 14px 16px; }
  .tablero .ui-kpi.foco { grid-column: 1 / -1; }
  .apila { overflow: visible; }
  .apila table, .apila tbody { display: block; width: 100%; }
  .apila thead { display: none; }
  .apila tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; background: var(--panel); border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; }
  .tablero details .apila tr { background: var(--bg); }
  .tablero .apila td, .tablero .apila tbody tr:nth-child(odd) td { display: flex; flex-direction: column; gap: 2px; height: auto; padding: 0; background: none; text-align: left; white-space: normal; border-radius: 0; min-width: 0; max-width: none; }
  .tablero .apila td.num { text-align: left; }
  .tablero .apila td.num .sub { text-align: left; }
  .apila td::before { content: attr(data-l); font-size: 13px; color: var(--fg2); font-family: var(--f-ui); font-weight: 400; }
  .apila td.prim { grid-column: 1 / -1; font-weight: 600; }
  .apila td.prim::before { content: none; }
  .apila td.ancho, .apila td.txt { grid-column: 1 / -1; }
  .tablero .apila tr.fila-ir:hover td { background: none; }
  .graf-area, .graf-ejes { gap: 8px; }
  .graf-v { font-size: 13px; }
}

/* la ayuda no hereda el aspecto del detalle plegado del kit */
.tablero details.ayuda { background: none; padding: 0; border-radius: 0; }
.tablero details.ayuda[open] { padding: 0; }
.tablero .ayuda > summary { min-height: 44px; display: grid; padding: 0; }

/* Objetivo: franja en escritorio, línea plegable en celular */
.tablero details.obj-pleg { display: none; }
.tablero details.obj-pleg > summary { gap: 8px; min-width: 0; list-style: none; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.tablero details.obj-pleg > summary .cab { flex: none; }
.tablero details.obj-pleg > summary::-webkit-details-marker { display: none; }
.tablero details.obj-pleg > summary::after { content: "+"; font-family: var(--f-dato); margin-left: auto; color: var(--accion); }
.tablero details.obj-pleg[open] > summary::after { content: "−"; }
.obj-linea { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.tablero details.obj-pleg[open] .ui-objetivo { padding-bottom: 16px; }

/* lo que pone el cliente (tarjeta de Entrega), alerta de medición (Negocio), lo que está en rojo (Cartera) */
.serv-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--fg); }
.neg-estado { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.neg-estado > p:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.neg-estado ul, .en-rojo { list-style: disc; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.en-rojo { font-size: 14px; }

@media (max-width: 860px) {
  .tablero .ui-barra { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .tablero section.obj-ancho { display: none; }
  .tablero details.obj-pleg { display: block; padding: 0 16px; }
  .graf { padding: 16px; }
  .graf.con-meta .graf-area, .graf.con-meta .graf-ejes { padding-right: 112px; }
  .graf-col, .graf-ejes span { flex-basis: 64px; width: 64px; }
}