@import '_content/AuralizeBlazor/AuralizeBlazor.tf5u2o3oxg.bundle.scp.css';
@import '_content/Nextended.Blazor/Nextended.Blazor.tkxqvq0zjw.bundle.scp.css';

/* /Components/Patterns/Diagram/Diagram.razor.rz.scp.css */
.ax-diagram[b-zaoqf2kw28] {
  position: relative;
  width: 100%;
  background: var(--ax-surface, #fff);
  border-radius: 10px;
  overflow: hidden;
}

.ax-diagram-viewport[b-zaoqf2kw28] {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
}
.ax-diagram-viewport:active[b-zaoqf2kw28] { cursor: grabbing; }

.ax-diagram-viewport.has-grid[b-zaoqf2kw28] {
  background-image:
    linear-gradient(var(--ax-border, #e7eaf0) 1px, transparent 1px),
    linear-gradient(90deg, var(--ax-border, #e7eaf0) 1px, transparent 1px);
  background-size: 24px 24px;
}

.ax-diagram-svg-layer[b-zaoqf2kw28] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ax-diagram-svg[b-zaoqf2kw28] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ax-diagram-svg .ax-link-flow[b-zaoqf2kw28] { animation: axdash-b-zaoqf2kw28 1.2s linear infinite; }
.ax-diagram-svg .ax-link-active[b-zaoqf2kw28] { stroke: var(--ax-primary, #5b5ce6) !important; }

@keyframes axdash-b-zaoqf2kw28 {
  to { stroke-dashoffset: -18; }
}

.ax-diagram-world[b-zaoqf2kw28] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  will-change: transform;
}

.ax-node-slot[b-zaoqf2kw28] {
  position: absolute;
  cursor: grab;
  z-index: 1;
}
.ax-node-slot:has(.is-selected)[b-zaoqf2kw28],
.ax-node-slot:hover[b-zaoqf2kw28] { z-index: 2; }

/* Override: el slot es el que posiciona; el nodo interno ocupa el slot */
[b-zaoqf2kw28] .diagram-node {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* ── Zoom controls ── */
.ax-diagram-zoom[b-zaoqf2kw28] {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--ax-surface, #fff);
  border: 1px solid var(--ax-border, #e7eaf0);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .10);
  padding: 3px;
  z-index: 5;
}
.ax-zoom-btn[b-zaoqf2kw28] {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--ax-text-muted, #9aa4b5);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ax-zoom-btn:hover[b-zaoqf2kw28] { background: var(--ax-gray-100, #eef2f6); color: var(--ax-text, #172033); }
.ax-zoom-divider[b-zaoqf2kw28] { height: 1px; width: 100%; background: var(--ax-border, #e7eaf0); margin: 2px 0; }
.ax-zoom-level[b-zaoqf2kw28] {
  font-size: 9px;
  font-weight: 700;
  color: var(--ax-text-muted, #9aa4b5);
  padding: 3px 0;
  min-width: 28px;
  text-align: center;
}
/* /Components/Patterns/Diagram/DiagramNodeView.razor.rz.scp.css */
[b-fngcxer1h4] .ax-diagram-canvas { /* hook for parent layout */ }

:root[b-fngcxer1h4] {
  --dn-radius: 10px;
  --dn-shadow: 0 1px 3px rgba(15, 23, 42, .10), 0 1px 2px rgba(15, 23, 42, .06);
  --dn-shadow-hover: 0 8px 20px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .08);
}

.diagram-node[b-fngcxer1h4] {
  position: absolute;
  background: var(--ax-surface, #fff);
  border: 1px solid var(--ax-border, #e7eaf0);
  border-radius: var(--dn-radius);
  box-shadow: var(--dn-shadow);
  cursor: grab;
  user-select: none;
  transition: box-shadow 150ms ease, transform 150ms ease;
  font-family: var(--ax-font-family);
  color: var(--ax-text, #172033);
  z-index: 1;
}

.diagram-node:hover[b-fngcxer1h4] {
  box-shadow: var(--dn-shadow-hover);
  transform: translateY(-1px);
}

.diagram-node.is-selected[b-fngcxer1h4] {
  box-shadow: 0 0 0 2px var(--ax-primary, #5b5ce6), var(--dn-shadow-hover);
  z-index: 2;
}

.diagram-node.is-dragging[b-fngcxer1h4] {
  cursor: grabbing;
  box-shadow: var(--dn-shadow-hover);
  opacity: .95;
}

.node-inner[b-fngcxer1h4] { padding: 10px 12px; }

/* ── Header ── */
.node-header[b-fngcxer1h4] {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.node-icon[b-fngcxer1h4] {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.node-titles[b-fngcxer1h4] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.node-title[b-fngcxer1h4] {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.node-subtitle[b-fngcxer1h4] {
  font-size: 10.5px;
  color: var(--ax-text-muted, #9aa4b5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.node-badge[b-fngcxer1h4] {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  letter-spacing: .2px;
}

/* ── Body ── */
.node-body[b-fngcxer1h4] {
  margin-top: 6px;
  border-top: 1px solid var(--ax-border, #e7eaf0);
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.node-row[b-fngcxer1h4] {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  font-size: 10.5px;
}
.node-row-label[b-fngcxer1h4] { color: var(--ax-text-muted, #9aa4b5); }
.node-row-value[b-fngcxer1h4] { font-weight: 600; color: var(--ax-text, #172033); }

/* ── Metric ── */
.node-metric[b-fngcxer1h4] {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid var(--ax-border, #e7eaf0);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ax-text, #172033);
}

/* ── Classes utilitarias de valor ── */
.clr-success[b-fngcxer1h4] { color: var(--ax-success, #14845f) !important; }
.clr-warning[b-fngcxer1h4] { color: var(--ax-warning, #c48a25) !important; }
.clr-error[b-fngcxer1h4] { color: var(--ax-error, #bd4d49) !important; }

/* ── Variantes por Kind ── */

/* Service: gradiente sólido con texto claro */
.diagram-node.kind-service[b-fngcxer1h4] {
  background: linear-gradient(135deg, var(--ax-primary, #5b5ce6), var(--ax-primary-lift, #8a6ef5));
  border: none;
  color: #fff;
  border-radius: 20px;
}
.kind-service .node-subtitle[b-fngcxer1h4] { color: rgba(255, 255, 255, .82); }
.kind-service .node-icon[b-fngcxer1h4] { background: rgba(255, 255, 255, .2); }
.kind-service .node-body[b-fngcxer1h4] { border-top-color: rgba(255, 255, 255, .22); }
.kind-service .node-row-label[b-fngcxer1h4] { color: rgba(255, 255, 255, .8); }
.kind-service .node-row-value[b-fngcxer1h4] { color: #fff; }
.kind-service .node-metric[b-fngcxer1h4] { border-top-color: rgba(255, 255, 255, .22); color: #fff; }
.kind-service .node-badge[b-fngcxer1h4] { background: rgba(255, 255, 255, .18); color: #fff; }

/* Category: acento morado izquierdo */
.diagram-node.kind-category[b-fngcxer1h4] { border-left: 3px solid var(--ax-purple, #8b5cf6); }
.kind-category .node-icon[b-fngcxer1h4] { background: #f5f3ff; color: var(--ax-purple, #8b5cf6); }
.kind-category .node-badge.badge-category[b-fngcxer1h4] { background: #f5f3ff; color: var(--ax-purple, #8b5cf6); }

/* Concept: acento info/azul izquierdo */
.diagram-node.kind-concept[b-fngcxer1h4] { border-left: 3px solid var(--ax-info, #5b5ce6); }
.kind-concept .node-icon[b-fngcxer1h4] { background: var(--ax-primary-50, #f0f0ff); color: var(--ax-primary, #5b5ce6); }
.kind-concept .node-badge.badge-concept[b-fngcxer1h4] { background: var(--ax-primary-50, #f0f0ff); color: var(--ax-primary, #5b5ce6); }

/* Rate: acento verde izquierdo */
.diagram-node.kind-rate[b-fngcxer1h4] { border-left: 3px solid var(--ax-success, #14845f); }
.kind-rate .node-icon[b-fngcxer1h4] { background: #eaf7f1; color: var(--ax-success, #14845f); }
.kind-rate .node-badge.badge-rate[b-fngcxer1h4] { background: #eaf7f1; color: var(--ax-success, #14845f); }

/* Summary: panel oscuro */
.diagram-node.kind-summary[b-fngcxer1h4] {
  background: linear-gradient(135deg, var(--ax-gray-900, #0f172a), #334155);
  border: none;
  color: #fff;
}
.kind-summary .node-icon[b-fngcxer1h4] { background: rgba(255, 255, 255, .16); color: #fff; }
.kind-summary .node-subtitle[b-fngcxer1h4] { color: rgba(255, 255, 255, .7); }
.kind-summary .node-row-label[b-fngcxer1h4] { color: rgba(255, 255, 255, .7); }
.kind-summary .node-row-value[b-fngcxer1h4] { color: #fff; }
.kind-summary .node-metric[b-fngcxer1h4] { border-top-color: rgba(255, 255, 255, .2); color: #fff; font-size: 14px; }
.kind-summary .node-badge[b-fngcxer1h4] { background: rgba(255, 255, 255, .2); color: #fff; }

/* Badge base */
.node-badge.badge-service[b-fngcxer1h4] { background: rgba(255,255,255,.18); color: #fff; }
.node-badge.badge-generic[b-fngcxer1h4] { background: var(--ax-gray-100, #eef2f6); color: var(--ax-text-muted, #9aa4b5); }
/* ── Semántica por CategoriaConceptoEconomico ── */
.diagram-node.cat-cobro[b-fngcxer1h4] { border-left: 3px solid #06b6d4; }
.diagram-node.cat-cobro .node-icon[b-fngcxer1h4] { background: #ecfeff; color: #06b6d4; }
.diagram-node.cat-cobro .cat-cobro-badge[b-fngcxer1h4] { background: #ecfeff; color: #06b6d4; }

.diagram-node.cat-cobro-fijo[b-fngcxer1h4] { border-left: 3px solid var(--ax-primary, #5b5ce6); }
.diagram-node.cat-cobro-fijo .node-icon[b-fngcxer1h4] { background: var(--ax-primary-50, #f0f0ff); color: var(--ax-primary, #5b5ce6); }
.diagram-node.cat-cobro-fijo .cat-cobro-fijo-badge[b-fngcxer1h4] { background: var(--ax-primary-50, #f0f0ff); color: var(--ax-primary, #5b5ce6); }

.diagram-node.cat-rango[b-fngcxer1h4] { border-left: 3px solid #0ea5e9; }
.diagram-node.cat-rango .node-icon[b-fngcxer1h4] { background: #f0f9ff; color: #0ea5e9; }
.diagram-node.cat-rango .cat-rango-badge[b-fngcxer1h4] { background: #f0f9ff; color: #0ea5e9; }

.diagram-node.cat-subsidio[b-fngcxer1h4] { border-left: 3px solid var(--ax-success, #14845f); }
.diagram-node.cat-subsidio .node-icon[b-fngcxer1h4] { background: #eaf7f1; color: var(--ax-success, #14845f); }
.diagram-node.cat-subsidio .cat-subsidio-badge[b-fngcxer1h4] { background: #eaf7f1; color: var(--ax-success, #14845f); }

.diagram-node.cat-contribucion[b-fngcxer1h4] { border-left: 3px solid var(--ax-error, #bd4d49); }
.diagram-node.cat-contribucion .node-icon[b-fngcxer1h4] { background: #fdf0ef; color: var(--ax-error, #bd4d49); }
.diagram-node.cat-contribucion .cat-contribucion-badge[b-fngcxer1h4] { background: #fdf0ef; color: var(--ax-error, #bd4d49); }

.diagram-node.cat-impuesto[b-fngcxer1h4] { border-left: 3px solid var(--ax-warning, #c48a25); }
.diagram-node.cat-impuesto .node-icon[b-fngcxer1h4] { background: #fbf5e9; color: var(--ax-warning, #c48a25); }
.diagram-node.cat-impuesto .cat-impuesto-badge[b-fngcxer1h4] { background: #fbf5e9; color: var(--ax-warning, #c48a25); }

.diagram-node.cat-descuento[b-fngcxer1h4] { border-left: 3px solid #16a34a; }
.diagram-node.cat-descuento .node-icon[b-fngcxer1h4] { background: #f0fdf4; color: #16a34a; }
.diagram-node.cat-descuento .cat-descuento-badge[b-fngcxer1h4] { background: #f0fdf4; color: #16a34a; }

.diagram-node.cat-interno[b-fngcxer1h4] { border-left: 3px solid var(--ax-gray-400, #94a3b8); opacity: .88; }
.diagram-node.cat-interno .node-icon[b-fngcxer1h4] { background: var(--ax-gray-100, #eef2f6); color: var(--ax-gray-500, #64748b); }
.diagram-node.cat-interno .cat-interno-badge[b-fngcxer1h4] { background: var(--ax-gray-100, #eef2f6); color: var(--ax-gray-500, #64748b); }

.clr-muted[b-fngcxer1h4] { color: var(--ax-text-muted, #9aa4b5) !important; }
/* /Components/Patterns/Diagram/DiagramPanelDetail.razor.rz.scp.css */
.diagrama-node-detail[b-1gn1s1dbek] { display: flex; flex-direction: column; }

.diagrama-node-detail-head[b-1gn1s1dbek] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ax-border, #e7eaf0);
}
.diagrama-node-detail-titles[b-1gn1s1dbek] { min-width: 0; }
.diagrama-node-detail-body[b-1gn1s1dbek] { padding: 12px 14px; flex: 1; }
.diagrama-node-detail-actions[b-1gn1s1dbek] { padding: 10px 14px; border-top: 1px solid var(--ax-border, #e7eaf0); }

/* DetalleNodo: filas label → valor */
.detalle-nodo[b-1gn1s1dbek] { display: flex; flex-direction: column; gap: 10px; }
.df[b-1gn1s1dbek] { display: flex; align-items: baseline; }
.df-label[b-1gn1s1dbek] { font-size: 12px; color: var(--ax-text-muted, #9aa4b5); width: 104px; flex-shrink: 0; }
.df-value[b-1gn1s1dbek] { font-size: 12.5px; font-weight: 600; color: var(--ax-text, #172033); word-break: break-word; }
.df-value.formula[b-1gn1s1dbek] { font-family: 'IBM Plex Mono', monospace; color: var(--ax-purple, #8b5cf6); font-size: 11.5px; }
/* /Components/Shared/RegistroStatus.razor.rz.scp.css */
/* =========================================================
   RegistroStatus — estado del registro en edición
   Estilo record-identity (Alternativa D): avatar grande + nombre + chips.
   Comparte fila con el breadcrumb (.form-crumb-row > .status-panel).
   ========================================================= */

.registro-status[b-lu49xfstsn] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.registro-status-avatar[b-lu49xfstsn] {
  width: 40px;
  height: 40px;
  border-radius: var(--ax-radius-md);
  background: var(--ax-primary);
  color: var(--ax-primary-contrast);
  display: grid;
  place-items: center;
  font-family: var(--ax-font-display);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.registro-status-info[b-lu49xfstsn] {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.registro-status-info b[b-lu49xfstsn] {
  font-family: var(--ax-font-display);
  font-size: var(--ax-font-size-md);
  font-weight: 600;
  color: var(--ax-text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.registro-status-chips[b-lu49xfstsn] {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.registro-status-chips .chip[b-lu49xfstsn] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--ax-font-size-xs);
  font-weight: 600;
  padding: 1px 8px;
  border-radius: var(--ax-radius-full);
  background: var(--ax-gray-100);
  color: var(--ax-text-secondary);
  white-space: nowrap;
}

/* Chips con tripletes semanticos (v9.1): bg = 8% del color, texto = paso oscuro */
.registro-status-chips .chip.persona[b-lu49xfstsn] {
  background: var(--ax-info-bg);
  color: var(--ax-info-text);
}

.registro-status-chips .chip.email[b-lu49xfstsn] {
  background: transparent;
  color: var(--ax-text-muted);
  font-weight: 500;
}

.registro-status-chips .chip.identificacion[b-lu49xfstsn] {
  background: var(--ax-alpha-hover);
  color: var(--ax-text-secondary);
  font-family: var(--ax-font-mono);
  font-size: var(--ax-font-size-2xs);
  letter-spacing: 0.02em;
}

.registro-status-chips .chip.estado-activo[b-lu49xfstsn] {
  background: var(--ax-success-bg);
  color: var(--ax-success-text);
}

.registro-status-chips .chip.estado-inactivo[b-lu49xfstsn] {
  background: var(--ax-alpha-hover);
  color: var(--ax-text-muted);
}

.registro-status-dot[b-lu49xfstsn] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* /Components/Shared/SelectorTipoOrden.razor.rz.scp.css */
/* Selector de tipo de orden (Alternativa F) — grilla a dos columnas. */

.tipo-selector[b-skfng4ctg9] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tipo-selector .ax-group-label[b-skfng4ctg9] {
  display: block;
  margin-bottom: 7px;
}

.tipo-pick-grid[b-skfng4ctg9] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tipo-pick[b-skfng4ctg9] {
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ax-text-secondary);
  background: var(--ax-bg-card, #fff);
  border: 1px solid var(--ax-border);
  border-radius: 8px;
  padding: 9px 11px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}

.tipo-pick:hover[b-skfng4ctg9] {
  border-color: var(--ax-primary);
}

.tipo-pick.active[b-skfng4ctg9] {
  border-color: var(--ax-primary);
  background: var(--ax-primary-50);
  color: var(--ax-primary);
  box-shadow: 0 0 0 3px rgba(91, 92, 230, .12);
}

.tipo-pick-ico[b-skfng4ctg9] {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--ax-gray-100);
  color: var(--ax-text-secondary);
  flex: none;
}

.tipo-pick.active .tipo-pick-ico[b-skfng4ctg9] {
  background: var(--ax-primary);
  color: #fff;
}

.tipo-pick-name[b-skfng4ctg9] {
  line-height: 1.25;
  min-width: 0;
}

@media (max-width: 560px) {
  .tipo-pick-grid[b-skfng4ctg9] {
    grid-template-columns: 1fr;
  }
}

/* Rail vertical (Alternativa 9): familia a ancho completo y tipos en una lista. */
.tipo-selector--rail .ax-seg[b-skfng4ctg9] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.tipo-selector--rail .ax-seg-btn[b-skfng4ctg9] {
  flex: 0 0 auto;
  width: 100%;
  text-align: left;
  white-space: normal;
  background: var(--ax-bg-card, #fff);
  border: 1px solid var(--ax-border);
  border-radius: 8px;
  padding: 8px 11px;
}

.tipo-selector--rail .ax-seg-btn:last-child[b-skfng4ctg9] {
  border-right: 1px solid var(--ax-border);
}

.tipo-selector--rail .ax-seg-btn:hover[b-skfng4ctg9] {
  border-color: var(--ax-primary);
}

.tipo-selector--rail .ax-seg-btn.active[b-skfng4ctg9] {
  border-color: var(--ax-primary);
  background: var(--ax-primary-50);
  color: var(--ax-primary);
}

.tipo-selector--rail .tipo-pick-grid[b-skfng4ctg9] {
  grid-template-columns: 1fr;
}
/* /Components/Suscripciones/SeccionEstadoServicio.razor.rz.scp.css */
/* =========================================================
   Sección «Servicios» del detalle de Suscripciones (Explorer)
   Estado operativo + novedad de estado + historial de novedades.
   Estilos propios del componente: las clases .card/.timeline de la
   página viven en su CSS scoped y no alcanzan este markup.
   Solo tokens AXIOMA; sin colores literales.
   ========================================================= */

.estado-eyebrow[b-8wjivdvkmy] {
  display: block;
  font-size: var(--ax-font-size-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ax-letter-spacing-widest);
  color: var(--ax-text-muted);
  margin: 0 0 8px;
}

.estado-vacio[b-8wjivdvkmy] {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 18px 14px;
  background: var(--ax-bg-card);
}

/* ===== Tarjeta de servicio (estado operativo actual) ===== */

.svc-card[b-8wjivdvkmy] {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--ax-bg-card);
  margin-bottom: 10px;
}

.svc-card-active[b-8wjivdvkmy] {
  border-color: var(--ax-primary);
  box-shadow: var(--ax-shadow-focus);
}

.svc-head[b-8wjivdvkmy] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.svc-name[b-8wjivdvkmy] {
  font-size: var(--ax-font-size-md);
  font-weight: 600;
  color: var(--ink);
}

.svc-meta[b-8wjivdvkmy] {
  margin-top: 4px;
  font-size: var(--ax-font-size-2xs);
  color: var(--ax-text-muted);
}

.svc-actions[b-8wjivdvkmy] {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

/* Contexto de la captura: servicio afectado + su estado vigente */
.svc-context[b-8wjivdvkmy] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.svc-context-name[b-8wjivdvkmy] {
  font-size: var(--ax-font-size-base);
  font-weight: 600;
  color: var(--ink);
}

/* ===== Historial de novedades (contenido de consulta, al final) ===== */

.novedad-historial[b-8wjivdvkmy] {
  margin-top: 22px;
}

.novedad-timeline[b-8wjivdvkmy] {
  border-left: 1px solid var(--line);
  padding-left: 15px;
}

.novedad-item[b-8wjivdvkmy] {
  position: relative;
  padding-bottom: 14px;
}

.novedad-item:last-child[b-8wjivdvkmy] {
  padding-bottom: 0;
}

.novedad-item[b-8wjivdvkmy]::before {
  content: '';
  position: absolute;
  left: -19px;
  top: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ax-primary);
  box-shadow: 0 0 0 3px var(--ax-primary-50);
}

.novedad-title[b-8wjivdvkmy] {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.novedad-fecha[b-8wjivdvkmy] {
  font-family: var(--ax-font-mono);
  font-size: var(--ax-font-size-xs);
  font-weight: 600;
  color: var(--ink);
}

.novedad-servicio[b-8wjivdvkmy] {
  font-size: var(--ax-font-size-xs);
  color: var(--ax-text-secondary);
}

.novedad-cambio[b-8wjivdvkmy] {
  margin-top: 4px;
}

.novedad-cambio-row[b-8wjivdvkmy] {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0;
}

.novedad-lbl[b-8wjivdvkmy] {
  font-size: var(--ax-font-size-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ax-letter-spacing-widest);
  color: var(--ax-text-muted);
  min-width: 100px;
}

.novedad-estado[b-8wjivdvkmy] {
  font-size: var(--ax-font-size-base);
  font-weight: 600;
  color: var(--ink);
}

.novedad-estado-nuevo[b-8wjivdvkmy] {
  color: var(--ax-primary);
}

.novedad-motivo[b-8wjivdvkmy] {
  color: var(--ax-text-muted);
}

.novedad-obs[b-8wjivdvkmy] {
  margin-top: 2px;
  font-size: var(--ax-font-size-xs);
  color: var(--ax-text-secondary);
  white-space: pre-wrap;
}

.novedad-user[b-8wjivdvkmy] {
  margin-top: 2px;
  font-size: var(--ax-font-size-2xs);
  color: var(--ax-text-muted);
}
/* /Pages/Admin/VinculacionUsuarioTercero.razor.rz.scp.css */
.tercero-select[b-jmr6yxf2w3] {
    min-width: 240px;
    max-width: 360px;
}
/* /Pages/CentrosPoblados/ListaCentrosPoblados.razor.rz.scp.css */
/* ===== Directorio de Centros Poblados (Estrategia Guiada - Catálogo) ===== */

/* Chip de código */
.cpc-chip[b-xmweq8dsxy] {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: var(--ax-primary-50);
  color: var(--ax-primary);
  border: 1px solid var(--ax-primary);
}

/* Identidad (cabecera del detalle) */
.cpc-identity[b-xmweq8dsxy] {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.cpc-identity-left[b-xmweq8dsxy] {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.cpc-avatar[b-xmweq8dsxy] {
  width: 55px;
  height: 55px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: var(--ax-font-size-xl);
  font-weight: 700;
  flex-shrink: 0;
  background: var(--ax-primary-100);
  color: var(--ax-primary);
}

.cpc-identity h3[b-xmweq8dsxy] {
  font: 700 var(--ax-font-size-3xl) var(--ax-font-display);
  margin: 0 0 4px;
  color: var(--ink);
}

.cpc-identity p[b-xmweq8dsxy] {
  margin: 2px 0 0;
  color: var(--ax-text-secondary);
  font-size: var(--ax-font-size-xs);
  font-weight: 500;
}

/* Cuerpo del detalle */
.cpc-detail-body[b-xmweq8dsxy] {
  flex: 1;
  min-height: 0;
  padding: 18px 20px;
  overflow-y: auto;
}

.cpc-detail-actions[b-xmweq8dsxy] {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}

/* Estado vacío del detalle */
.cpc-empty-icon[b-xmweq8dsxy] {
  color: var(--ax-text-secondary);
  opacity: 0.7;
  margin-bottom: 8px;
}

.cpc-empty-title[b-xmweq8dsxy] {
  font: 700 var(--ax-font-size-base) var(--ax-font-display);
  color: var(--ink);
}

.cpc-empty-sub[b-xmweq8dsxy] {
  margin-top: 4px;
  color: var(--ax-text-secondary);
  font-size: var(--ax-font-size-xs);
  text-align: center;
}

/* ===== Helpers reutilizados (scoped) ===== */

.button[b-xmweq8dsxy] {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 7px;
  padding: 9px 14px;
  font: 600 13px var(--ax-font-family);
  cursor: pointer;
  transition: all 120ms ease;
  white-space: nowrap;
}

.button:hover[b-xmweq8dsxy] {
  border-color: var(--ax-primary);
  color: var(--ax-primary);
}

.button-danger:hover[b-xmweq8dsxy] {
  border-color: var(--red);
  color: var(--red);
}

.badge[b-xmweq8dsxy] {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  margin-top: 8px;
}

.badge-green[b-xmweq8dsxy] {
  background: var(--green-soft);
  color: var(--green);
}

.badge-gray[b-xmweq8dsxy] {
  background: var(--ax-gray-100);
  color: var(--muted);
}

.card[b-xmweq8dsxy] {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--ax-bg-card);
}

.card h3[b-xmweq8dsxy] {
  font: 700 var(--ax-font-size-sm) var(--ax-font-display);
  margin: 0 0 10px;
  color: var(--ink);
}

.info[b-xmweq8dsxy] {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 7px 0;
  font-size: var(--ax-font-size-base);
  line-height: 1.35;
  gap: 12px;
}

.info:last-child[b-xmweq8dsxy] {
  border-bottom: 0;
}

.info span[b-xmweq8dsxy] {
  color: var(--ax-gray-700);
  flex-shrink: 0;
  font-size: 12px;
}
/* /Pages/Contabilidad/ParametrizacionContable.razor.rz.scp.css */
/* ParametrizacionContable.razor.css — presentación de la pantalla contenedora de tabs.
   Consume tokens de axioma-tokens.css (var(--ax-*)); no duplica globales. */

/* Los tabs de MudBlazor heredan text-transform: uppercase; en esta pantalla se leen con
   mayúscula inicial, tal como están escritos. */
[b-yqlt9n7ccx] .mud-tab {
    text-transform: none;
}

/* El host no es un formulario de página completa: aunque contenga un .form-grid (tab «Plan de
   Cuentas»), su page-root conserva el ancho disponible; la regla global
   `.page-root:has(.form-grid)` lo centraría a 1180px. Igual que en PreFacturacion, los
   page-root de los componentes embebidos no vuelven a acotar ni a sumar padding horizontal,
   para que el contenido arranque en el mismo borde en todas las pestañas. */
.page-root.paramcont-page[b-yqlt9n7ccx] {
    max-width: none !important;
    margin-inline: 0 !important;
}

[b-yqlt9n7ccx] .page-root {
    max-width: none;
    margin-inline: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Etiqueta de la pantalla: último elemento del contenedor, alineada a la izquierda. */
.paramcont-page-label[b-yqlt9n7ccx] {
    display: block;
    margin-top: var(--ax-space-4, 16px);
    text-align: left;
    color: var(--ax-text-secondary);
    font-size: var(--ax-font-size-sm, 13px);
    font-weight: 600;
    letter-spacing: 0.02em;
}
/* /Pages/Dashboards/EstadoSistema.razor.rz.scp.css */
/* EstadoSistema.razor.css — Estado del sistema (Consulta / Reporte).
   Pantalla de aterrizaje del tenant: responde «cómo va el ciclo de facturación».
   Densidad de trabajo en los paneles de datos; el dinero y el encabezado respiran.
   Los ingredientes compartidos (.panel, .ax-stat--panel, .ax-graficos, .ax-reparto,
   .ax-numero) viven en axioma-layout.css. Todos los colores salen de tokens AXIOMA. */

/* ---------- Fondo «Aurora» (blobs suaves) ----------
   Tratamiento del lienzo de esta pantalla: sustituye el degradado de página por tres
   manchas radiales del color de marca (primario · teal · info) sobre el fondo del sistema.
   Todos los tonos salen de tokens AXIOMA, así que sigue la paleta activa y el modo oscuro.
   Los paneles son opacos: la aurora se ve en el gutter de la página y entre paneles. */
.page-root.tablero[b-673dr3exqw] {
    background:
        radial-gradient(42% 52% at 12% 8%, color-mix(in srgb, var(--ax-primary) 6%, transparent), transparent 70%),
        radial-gradient(40% 50% at 88% 18%, color-mix(in srgb, var(--ax-teal-500) 5%, transparent), transparent 72%),
        radial-gradient(50% 60% at 70% 100%, color-mix(in srgb, var(--ax-info) 3%, transparent), transparent 74%),
        var(--ax-bg);
}

/* ---------- Encabezado (título + totales del período) ---------- */
.tablero[b-673dr3exqw] {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-3);
}

.tablero-head[b-673dr3exqw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ax-space-3) var(--ax-space-4);
}

/* Banda informativa del período: tres tramos separados por un filete (período · ventana de
   consumo · universo). Ancho por contenido —no se estira a todo el ancho de la página— para
   que quede a la altura del bloque de texto del período. */
.tablero-banda[b-673dr3exqw] {
    display: flex;
    align-items: stretch;
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--ax-panel-rim);
    border-radius: var(--ax-radius-lg);
    background: var(--ax-panel-bg);
    box-shadow: var(--ax-shadow-panel);
    overflow: hidden;
}

.tablero-banda-item[b-673dr3exqw] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: var(--ax-space-1x5) var(--ax-space-2x5);
    min-width: 0;
}

.tablero-banda-item + .tablero-banda-item[b-673dr3exqw] {
    border-left: 1px solid var(--ax-alpha-line-strong);
}

.tablero-banda-lbl[b-673dr3exqw] {
    font-size: var(--ax-font-size-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ax-letter-spacing-wide);
    color: var(--ax-text-muted);
}

.tablero-banda-val[b-673dr3exqw] {
    font-family: var(--ax-font-display);
    font-size: var(--ax-font-size-sm);
    font-weight: 600;
    letter-spacing: var(--ax-letter-spacing-tight);
    color: var(--ax-text-secondary);
    white-space: nowrap;
}

.tablero-banda-val--periodo[b-673dr3exqw] {
    font-size: var(--ax-font-size-base);
}

/* Período, ventana de consumo y universo del período: una línea cada uno. */
.tablero-head-info[b-673dr3exqw] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
}

/* Marco de la pantalla: el ciclo al que pertenece el período abierto. */
.tablero-eyebrow[b-673dr3exqw] {
    font-size: var(--ax-font-size-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ax-letter-spacing-wider);
    color: var(--ax-primary-700);
}

/* Banda de totales en la fila del encabezado: la pantalla ya NO la usa (el dinero es la banda
   de la sección «Facturación y recaudo»), pero la previa de versiones la conserva para comparar
   el diseño anterior. Auto-fit: cuatro tarjetas mientras haya ancho, nunca una sola columna. */
.tablero-head-kpis[b-673dr3exqw] {
    flex: 1 1 560px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--ax-space-3);
    min-width: 0;
}

/* El encabezado es identidad del período: el dinero vive en la sección de facturación. */
.tablero-head-refresh[b-673dr3exqw] {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Fila de pestañas de carpeta: pestañas a la izquierda y Actualizar al extremo.
   Al apoyarse sobre el filete, la fila alinea por abajo; el botón no lo toca el filete. */
.das-carpeta-tabs[b-673dr3exqw] {
    display: flex;
    align-items: flex-end;
    gap: var(--ax-space-3);
    padding-top: var(--ax-space-2);
}

.das-carpeta-tabs .das-carpeta-rail[b-673dr3exqw] {
    flex: 1 1 auto;
    min-width: 0;
}

.das-carpeta-tabs .tablero-head-refresh[b-673dr3exqw] {
    margin-left: 0;
    padding-bottom: 1px;
}

.tablero-title[b-673dr3exqw] {
    font-family: var(--ax-font-display);
    font-size: var(--ax-font-size-4xl);
    font-weight: 700;
    letter-spacing: var(--ax-letter-spacing-tight);
    color: var(--ax-text-primary);
    margin: 0;
    white-space: nowrap;
}

.tablero-sub[b-673dr3exqw] {
    font-size: var(--ax-font-size-sm);
    color: var(--ax-text-secondary);
    margin: 0;
    white-space: nowrap;
}

/* ---------- Grilla ---------- */
.tablero-grid[b-673dr3exqw] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--ax-space-3);
    align-items: start;
}

.tablero-span-3[b-673dr3exqw] { grid-column: span 3; }
.tablero-span-4[b-673dr3exqw] { grid-column: span 4; }
.tablero-span-5[b-673dr3exqw] { grid-column: span 5; }
.tablero-span-6[b-673dr3exqw] { grid-column: span 6; }
.tablero-span-7[b-673dr3exqw] { grid-column: span 7; }
.tablero-span-8[b-673dr3exqw] { grid-column: span 8; }
.tablero-span-12[b-673dr3exqw] { grid-column: span 12; }

.tablero-panel[b-673dr3exqw] {
    min-width: 0;
}

/* ---------- Banda de totales del encabezado ----------
   Las tarjetas resumen son el ingrediente global .ax-stat--panel (axioma-layout.css); esta
   pantalla solo conserva el medidor de proporción que va dentro de una de ellas. */
.tablero-meter[b-673dr3exqw] {
    display: block;
    height: 5px;
    margin-top: 2px;
    border-radius: var(--ax-radius-full);
    background: var(--ax-gray-100);
    overflow: hidden;
}

.tablero-meter i[b-673dr3exqw] {
    display: block;
    height: 100%;
    border-radius: var(--ax-radius-full);
    background: var(--ax-teal-500);
    transition: width var(--ax-transition-base);
}

/* ---------- Semántica de color (un acento por pantalla + estados) ---------- */
.tablero-ok[b-673dr3exqw]   { color: var(--ax-success); }
.tablero-warn[b-673dr3exqw] { color: var(--ax-warning); }
.tablero-bad[b-673dr3exqw]  { color: var(--ax-error); }

/* ---------- Pagadas vs no pagadas ----------
   El panel comparte columna con «Facturas del período», así que el donut va centrado arriba
   y la leyenda ocupa el ancho completo debajo: a un tercio de grilla no caben lado a lado. */
.tablero-pagos[b-673dr3exqw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ax-space-3);
}

.tablero-donut[b-673dr3exqw] {
    position: relative;
    flex: 0 0 auto;
    width: 132px;
    height: 132px;
    border-radius: 50%;
}

.tablero-donut-centro[b-673dr3exqw] {
    position: absolute;
    inset: 26px;
    display: grid;
    place-content: center;
    text-align: center;
    border-radius: 50%;
    background: var(--ax-surface);
    border: 1px solid var(--ax-border-light);
}

.tablero-donut-centro b[b-673dr3exqw] {
    display: block;
    font-family: var(--ax-font-mono);
    font-size: var(--ax-font-size-3xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ax-text-primary);
}

.tablero-donut-centro small[b-673dr3exqw] {
    font-size: var(--ax-font-size-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ax-letter-spacing-wide);
    color: var(--ax-text-muted);
}

.tablero-leyenda[b-673dr3exqw] {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-2);
    width: 100%;
    min-width: 0;
}

.tablero-leyenda-item[b-673dr3exqw] {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    gap: var(--ax-space-2);
    align-items: center;
    font-size: var(--ax-font-size-sm);
}

.tablero-leyenda-nombre[b-673dr3exqw] {
    color: var(--ax-text-primary);
    min-width: 0;
}

.tablero-leyenda-nombre small[b-673dr3exqw] {
    display: block;
    font-size: var(--ax-font-size-2xs);
    color: var(--ax-text-muted);
}

.tablero-leyenda-item b[b-673dr3exqw] {
    font-size: var(--ax-font-size-sm);
    font-weight: 700;
    color: var(--ax-text-primary);
}

.tablero-swatch[b-673dr3exqw] {
    width: 10px;
    height: 10px;
    border-radius: var(--ax-radius-sm);
    background: var(--ax-gray-300);
}

.tablero-swatch.ok[b-673dr3exqw]   { background: var(--ax-success); }
.tablero-swatch.teal[b-673dr3exqw] { background: var(--ax-teal-500); }
.tablero-swatch.warn[b-673dr3exqw] { background: var(--ax-gold-500); }
.tablero-swatch.bad[b-673dr3exqw]  { background: var(--ax-coral-600); }

/* ---------- Embudo de facturación ---------- */
.tablero-embudo[b-673dr3exqw] {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-2);
}

.tablero-embudo-fila[b-673dr3exqw] {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: var(--ax-space-2);
    align-items: center;
}

/* Label y su cifra en el mismo renglón: el número va al lado del label, no al final de la fila. */
.tablero-embudo-k[b-673dr3exqw] {
    display: flex;
    align-items: baseline;
    gap: var(--ax-space-2);
    font-size: var(--ax-font-size-xs);
    font-weight: 600;
    color: var(--ax-text-secondary);
}

.tablero-embudo-n[b-673dr3exqw] {
    font-size: var(--ax-font-size-sm);
    font-weight: 700;
    color: var(--ax-text-primary);
}

.tablero-embudo-n.tablero-ok[b-673dr3exqw] { color: var(--ax-success); }

.tablero-embudo-barra[b-673dr3exqw] {
    display: block;
    height: 20px;
    border-radius: var(--ax-radius-sm);
    background: var(--ax-gray-100);
    overflow: hidden;
}

.tablero-embudo-barra i[b-673dr3exqw] {
    display: block;
    height: 100%;
    border-radius: var(--ax-radius-sm);
    transition: width var(--ax-transition-base);
}

.tablero-embudo-barra i.neutra[b-673dr3exqw]     { background: var(--ax-primary-100); }
.tablero-embudo-barra i.generada[b-673dr3exqw]   { background: var(--ax-primary); }
.tablero-embudo-barra i.aprobada[b-673dr3exqw]   { background: var(--ax-teal-500); }

.tablero-embudo-v[b-673dr3exqw] {
    text-align: right;
    font-size: var(--ax-font-size-sm);
    font-weight: 700;
    color: var(--ax-text-primary);
}

/* ---------- Tarjetas de contexto ---------- */
.tablero-tarjetas[b-673dr3exqw] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ax-space-2);
    margin-top: var(--ax-space-3);
}

.tablero-tarjetas--2[b-673dr3exqw] { grid-template-columns: repeat(2, 1fr); }
.tablero-tarjetas--3[b-673dr3exqw] { grid-template-columns: repeat(3, 1fr); }

.tablero-tarjeta[b-673dr3exqw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--ax-space-2) var(--ax-space-2x5);
    background: var(--ax-gray-50);
    border: 1px solid var(--ax-border-light);
    border-radius: var(--ax-radius-md);
    min-width: 0;
}

.tablero-tarjeta-k[b-673dr3exqw] {
    font-size: var(--ax-font-size-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ax-letter-spacing-wide);
    color: var(--ax-text-muted);
}

.tablero-tarjeta-v[b-673dr3exqw] {
    font-size: var(--ax-font-size-lg);
    font-weight: 700;
    color: var(--ax-text-primary);
}

/* ---------- Avance por ruta ---------- */
.tablero-barras[b-673dr3exqw] {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-2x5);
}

.tablero-barra-fila[b-673dr3exqw] {
    display: grid;
    grid-template-columns: 148px 1fr 96px;
    gap: var(--ax-space-2x5);
    align-items: center;
}

.tablero-barra-nombre[b-673dr3exqw] {
    font-size: var(--ax-font-size-sm);
    font-weight: 600;
    color: var(--ax-text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tablero-barra-nombre small[b-673dr3exqw] {
    display: block;
    font-size: var(--ax-font-size-2xs);
    font-weight: 400;
    color: var(--ax-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El conteo de pendientes baja a su propio renglón, bajo el de capturadas. */
.tablero-barra-nombre small.tablero-barra-pendientes[b-673dr3exqw] {
    color: var(--ax-warning);
    font-weight: 600;
}

.tablero-barra-pista[b-673dr3exqw] {
    display: flex;
    height: 9px;
    border-radius: var(--ax-radius-full);
    background: var(--ax-gray-100);
    overflow: hidden;
}

.tablero-barra-pista i[b-673dr3exqw] {
    display: block;
    height: 100%;
    transition: width var(--ax-transition-base);
}

.tablero-barra-pista i.capturada[b-673dr3exqw] { background: var(--ax-teal-500); }
.tablero-barra-pista i.pendiente[b-673dr3exqw] { background: var(--ax-gold-400); }

.tablero-barra-v[b-673dr3exqw] {
    text-align: right;
    font-size: var(--ax-font-size-sm);
    font-weight: 700;
    color: var(--ax-text-primary);
}

.tablero-barra-v small[b-673dr3exqw] {
    display: block;
    font-size: var(--ax-font-size-2xs);
    font-weight: 400;
    color: var(--ax-text-muted);
}

/* ---------- Aviso de rutas sin operario ---------- */
.tablero-aviso[b-673dr3exqw] {
    margin-top: var(--ax-space-4);
    padding: var(--ax-space-2) var(--ax-space-3);
    border: 1px solid var(--ax-gold-200);
    border-radius: var(--ax-radius-md);
    background: var(--ax-warning-bg);
}

.tablero-aviso-head[b-673dr3exqw] {
    display: flex;
    align-items: center;
    gap: var(--ax-space-1x5);
    font-size: var(--ax-font-size-xs);
    font-weight: 700;
    color: var(--ax-warning-text);
}

.tablero-aviso-lista[b-673dr3exqw] {
    display: flex;
    flex-direction: column;
    margin-top: var(--ax-space-1);
}

.tablero-aviso-item[b-673dr3exqw] {
    display: flex;
    align-items: center;
    gap: var(--ax-space-2);
    padding: var(--ax-space-1) 0;
    border-bottom: 1px solid var(--ax-alpha-line);
}

.tablero-aviso-item:last-child[b-673dr3exqw] { border-bottom: none; }

.tablero-aviso-nombre[b-673dr3exqw] {
    flex: 1;
    min-width: 0;
    font-size: var(--ax-font-size-sm);
    color: var(--ax-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tablero-aviso-nombre small[b-673dr3exqw] {
    display: block;
    font-size: var(--ax-font-size-2xs);
    color: var(--ax-text-muted);
}

/* ---------- Bullet chart (lecturas críticas): actual vs máximo ---------- */
.bullet[b-673dr3exqw] {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-2x5);
}

.bullet-fila[b-673dr3exqw] {
    display: grid;
    grid-template-columns: minmax(0, 210px) 1fr auto;
    gap: var(--ax-space-3);
    align-items: center;
}

.bullet-nom[b-673dr3exqw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ax-font-size-sm);
    color: var(--ax-text-secondary);
    min-width: 0;
}

.bullet-nom.bloq[b-673dr3exqw] {
    font-weight: 600;
    color: var(--ax-text-primary);
}

.bullet-bloq[b-673dr3exqw] {
    flex-shrink: 0;
    font-size: var(--ax-font-size-2xs);
    font-weight: 700;
    letter-spacing: var(--ax-letter-spacing-wider);
    color: var(--ax-error);
    background: var(--ax-error-bg);
    border: 1px solid var(--ax-coral-200);
    padding: 1px 6px;
    border-radius: var(--ax-radius-full);
}

/* Pista con la barra (actual) y la marca de referencia (máximo del tablero). */
.bullet-pista[b-673dr3exqw] {
    position: relative;
    height: 14px;
    border-radius: var(--ax-radius-sm);
    background: var(--ax-gray-100);
}

.bullet-valor[b-673dr3exqw] {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    border-radius: 3px;
    transition: width var(--ax-transition-base);
}

.bullet-valor.bloqueante[b-673dr3exqw]  { background: var(--ax-coral-500); }
.bullet-valor.advertencia[b-673dr3exqw] { background: var(--ax-gold-400); }

.bullet-meta[b-673dr3exqw] {
    position: absolute;
    top: -3px;
    bottom: -3px;
    right: 0;
    width: 2px;
    background: color-mix(in srgb, var(--ax-text-primary) 45%, transparent);
}

.bullet-n[b-673dr3exqw] {
    min-width: 34px;
    text-align: right;
    font-size: var(--ax-font-size-md);
    font-weight: 700;
    color: var(--ax-text-primary);
}

/* ---------- Suscripciones nuevas ----------
   La fila de gráficos, el reparto y las tarjetas resumen son ingredientes globales
   (axioma-layout.css §52 / .ax-stat--panel); aquí queda solo lo propio de la pantalla:
   el gráfico semanal (barras verticales) y la proporción de esta fila. */
.tablero-graficos[b-673dr3exqw] {
    grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.7fr);
}

.tablero-semanas[b-673dr3exqw] {
    display: flex;
    align-items: flex-end;
    gap: var(--ax-space-2x5);
    height: 104px;
}

.tablero-semana[b-673dr3exqw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ax-space-1);
    height: 100%;
    min-width: 0;
}

.tablero-semana b[b-673dr3exqw] {
    font-size: var(--ax-font-size-xs);
    font-weight: 700;
    color: var(--ax-text-primary);
}

/* La barra crece dentro de una pista: el 100% es el alto disponible, no el de la columna entera
   (si no, la semana pico desbordaría el panel por encima de su propio título). */
.tablero-semana-pista[b-673dr3exqw] {
    flex: 1;
    display: flex;
    align-items: flex-end;
    width: 100%;
    min-height: 0;
}

.tablero-semana-pista i[b-673dr3exqw] {
    display: block;
    width: 100%;
    min-height: 2px;
    border-radius: var(--ax-radius-sm) var(--ax-radius-sm) 2px 2px;
    background: linear-gradient(180deg, var(--ax-teal-400), var(--ax-teal-600));
    transition: height var(--ax-transition-base);
}

.tablero-semana span[b-673dr3exqw] {
    font-size: var(--ax-font-size-2xs);
    font-weight: 600;
    color: var(--ax-text-muted);
}

/* ---------- Secciones: PESTAÑAS DE CARPETA + contenido (carga bajo demanda) ----------
   Las opciones son pestañas de carpeta apoyadas sobre el filete que abre la sección activa.
   La activa se une al contenido —sin borde inferior, superficie de panel, capó de marca y sombra
   hacia arriba—; las inactivas se hunden en gris y quedan por detrás de la fila. El contenido se
   renderiza en `.das-seccion`, pegado al filete, de modo que la pestaña activa lo abre sin costura.
   Orden del ciclo: Suscripciones → Facturación y recaudo → Lecturas. */

/* La carpeta: pestañas y contenido en un solo bloque sin separación vertical. */
.das-carpeta[b-673dr3exqw] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.das-carpeta-rail[b-673dr3exqw] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    border-bottom: 1px solid var(--ax-border);
}

.das-carpeta-tab[b-673dr3exqw] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: -1px;
    padding: 7px 14px 9px;
    border: 1px solid var(--ax-border);
    border-bottom: 1px solid transparent;
    border-radius: var(--ax-radius-md) var(--ax-radius-md) 0 0;
    background: var(--ax-gray-100);
    color: var(--ax-text-muted);
    font: inherit;
    text-align: left;
    cursor: pointer;
    user-select: none;
    transition: background var(--ax-transition-fast), color var(--ax-transition-fast),
                border-color var(--ax-transition-fast);
}

.das-carpeta-tab:focus-visible[b-673dr3exqw] {
    outline: none;
    box-shadow: var(--ax-shadow-focus);
    border-radius: var(--ax-radius-md);
}

.das-carpeta-tab:hover[b-673dr3exqw] {
    background: var(--ax-gray-200);
    color: var(--ax-text-secondary);
}

/* El icono del control (MudIcon es hijo: requiere ::deep para alcanzarlo). */
.das-carpeta-tab[b-673dr3exqw]  .mud-icon-root {
    font-size: var(--ax-font-size-lg);
}

.das-carpeta-tab-txt[b-673dr3exqw] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.das-carpeta-t[b-673dr3exqw] {
    font-family: var(--ax-font-display);
    font-size: var(--ax-font-size-lg);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: var(--ax-letter-spacing-tight);
    color: inherit;
    white-space: nowrap;
}

.das-carpeta-s[b-673dr3exqw] {
    font-size: var(--ax-font-size-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ax-letter-spacing-wider);
    color: var(--ax-text-muted);
    white-space: nowrap;
    transition: color var(--ax-transition-fast);
}

/* La activa abre la sección: cubre el filete (sin borde inferior), sube con capó de marca y
   toma la superficie del panel, de modo que se lee como la pestaña del contenido de abajo. */
.das-carpeta-tab--activo[b-673dr3exqw] {
    padding-top: 5px;
    border: 1px solid var(--ax-panel-rim);
    border-bottom: 1px solid transparent;
    border-top: 3px solid var(--ax-primary);
    background: var(--ax-surface);
    color: var(--ax-text-primary);
    box-shadow: 0 -6px 12px -10px color-mix(in srgb, var(--ax-text-primary) 35%, transparent);
}

.das-carpeta-tab--activo .das-carpeta-t[b-673dr3exqw] {
    font-weight: 600;
}

.das-carpeta-tab--activo .das-carpeta-s[b-673dr3exqw] {
    color: var(--ax-primary-700);
}

/* El contenido arranca pegado al filete: la pestaña activa lo abre. */
.das-carpeta .das-seccion[b-673dr3exqw] {
    padding-top: var(--ax-space-3);
}

/* Apilado vertical (carpeta de pestañas + contenido). */
.das-stack[b-673dr3exqw] {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-3);
}

.das-seccion[b-673dr3exqw] {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-3);
    min-width: 0;
}

.das-skeleton[b-673dr3exqw] {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-3);
}

/* Banda de resumen de una sección: ocupa la fila completa de la grilla del tablero. */
.das-banda[b-673dr3exqw] {
    grid-column: 1 / -1;
}

/* Banda con tres tarjetas: reparte el ancho en tres columnas en vez de las cuatro
   por defecto de .ax-stat-row. Solo aplica en desktop; en <=900px vuelve al apilado. */
@media (min-width: 901px) {
    .ax-stat-row.das-banda--3[b-673dr3exqw] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Fila de KPI con la banda del período como PRIMER elemento: la banda toma su ancho
       por contenido y los cuatro KPI reparten el resto. En <=900px vuelve al apilado base. */
    .ax-stat-row.das-banda--periodo[b-673dr3exqw] {
        grid-template-columns: auto repeat(4, minmax(0, 1fr));
    }
}

/* ---------- Banda de KPIs en GRUPOS SEMÁNTICOS (jerarquía por agrupación) ----------
   Los cinco indicadores del padrón no van en una fila de tarjetas iguales: se ordenan en
   tres bloques rotulados —padrón del período, ciclo de lecturas y lo que requiere acción—.
   La jerarquía la da el significado: el titular del padrón pesa y la señal de acción se tiñe
   de ámbar. Solo la usa la sección «Suscripciones»; el resto conserva .ax-stat-row. */
.das-grupos[b-673dr3exqw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 0.92fr);
    gap: var(--ax-space-3);
    align-items: start;
}

.das-grupo[b-673dr3exqw] {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-1x5);
    min-width: 0;
}

.das-grupo-lbl[b-673dr3exqw] {
    font-size: var(--ax-font-size-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ax-letter-spacing-wider);
    color: var(--ax-text-muted);
}

.das-grupo--accion .das-grupo-lbl[b-673dr3exqw] {
    color: var(--ax-warning-text);
}

.das-grupo-fila[b-673dr3exqw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ax-space-2);
}

/* El grupo de acción es una sola ficha: no se reparte en dos columnas. */
.das-grupo--accion .das-grupo-fila[b-673dr3exqw] {
    grid-template-columns: 1fr;
}

/* Fichas del grupo: más compactas que la banda plana (el grupo ya separa la lectura). */
.das-grupo .ax-stat--panel[b-673dr3exqw] {
    padding: var(--ax-space-2) var(--ax-space-2x5);
}

.das-grupo .ax-stat--panel .ax-stat-val[b-673dr3exqw] {
    font-size: calc(var(--ax-font-size-xl) + 2px);
}

/* Titular del padrón: número en el acento de la pantalla y borde de marca. */
.das-grupo-fuerte[b-673dr3exqw] {
    background: color-mix(in srgb, var(--ax-primary) 5%, var(--ax-panel-bg));
    border-color: color-mix(in srgb, var(--ax-primary) 28%, transparent);
}

.das-grupo .das-grupo-fuerte .ax-stat-val[b-673dr3exqw] {
    color: var(--ax-primary-700);
    font-size: calc(var(--ax-font-size-3xl) + 2px);
}

/* Requiere acción: tinte ámbar del triplete de estado (solo donde hay señal real). */
.das-grupo-alerta[b-673dr3exqw] {
    background: var(--ax-warning-bg);
    border-color: var(--ax-gold-200);
}

.das-grupo-alerta .ax-stat-lbl[b-673dr3exqw],
.das-grupo-alerta .ax-stat-val[b-673dr3exqw] {
    color: var(--ax-warning-text);
}

/* Sin ancho para tres grupos legibles, se apilan en columna. */
@media (max-width: 1100px) {
    .das-grupos[b-673dr3exqw] {
        grid-template-columns: 1fr;
    }

    .das-grupo--accion .das-grupo-fila[b-673dr3exqw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Tablas ---------- */
.tablero-tabla[b-673dr3exqw] {
    margin-top: var(--ax-space-3);
    border: none;
}

/* Lista de altas recientes: se separa más del bloque de gráficos/tarjetas de arriba.
   `::deep` porque la tabla es un componente hijo (MudTable): el atributo de scope no
   llega a su raíz, así que la regla debe anclarse a un ancestro con scope. */
[b-673dr3exqw] .tablero-tabla--altas {
    margin-top: var(--ax-space-8);
}

[b-673dr3exqw] .tablero-tabla .mud-table-cell {
    font-size: var(--ax-font-size-sm);
}

/* Lista de suscripciones sin medidor: filas más altas para aliviar la densidad del
   tablero. El resto de tablas del panel conservan el interlineado base del .erp-table. */
[b-673dr3exqw] .tablero-tabla--sin-medidor .mud-table-body .mud-table-cell {
    padding-top: var(--ax-space-2);
    padding-bottom: var(--ax-space-2);
}

.tablero-pie-tabla[b-673dr3exqw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ax-space-2);
    margin-top: var(--ax-space-1);
}

.tablero-acciones[b-673dr3exqw] {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* ---------- Estados ---------- */
.tablero-vacio[b-673dr3exqw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ax-space-2);
    padding: var(--ax-space-10) var(--ax-space-4);
    text-align: center;
    background: var(--ax-panel-bg);
    border: 1px solid var(--ax-panel-rim);
    border-radius: var(--ax-radius-xl);
    box-shadow: var(--ax-shadow-panel);
    color: var(--ax-text-muted);
}

.tablero-vacio-inline[b-673dr3exqw] {
    display: flex;
    align-items: center;
    gap: var(--ax-space-2);
    flex-wrap: wrap;
}

.tablero-alerta[b-673dr3exqw] {
    width: 100%;
}

/* ---------- Responsive (desktop-first: solo se apila al reducir) ---------- */
@media (max-width: 1400px) {
    .tablero-span-3[b-673dr3exqw],
    .tablero-span-4[b-673dr3exqw] { grid-column: span 6; }
    .tablero-span-5[b-673dr3exqw],
    .tablero-span-7[b-673dr3exqw],
    .tablero-span-8[b-673dr3exqw] { grid-column: span 12; }
}

@media (max-width: 1100px) {
    /* Sin ancho para dos gráficos legibles, la fila se apila: primero la tendencia, después el reparto. */
    .tablero-graficos[b-673dr3exqw] { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .tablero-head[b-673dr3exqw] { flex-direction: column; align-items: flex-start; }
    .tablero-head-info[b-673dr3exqw] { flex-direction: column; align-items: flex-start; gap: 0; }
    .tablero-title[b-673dr3exqw],
    .tablero-sub[b-673dr3exqw] { white-space: normal; }
    .tablero-span-3[b-673dr3exqw],
    .tablero-span-4[b-673dr3exqw],
    .tablero-span-6[b-673dr3exqw] { grid-column: span 12; }
    .tablero-tarjetas[b-673dr3exqw],
    .tablero-tarjetas--2[b-673dr3exqw],
    .tablero-tarjetas--3[b-673dr3exqw] { grid-template-columns: repeat(2, 1fr); }
    .tablero-barra-fila[b-673dr3exqw] { grid-template-columns: 1fr 84px; }
    .tablero-barra-nombre[b-673dr3exqw] { grid-column: 1 / -1; white-space: normal; }
    .ax-stat-row[b-673dr3exqw] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .tablero-meter i[b-673dr3exqw],
    .tablero-embudo-barra i[b-673dr3exqw],
    .tablero-barra-pista i[b-673dr3exqw],
    .bullet-valor[b-673dr3exqw],
    .tablero-semana-pista i[b-673dr3exqw] {
        transition: none;
    }
}

/* ---------- Ajuste tipográfico de los paneles: +2px en labels (excepto los uppercase) y valores ---------- */
.ax-stat-val[b-673dr3exqw] { font-size: calc(var(--ax-font-size-xl) + 2px); }
.ax-stat--panel .ax-stat-val[b-673dr3exqw] { font-size: calc(var(--ax-font-size-2xl) + 2px); }
.ax-stat-sub[b-673dr3exqw] { font-size: calc(var(--ax-font-size-2xs) + 2px); }
.tablero-tarjeta-v[b-673dr3exqw] { font-size: calc(var(--ax-font-size-lg) + 2px); }
.tablero-banda-val[b-673dr3exqw] { font-size: calc(var(--ax-font-size-sm) + 2px); }
.tablero-banda-val--periodo[b-673dr3exqw] { font-size: calc(var(--ax-font-size-base) + 2px); }
.tablero-barra-nombre[b-673dr3exqw] { font-size: calc(var(--ax-font-size-sm) + 2px); }
.tablero-barra-v[b-673dr3exqw] { font-size: calc(var(--ax-font-size-sm) + 2px); }
.bullet-nom[b-673dr3exqw] { font-size: calc(var(--ax-font-size-sm) + 2px); }
.bullet-n[b-673dr3exqw] { font-size: calc(var(--ax-font-size-md) + 2px); }
/* Facturación y recaudo: el texto del contenido se empareja con el de Suscripciones (tabla md). */
.tablero-leyenda-nombre[b-673dr3exqw] { font-size: var(--ax-font-size-md); }
.tablero-leyenda-item b[b-673dr3exqw] { font-size: var(--ax-font-size-md); }
.tablero-embudo-k[b-673dr3exqw] { font-size: var(--ax-font-size-md); }
.tablero-embudo-n[b-673dr3exqw] { font-size: var(--ax-font-size-md); }
.tablero-aviso-head[b-673dr3exqw] { font-size: calc(var(--ax-font-size-xs) + 2px); }
.tablero-aviso-nombre[b-673dr3exqw] { font-size: calc(var(--ax-font-size-sm) + 2px); }
.tablero-donut-centro b[b-673dr3exqw] { font-size: calc(var(--ax-font-size-3xl) + 2px); }
.tablero-semana b[b-673dr3exqw] { font-size: calc(var(--ax-font-size-xs) + 2px); }

/* ---------- KPI «Cartera vencida»: enlace al reporte ---------- */
/* El KPI abre el reporte de cartera vencida filtrado por el período vigente: se comporta
   como un enlace (cursor, foco visible y realce sutil al pasar). */
.tablero-kpi-link[b-673dr3exqw] {
    cursor: pointer;
    transition: box-shadow var(--ax-transition-fast), transform var(--ax-transition-fast);
}

.tablero-kpi-link:hover[b-673dr3exqw] {
    transform: translateY(-1px);
}

.tablero-kpi-link:focus-visible[b-673dr3exqw] {
    outline: none;
    box-shadow: var(--ax-shadow-focus);
}

.tablero-kpi-cta[b-673dr3exqw] {
    margin-top: 2px;
    font-size: var(--ax-font-size-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ax-letter-spacing-wide);
    color: var(--ax-coral-600);
}

/* ---------- Barras verticales (padrón activo por clasificación) ---------- */
.tablero-barras-v[b-673dr3exqw] {
    display: flex;
    align-items: flex-end;
    gap: var(--ax-space-3);
    padding: var(--ax-space-3) 0 var(--ax-space-1);
    overflow-x: auto;
}

.tablero-barra-v-col[b-673dr3exqw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ax-space-1);
    flex: 1 1 0;
    min-width: 72px;
}

.tablero-barra-v-val[b-673dr3exqw] {
    font-size: var(--ax-font-size-sm);
    font-weight: 700;
    color: var(--ax-text-primary);
    font-variant-numeric: tabular-nums;
}

.tablero-barra-v-track[b-673dr3exqw] {
    display: flex;
    align-items: flex-end;
    width: 56px;
    height: 150px;
    background: var(--ax-gray-100);
    border-radius: var(--ax-radius-sm);
    overflow: hidden;
}

.tablero-barra-v-track i[b-673dr3exqw] {
    display: block;
    width: 100%;
    border-radius: var(--ax-radius-sm) var(--ax-radius-sm) 0 0;
    transition: height var(--ax-transition-base);
}

.tablero-barra-v-label[b-673dr3exqw] {
    font-size: var(--ax-font-size-xs);
    color: var(--ax-text-secondary);
    text-align: center;
    line-height: 1.2;
    max-width: 96px;
    overflow-wrap: anywhere;
}

/* /Pages/EventosFacturables/FormularioEventoFacturacion.razor.rz.scp.css */
/* =========================================================
   FormularioEventoFacturacion · Libre · Configuración experta

   El contenedor conserva .form-grid (UI-FORMS §7.1b) y el modificador
   .ef-twin fija la maquetación:

     · fila 1 — «Suscripción» como BANDA a ancho completo, con sus tres
       controles en UNA sola fila.
     · fila 2 — el trabajo a la izquierda («Conceptos a cobrar», con
       «Totales» debajo) y la decisión a la derecha («Forma de pago», con
       «Plan de cuotas» debajo).
   ========================================================= */

.form-grid.ef-twin[b-dmwn3v0svj] {
    grid-template-columns: minmax(0, 1fr) 460px;
    grid-template-areas:
        "susc susc"
        "main side";
    justify-content: stretch;
    align-items: start;
    gap: 16px;
}

/* Dos columnas de trabajo real: la grilla de líneas lleva 7 columnas y el par de
   cierre dos paneles con tablas numéricas. Se amplía el contenedor solo en esta
   pantalla (el formulario centrado estándar son 1180px). */
.page-root:has(.form-grid.ef-twin)[b-dmwn3v0svj] {
    max-width: 1440px;
}

/* La columna de la banda desaparece de la maquetación (display:contents): su panel pasa a ser
   item directo de la rejilla (la banda de Suscripción a ancho completo). */
.ef-twin-left[b-dmwn3v0svj] {
    display: contents;
}

.ef-twin-left > .panel:nth-of-type(1)[b-dmwn3v0svj] {
    grid-area: susc; /* Suscripción (banda, ancho completo) */
}

/* Columnas de trabajo y decisión: cada una apila sus paneles en vertical (secuencia contigua),
   así el Plan de cuotas queda JUSTO debajo de la Forma de pago. */
.ef-twin-main[b-dmwn3v0svj] {
    grid-area: main; /* Conceptos a cobrar + Totales */
}

.ef-twin-side[b-dmwn3v0svj] {
    grid-area: side; /* Forma de pago + Plan de cuotas */
}

.ef-twin-main[b-dmwn3v0svj],
.ef-twin-side[b-dmwn3v0svj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* La Suscripción es una banda: sus tres controles van en UNA sola fila. */
.ef-twin-left > .panel:nth-of-type(1) .panel-body[b-dmwn3v0svj] {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--ax-space-3);
}

.ef-twin-left > .panel:nth-of-type(1) .panel-body > *[b-dmwn3v0svj] {
    flex: 1 1 0;
    min-width: 0;
}

/* La fecha del evento es un dato secundario de la banda: se reduce al 40 % del ancho de sus
   vecinos (un 60 % más pequeña). */
.ef-twin-left > .panel:nth-of-type(1) .panel-body > .ef-fecha-campo[b-dmwn3v0svj] {
    flex: 0.4 1 0;
    min-width: 0;
}

/* El buscador del suscriptor: la mitad del ancho de sus vecinos, ampliado un 30 % (0,5 → 0,65). */
.ef-twin-left > .panel:nth-of-type(1) .panel-body > .ef-susc-campo[b-dmwn3v0svj] {
    flex: 0.65 1 0;
    min-width: 0;
}

/* Compacta los campos del formulario: se retira el contenedor de ayuda de MudBlazor. */
.ef-twin[b-dmwn3v0svj]  .mud-input-control-helper-container {
    display: none;
}
/* (El par de cierre se disuelve con display:contents —arriba—: Plan y Totales van por su área.) */

/* El sistema de diseño no define pie de panel: el pie es local a esta pantalla
   (los totales del plan de financiación). */
.form-grid.ef-twin .panel-footer[b-dmwn3v0svj] {
    padding: 10px 14px;
    border-top: 1px solid var(--ax-alpha-line);
    background: var(--ax-surface-alt);
}

/* ─────────────────────────────────────────────────────────
   Columna izquierda
   ───────────────────────────────────────────────────────── */
/* Los bloques que no son un control (lectura de contado, aviso de período,
   acción «Calcular cuotas») ocupan el ancho del panel. */
.ef-row-block[b-dmwn3v0svj] {
    padding: 4px 0;
}

.ef-row-block--action[b-dmwn3v0svj] {
    display: flex;
    align-items: center;
}

/* Fila de la financiación: Nº de cuotas, Tasa anual y Distribución en la MISMA fila. */
.ef-fin-row[b-dmwn3v0svj] {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--ax-space-3);
}

.ef-fin-row > *[b-dmwn3v0svj] {
    flex: 1 1 0;
    min-width: 0;
}

.ef-pay-readout[b-dmwn3v0svj] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 9px 11px;
    border: 1px dashed var(--ax-alpha-line-strong);
    border-radius: var(--ax-radius);
    background: var(--ax-gray-50);
    font-size: var(--ax-font-size-sm);
    color: var(--ax-text-secondary);
}

.ef-pay-readout[b-dmwn3v0svj]  .mud-icon-root {
    color: var(--ax-success);
    margin-top: 1px;
}

/* Aviso del período activo que acota la fecha del cobro de contado. */
.ef-periodo-note[b-dmwn3v0svj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    padding: 8px 11px;
    border: 1px dashed var(--ax-alpha-line-strong);
    border-radius: var(--ax-radius);
    background: var(--ax-primary-50);
    font-size: var(--ax-font-size-sm);
    color: var(--ax-text-secondary);
}

/* La alerta de bloqueo del contado ocupa la fila del panel, no el ancho de su texto. */
.form-grid.ef-twin .ef-row-block[b-dmwn3v0svj]  .mud-alert {
    width: 100%;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────
   Conceptos a cobrar (superficie de captura)
   ───────────────────────────────────────────────────────── */
.ef-lines-adder[b-dmwn3v0svj] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ax-alpha-line);
}

.ef-lines-adder .ef-lines-search[b-dmwn3v0svj] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Dentro de la franja el campo no aporta su respiración propia: alinea con el botón. */
.ef-lines-adder[b-dmwn3v0svj]  .mud-input-control {
    margin-bottom: 0;
}

.ef-lines-adder[b-dmwn3v0svj]  .mud-button-root {
    flex: 0 0 auto;
}

/* Densidad de captura: la grilla de líneas es superficie de trabajo, no panel de decisión. */
.ef-lines-grid[b-dmwn3v0svj]  .mud-table-body .mud-table-cell {
    padding-top: 3px;
    padding-bottom: 3px;
    vertical-align: middle;
}

.ef-lines-grid[b-dmwn3v0svj]  .mud-input-control {
    margin-bottom: 0;
}

/* Ancho semántico de las celdas editables: el control mide lo que mide el valor. */
.ef-lines-grid[b-dmwn3v0svj]  .ef-cell-num-s {
    max-width: 64px;
    margin-inline: auto;
}

.ef-lines-grid[b-dmwn3v0svj]  .ef-cell-num-m {
    max-width: 82px;
    margin-left: auto;
}

/* Captura compacta: los inputs numéricos de la grilla bajan su alto vertical (36px → 26px). */
.ef-lines-grid[b-dmwn3v0svj]  .ef-cell-num-s .mud-input,
.ef-lines-grid[b-dmwn3v0svj]  .ef-cell-num-s .mud-input.mud-input-outlined,
.ef-lines-grid[b-dmwn3v0svj]  .ef-cell-num-m .mud-input,
.ef-lines-grid[b-dmwn3v0svj]  .ef-cell-num-m .mud-input.mud-input-outlined {
    height: 26px;
    min-height: 26px;
}

.ef-lines-grid[b-dmwn3v0svj]  .ef-cell-num-s .mud-input.mud-input-outlined > input.mud-input-root,
.ef-lines-grid[b-dmwn3v0svj]  .ef-cell-num-s .mud-input.mud-input-outlined > div.mud-input-slot,
.ef-lines-grid[b-dmwn3v0svj]  .ef-cell-num-m .mud-input.mud-input-outlined > input.mud-input-root,
.ef-lines-grid[b-dmwn3v0svj]  .ef-cell-num-m .mud-input.mud-input-outlined > div.mud-input-slot {
    height: 26px;
    min-height: 26px;
    line-height: 26px;
}

.ef-lines-grid[b-dmwn3v0svj]  .ef-col-row {
    width: 44px;
    color: var(--ax-text-muted);
}

.ef-lines-grid[b-dmwn3v0svj]  .ef-col-total {
    min-width: 124px;
    font-variant-numeric: tabular-nums;
}

.ef-lines-foot[b-dmwn3v0svj] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 7px 11px;
    border: 1px dashed var(--ax-alpha-line-strong);
    border-radius: var(--ax-radius);
    background: var(--ax-gray-50);
    font-size: var(--ax-font-size-sm);
    color: var(--ax-text-secondary);
}

.ef-lines-foot[b-dmwn3v0svj]  .mud-icon-root {
    color: var(--ax-text-muted);
}

/* Estado vacío con su acción primaria (UI.md §9.5.2). */
.ef-lines-empty[b-dmwn3v0svj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 16px;
    text-align: center;
    border: 1px dashed var(--ax-alpha-line-strong);
    border-radius: var(--ax-radius);
    background: var(--ax-gray-50);
    color: var(--ax-text-secondary);
}

.ef-lines-empty[b-dmwn3v0svj]  .mud-icon-root {
    color: var(--ax-text-muted);
}

.ef-lines-empty[b-dmwn3v0svj]  .mud-button-root {
    margin-top: 6px;
}

/* ─────────────────────────────────────────────────────────
   Plan de cuotas y totales
   ───────────────────────────────────────────────────────── */
/* La tabla del plan vive en la mitad del par: se compacta para que sus cinco
   columnas numéricas quepan sin recorte (el .panel recorta su desborde). */
.ef-plan[b-dmwn3v0svj]  .mud-table-cell {
    padding: 4px 8px;
}

.ef-sumlines[b-dmwn3v0svj] {
    display: flex;
    flex-direction: column;
}

.ef-sumline[b-dmwn3v0svj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--ax-alpha-line);
}

.ef-sumline:last-child[b-dmwn3v0svj] {
    border-bottom: 0;
}

.ef-sumline-label[b-dmwn3v0svj] {
    flex: 1;
    font-size: var(--ax-font-size-sm);
    color: var(--ax-text-secondary);
}

.ef-sumline-value[b-dmwn3v0svj] {
    font-family: var(--ax-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--ax-font-size-md);
    font-weight: 600;
}

.ef-sumline--total[b-dmwn3v0svj] {
    border-top: 1px solid var(--ax-alpha-line-strong);
    border-bottom: 0;
    margin-top: 4px;
    padding-top: 9px;
}

.ef-sumline--total .ef-sumline-value[b-dmwn3v0svj] {
    font-size: var(--ax-font-size-xl);
    color: var(--ax-primary);
}

/* Totales del evento: las cuatro líneas (Subtotal · Base gravada · IVA · Total) en UNA sola fila,
   cada una como bloque etiqueta/valor. */
.ef-sumlines--fila[b-dmwn3v0svj] {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}

.ef-sumlines--fila .ef-sumline[b-dmwn3v0svj] {
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 0;
    border-bottom: 0;
}

.ef-sumlines--fila .ef-sumline-label[b-dmwn3v0svj] {
    flex: none;
}

.ef-sumlines--fila .ef-sumline--total[b-dmwn3v0svj] {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

/* ─────────────────────────────────────────────────────────
   Responsive: a una columna, el trabajo y luego Forma de pago / Plan / Totales
   ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .form-grid.ef-twin[b-dmwn3v0svj] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "susc"
            "main"
            "side";
    }
}

@media (max-width: 960px) {
    .ef-lines-adder[b-dmwn3v0svj] {
        flex-direction: column;
        align-items: stretch;
    }

    /* En pantallas estrechas la banda de Suscripción deja de forzar una fila. */
    .ef-twin-left > .panel:nth-of-type(1) .panel-body[b-dmwn3v0svj] {
        flex-wrap: wrap;
    }

    .ef-twin-left > .panel:nth-of-type(1) .panel-body > *[b-dmwn3v0svj] {
        flex-basis: 220px;
    }
}

/* ─────────────────────────────────────────────────────────
   Edición: solo el período de inicio del evento es editable
   ───────────────────────────────────────────────────────── */
.ef-edit-head[b-dmwn3v0svj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.ef-periodo-edit[b-dmwn3v0svj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
}

.ef-periodo-edit .ef-periodo-note[b-dmwn3v0svj] {
    align-items: flex-start;
}

/* Pestañas «Conceptos a cobrar / Plan de cuotas» dentro del panel. */
.ef-tabs[b-dmwn3v0svj] {
    margin: 10px 16px 4px;
    width: fit-content;
}

/* /Pages/Facturas/DialogDetalleCartera.razor.rz.scp.css */
/* DialogDetalleCartera.razor.css — estilos puntuales del diálogo de detalle de cartera.
   Consume tokens de axioma-tokens.css (var(--ax-*)); no duplica globales. */

.dc-table[b-1rfrzjeanl] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

/* Títulos de columna en SENTENCE CASE —mayúscula inicial y el resto en minúsculas—: el texto va
   tal cual en el marcado («Concepto», «Saldo»), sin text-transform. El tono se sube por peso y por
   color para que encabecen la tabla sin recurrir a las mayúsculas. */
.dc-table th[b-1rfrzjeanl] {
    background: var(--ax-bg-panel, #f7f8fa);
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--ax-text-primary, #1d2330);
    padding: 7px 10px;
    border-bottom: 1px solid var(--ax-border, #e2e5ea);
    white-space: nowrap;
}

.dc-table td[b-1rfrzjeanl] {
    padding: 7px 10px;
    border-bottom: 1px solid var(--ax-border-light, #eef0f3);
    vertical-align: middle;
}

.dc-table th.r[b-1rfrzjeanl],
.dc-table td.r[b-1rfrzjeanl] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dc-table tr.dc-grupo td[b-1rfrzjeanl] {
    background: var(--ax-bg-panel, #f7f8fa);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--ax-text-secondary, #5b6472);
    border-bottom: 1px solid var(--ax-border, #e2e5ea);
}

.dc-grupo-total[b-1rfrzjeanl] {
    margin-left: 8px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ax-text-primary, #1d2330);
}

.dc-table tr.dc-total td[b-1rfrzjeanl] {
    font-weight: 800;
    font-size: 13.5px;
    background: var(--ax-surface-sunken, rgba(0, 0, 0, 0.03));
    border-top: 2px solid var(--ax-border, #e2e5ea);
    border-bottom: none;
}
/* /Pages/Facturas/DialogProcesoMasivo.razor.rz.scp.css */
/* DialogProcesoMasivo.razor.css — estilos puntuales del avance y resultado del proceso de
   facturación. Consume tokens de axioma-tokens.css (var(--ax-*)); no duplica globales. */

.pm-resumen[b-gg6ao320ql] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.pm-totales[b-gg6ao320ql] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.pm-total[b-gg6ao320ql] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--ax-border, #e2e5ea);
    border-radius: var(--ax-radius, 6px);
    background: var(--ax-bg-panel, #f7f8fa);
}

.pm-total-label[b-gg6ao320ql] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--ax-text-secondary, #5b6472);
}

.pm-total-value[b-gg6ao320ql] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ax-text-primary, #1d2330);
}

.pm-seccion[b-gg6ao320ql] {
    margin: 18px 0 6px;
}

.pm-scroll[b-gg6ao320ql] {
    max-height: 240px;
    overflow-y: auto;
}

.pm-table[b-gg6ao320ql] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.pm-table th[b-gg6ao320ql] {
    background: var(--ax-bg-panel, #f7f8fa);
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--ax-text-secondary, #5b6472);
    padding: 7px 10px;
    border-bottom: 1px solid var(--ax-border, #e2e5ea);
    position: sticky;
    top: 0;
}

.pm-table td[b-gg6ao320ql] {
    padding: 7px 10px;
    border-bottom: 1px solid var(--ax-border-light, #eef0f3);
    vertical-align: middle;
}
/* /Pages/Facturas/FormularioFactura.razor.rz.scp.css */
/* FormularioFactura.razor.css — estilos puntuales de la página de edición de factura.
   Consume tokens de axioma-tokens.css (var(--ax-*)); no duplica globales. */

/* ===== Encabezado del documento: un solo riel =====
   Toda la cabecera (tabs + suscriptor + identidad + total) vive en UNA fila; el importe es su
   bloque de cierre, con la celda tintada por el estado (--doc-accent). */
.ax-factura-titulo[b-punhk77ps3] {
    --doc-accent: var(--ax-warning, #c48a25);
    /* Celda derecha del encabezado, al ancho de la columna «Saldo pendiente»: contenido
       centrado y estirado a lo alto del riel. */
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: var(--ax-surface, #ffffff);
    border: 1px solid var(--ax-border, #e2e5ea);
    border-radius: var(--ax-radius-md, 8px);
    padding: 8px 14px;
}

/* El acento del documento (--doc-accent) lo consumen tanto la banda de «Total facturado» como la
   pastilla de estado de la identidad; por eso los modificadores son clases sueltas. */
.ax-doc-ok[b-punhk77ps3] { --doc-accent: var(--ax-success, #14845f); }
.ax-doc-error[b-punhk77ps3] { --doc-accent: var(--ax-error, #bd4d49); }
.ax-doc-warn[b-punhk77ps3] { --doc-accent: var(--ax-warning, #c48a25); }
.ax-doc-info[b-punhk77ps3] { --doc-accent: var(--ax-info, #5b5ce6); }
.ax-doc-neutral[b-punhk77ps3] { --doc-accent: var(--ax-text-muted, #556275); }

.ax-doc-line1[b-punhk77ps3] {
    /* Identidad del documento en la fila de tabs; envuelve si no cabe en el ancho de la columna. */
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Bloque "Factura" + número, con el estado y el período en renglones debajo. En la fila de tabs
   los renglones se alinean al margen derecho (ver .ax-sec-identidad). */
.ax-doc-right[b-punhk77ps3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* Renglón 1 de la identidad: tipo + número + estado del documento. */
.ax-doc-head[b-punhk77ps3] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Renglón 2: período y aviso de período cerrado, al margen izquierdo bajo el número. */
.ax-doc-subline[b-punhk77ps3] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    white-space: nowrap;
}

/* Metadatos de la banda (suscripción, período, consumo, vence): mismo tamaño/color en
   fila 1 y fila 2, aunque solo la fila 2 declare el font-size del contenedor. */
.ax-doc-meta[b-punhk77ps3] {
    font-size: 14px;
    color: var(--ax-text-secondary, #5b6472);
}

.ax-doc-kind[b-punhk77ps3] {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ax-text-muted, #556275);
}

.ax-doc-num[b-punhk77ps3] {
    font-family: var(--ax-font-mono, ui-monospace, Consolas, monospace);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.2px;
    color: var(--ax-text-primary, #1d2330);
}

.ax-doc-state[b-punhk77ps3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--doc-accent);
    background: color-mix(in srgb, var(--doc-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--doc-accent) 25%, transparent);
    border-radius: 999px;
    padding: 2px 10px 2px 8px;
    white-space: nowrap;
}

.ax-doc-state i[b-punhk77ps3] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--doc-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--doc-accent) 18%, transparent);
}

/* Bloque del suscriptor dentro del riel: NOMBRE arriba y, debajo, SUSCRIPCIÓN y CLASIFICACIÓN,
   cada una con su rótulo y su valor, alineados a la izquierda. Separador vertical con el bloque
   anterior. */
.ax-sec-suscriptor[b-punhk77ps3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 2px;
    min-width: 0;
    max-width: 420px;
    padding-left: 18px;
    border-left: 1px solid var(--ax-alpha-line, rgba(23, 32, 51, .09));
}

.ax-sec-suscriptor .name[b-punhk77ps3] {
    font-weight: 700;
    font-size: 14px;
    color: var(--ax-text-primary, #1d2330);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Rótulo y valor de la suscripción en una sola fila, alineados por la línea base. */
.ax-sec-suscriptor .sub[b-punhk77ps3] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.ax-sec-suscriptor .sub .k[b-punhk77ps3] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--ax-text-muted, #556275);
}

.ax-sec-suscriptor .sub b[b-punhk77ps3] {
    font-weight: 700;
    color: var(--ax-text-primary, #1d2330);
    font-variant-numeric: tabular-nums;
}

.ax-doc-meta b[b-punhk77ps3] {
    color: var(--ax-text-primary, #1d2330);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Importe de la banda —TOTAL FACTURADO—: último bloque del apilado vertical, a ancho completo. */
.ax-doc-money[b-punhk77ps3] {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.ax-doc-money .ax-doc-cell[b-punhk77ps3] {
    flex: 1 1 0;
}

.ax-doc-cell[b-punhk77ps3] {
    /* Celda del importe dentro del riel: tintada, compacta y con radio; el contenido va centrado. */
    flex: 0 0 auto;
    padding: 6px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    border-radius: var(--ax-radius, 6px);
    text-align: center;
}

.ax-doc-cell .k[b-punhk77ps3] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--ax-text-muted, #556275);
}

.ax-doc-cell .v[b-punhk77ps3] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ax-text-primary, #1d2330);
    font-variant-numeric: tabular-nums;
}

/* El Saldo es el KPI dominante: celda tintada con la primary del tema activo. */
.ax-doc-cell.saldo[b-punhk77ps3] { background: var(--ax-primary-50, #eef0ff); }
.ax-doc-cell.saldo .k[b-punhk77ps3] { color: var(--ax-primary, #5b5ce6); }
.ax-doc-cell.saldo .v[b-punhk77ps3] { font-size: 17px; color: var(--ax-primary, #5b5ce6); }

/* Saldo pendiente: color según su relación con el total generado.
   cero → verde; menor al total → ámbar; igual o mayor → primary (misma regla que .saldo). */
.ax-doc-cell.saldo-ok[b-punhk77ps3] { background: var(--ax-success-bg); }
.ax-doc-cell.saldo-ok .k[b-punhk77ps3] { color: var(--ax-success-text); }
.ax-doc-cell.saldo-ok .v[b-punhk77ps3] { font-size: 17px; color: var(--ax-success-text); }

.ax-doc-cell.saldo-alerta[b-punhk77ps3] { background: var(--ax-warning-bg); }
.ax-doc-cell.saldo-alerta .k[b-punhk77ps3] { color: var(--ax-warning-text); }
.ax-doc-cell.saldo-alerta .v[b-punhk77ps3] { font-size: 17px; color: var(--ax-warning-text); }

/* ===== Detalle: alto del shell sin scroll de página ===== */
.ax-factura-page[b-punhk77ps3] {
    height: calc(100vh - var(--ax-appbar-height));
    min-height: 0;
    overflow: hidden;
}

/* ===== Detalle: contenido + totales =====
   Las secciones se eligen con TABS HORIZONTALES encima de esta rejilla; el contenido manda
   (2.7fr) sobre la columna derecha (0.91fr, mínimo 350px), que aloja la tarjeta «Saldo
   pendiente» (deuda viva). Reparto: la columna de paneles ocupa 0.91 / 3.61 = 25.2 % del ancho
   útil, un 15 % más que el 21.97 % de 0.76fr —los 0.66fr/264px originales ya eran otro 15 %
   menos—. */
.ax-factura-detalle[b-punhk77ps3] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 2.7fr) minmax(350px, 0.91fr);
    gap: var(--ax-space-4, 16px);
    align-items: stretch;
}

/* ===== Encabezado en riel único (fila horizontal, sin salto) =====
   Toda la cabecera en UNA sola fila: los tabs en un canal rebajado, y a su derecha el suscriptor,
   la identidad del documento y el total, separados por cabellos verticales. Cada bloque conserva
   su estructura interna; si el ancho no alcanza, la fila se desplaza en horizontal. */
/* Encabezado del documento en DOS columnas que replican la rejilla del detalle: el riel
   (tabs + suscriptor + identidad) sobre la columna de contenido y el cierre de importes
   JUSTO sobre la columna derecha («Saldo pendiente»), a su mismo ancho. */
.ax-sec-tabs[b-punhk77ps3] {
    display: grid;
    grid-template-columns: minmax(0, 2.7fr) minmax(350px, 0.91fr);
    gap: var(--ax-space-4, 16px);
    align-items: stretch;
    margin-bottom: var(--ax-space-3, 12px);
}

.ax-sec-rail[b-punhk77ps3] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: nowrap;
    overflow-x: auto;
    min-width: 0;
    background: var(--ax-surface, #ffffff);
    border: 1px solid var(--ax-border, #e2e5ea);
    border-radius: var(--ax-radius-md, 8px);
    padding: 10px 14px;
}

.ax-sec-tablist[b-punhk77ps3] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    margin-right: auto;
    padding: 3px;
    background: var(--ax-surface-2, #f1f5f9);
    border: 1px solid var(--ax-alpha-line, rgba(23, 32, 51, .09));
    border-radius: var(--ax-radius, 6px);
}

/* Tab = pastilla dentro del canal rebajado; el activo se eleva con la superficie y la primary. */
.ax-sec-tab[b-punhk77ps3] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--ax-radius-sm, 4px);
    background: transparent;
    color: var(--ax-text-secondary, #5b6472);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--ax-transition-fast, 150ms ease), color var(--ax-transition-fast, 150ms ease);
}

.ax-sec-tab:hover[b-punhk77ps3] {
    color: var(--ax-text-primary, #1d2330);
    background: var(--ax-alpha-hover, rgba(23, 32, 51, .025));
}

.ax-sec-tab.active[b-punhk77ps3] {
    background: var(--ax-surface, #ffffff);
    color: var(--ax-primary, #5b5ce6);
    box-shadow: var(--ax-shadow-sm, 0 1px 3px rgba(18, 33, 43, .04));
}

/* El icono lo dibuja MudBlazor: se fija el tamaño en el contenedor para que los 17px
   manden sobre el tamaño por defecto del componente. */
.ax-sec-ico[b-punhk77ps3] {
    font-size: 17px !important;
    width: 17px;
    height: 17px;
}

/* Contador en línea: ámbar cuando exige una decisión (descuentos pendientes), en el color de
   marca cuando sólo informa (notas crédito y pagos registrados). */
.ax-sec-count[b-punhk77ps3] {
    min-width: 16px;
    padding: 0 5px;
    border-radius: 9999px;
    background: var(--ax-warning, #c77700);
    color: var(--ax-primary-contrast, #ffffff);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.ax-sec-count.info[b-punhk77ps3] {
    background: var(--ax-primary, #5b5ce6);
}

.ax-detalle-main[b-punhk77ps3],
.ax-col-derecha[b-punhk77ps3] {
    min-height: 0;
    min-width: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-3, 12px);
}

.ax-detalle-main > .ax-panel[b-punhk77ps3],
.ax-col-derecha > .ax-panel[b-punhk77ps3] {
    /* el gap del contenedor reemplaza el margin-bottom de .ax-panel */
    margin-bottom: 0;
}

/* El primer panel de cada columna arranca pegado al borde superior. */
.ax-detalle-main > .ax-panel:first-child[b-punhk77ps3],
.ax-col-derecha > .ax-panel:first-child[b-punhk77ps3] {
    margin-top: 0;
}

.ax-table .mono[b-punhk77ps3] {
    font-family: var(--ax-font-mono, ui-monospace, Consolas, monospace);
    font-size: 12px;
}

/* Lecturas y acciones del documento —«Ver factura» y Aprobar/Regenerar/Eliminar—: pegadas al
   borde derecho de la columna de paneles, bajo el panel «Total facturado». Viven dentro de
   .ax-col-derecha. */
.ax-factura-footer-actions[b-punhk77ps3] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--ax-space-2, 8px);
    min-width: 0;
}

/* Aprobar + Regenerar viajan juntos: el grupo no se parte entre filas. */
.ax-fa-group[b-punhk77ps3] {
    display: inline-flex;
    align-items: center;
    gap: var(--ax-space-2, 8px);
    flex-wrap: nowrap;
}

/* Eliminar ocupa su propia fila, alineado a la derecha. */
.ax-fa-own-row[b-punhk77ps3] {
    flex-basis: 100%;
    display: flex;
    justify-content: flex-end;
}

/* CTA Aprobar: misma dinámica de color que la acción primaria del sitio
   (gradiente de marca 135° con --ax-primary / --ax-primary-lift y hover por
   brightness), en vez del color fijo que aportaba Color.Success de MudBlazor.
   Los tokens cambian con la paleta activa y con [data-theme="dark"], así que el
   botón sigue la dinámica del sitio sin hex propio. ::deep porque el botón es un
   componente MudBlazor (no lleva el atributo de scope). */
.ax-factura-footer-actions[b-punhk77ps3]  .ax-accion-aprobar {
    /* !important para vencer el fondo que MudBlazor aplica a sus botones Filled
       (mismo criterio que .appbar-action-primary en axioma-layout.css). */
    background: linear-gradient(135deg, var(--ax-primary, #5b5ce6), var(--ax-primary-lift, #8a6ef5)) !important;
    color: var(--ax-primary-contrast, #ffffff) !important;
    border: 1px solid var(--ax-primary, #5b5ce6);
    box-shadow: none;
    transition: filter 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.ax-factura-footer-actions[b-punhk77ps3]  .ax-accion-aprobar:hover {
    filter: brightness(.93);
    border-color: var(--ax-primary-hover, #4a4bd1);
    box-shadow: var(--ax-shadow-primary-sm, 0 2px 6px rgba(91, 92, 230, .25));
}

.ax-saldo-cell .val[b-punhk77ps3] {
    font-size: 15px;
}

/* ===== Botones de la página =====
   `Size.Small` ya es el menor que ofrece MudBlazor, así que el recorte se hace aquí: alto
   (padding + alto mínimo del rótulo), tipografía, icono y el margen del icono inicial. Se
   excluyen los botones de icono (paginación), que deben seguir cuadrados.
   ::deep porque el markup de MudBlazor no lleva el atributo de scope. */
.ax-factura-page[b-punhk77ps3]  .mud-button-root:not(.mud-icon-button) {
    min-width: 0;
    padding: 4px 10px;
    font-size: 12.5px;
}

.ax-factura-page[b-punhk77ps3]  .mud-button-root:not(.mud-icon-button) .mud-button-label {
    min-height: 17px;
}

.ax-factura-page[b-punhk77ps3]  .mud-button-root:not(.mud-icon-button) .mud-icon-root {
    font-size: 16px;
}

.ax-factura-page[b-punhk77ps3]  .mud-button-root:not(.mud-icon-button) .mud-button-icon-start {
    margin-right: 6px;
    margin-left: -3px;
}

/* ===== Paneles ===== */
.ax-panel[b-punhk77ps3] {
    background: var(--ax-bg-card, #ffffff);
    border: 1px solid var(--ax-border, #e2e5ea);
    border-radius: var(--ax-radius, 6px);
    padding: var(--ax-space-4, 16px);
    margin-bottom: var(--ax-space-4, 16px);
}

.ax-panel-header[b-punhk77ps3] {
    display: flex;
    align-items: center;
    gap: var(--ax-space-2, 8px);
    margin-bottom: var(--ax-space-3, 12px);
    padding-bottom: var(--ax-space-2, 8px);
    border-bottom: 1px solid var(--ax-border, #e2e5ea);
}

.ax-panel-ico[b-punhk77ps3] {
    color: var(--ax-primary, #3b6fe0);
}

.ax-panel-title[b-punhk77ps3] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ax-text-primary, #1d2330);
}

/* Valor dentro del título del panel (p. ej. el consumo del Detallado): se separa del rótulo
   por color y alinea los dígitos con el resto de cifras de la pantalla. */
.ax-panel-title b[b-punhk77ps3] {
    color: var(--ax-primary, #3b6fe0);
    font-variant-numeric: tabular-nums;
}

/* CÓMO se determinó el consumo (tipo de cálculo de la base: basado en lectura, promedio…):
   etiqueta tenue pegada al valor, para que el número siga siendo lo que resalta. */
.ax-consumo-tipo[b-punhk77ps3] {
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 9999px;
    background: var(--ax-surface-2, #eef1f6);
    color: var(--ax-text-muted, #8a93a2);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.ax-panel-badge[b-punhk77ps3] {
    margin-left: auto;
    font-size: 11px;
    color: var(--ax-text-muted, #8a93a2);
}

/* Lectura de cartera en el encabezado del panel Consumo: rótulo + total, a la izquierda junto al
   título; a continuación va el enlace «Ver detalle de cartera». */
.ax-panel-ant[b-punhk77ps3] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-left: auto;
    padding-left: var(--ax-space-3, 12px);
    border-left: 1px solid var(--ax-border, #e2e5ea);
}

.ax-panel-ant .k[b-punhk77ps3] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--ax-text-muted, #8a93a2);
}

.ax-panel-ant b[b-punhk77ps3] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ax-text-secondary, #5b6472);
    font-variant-numeric: tabular-nums;
}

.ax-grid-2col[b-punhk77ps3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--ax-space-4, 16px);
    align-items: start;
}

.ax-col-derecha[b-punhk77ps3] {
    min-width: 0;
}

/* Botón «Actualizar» del documento: mismo aspecto que el refresh de los listados. */
.ax-sec-refresh[b-punhk77ps3] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius);
    color: var(--ax-text-secondary);
}

.ax-sec-refresh:hover[b-punhk77ps3] {
    color: var(--ax-primary);
    background: var(--ax-primary-50);
    border-color: var(--ax-primary-100);
}

/* Identidad del documento —factura, estado y período— como bloque del riel, separado por cabello. */
.ax-sec-identidad[b-punhk77ps3] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    min-width: 0;
    padding-left: 18px;
    border-left: 1px solid var(--ax-alpha-line, rgba(23, 32, 51, .09));
}

.ax-sec-identidad .ax-doc-line1[b-punhk77ps3] {
    flex: 0 1 auto;
}

.ax-sec-identidad .ax-doc-right[b-punhk77ps3] {
    align-items: flex-start;
    gap: 2px;
}

/* ===== Chips ===== */
.ax-chip[b-punhk77ps3] {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.ax-chip-info[b-punhk77ps3] { background: var(--ax-info-soft, #e8effc); color: var(--ax-info, #2f6fed); }
.ax-chip-success[b-punhk77ps3] { background: var(--ax-success-soft, #e5f6ec); color: var(--ax-success, #1f9d55); }
.ax-chip-warn[b-punhk77ps3] { background: var(--ax-warning-soft, #fdf3e0); color: var(--ax-warning, #c77700); }
.ax-chip-error[b-punhk77ps3] { background: var(--ax-error-soft, #fdeaea); color: var(--ax-error, #d64545); }
.ax-chip-neutral[b-punhk77ps3] { background: var(--ax-gray-100, #eef0f3); color: var(--ax-text-secondary, #5b6472); }

/* ===== Tablas ===== */
.ax-table-wrap[b-punhk77ps3] {
    overflow-x: auto;
    border: 1px solid var(--ax-border, #e2e5ea);
    border-radius: var(--ax-radius, 6px);
}

.ax-table[b-punhk77ps3] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    min-width: 860px;
}

.ax-table th[b-punhk77ps3] {
    background: var(--ax-bg-panel, #f7f8fa);
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--ax-text-secondary, #5b6472);
    padding: 7px 10px;
    border-bottom: 1px solid var(--ax-border, #e2e5ea);
    white-space: nowrap;
}

.ax-table td[b-punhk77ps3] {
    padding: 7px 10px;
    border-bottom: 1px solid var(--ax-border-light, #eef0f3);
    vertical-align: middle;
}

.ax-table tr:last-child td[b-punhk77ps3] {
    border-bottom: none;
}

.ax-table th.r[b-punhk77ps3], .ax-table td.r[b-punhk77ps3] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ax-table th.c[b-punhk77ps3], .ax-table td.c[b-punhk77ps3] {
    text-align: center;
}

.ax-table td.saldo[b-punhk77ps3] {
    color: var(--ax-text-secondary, #5b6472);
    font-weight: 600;
}

.ax-concepto[b-punhk77ps3] {
    font-weight: 600;
    color: var(--ax-text-primary, #1d2330);
}

.ax-concepto-desc[b-punhk77ps3] {
    color: var(--ax-text-muted, #8a93a2);
    font-size: 11px;
}

/* Enlace de la línea de un cobro (evento facturable) a su formulario en el workspace. */
.ax-link-cobro[b-punhk77ps3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ax-primary, #3b7dbd);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.ax-link-cobro:hover[b-punhk77ps3] {
    color: var(--ax-primary-hover, #2f6aa3);
    text-decoration: underline;
}

.ax-link-cobro-ico[b-punhk77ps3] {
    font-size: 13px !important;
    width: 13px;
    height: 13px;
}

.ax-acciones[b-punhk77ps3] {
    white-space: nowrap;
}

.ax-acciones .mud-button-root[b-punhk77ps3] {
    margin: 0 2px;
}

/* ===== Acciones de panel y formularios inline ===== */
.ax-acciones-panel[b-punhk77ps3] {
    margin-top: var(--ax-space-3, 12px);
}

.ax-inline-form[b-punhk77ps3] {
    border: 1px solid var(--ax-primary, #3b6fe0);
    border-radius: var(--ax-radius, 6px);
    padding: var(--ax-space-4, 16px);
    margin-top: var(--ax-space-3, 12px);
    background: var(--ax-primary-50, #f7faff);
}

.ax-form-grid-2[b-punhk77ps3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ax-space-3, 12px);
}

.ax-form-grid-3[b-punhk77ps3] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--ax-space-3, 12px);
    align-items: end;
}

.ax-form-actions[b-punhk77ps3] {
    display: flex;
    justify-content: flex-end;
    gap: var(--ax-space-2, 8px);
    margin-top: var(--ax-space-3, 12px);
}

.ax-hint[b-punhk77ps3] {
    display: block;
    margin-top: var(--ax-space-2, 8px);
    color: var(--ax-text-muted, #8a93a2);
}

.ax-nc-neto[b-punhk77ps3] {
    border: 1px dashed var(--ax-border-strong, #c9ced6);
    border-radius: var(--ax-radius, 6px);
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
}

.ax-nc-neto .lbl[b-punhk77ps3] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ax-text-muted, #8a93a2);
}

.ax-nc-neto .val[b-punhk77ps3] {
    font-weight: 800;
    font-size: 14px;
    color: var(--ax-primary, #3b6fe0);
    font-variant-numeric: tabular-nums;
}

/* ===== Totales ===== */
.ax-totales[b-punhk77ps3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ax-total-item[b-punhk77ps3] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 5px 2px;
    border-bottom: 1px dashed var(--ax-border, #e2e5ea);
    color: var(--ax-text-primary, #1d2330);
    font-variant-numeric: tabular-nums;
}

.ax-total-item span:last-child[b-punhk77ps3] {
    font-weight: 600;
}

/* Fila de un control (p. ej. «Ver detalle de cartera»): se alinea a la derecha. */
.ax-total-item.ax-total-item-action[b-punhk77ps3] {
    justify-content: flex-end;
}

.ax-total-item.saldo span:last-child[b-punhk77ps3] {
    color: var(--ax-text-secondary, #5b6472);
    font-weight: 800;
    font-size: 14px;
}

.ax-total-item.gran-total[b-punhk77ps3] {
    border-bottom: none;
    /* 4px menos que los 16px anteriores: el rótulo «Total pendiente» ya carga el peso por sí solo. */
    font-size: 12px;
    font-weight: 800;
    margin-top: 4px;
}

.ax-total-item.gran-total span:last-child[b-punhk77ps3] {
    color: var(--ax-primary, #3b6fe0);
    font-size: 14px;
}

/* Alerta de abono: queda saldo por cobrar de lo ya facturado (pendiente < facturado). El importe
   se pinta en el ámbar más intenso para señalar que la factura no está saldada. */
.ax-total-item.gran-total.ax-total-alerta span:last-child[b-punhk77ps3] {
    color: var(--ax-warning-hover, #a06f1c);
}

/* Acceso al «Duplicado con saldos» en la columna derecha: solo se dibuja cuando queda deuda de lo
   facturado, y en el mismo ámbar del total pendiente. ::deep porque el botón es un componente
   MudBlazor (no lleva el atributo de scope). */
.ax-col-derecha[b-punhk77ps3]  .ax-btn-duplicado {
    color: var(--ax-warning-hover, #a06f1c) !important;
    border-color: var(--ax-warning, #c48a25) !important;
    font-weight: 700;
}

.ax-col-derecha[b-punhk77ps3]  .ax-btn-duplicado .mud-icon-root {
    color: inherit;
}

.ax-col-derecha[b-punhk77ps3]  .ax-btn-duplicado:hover {
    border-color: var(--ax-warning-hover, #a06f1c) !important;
}

/* ===== Responsive (secundario: desktop-first) ===== */
@media (max-width: 1200px) {
    /* Desktop-first: en pantallas menores la página vuelve a fluir con scroll. */
    .ax-factura-page[b-punhk77ps3] {
        height: auto;
        overflow: visible;
    }

    .ax-doc-cell[b-punhk77ps3] {
        /* Ya llena su celda (regla base); aquí solo se suelta el mínimo de 128px. */
        min-width: 0;
    }

    /* El encabezado pasa a una sola columna junto con el detalle. */
    .ax-sec-tabs[b-punhk77ps3] {
        grid-template-columns: 1fr;
    }

    .ax-factura-detalle[b-punhk77ps3] {
        grid-template-columns: 1fr;
        flex: 0 0 auto;
    }

    /* El riel sigue en UNA sola fila; si no cabe, se desplaza en horizontal. */
    .ax-sec-tab[b-punhk77ps3] {
        flex: 0 0 auto;
        padding: 6px 10px;
    }

    .ax-detalle-main[b-punhk77ps3],
    .ax-col-derecha[b-punhk77ps3] {
        overflow: visible;
    }
}

@media (max-width: 640px) {
    .ax-form-grid-2[b-punhk77ps3],
    .ax-form-grid-3[b-punhk77ps3] {
        grid-template-columns: 1fr;
    }
}

/* Desglose de pagos por línea (fila expandible) */
.ax-pago-toggle-col[b-punhk77ps3] {
    width: 40px;
}

.ax-pago-detalle-cell[b-punhk77ps3] {
    background: var(--ax-surface-sunken, rgba(0, 0, 0, 0.03));
    padding: var(--ax-space-3, 12px) var(--ax-space-4, 16px) !important;
}

.ax-pago-detalle-wrap[b-punhk77ps3] {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-2, 8px);
}

.ax-pago-detalle-title[b-punhk77ps3] {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
}

.ax-pago-detalle-table[b-punhk77ps3] {
    margin: 0;
}

/* ===== Agrupación de líneas por servicio =====
   El rótulo del servicio va con el color primario del sitio: es la cabecera de grupo del
   Detalle y el ancla visual de cada bloque. */
.ax-table tr.ax-grupo-servicio td[b-punhk77ps3] {
    background: var(--ax-bg-panel, #f7f8fa);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--ax-primary, #3b6fe0);
    border-bottom: 1px solid var(--ax-border, #e2e5ea);
}

.ax-grupo-count[b-punhk77ps3] {
    margin-left: 6px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ax-text-muted, #8a93a2);
}

.ax-table tr.ax-grupo-subtotal td[b-punhk77ps3] {
    background: var(--ax-surface-sunken, rgba(0, 0, 0, 0.03));
    font-weight: 700;
    border-top: 1px solid var(--ax-border-light, #eef0f3);
}
/* /Pages/Facturas/NuevaFactura.razor.rz.scp.css */
/* NuevaFactura.razor.css — panel «Facturas generadas» del Individual.
   Consume tokens de axioma-tokens.css (var(--ax-*)); no duplica globales. */

/* Lista compacta del historial: encabezado + filas en tres columnas
   (n.º de factura · total facturado · estado), legible en el panel estrecho. */
.nf-facturas[b-0dgrtnoeaz] {
  display: flex;
  flex-direction: column;
}

.nf-facturas-head[b-0dgrtnoeaz],
.nf-facturas-row[b-0dgrtnoeaz] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ax-space-3, 12px);
  padding: var(--ax-space-2, 8px) var(--ax-space-1, 4px);
}

.nf-facturas-head[b-0dgrtnoeaz] {
  font-size: var(--ax-font-size-2xs, 0.625rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ax-text-secondary);
  border-bottom: 1px solid var(--ax-border);
}

.nf-facturas-row[b-0dgrtnoeaz] {
  cursor: pointer;
  border-bottom: 1px solid var(--ax-border-subtle, var(--ax-border));
}

.nf-facturas-row:hover[b-0dgrtnoeaz] {
  background: var(--ax-primary-50);
}

.nf-factura-num[b-0dgrtnoeaz],
.nf-factura-total[b-0dgrtnoeaz] {
  font-variant-numeric: tabular-nums;
}

.nf-right[b-0dgrtnoeaz] {
  text-align: right;
}
/* /Pages/Facturas/PreFacturacion.razor.rz.scp.css */
/* PreFacturacion.razor.css — ajustes de presentación de la pantalla.
   Consume tokens de axioma-tokens.css (var(--ax-*)); no duplica globales. */

/* Los tabs de MudBlazor heredan text-transform: uppercase; en esta pantalla se leen con
   mayúscula inicial, tal como están escritos. */
[b-ayqjmjyu87] .mud-tab {
    text-transform: none;
}

/* ===== Ancho del contenido de las pestañas =====
   Las tres pestañas deben compartir el MISMO ancho de contenido. La pestaña «Individual» embebe un
   formulario (.form-grid) que, por la regla global `.page-root:has(.form-grid)`, centraría su
   page-root a 1180px; al alternar de pestaña el contenido cambiaba de ancho. Esta pantalla no es un
   formulario de página completa: el page-root conserva el ancho disponible, y los page-root de los
   componentes embebidos (Individual, Generada) no vuelven a acotar ni a sumar padding horizontal,
   para que su contenido arranque en el mismo borde que el de «Grupal». */
.page-root.pf-facturacion[b-ayqjmjyu87] {
    max-width: none !important;
    margin-inline: 0 !important;
}

[b-ayqjmjyu87] .page-root {
    max-width: none;
    margin-inline: 0;
    padding-left: 0;
    padding-right: 0;
}

/* ===== Pestaña «Generada» =====
   Aloja el listado de facturas emitidas: mismo apilado que la pestaña «Grupal» —barra de
   trabajo, aviso opcional y tabla— con separación uniforme y ancho completo. */
.pf-generada[b-ayqjmjyu87] {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-2, 8px);
    width: 100%;
}

/* El MudSelect ocupa el 100% por defecto: los filtros del listado se acotan para que no
   atraviesen toda la fila. */
.pf-ruta-filter[b-ayqjmjyu87] {
    width: 300px;
}

/* Filtros «según la crítica» (panel Crítica): tipo de hallazgo y gravedad. */
.pf-critica-filter[b-ayqjmjyu87] {
    width: 230px;
}

.pf-gravedad-filter[b-ayqjmjyu87] {
    width: 170px;
}

/* Botón «Actualizar» del período: mismo tratamiento que el refresco de la lista de facturas
   (icono compacto con aro), alineado al lado derecho de la fila de trabajo. */
[b-ayqjmjyu87] .pf-refresh {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin-left: 8px;
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius);
    color: var(--ax-text-secondary);
}

[b-ayqjmjyu87] .pf-refresh:hover {
    color: var(--ax-primary);
    background: var(--ax-primary-50);
    border-color: var(--ax-primary-100);
}

/* Layout del período: la estadística ocupa el 25% del ancho como panel lateral y la crítica
   de lecturas el resto. En contexto estrecho (≤960px) se apilan. */
.pf-panels[b-ayqjmjyu87] {
    display: flex;
    align-items: flex-start;
    gap: var(--ax-space-4, 16px);
    margin-top: var(--ax-space-3, 12px);
}

.pf-panel-stats[b-ayqjmjyu87] {
    flex: 0 0 25%;
    max-width: 25%;
    min-width: 0;
}

.pf-panel-critica[b-ayqjmjyu87] {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 960px) {
    .pf-panels[b-ayqjmjyu87] {
        flex-direction: column;
    }

    .pf-panel-stats[b-ayqjmjyu87] {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }
}

/* ===== Estadísticas del período: el embudo de la pre-facturación =====
   La estadística vive en su propio panel lateral (25%), así que cada renglón se apila en
   vertical: etiqueta + cifra arriba y barra de proporción debajo. Los tokens gobiernan el
   color; nada de hex propio. */

/* Solapas por naturaleza de medición. El .ax-seg del tema es inline-flex y no cabe en el
   panel lateral del 25 %; aquí es una grilla de tres celdas iguales a ancho completo. */
.pf-stats-seg[b-ayqjmjyu87] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    margin-bottom: var(--ax-space-3, 12px);
}

.pf-stats-seg .ax-seg-btn[b-ayqjmjyu87] {
    padding: 6px;
    font-size: var(--ax-font-size-xs, 11px);
    line-height: 1.2;
    white-space: normal;
    text-align: center;
}

.pf-stats[b-ayqjmjyu87] {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-3, 12px);
}

.pf-stats-filas[b-ayqjmjyu87] {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-2, 8px);
}

.pf-stat-fila[b-ayqjmjyu87] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: var(--ax-radius, 6px);
    font-family: var(--ax-font-family, inherit);
    font-size: var(--ax-font-size-sm, 12px);
    color: var(--ax-text-secondary, #45505e);
}

.pf-stat-linea[b-ayqjmjyu87] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ax-space-2, 8px);
}

.pf-stat-nombre[b-ayqjmjyu87] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-stat-barra[b-ayqjmjyu87] {
    display: block;
    height: 9px;
    border-radius: 3px;
    background: var(--ax-border-light, #eef2f6);
    overflow: hidden;
}

.pf-stat-barra i[b-ayqjmjyu87] {
    display: block;
    height: 100%;
    background: var(--pf-stat-tono, var(--ax-primary, #5b5ce6));
}

.pf-stat-cifra[b-ayqjmjyu87] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--ax-font-mono, ui-monospace, Consolas, monospace);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pf-stat-cifra b[b-ayqjmjyu87] {
    color: var(--ax-text-primary, #172033);
}

.pf-stat-cifra small[b-ayqjmjyu87] {
    color: var(--ax-text-muted, #556275);
}

.pf-stat--activas[b-ayqjmjyu87]   { --pf-stat-tono: var(--ax-primary, #5b5ce6); }
.pf-stat--generadas[b-ayqjmjyu87] { --pf-stat-tono: var(--ax-info, #5b5ce6); }
.pf-stat--aprobadas[b-ayqjmjyu87]  { --pf-stat-tono: var(--ax-success, #14845f); }

.pf-stats-nota[b-ayqjmjyu87] {
    margin: 0;
    font-size: var(--ax-font-size-xs, 11px);
    color: var(--ax-text-muted, #556275);
    font-variant-numeric: tabular-nums;
}

/* CTA Aprobar: mismo gradiente de marca que el CTA del formulario de factura (los tokens del
   sitio gobiernan el fondo; !important vence el fondo que MudBlazor aplica a sus Filled).
   ::deep porque el botón es un componente MudBlazor (no lleva el atributo de scope). */
[b-ayqjmjyu87] .pf-accion-aprobar {
    background: linear-gradient(135deg, var(--ax-primary, #5b5ce6), var(--ax-primary-lift, #8a6ef5)) !important;
    color: var(--ax-primary-contrast, #ffffff) !important;
    border: 1px solid var(--ax-primary, #5b5ce6);
    box-shadow: none;
    transition: filter 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

[b-ayqjmjyu87] .pf-accion-aprobar:hover {
    filter: brightness(.93);
    border-color: var(--ax-primary-hover, #4a4bd1);
    box-shadow: var(--ax-shadow-primary-sm, 0 2px 6px rgba(91, 92, 230, .25));
}

/* Estado de carga de la aprobación del período: barra con % de avance bajo la barra de acciones. */
.pf-carga[b-ayqjmjyu87] {
    display: flex;
    align-items: center;
    gap: var(--ax-space-3, 12px);
    margin-top: var(--ax-space-2x5, 10px);
    padding: var(--ax-space-2) var(--ax-space-3, 12px);
    border: 1px solid var(--ax-border-light, #eef2f6);
    border-radius: var(--ax-radius-sm, 4px);
    background: var(--ax-surface-2, #f1f5f9);
}

.pf-carga-txt[b-ayqjmjyu87] {
    font-size: var(--ax-font-size-sm, 12px);
    color: var(--ax-text-secondary, #45505e);
    white-space: nowrap;
}

.pf-carga-barra[b-ayqjmjyu87] {
    flex: 1;
    min-width: 120px;
}

.pf-carga-pct[b-ayqjmjyu87] {
    min-width: 40px;
    text-align: right;
    font-size: var(--ax-font-size-sm, 12px);
    font-weight: 700;
    color: var(--ax-primary, #5b5ce6);
    font-variant-numeric: tabular-nums;
}
/* /Pages/Gestion/FormularioConceptoEconomico.razor.rz.scp.css */
/* =========================================================
   Formulario de Concepto Económico (Guiada) — estilos scoped.
   El grid lo gobierna .form-grid del tema (3 tracks iguales).
   Aquí solo vive el vocabulario específico: el panel de
   "Conceptos del Servicio" (columnas por categoría) que replica
   el patrón del panel "Tarifas del Servicio" del formulario de
   tarifas.
   ========================================================= */

/* ---- Columnas horizontales por categoría (patrón Tarifas del Servicio) ---- */

.concepto-cols[b-o91p9t3845] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-space-4);
  align-items: flex-start;
}

.concepto-col[b-o91p9t3845] {
  flex: 1 1 0;
  min-width: 220px;
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius);
  background: var(--ax-bg-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.concepto-col-header[b-o91p9t3845] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--ax-gray-50);
  border-bottom: 1px solid var(--ax-alpha-line);
}

.concepto-col-icon[b-o91p9t3845] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--ax-gray-100);
  color: var(--ax-gray-600);
  flex-shrink: 0;
}

.concepto-col-label[b-o91p9t3845] {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ax-gray-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.concepto-col-badge[b-o91p9t3845] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: auto;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--ax-white);
  background: var(--ax-gray-400);
  border-radius: 9px;
  line-height: 1;
}

.concepto-col-list[b-o91p9t3845] {
  display: flex;
  flex-direction: column;
  padding: 6px;
}

.concepto-item[b-o91p9t3845] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 6px;
  transition: background 0.12s ease;
  margin: 1px 0;
}

.concepto-item + .concepto-item[b-o91p9t3845] {
  border-top: 1px solid var(--ax-alpha-line);
}

.concepto-item:hover[b-o91p9t3845] {
  background: var(--ax-gray-50);
}

.concepto-item-top[b-o91p9t3845] {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.concepto-item-name[b-o91p9t3845] {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ax-gray-800);
  line-height: 1.3;
}

.concepto-item-chip[b-o91p9t3845] {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.concepto-item-chip-codigo[b-o91p9t3845] {
  background: var(--ax-gray-100);
  color: var(--ax-gray-600);
  border: 1px solid var(--ax-gray-200);
}

.concepto-item-meta[b-o91p9t3845] {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 0.6875rem;
  color: var(--ax-gray-500);
}

.concepto-meta-estado[b-o91p9t3845] {
  font-weight: 600;
}

.concepto-meta-estado.estado-activo[b-o91p9t3845] {
  color: var(--ax-success);
}

.concepto-meta-estado.estado-inactivo[b-o91p9t3845] {
  color: var(--ax-text-muted);
}
/* /Pages/Gestion/FormularioTarifa.razor.rz.scp.css */
/* =========================================================
   Formulario de Tarifa (Estrategia Guiada) — estilos scoped.
   El grid lo gobierna .form-grid del tema (3 tracks iguales
   topados a 368px). Aquí solo vive el vocabulario específico:
   árbol de tarifas y la alerta de concepto existente. El
   selector de método de cálculo usa .ax-seg del tema
   (elección ternaria, §7.3.1).
   ========================================================= */

/* =========================================================
   ALERTA DE CONCEPTO — usa tokens AXIOMA (sin !important,
   sin colores hardcodeados). El fondo/border translúcido se
   logra con color-mix sobre el token semántico de estado.
   ========================================================= */
.concepto-info-alert[b-vdmtbn4d44] {
  background: color-mix(in srgb, var(--ax-info) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ax-info) 20%, transparent);
}

/* =========================================================
   TARIFAS DEL SERVICIO — columnas horizontales por categoría
   de concepto económico. Se apilan en el eje X para aprovechar
   el ancho de pantalla y evitar el scroll vertical; en pantallas
   angostas cada tarifa ocupa el ancho completo (una por fila).
   ========================================================= */

.tarifa-cols[b-vdmtbn4d44] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-space-4);
  align-items: flex-start;
}

/* ---- Columna de categoría ---- */

.tarifa-col[b-vdmtbn4d44] {
  flex: 1 1 0;
  min-width: 220px;
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius);
  background: var(--ax-bg-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tarifa-col-header[b-vdmtbn4d44] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--ax-gray-50);
  border-bottom: 1px solid var(--ax-alpha-line);
}

.tarifa-col-icon[b-vdmtbn4d44] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--ax-gray-100);
  color: var(--ax-gray-600);
  flex-shrink: 0;
}

.tarifa-col-label[b-vdmtbn4d44] {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ax-gray-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tarifa-col-badge[b-vdmtbn4d44] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: auto;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--ax-white);
  background: var(--ax-gray-400);
  border-radius: 9px;
  line-height: 1;
}

/* ---- Lista de tarifas dentro de la categoría ---- */

.tarifa-col-list[b-vdmtbn4d44] {
  display: flex;
  flex-direction: column;
  padding: 6px;
}

.tarifa-item[b-vdmtbn4d44] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 6px;
  transition: background 0.12s ease;
  margin: 1px 0;
}

.tarifa-item + .tarifa-item[b-vdmtbn4d44] {
  border-top: 1px solid var(--ax-alpha-line);
}

.tarifa-item:hover[b-vdmtbn4d44] {
  background: var(--ax-gray-50);
}

/* ---- Fila superior: nombre + chip de tipo ---- */

.tarifa-item-top[b-vdmtbn4d44] {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.tarifa-item-name[b-vdmtbn4d44] {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ax-gray-800);
  line-height: 1.3;
}

.tarifa-item-chip[b-vdmtbn4d44] {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.tarifa-item-chip-tipo[b-vdmtbn4d44] {
  background: var(--ax-gray-100);
  color: var(--ax-gray-600);
  border: 1px solid var(--ax-gray-200);
}

/* ---- Fila de metadatos ---- */

.tarifa-item-meta[b-vdmtbn4d44] {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 0.6875rem;
  color: var(--ax-gray-500);
}

.tarifa-meta-valor[b-vdmtbn4d44] {
  font-weight: 600;
  color: var(--ax-gray-600);
}

.tarifa-meta-sep[b-vdmtbn4d44] {
  color: var(--ax-gray-300);
}

.tarifa-meta-periodo[b-vdmtbn4d44] {
  color: var(--ax-gray-500);
}

.tarifa-meta-estado[b-vdmtbn4d44] {
  font-weight: 600;
}

.tarifa-meta-estado.estado-produccion[b-vdmtbn4d44] {
  color: var(--ax-success);
}

.tarifa-meta-estado.estado-simulacion[b-vdmtbn4d44] {
  color: var(--ax-warning);
}
/* /Pages/Gestion/ListaConceptos.razor.rz.scp.css */
/* =========================================================
   Directorio de Conceptos de Cargo (Explorer) — estilos scoped.
   Solo lo propio de la página; el shell master-detail y la
   lista de celdas viven en axioma-layout.css (Explorer).
   El vocabulario del detalle (identity, detail-*, ax-stat,
   card/info) se hereda de los directorios hermanos.
   ========================================================= */

.directory-page[b-rjxci2gflf] {
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-3);
}

/* ===== Panel lateral (PanelContent del Explorer) ===== */

.detail-empty[b-rjxci2gflf] {
  flex: 1;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
}

.detail-empty-icon[b-rjxci2gflf] {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ax-primary-50);
  color: var(--ax-primary);
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}

.detail-empty-title[b-rjxci2gflf] {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.detail-empty-sub[b-rjxci2gflf] {
  font-size: var(--ax-font-size-base); /* 13px */
  color: var(--muted);
  max-width: 240px;
  line-height: 1.5;
}

.identity[b-rjxci2gflf] {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.identity-left[b-rjxci2gflf] {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.identity-actions[b-rjxci2gflf] {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Ancho estrecho (≤960px): las acciones bajan a una fila debajo de la
   identidad para no solaparse con .identity-left. */
@media (max-width: 960px) {
  .identity[b-rjxci2gflf] {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .identity-actions[b-rjxci2gflf] {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.identity-avatar[b-rjxci2gflf] {
  width: 55px;
  height: 55px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: var(--ax-font-size-xl);
  font-weight: 700;
  flex-shrink: 0;
  background: var(--ax-primary-100);
  color: var(--ax-primary);
}

.identity h3[b-rjxci2gflf] {
  font: 700 var(--ax-font-size-3xl) var(--ax-font-display);
  margin: 0 0 4px;
  color: var(--ink);
}

.identity p[b-rjxci2gflf] {
  margin: 2px 0 0;
  color: var(--ax-text-secondary);
  font-size: var(--ax-font-size-xs);
  font-weight: 500;
}

.identity .ax-chip[b-rjxci2gflf] {
  margin-top: 8px;
}

.detail-body[b-rjxci2gflf] {
  flex: 1;
  min-height: 0;
  padding: 18px 20px;
  overflow-y: auto;
}

.detail-grid[b-rjxci2gflf] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.card[b-rjxci2gflf] {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--ax-bg-card);
}

.card-full[b-rjxci2gflf] {
  grid-column: 1 / -1;
}

.card h3[b-rjxci2gflf] {
  font-size: var(--ax-font-size-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ax-letter-spacing-widest);
  margin: 0 0 10px;
  color: var(--ax-text-muted);
}

.info[b-rjxci2gflf] {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 7px 0;
  font-size: var(--ax-font-size-base); /* 13px */
  line-height: 1.35;
  gap: 12px;
}

.info:last-child[b-rjxci2gflf] {
  border-bottom: 0;
}

.info span[b-rjxci2gflf] {
  color: var(--ax-gray-700);
  flex-shrink: 0;
  font-size: 12px;
}

.info b[b-rjxci2gflf] {
  text-align: right;
  color: var(--ink);
  word-break: break-word;
}
/* /Pages/Gestion/ListaTarifas.razor.rz.scp.css */
/* =========================================================
   Directorio de Tarifas (Explorer) — estilos scoped.
   Solo lo propio de la página; el shell master-detail y la
   lista de celdas viven en axioma-layout.css (Explorer).
   El vocabulario del detalle (identity, detail-*, ax-stat,
   card/info) se hereda de los directorios hermanos.
   ========================================================= */

.directory-page[b-e9w2tmydj5] {
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-3);
}

/* ===== Panel lateral (PanelContent del Explorer) ===== */

.detail-empty[b-e9w2tmydj5] {
  flex: 1;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
}

.detail-empty-icon[b-e9w2tmydj5] {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ax-primary-50);
  color: var(--ax-primary);
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}

.detail-empty-title[b-e9w2tmydj5] {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.detail-empty-sub[b-e9w2tmydj5] {
  font-size: var(--ax-font-size-base); /* 13px */
  color: var(--muted);
  max-width: 240px;
  line-height: 1.5;
}

.identity[b-e9w2tmydj5] {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.identity-left[b-e9w2tmydj5] {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.identity-actions[b-e9w2tmydj5] {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Ancho estrecho (≤960px): las acciones bajan a una fila debajo de la
   identidad para no solaparse con .identity-left. */
@media (max-width: 960px) {
  .identity[b-e9w2tmydj5] {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .identity-actions[b-e9w2tmydj5] {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.identity-avatar[b-e9w2tmydj5] {
  width: 55px;
  height: 55px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: var(--ax-font-size-xl);
  font-weight: 700;
  flex-shrink: 0;
  background: var(--ax-primary-100);
  color: var(--ax-primary);
}

.identity h3[b-e9w2tmydj5] {
  font: 700 var(--ax-font-size-3xl) var(--ax-font-display);
  margin: 0 0 4px;
  color: var(--ink);
}

.identity p[b-e9w2tmydj5] {
  margin: 2px 0 0;
  color: var(--ax-text-secondary);
  font-size: var(--ax-font-size-xs);
  font-weight: 500;
}

.identity .ax-chip[b-e9w2tmydj5] {
  margin-top: 8px;
}

.detail-body[b-e9w2tmydj5] {
  flex: 1;
  min-height: 0;
  padding: 18px 20px;
  overflow-y: auto;
}

.detail-grid[b-e9w2tmydj5] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.card[b-e9w2tmydj5] {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--ax-bg-card);
}

.card-full[b-e9w2tmydj5] {
  grid-column: 1 / -1;
}

.card h3[b-e9w2tmydj5] {
  font-size: var(--ax-font-size-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ax-letter-spacing-widest);
  margin: 0 0 10px;
  color: var(--ax-text-muted);
}

.info[b-e9w2tmydj5] {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 7px 0;
  font-size: var(--ax-font-size-base); /* 13px */
  line-height: 1.35;
  gap: 12px;
}

.info:last-child[b-e9w2tmydj5] {
  border-bottom: 0;
}

.info span[b-e9w2tmydj5] {
  color: var(--ax-gray-700);
  flex-shrink: 0;
  font-size: 12px;
}

.info b[b-e9w2tmydj5] {
  text-align: right;
  color: var(--ink);
  word-break: break-word;
}

/* Estado en la stat-card del resumen */
.ax-stat-val.ok[b-e9w2tmydj5] {
  color: var(--ax-success-text);
}

.ax-stat-val.off[b-e9w2tmydj5] {
  color: var(--ax-text-muted);
}
/* /Pages/Offline/AnilloProgreso.razor.rz.scp.css */
.anillo-progreso[b-qmjohs8fj5] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.anillo[b-qmjohs8fj5] {
    --p: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex: 0 0 auto;
    position: relative;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--ax-primary) calc(var(--p) * 1%), var(--ax-gray-100) 0);
}

.anillo[b-qmjohs8fj5]::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--ax-surface);
}

.anillo span[b-qmjohs8fj5] {
    position: relative;
    font-size: 13px;
    font-weight: 800;
    color: var(--ax-text-primary);
    font-variant-numeric: tabular-nums;
}

.anillo-meta[b-qmjohs8fj5] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.anillo-etiqueta[b-qmjohs8fj5] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ax-text-muted);
}

.anillo-conteo[b-qmjohs8fj5] {
    font-size: 12px;
    color: var(--ax-text-secondary);
    font-variant-numeric: tabular-nums;
}

.anillo-conteo b[b-qmjohs8fj5] {
    font-size: 16px;
    font-weight: 800;
    color: var(--ax-primary);
}

.anillo-faltan[b-qmjohs8fj5] {
    font-size: 12px;
    font-weight: 600;
    color: var(--ax-text-muted);
}

.compacto .anillo[b-qmjohs8fj5] {
    width: 42px;
    height: 42px;
}

.compacto .anillo[b-qmjohs8fj5]::before { inset: 5px; }

.compacto .anillo span[b-qmjohs8fj5] { font-size: 11px; }
/* /Pages/Offline/LecturaCapturePanel.razor.rz.scp.css */
.capture-view[b-wkr1lvx85o] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 140px);
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
}

/* Header: siempre visible. El AppBar es fixed y ocupa la franja superior, así que la
   cabecera sticky se ancla DEBAJO de él (top: 0 la dejaba tapada por el AppBar). */
.capture-header[b-wkr1lvx85o] {
    background: var(--ax-surface);
    border-bottom: 1px solid var(--ax-border);
    padding: 10px 16px 12px;
    position: sticky;
    top: var(--ax-appbar-height);
    z-index: 10;
}

.capture-top-row[b-wkr1lvx85o] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.back-button[b-wkr1lvx85o] {
    width: 40px;
    height: 40px;
    border-radius: var(--ax-radius);
    border: 1px solid var(--ax-border);
    background: var(--ax-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ax-text-secondary);
    flex-shrink: 0;
    cursor: pointer;
}

.capture-titles[b-wkr1lvx85o] { min-width: 0; }

.capture-title[b-wkr1lvx85o] {
    font-size: 15px;
    font-weight: 700;
    color: var(--ax-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.capture-subtitle[b-wkr1lvx85o] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--ax-text-muted);
    margin-top: 1px;
    min-width: 0;
}

.capture-subtitle span[b-wkr1lvx85o] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.capture-subtitle[b-wkr1lvx85o]  .mud-icon-root { width: 13px; height: 13px; }

/* Anillo de avance de la ruta en captura: se ancla a la derecha de la cabecera. */
.capture-progress[b-wkr1lvx85o] {
    margin-left: auto;
    flex-shrink: 0;
}

.meter-tabs[b-wkr1lvx85o] {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.meter-tab[b-wkr1lvx85o] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 0;
    border-radius: var(--ax-radius);
    border: 1px solid var(--ax-border);
    background: var(--ax-surface);
    font-size: 12px;
    font-weight: 700;
    color: var(--ax-text-secondary);
    cursor: pointer;
}

.meter-tab[b-wkr1lvx85o]  .tab-check { display: none; }
.meter-tab[b-wkr1lvx85o]  .tab-check { width: 14px; height: 14px; }
.meter-tab.active[b-wkr1lvx85o] { border-color: var(--ax-primary); color: var(--ax-primary); background: var(--ax-primary-50); }
.meter-tab.active[b-wkr1lvx85o]  .tab-check { display: inline-flex; }

/* Scroll */
.capture-scroll[b-wkr1lvx85o] {
    flex: 1;
    padding: 14px 16px 20px;
}

/* GPS */
.gps-chip[b-wkr1lvx85o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 11px;
    border-radius: var(--ax-radius-full);
    background: var(--ax-gray-100);
    color: var(--ax-text-secondary);
    margin-bottom: 14px;
}

.gps-chip.ok[b-wkr1lvx85o] { background: var(--ax-success-100); color: var(--ax-success); }
.gps-chip.off[b-wkr1lvx85o] { background: var(--ax-gray-100); color: var(--ax-text-muted); }

.gps-retry[b-wkr1lvx85o] {
    font-size: 11px;
    font-weight: 700;
    color: var(--ax-primary);
    text-decoration: underline;
    padding: 2px 4px;
    margin-left: 4px;
    cursor: pointer;
}

/* Hero de lectura */
.reading-hero[b-wkr1lvx85o] {
    background: var(--ax-surface);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-md);
    padding: 16px;
    box-shadow: var(--ax-shadow-sm);
    margin-bottom: 6px;
}

.reading-label[b-wkr1lvx85o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ax-text-muted);
    margin-bottom: 8px;
}

.reading-hero[b-wkr1lvx85o]  .mud-input-control { margin: 0; }

/* Display de lectura: estilo display de medidor (se alimenta del keypad) */
.reading-display[b-wkr1lvx85o] {
    flex: 1.4 1 0;
    min-width: 0;
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ax-gray-50);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius);
    font-size: 48px;
    font-weight: 800;
    color: var(--ax-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    padding: 10px 8px;
}

.reading-display.empty[b-wkr1lvx85o] {
    color: var(--ax-text-muted);
    font-weight: 600;
    font-size: 32px;
    letter-spacing: 0;
}

.reading-error[b-wkr1lvx85o] {
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--ax-error);
}

/* Aviso de novedad por lectura menor a la anterior (estado Menor) */
.reading-warning[b-wkr1lvx85o] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: var(--ax-radius);
    background: var(--ax-warning-100);
    border: 1px solid var(--ax-warning);
    color: var(--ax-warning);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.reading-warning[b-wkr1lvx85o]  .mud-icon-root { width: 15px; height: 15px; flex-shrink: 0; }

/* Keypad numérico: teclas grandes para operación de campo (guantes, una mano) */
.keypad[b-wkr1lvx85o] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.keypad-key[b-wkr1lvx85o] {
    height: 54px;
    border-radius: var(--ax-radius);
    border: 1px solid var(--ax-border);
    background: var(--ax-surface);
    font-size: 22px;
    font-weight: 700;
    color: var(--ax-text-primary);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--ax-transition-fast), transform var(--ax-transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.keypad-key:active[b-wkr1lvx85o] { transform: scale(0.96); background: var(--ax-primary-50); }
.keypad-key:disabled[b-wkr1lvx85o] { opacity: 0.45; cursor: default; }

.keypad-key.sep[b-wkr1lvx85o] { color: var(--ax-primary); }
.keypad-key.clear[b-wkr1lvx85o] { color: var(--ax-warning); }
.keypad-key.icon[b-wkr1lvx85o] { color: var(--ax-text-secondary); }

.keypad-key.use-prev[b-wkr1lvx85o] {
    grid-column: span 2;
    font-size: 14px;
    font-weight: 700;
    color: var(--ax-primary);
    background: var(--ax-primary-50);
    border-color: var(--ax-primary);
}

.keypad-key.use-prev:active[b-wkr1lvx85o] { background: var(--ax-primary-100); }

/* Fila de la lectura: anterior (izquierda) · display (CENTRO) · consumo (derecha). */
.reading-main-row[b-wkr1lvx85o] {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* Celda lateral de referencia: lectura anterior o consumo. */
.reading-side[b-wkr1lvx85o] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    text-align: center;
}

.reading-side-label[b-wkr1lvx85o] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ax-text-muted);
}

.reading-side-value[b-wkr1lvx85o] {
    font-size: 16px;
    font-weight: 700;
    color: var(--ax-text-primary);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* Lectura anterior: referencia de solo consulta, nunca editable. */
.reading-side-value.prev[b-wkr1lvx85o] {
    color: var(--ax-text-muted);
    font-weight: 600;
}

/* Total consumo: rotulado y realzado para lectura rápida en campo. */
.consumption-value[b-wkr1lvx85o] {
    display: inline-flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    max-width: 100%;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--ax-primary);
    background: var(--ax-primary-50);
    padding: 4px 10px;
    border-radius: var(--ax-radius);
    font-variant-numeric: tabular-nums;
}

.consumption-value.empty[b-wkr1lvx85o] {
    background: var(--ax-gray-100);
    color: var(--ax-text-muted);
    font-weight: 600;
    font-size: 13px;
}

.consumption-note[b-wkr1lvx85o] {
    text-align: center;
    font-size: 11px;
    color: var(--ax-text-muted);
    margin-top: 4px;
}

/* Aviso de novedad sin lectura (Sin acceso / Dañado) */
.novedad-hint[b-wkr1lvx85o] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: var(--ax-radius);
    background: var(--ax-warning-100);
    border: 1px solid var(--ax-warning);
    color: var(--ax-warning);
    font-size: 12px;
    font-weight: 600;
}

.novedad-hint[b-wkr1lvx85o]  .mud-icon-root { width: 16px; height: 16px; flex-shrink: 0; }

.preview-link[b-wkr1lvx85o] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 14px;
    padding: 11px 12px;
    border: 1px solid var(--ax-primary);
    border-radius: var(--ax-radius);
    background: var(--ax-primary-50);
    font-size: 13px;
    font-weight: 700;
    color: var(--ax-primary);
    cursor: pointer;
    transition: background var(--ax-transition-fast);
}

.preview-link:active[b-wkr1lvx85o] {
    background: var(--ax-primary-100);
}

/* Ruta sin factura en sitio habilitada: aviso, no acción */
.preview-link.bloqueado[b-wkr1lvx85o] {
    border-color: var(--ax-border);
    background: var(--ax-surface-alt, transparent);
    color: var(--ax-text-muted);
    font-weight: 600;
    cursor: default;
}

/* Secciones */
.section-label[b-wkr1lvx85o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ax-text-muted);
    margin: 18px 2px 8px;
}

.chip-group[b-wkr1lvx85o] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.chip-group[b-wkr1lvx85o]::-webkit-scrollbar { display: none; }

.state-chip[b-wkr1lvx85o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 13px;
    border-radius: var(--ax-radius-full);
    border: 1px solid var(--ax-border);
    background: var(--ax-surface);
    font-size: 12px;
    font-weight: 600;
    color: var(--ax-text-secondary);
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--ax-transition-fast);
}

.state-chip:disabled[b-wkr1lvx85o] { opacity: 0.6; cursor: default; }

.state-chip[b-wkr1lvx85o]  .chip-check { display: none; }
.state-chip[b-wkr1lvx85o]  .chip-check { width: 13px; height: 13px; }

.state-chip.selected[b-wkr1lvx85o] {
    background: var(--ax-primary);
    border-color: var(--ax-primary);
    color: #fff;
    box-shadow: var(--ax-shadow-primary);
}

.state-chip.selected[b-wkr1lvx85o]  .chip-check { display: inline-flex; }

/* ═══════════════════════════════════════════════════════════════
   ESTADO DEL MEDIDOR: opciones visuales guía (icono + color + descripción)
   Ancladas 1:1 a la enum EstadoMedidorObservado.
   ═══════════════════════════════════════════════════════════════ */
.estado-grid[b-wkr1lvx85o] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.estado-option[b-wkr1lvx85o] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 10px;
    border-radius: var(--ax-radius-md);
    border: 1px solid var(--ax-border);
    background: var(--ax-surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--ax-text-secondary);
    cursor: pointer;
    transition: all var(--ax-transition-fast);
    text-align: left;
}

.estado-option:active[b-wkr1lvx85o] { transform: scale(0.98); }
.estado-option:disabled[b-wkr1lvx85o] { opacity: 0.55; cursor: default; }

.estado-option.selected[b-wkr1lvx85o] {
    border-color: var(--ax-primary);
    background: var(--ax-primary-50);
    color: var(--ax-text-primary);
    box-shadow: var(--ax-shadow-primary-sm);
}

/* Iconos del estado del medidor: el color va por estado (coincide con la clase que emite
   ObtenerOpcionEstado). El icono es un MudIcon hijo, así que necesita ::deep para que el
   CSS aislado alcance su SVG. */
.estado-grid[b-wkr1lvx85o]  .opt-icon { width: 22px; height: 22px; flex-shrink: 0; }

.estado-grid[b-wkr1lvx85o]  .opt-icon.normal { color: var(--ax-success); }
.estado-grid[b-wkr1lvx85o]  .opt-icon.deterioro { color: var(--ax-warning); }
.estado-grid[b-wkr1lvx85o]  .opt-icon.sinacceso { color: var(--ax-error); }
.estado-grid[b-wkr1lvx85o]  .opt-icon.menor { color: var(--ax-accent); }
.estado-grid[b-wkr1lvx85o]  .opt-icon.detenido { color: var(--ax-info); }
.estado-grid[b-wkr1lvx85o]  .opt-icon.danado { color: var(--ax-gray-500); }
.estado-grid[b-wkr1lvx85o]  .opt-icon.sinmedidor { color: var(--ax-text-muted); }

.opt-check[b-wkr1lvx85o] {
    position: absolute;
    top: 6px;
    right: 6px;
    color: var(--ax-primary);
}

.opt-label[b-wkr1lvx85o] { min-width: 0; }

/* Observaciones */
.capture-scroll[b-wkr1lvx85o]  .observations {
    width: 100%;
}

.capture-scroll[b-wkr1lvx85o]  .observations .mud-input {
    background: var(--ax-surface);
}

.capture-scroll[b-wkr1lvx85o]  .observations .mud-input-outlined-border {
    border-radius: var(--ax-radius);
    border-color: var(--ax-border);
}

/* Fotos */
.photo-count[b-wkr1lvx85o] { font-size: 12px; font-weight: 700; color: var(--ax-text-secondary); }

.photo-actions[b-wkr1lvx85o] {
    display: flex;
    gap: 10px;
}

.photo-button[b-wkr1lvx85o] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    justify-content: center;
    padding: 12px 15px;
    border-radius: var(--ax-radius);
    border: 1px dashed var(--ax-primary);
    background: var(--ax-primary-50);
    color: var(--ax-primary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.photo-button.ghost[b-wkr1lvx85o] {
    border: 1px solid var(--ax-border);
    background: var(--ax-surface);
    color: var(--ax-text-secondary);
}

.photo-thumbs[b-wkr1lvx85o] {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.photo-thumb[b-wkr1lvx85o] {
    width: 92px;
    height: 92px;
    border-radius: var(--ax-radius);
    border: 1px solid var(--ax-border);
    background: var(--ax-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.photo-thumb img[b-wkr1lvx85o] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-thumb .photo-num[b-wkr1lvx85o] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ax-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Marca del recorte de la lectura: distingue el artefacto legible (display del
   medidor) de la foto de contexto dentro de la misma captura. */
.photo-thumb .photo-tag[b-wkr1lvx85o] {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 7px;
    border-radius: var(--ax-radius-full);
    background: var(--ax-primary);
    color: var(--ax-primary-contrast);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.photo-hint[b-wkr1lvx85o] {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--ax-text-muted);
}

.photo-delete[b-wkr1lvx85o] {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ax-error);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Banners */
.capture-banner[b-wkr1lvx85o] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: var(--ax-radius);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}

.capture-banner.rejected[b-wkr1lvx85o] { background: var(--ax-error-100); color: var(--ax-error); border: 1px solid var(--ax-error); }
.capture-banner.synced[b-wkr1lvx85o] { background: var(--ax-gray-200); color: var(--ax-gray-600); border: 1px solid var(--ax-border); }
.capture-banner.sinmedidor[b-wkr1lvx85o] { background: var(--ax-warning-100); color: var(--ax-warning); border: 1px solid var(--ax-warning); }

/* Medidor retirado: el estado observado es «Sin Medidor» y es de solo lectura. */
.estado-sinmedidor[b-wkr1lvx85o] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--ax-border);
    border-radius: var(--ax-radius);
    color: var(--ax-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.capture-banner .banner-actions[b-wkr1lvx85o] {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

.banner-btn[b-wkr1lvx85o] {
    font-size: 12px;
    font-weight: 700;
    padding: 6px 11px;
    border-radius: var(--ax-radius-full);
    cursor: pointer;
}

.banner-btn.retry[b-wkr1lvx85o] { background: var(--ax-error); color: #fff; }
.banner-btn.discard[b-wkr1lvx85o] { border: 1px solid var(--ax-error); color: var(--ax-error); background: transparent; }

/* Barra de acciones de captura */
.capture-actions[b-wkr1lvx85o] {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--ax-surface);
    border-top: 1px solid var(--ax-border);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}

.capture-actions .nav-btn[b-wkr1lvx85o] {
    width: 50px;
    height: 50px;
    border-radius: var(--ax-radius-md);
    border: 1px solid var(--ax-border);
    background: var(--ax-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ax-text-secondary);
    flex-shrink: 0;
    cursor: pointer;
}

.capture-actions .nav-btn:disabled[b-wkr1lvx85o] { opacity: 0.4; cursor: default; }

.capture-actions .advance-btn[b-wkr1lvx85o] {
    flex: 1;
    height: 50px;
    border-radius: var(--ax-radius-md);
    border: 1px solid var(--ax-border);
    background: var(--ax-surface);
    color: var(--ax-text-secondary);
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

.capture-actions .save-btn[b-wkr1lvx85o] {
    flex: 1.4;
    height: 50px;
    border-radius: var(--ax-radius-md);
    background: var(--ax-success);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
    cursor: pointer;
}

.capture-actions .save-btn:disabled[b-wkr1lvx85o] { background: var(--ax-gray-300); box-shadow: none; color: var(--ax-gray-500); cursor: default; }
.capture-actions .save-btn:active[b-wkr1lvx85o] { transform: scale(0.98); }

/* ═══════════════════════════════════════════════════════════════
   HISTÓRICO DE LECTURAS (colapsable)
   ═══════════════════════════════════════════════════════════════ */

.historico-toggle[b-wkr1lvx85o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius);
    background: var(--ax-surface);
    cursor: pointer;
    transition: background var(--ax-transition-fast), border-color var(--ax-transition-fast);
}
.historico-toggle:hover[b-wkr1lvx85o] { background: var(--ax-gray-50); }
.historico-toggle.expanded[b-wkr1lvx85o] {
    border-color: var(--ax-primary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.historico-toggle-label[b-wkr1lvx85o] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ax-text-secondary);
}
.historico-toggle.expanded .historico-toggle-label[b-wkr1lvx85o] { color: var(--ax-primary); }
.historico-toggle-label[b-wkr1lvx85o]  .mud-icon-root { width: 16px; height: 16px; }

.historico-panel[b-wkr1lvx85o] {
    background: var(--ax-surface);
    border: 1px solid var(--ax-primary);
    border-top: none;
    border-bottom-left-radius: var(--ax-radius);
    border-bottom-right-radius: var(--ax-radius);
    overflow: hidden;
    margin-bottom: 4px;
}

.historico-header[b-wkr1lvx85o] {
    display: flex;
    padding: 8px 12px 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ax-text-muted);
    border-bottom: 1px solid var(--ax-border);
}
.historico-header span:nth-child(1)[b-wkr1lvx85o] { flex: 0 0 72px; }
.historico-header span:nth-child(2)[b-wkr1lvx85o] { flex: 0 0 70px; text-align: right; }
.historico-header span:nth-child(3)[b-wkr1lvx85o] { flex: 1; text-align: right; }

.historico-row[b-wkr1lvx85o] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--ax-gray-100);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    transition: background var(--ax-transition-fast);
}
.historico-row:last-child[b-wkr1lvx85o] { border-bottom: none; }

.historico-row.current[b-wkr1lvx85o] {
    background: var(--ax-primary-50);
}
.historico-row.current .historico-periodo[b-wkr1lvx85o] {
    font-weight: 700;
    color: var(--ax-primary);
}

.historico-periodo[b-wkr1lvx85o] {
    flex: 0 0 72px;
    font-weight: 600;
    color: var(--ax-text-primary);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.historico-badge[b-wkr1lvx85o] {
    font-size: 9px;
    font-weight: 700;
    color: var(--ax-primary);
    background: var(--ax-primary-50);
    padding: 1px 5px;
    border-radius: var(--ax-radius-full);
    display: inline-block;
    width: fit-content;
}

.historico-lectura[b-wkr1lvx85o] {
    flex: 0 0 70px;
    text-align: right;
    color: var(--ax-text-primary);
    font-weight: 600;
}

.historico-consumo[b-wkr1lvx85o] {
    flex: 1;
    text-align: right;
    font-weight: 600;
    color: var(--ax-text-secondary);
}

.historico-promedio[b-wkr1lvx85o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-top: 1.5px solid var(--ax-border);
    font-size: 12px;
    font-weight: 700;
    color: var(--ax-text-primary);
    background: var(--ax-gray-50);
}
.historico-promedio span:last-child[b-wkr1lvx85o] {
    color: var(--ax-primary);
    font-variant-numeric: tabular-nums;
}
/* /Pages/Offline/LecturaOffline.razor.rz.scp.css */
/* Contenedor de la vista de ruta: columna centrada estilo tool de campo */
.offline-root[b-ck8zhujdj1] {
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
    min-height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
}

/* Responsive compacto para pantallas pequeñas */
@media (max-width: 600px) {
    .offline-root[b-ck8zhujdj1] {
        min-height: calc(100vh - 120px);
    }
}
/* /Pages/Offline/OfflineDashboardPanel.razor.rz.scp.css */
/* Cabecera compacta de ruta */
.route-header[b-yshpanuqu6] {
    background: var(--ax-surface);
    border-bottom: 1px solid var(--ax-border);
    padding: 12px 16px 12px;
}

.route-title-row[b-yshpanuqu6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

/* Anillo de avance + botón Sync: comparten la fila superior de la cabecera. */
.route-header-actions[b-yshpanuqu6] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.route-title[b-yshpanuqu6] {
    font-size: 16px;
    font-weight: 700;
    color: var(--ax-text-primary);
    line-height: 1.25;
    min-width: 0;
    flex: 1 1 auto;
}

.route-title small[b-yshpanuqu6] {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--ax-text-muted);
}

.sync-button[b-yshpanuqu6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ax-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 14px;
    border-radius: var(--ax-radius-full);
    box-shadow: var(--ax-shadow-primary);
    transition: background var(--ax-transition-fast), transform var(--ax-transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.sync-button:disabled[b-yshpanuqu6] {
    background: var(--ax-gray-300);
    box-shadow: none;
    color: var(--ax-gray-500);
}

.sync-button:active[b-yshpanuqu6] { transform: scale(0.97); }
.route-chips[b-yshpanuqu6] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.route-chips[b-yshpanuqu6]::-webkit-scrollbar { display: none; }

.route-chip[b-yshpanuqu6] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: var(--ax-radius-full);
    border: 1px solid var(--ax-border);
    background: var(--ax-surface);
    font-size: 12px;
    font-weight: 600;
    color: var(--ax-text-secondary);
    white-space: nowrap;
    transition: all var(--ax-transition-fast);
}

.route-chip small[b-yshpanuqu6] { font-weight: 600; color: var(--ax-text-muted); font-variant-numeric: tabular-nums; }

.route-chip.active[b-yshpanuqu6] {
    background: var(--ax-primary);
    border-color: var(--ax-primary);
    color: #fff;
}

.route-chip.active small[b-yshpanuqu6] { color: rgba(255, 255, 255, 0.85); }
/* /Pages/Offline/OfflineSyncBar.razor.rz.scp.css */
.route-bottom-bar[b-nigjkfyiwz] {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--ax-surface);
    border-top: 1px solid var(--ax-border);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}

.conn-chip[b-nigjkfyiwz] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: var(--ax-radius-full);
    white-space: nowrap;
}

.conn-chip[b-nigjkfyiwz]  .mud-icon-root { width: 14px; height: 14px; }
.conn-chip.online[b-nigjkfyiwz] { background: var(--ax-success-100); color: var(--ax-success); }
.conn-chip.offline[b-nigjkfyiwz] { background: var(--ax-error-100); color: var(--ax-error); }

.sync-main[b-nigjkfyiwz] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ax-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    height: 50px;
    border-radius: var(--ax-radius-md);
    box-shadow: var(--ax-shadow-primary);
    cursor: pointer;
    transition: transform var(--ax-transition-fast), background var(--ax-transition-fast);
    white-space: nowrap;
}

.sync-main:active[b-nigjkfyiwz] { transform: scale(0.98); }

.sync-main:disabled[b-nigjkfyiwz] {
    background: var(--ax-gray-300);
    box-shadow: none;
    color: var(--ax-gray-500);
    cursor: default;
}

.sync-main[b-nigjkfyiwz]  .mud-icon-root { width: 17px; height: 17px; }

.icon-square[b-nigjkfyiwz] {
    width: 50px;
    height: 50px;
    border-radius: var(--ax-radius-md);
    border: 1px solid var(--ax-border);
    background: var(--ax-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ax-text-secondary);
    flex-shrink: 0;
    cursor: pointer;
}

/* Variante con texto visible (p. ej. «Obtener órdenes»). */
.action-button[b-nigjkfyiwz] {
    height: 50px;
    border-radius: var(--ax-radius-md);
    border: 1px solid var(--ax-border);
    background: var(--ax-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    color: var(--ax-text-secondary);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
}

.action-button[b-nigjkfyiwz]  .mud-icon-root { width: 18px; height: 18px; }
/* /Pages/Offline/OrdenOffline.razor.rz.scp.css */
/* =========================================================
   Órdenes de Trabajo Offline — layout (scoped)
   Replica el ancho y la cabecera de LecturaOffline: columna
   centrada (640px) y cabecera de ruta con botón Sync.
   ========================================================= */

/* Contenedor de la vista: columna centrada estilo tool de campo */
.offline-root[b-b2t6zi6nud] {
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
    min-height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
}

@media (max-width: 600px) {
    .offline-root[b-b2t6zi6nud] {
        min-height: calc(100vh - 120px);
    }
}

/* Cabecera compacta de ruta */
.route-header[b-b2t6zi6nud] {
    background: var(--ax-surface);
    border-bottom: 1px solid var(--ax-border);
    padding: 12px 16px 12px;
}

.route-title-row[b-b2t6zi6nud] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.route-header-actions[b-b2t6zi6nud] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.route-title[b-b2t6zi6nud] {
    font-size: 16px;
    font-weight: 700;
    color: var(--ax-text-primary);
    line-height: 1.25;
    min-width: 0;
    flex: 1 1 auto;
}

.route-title small[b-b2t6zi6nud] {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--ax-text-muted);
}

.sync-button[b-b2t6zi6nud] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ax-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 14px;
    border-radius: var(--ax-radius-full);
    box-shadow: var(--ax-shadow-primary);
    transition: background var(--ax-transition-fast), transform var(--ax-transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.sync-button:disabled[b-b2t6zi6nud] {
    background: var(--ax-gray-300);
    box-shadow: none;
    color: var(--ax-gray-500);
}

.sync-button:active[b-b2t6zi6nud] {
    transform: scale(0.97);
}

/* Separador de grupos del listado: «Pendientes» / «Otras». */
.ordenes-group-label[b-b2t6zi6nud] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ax-text-muted);
    margin: 10px 0 8px;
}

.ordenes-group-label:first-child[b-b2t6zi6nud] {
    margin-top: 0;
}

/* =========================================================
   Galería de evidencias fotográficas (paridad con LecturaCapturePanel):
   misma presentación de miniaturas, numeración y borrado.
   ========================================================= */
.section-label[b-b2t6zi6nud] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ax-text-muted);
    margin: 18px 2px 8px;
}

.photo-count[b-b2t6zi6nud] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ax-text-secondary);
}

.photo-thumbs[b-b2t6zi6nud] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.photo-thumb[b-b2t6zi6nud] {
    width: 92px;
    height: 92px;
    border-radius: var(--ax-radius);
    border: 1px solid var(--ax-border);
    background: var(--ax-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.photo-thumb img[b-b2t6zi6nud] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-thumb .photo-num[b-b2t6zi6nud] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ax-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-delete[b-b2t6zi6nud] {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ax-error);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
/* /Pages/Offline/SuscripcionOfflineList.razor.rz.scp.css */
/* Búsqueda */
.search-row[b-u0t8pgrojf] {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    background: var(--ax-surface);
    border-bottom: 1px solid var(--ax-border);
}

.search-row[b-u0t8pgrojf]  .offline-search {
    flex: 1;
}

.search-row[b-u0t8pgrojf]  .offline-search .mud-input-control {
    margin: 0;
}

.search-row[b-u0t8pgrojf]  .offline-search .mud-input {
    min-height: 42px;
    background: var(--ax-gray-50);
    border-radius: var(--ax-radius);
}

.search-row[b-u0t8pgrojf]  .offline-search .mud-input-outlined-border {
    border-radius: var(--ax-radius);
    border-color: var(--ax-border);
}

.filter-button[b-u0t8pgrojf] {
    width: 42px;
    height: 42px;
    border-radius: var(--ax-radius);
    border: 1px solid var(--ax-border);
    background: var(--ax-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ax-text-secondary);
    flex-shrink: 0;
    cursor: pointer;
}

.filter-button.active[b-u0t8pgrojf] {
    color: var(--ax-primary);
    border-color: var(--ax-primary);
    background: var(--ax-primary-50);
}

/* Aviso de rechazadas */
.rejected-banner[b-u0t8pgrojf] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 12px 16px 4px;
    padding: 10px 12px;
    background: var(--ax-error-100);
    border: 1px solid var(--ax-error);
    border-radius: var(--ax-radius);
    color: var(--ax-error);
    font-size: 13px;
    font-weight: 600;
}

.rejected-banner[b-u0t8pgrojf]  .mud-icon-root { color: var(--ax-error); }

/* Lista */
.list[b-u0t8pgrojf] {
    padding: 10px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.list-item[b-u0t8pgrojf] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ax-surface);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-md);
    padding: 12px;
    box-shadow: var(--ax-shadow-sm);
    transition: transform var(--ax-transition-fast), border-color var(--ax-transition-fast);
    text-align: left;
    width: 100%;
    cursor: pointer;
}

.list-item:active[b-u0t8pgrojf] { transform: scale(0.99); border-color: var(--ax-primary); }

.list-item.next-pending[b-u0t8pgrojf] {
    border-color: var(--ax-primary);
    box-shadow: 0 0 0 1px var(--ax-primary);
}

.item-seq[b-u0t8pgrojf] {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--ax-primary-50);
    color: var(--ax-primary);
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.item-seq.done[b-u0t8pgrojf] { background: var(--ax-success-100); color: var(--ax-success); }
.item-seq.rejected[b-u0t8pgrojf] { background: var(--ax-error-100); color: var(--ax-error); }
/* Sincronizada: azul (info) para no confundirse con las filas no capturables (gris). */
.item-seq.synced[b-u0t8pgrojf] { background: var(--ax-info-100); color: var(--ax-info); }
.item-seq.partial[b-u0t8pgrojf] { background: var(--ax-teal-100); color: var(--ax-teal-600); }
.item-seq.sinmedidor[b-u0t8pgrojf],
.item-seq.nocapturable[b-u0t8pgrojf] { background: var(--ax-gray-200); color: var(--ax-gray-600); }

.item-body[b-u0t8pgrojf] { flex: 1; min-width: 0; }

.item-name[b-u0t8pgrojf] {
    font-size: 14px;
    font-weight: 700;
    color: var(--ax-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-numero[b-u0t8pgrojf] {
    font-size: 12px;
    font-weight: 600;
    color: var(--ax-text-secondary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.item-address[b-u0t8pgrojf] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--ax-text-muted);
    margin-top: 3px;
    min-width: 0;
}

.item-address span[b-u0t8pgrojf] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-address[b-u0t8pgrojf]  .mud-icon-root { width: 13px; height: 13px; }

.item-right[b-u0t8pgrojf] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}

.status-badge[b-u0t8pgrojf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--ax-radius-full);
    white-space: nowrap;
}

.status-badge[b-u0t8pgrojf]  .mud-icon-root { width: 12px; height: 12px; }
.status-badge.pending[b-u0t8pgrojf] { background: var(--ax-warning-100); color: var(--ax-warning); }
.status-badge.done[b-u0t8pgrojf] { background: var(--ax-success-100); color: var(--ax-success); }
.status-badge.rejected[b-u0t8pgrojf] { background: var(--ax-error-100); color: var(--ax-error); }
.status-badge.synced[b-u0t8pgrojf] { background: var(--ax-info-100); color: var(--ax-info); }
.status-badge.partial[b-u0t8pgrojf] { background: var(--ax-teal-100); color: var(--ax-teal-600); }
.status-badge.sinmedidor[b-u0t8pgrojf],
.status-badge.nocapturable[b-u0t8pgrojf] { background: var(--ax-gray-200); color: var(--ax-gray-600); }

.item-reading[b-u0t8pgrojf] {
    font-size: 15px;
    font-weight: 800;
    color: var(--ax-text-primary);
    font-variant-numeric: tabular-nums;
}

.item-reading.muted[b-u0t8pgrojf] {
    color: var(--ax-text-muted);
    font-weight: 600;
    font-size: 12px;
}

.item-serial[b-u0t8pgrojf] {
    font-size: 11px;
    color: var(--ax-text-muted);
    font-variant-numeric: tabular-nums;
}

.item-next-tag[b-u0t8pgrojf] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ax-primary);
    background: var(--ax-primary-50);
    border-radius: var(--ax-radius-full);
    padding: 2px 7px;
}

/* Vacío */
.empty-state[b-u0t8pgrojf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 16px;
    color: var(--ax-text-secondary);
    font-size: 14px;
}

.empty-clear[b-u0t8pgrojf] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ax-primary);
    padding: 8px 12px;
}

.list-spacer[b-u0t8pgrojf] { height: 84px; }
/* /Pages/Operaciones/LecturasMedidor.razor.rz.scp.css */
/* =========================================================
   Cola de lectura — pantalla de OPERACIÓN (UI-FORMS §7.10)
   Desktop: tabla densa con la identidad congelada a la izquierda.
   Mobile (≤960px): tarjetas de captura y barra de lote al pie.
    Colores: axioma-tokens.css, ningún hex.
   ========================================================= */

/* El fondo de la página es el del sitio (degradado de `.mud-main-content`, `--ax-page-bg`):
   esta pantalla no lo sobreescribe. */

/* ---- Ruta de la suscripción ----
   La ruta lleva el color del operario asignado en el período —verde con operario, rojo sin
   él— y, al pasar el mouse sobre ella, su nombre completo.
   El color va SOLO en el texto: sin pastilla ni fondo, que competían con el dato de la fila. */
/* Columna de la tabla densa: el nombre de la ruta, recortado si no cabe. */
[b-wyxzopodpv] .op-ruta-col {
  display: inline-block;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Encabezado-FILTRO de la columna Ruta: se comporta como el título (mismo peso y tono que los
   demás encabezados) pero es un botón que despliega las rutas. Se marca en primario cuando hay
   un filtro de ruta activo, para que el encabezado diga que la cola está acotada. */
[b-wyxzopodpv] .op-ruta-filtro {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--ax-text-secondary);
  cursor: pointer;
}

[b-wyxzopodpv] .op-ruta-filtro:hover {
  color: var(--ax-primary);
}

[b-wyxzopodpv] .op-ruta-filtro.on {
  color: var(--ax-primary);
}

[b-wyxzopodpv] .op-ruta-filtro-caret {
  font-size: 0.75em;
  line-height: 1;
}

/* Tarjeta móvil (no hay columnas): la ruta va bajo la identidad. */
[b-wyxzopodpv] .op-ruta-nombre {
  align-self: flex-start;
  max-width: 100%;
  font-size: var(--ax-font-size-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[b-wyxzopodpv] .op-ruta-col.con-operario,
[b-wyxzopodpv] .op-ruta-nombre.con-operario {
  color: var(--ax-success-text);
}

[b-wyxzopodpv] .op-ruta-col.sin-operario,
[b-wyxzopodpv] .op-ruta-nombre.sin-operario {
  color: var(--ax-error-text);
}

/* ---- Celdas numéricas: alineadas a la derecha y con dígitos de ancho fijo ----
   Las cifras comparten el tono de texto del renglón —el de la columna «Anterior»—; solo suben de
   peso para distinguirse del texto. */
[b-wyxzopodpv] .lectura-num {
  display: block;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ax-text-secondary);
}

/* La lectura ANTERIOR es la REFERENCIA contra la que se mide el consumo, no el dato del renglón:
   comparte el tono del resto de la fila y pierde el peso extra, para que el consumo y la lectura
   actual destaquen por peso, no por color. */
[b-wyxzopodpv] .lectura-num.lectura-anterior {
  font-weight: 500;
  color: var(--ax-text-secondary);
}

[b-wyxzopodpv] .lectura-num.op-anom {
  color: var(--ax-error);
  font-weight: 700;
}

/* El consumo también avisa cuando el renglón trae una ALERTA confirmada, con el MISMO tono del
   chip de alerta (paleta de MudBlazor): alto consumo en warning, bajo consumo en info. La anomalía
   de lectura (por debajo de la anterior) va en rojo y manda sobre estos tonos. */
[b-wyxzopodpv] .lectura-num.op-alerta-alta {
  color: var(--mud-palette-warning);
  font-weight: 700;
}

[b-wyxzopodpv] .lectura-num.op-alerta-baja {
  color: var(--mud-palette-info);
  font-weight: 700;
}

/* El PROMEDIO DE LA CLASIFICACIÓN del período anterior es una REFERENCIA del consumo, no el dato
   capturado del renglón: comparte el tono de texto del renglón (el de la columna «Anterior») y va
   sin el peso extra de las cantidades. */
[b-wyxzopodpv] .lectura-promedio {
  display: block;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ax-text-secondary);
  white-space: nowrap;
}

[b-wyxzopodpv] .op-consumo-par {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

/* En la tarjeta móvil la pareja va pegada a la izquierda del bloque, no centrada. */
[b-wyxzopodpv] .op-consumo-par--card {
  justify-content: flex-start;
  gap: 5px;
}

[b-wyxzopodpv] .op-consumo-par .lectura-num,
[b-wyxzopodpv] .op-consumo-par .lectura-promedio {
  display: inline-block;
}

[b-wyxzopodpv] .op-consumo-par-sep {
  color: var(--ax-text-muted);
}

/* ---- Acento de la fila: cambios sin sincronizar y anomalías de consumo ----
   La tabla tiene fondo uniforme (sin rayado): el estado va en un filete interior de la
   primera celda, no en el fondo de la fila, para no teñir todo el renglón. */
[b-wyxzopodpv] .mud-table-row.fila-dirty > .mud-table-cell:first-child {
  box-shadow: inset 3px 0 0 0 var(--ax-warning);
}

[b-wyxzopodpv] .mud-table-row.fila-anomalia > .mud-table-cell:first-child {
  box-shadow: inset 3px 0 0 0 var(--ax-error);
}

[b-wyxzopodpv] .mud-table-row.fila-dirty.fila-anomalia > .mud-table-cell:first-child {
  box-shadow: inset 3px 0 0 0 var(--ax-warning), inset 6px 0 0 0 var(--ax-error);
}

/* =========================================================
   Layout: la barra de trabajo y la cola ocupan todo el ancho.
   ========================================================= */
/* La cola de lecturas ocupa todo el ancho disponible. */
[b-wyxzopodpv] .op-queue {
  width: 100%;
}

/* =========================================================
   Barra de trabajo
   ========================================================= */
/* La barra es el carril de los controles (buscador, lecturas faltantes, avance y vista). Lleva el
   mismo fondo que los tabs de PreFacturación (la barra de MudTabs = `--mud-palette-surface` =
   `--ax-surface`). En la vista de trabajo (Listado) se integra como CABECERA de la tarjeta del
   listado —ver `.op-toolbar--cabecera`—. */
[b-wyxzopodpv] .op-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-1);
  padding: 0;
  margin-bottom: var(--ax-space-2);
  background: var(--ax-surface);
}

/* ---- Cabecera de tarjeta (vista Listado) ----
   La barra y el listado forman UNA sola tarjeta: la barra lleva la superficie, el borde y el radio
   superior del panel, y un filete inferior que la separa del contenido. El aire que el `gap` del
   `.page-root` dejaba entre ambos se cierra con el margen negativo de la cola, y el listado cede
   su borde superior y su radio alto para encajar bajo la cabecera. Solo en desktop: en mobile la
   cola usa tarjetas y la barra es de una fila. */
@media (min-width: 961px) {
  /* La CABECERA de la sección (barra de trabajo) lleva el mismo fondo que los tabs de
     PreFacturación (`--ax-surface`); el cuerpo del listado también queda en BLANCO. */
  [b-wyxzopodpv] .op-toolbar--cabecera {
    background: var(--ax-surface);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-md) var(--ax-radius-md) 0 0;
    padding: var(--ax-space-2) var(--ax-space-3);
    margin-bottom: 0;
  }

  /* Cierra el aire del `gap` del page-root entre la cabecera y la cola. */
  [b-wyxzopodpv] .op-queue {
    margin-top: calc(-1 * var(--ax-space-2));
  }

  /* El listado encaja bajo la cabecera: sin borde superior, radio inferior y el cuerpo en BLANCO. */
  [b-wyxzopodpv] .op-queue .op-grid-paper {
    border-top: none;
    border-radius: 0 0 var(--ax-radius-md) var(--ax-radius-md);
    background: var(--ax-bg-card);
  }

  /* La superficie del grid en BLANCO: todas las filas —incluida la columna congelada del
     suscriptor— comparten el mismo fondo. Se tiñe la superficie (no la fila) para conservar el
     hover de fila de MudBlazor. */
  [b-wyxzopodpv] .op-grid-paper .mud-data-grid,
  [b-wyxzopodpv] .op-grid-paper .mud-data-grid .mud-table-container,
  [b-wyxzopodpv] .op-grid-paper .mud-data-grid .mud-table-root {
    background: var(--ax-bg-card);
  }

  /* La banda del encabezado de la tabla lleva el tinte de marca (igual que la cabecera). */
  [b-wyxzopodpv] .op-grid-paper .mud-data-grid .mud-table-head .mud-table-cell {
    background: color-mix(in srgb, var(--ax-primary) 9%, var(--ax-bg-card));
  }

  /* Las celdas congeladas del cuerpo en BLANCO (mismo fondo que la superficie de las filas). */
  [b-wyxzopodpv] .op-grid-paper .mud-data-grid .mud-table-body .mud-table-cell.sticky-left,
  [b-wyxzopodpv] .op-grid-paper .mud-data-grid .mud-table-body .mud-table-cell.sticky-right {
    background-color: var(--ax-bg-card);
  }

  [b-wyxzopodpv] .op-grid-paper .mud-data-grid .mud-table-head .mud-table-cell.sticky-left,
  [b-wyxzopodpv] .op-grid-paper .mud-data-grid .mud-table-head .mud-table-cell.sticky-right {
    background-color: color-mix(in srgb, var(--ax-primary) 9%, var(--ax-bg-card));
  }
}

/* Los filtros llevan su etiqueta ARRIBA del control, así que la fila se alinea por la BASE de los
   controles: centrarla dejaba el período flotando a media altura. Lleva el mismo fondo que los
   tabs de PreFacturación (la barra de MudTabs = `--mud-palette-surface` = `--ax-surface`). */
[b-wyxzopodpv] .op-toolbar-line {
  display: flex;
  align-items: flex-end;
  gap: var(--ax-space-3);
  flex-wrap: wrap;
  background: var(--ax-surface);
}

[b-wyxzopodpv] .op-toolbar-spacer {
  flex: 1 1 auto;
}

/* ---- Filtros de la barra de trabajo: etiqueta arriba, control debajo ---- */
[b-wyxzopodpv] .op-filtro-grupo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Etiqueta del filtro (Rutas / Operario / Estado): mismo tono que la etiqueta de input del
   sistema (UI.md §5.2), para que el control se lea sin esfuerzo. */
[b-wyxzopodpv] .op-filtro-label {
  display: block;
  font-size: var(--ax-font-size-base);
  font-weight: 600;
  color: var(--ax-text-secondary);
  padding-left: 2px;
}

[b-wyxzopodpv] .op-filtro {
  min-width: 152px;
  /* Control de rutas más bajo (coherente con el buscador). */
  height: 30px;
  min-height: 30px;
}

[b-wyxzopodpv] .op-filtro .mud-input,
[b-wyxzopodpv] .op-filtro .mud-input > input.mud-input-slot {
  height: 30px;
  min-height: 30px;
  line-height: 30px;
}

/* El VALOR del filtro (la ruta, el operario) se lee como dato, no como placeholder: un punto más
   de peso sobre el tono primario que ya fija el tema para los selects. */
[b-wyxzopodpv] .op-filtro .mud-input-slot {
  font-weight: 600;
}

[b-wyxzopodpv] .op-filtros {
  display: none;
  /* Fila completa bajo el buscador; su contenido (el contenedor de opciones) se
     centra igual que el cuadro de búsqueda. */
  flex: 1 1 100%;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

[b-wyxzopodpv] .op-filtros.open {
  display: flex;
}

/* Contenedor de las opciones del filtro: centrado como el buscador. */
[b-wyxzopodpv] .op-filtros-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Controles que solo existen en mobile */
[b-wyxzopodpv] .op-filtros-cerrar,
[b-wyxzopodpv] .op-seleccionar-pendientes {
  display: none;
}

/* Botón de filtros: ícono (embudo) como el de ListaTerceros; vive en desktop y mobile. */
[b-wyxzopodpv] .op-filtros-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center; /* centrado vertical con el buscador */
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--ax-border);
  border-radius: 6px;
  background: var(--ax-surface);
  color: var(--ax-text-secondary);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

[b-wyxzopodpv] .op-filtros-toggle:hover {
  border-color: var(--ax-primary);
  color: var(--ax-primary);
  background: var(--ax-primary-50);
}

[b-wyxzopodpv] .op-filtros-toggle.on {
  background: var(--ax-primary-100);
  border-color: var(--ax-primary);
  color: var(--ax-primary);
}

/* Categoría «Faltantes» del filtro: alterna el estado Pendientes. Solo el icono —el nombre
   «Lecturas faltantes» aparece al pasar el mouse—. Cuadrado y centrado verticalmente, como el
   buscador y el avance. */
[b-wyxzopodpv] .op-filtro-faltantes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--ax-border);
  border-radius: 6px;
  background: var(--ax-surface);
  color: var(--ax-text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

[b-wyxzopodpv] .op-filtro-faltantes:hover {
  border-color: var(--ax-primary);
  color: var(--ax-primary);
}

[b-wyxzopodpv] .op-filtro-faltantes.on {
  background: var(--ax-primary-100);
  border-color: var(--ax-primary);
  color: var(--ax-primary);
}

/* =========================================================
   KPI de la cola: cinco tarjetas de estado (cada una es su
   filtro), el panel de leyenda y el avance cerrando la fila
   a la derecha de la página.
   ========================================================= */
[b-wyxzopodpv] .op-kpis {
  display: flex;
  flex-wrap: wrap;
  /* Cada pieza con su alto; las tarjetas de KPI comparten un mínimo para verse parejas. */
  align-items: flex-start;
  gap: var(--ax-space-2);
}

/* Panel de leyenda: ocupa el aire entre los contadores y el avance, en la MISMA fila. Los ítems van
   en línea (los cortos comparten fila) y el texto largo baja solo. */
[b-wyxzopodpv] .op-leyenda-panel {
  display: flex;
  flex: 1 1 300px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--ax-space-3);
  min-width: 0;
  padding: var(--ax-space-2) var(--ax-space-3);
  border: 1px dashed var(--ax-border);
  border-radius: var(--ax-radius-md);
}

/* La leyenda, un punto más grande que el mínimo: se lee sin estirar la fila de los KPI. */
[b-wyxzopodpv] .op-leyenda-panel .mud-typography-caption {
  font-size: var(--ax-font-size-xs);
}

/* ---- Avance de la captura ----
   La MISMA tarjeta que las de estado (mismo alto y ancho): el anillo ocupa el lugar del icono y el
   porcentaje, el de la cantidad. No es un filtro: no es clicable. */
[b-wyxzopodpv] .op-avance {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ax-space-2);
  /* Mismo ancho que las tarjetas de estado y, al ser el último, su borde derecho es el de la fila:
     queda alineado a la derecha de la página. */
  flex: 1 1 130px;
  max-width: 200px;
  min-height: 56px;
  margin-left: auto;
  text-align: left;
  background: var(--ax-bg-card);
  border: 1px solid var(--ax-border);
  /* Mismo filete superior que las tarjetas de estado (en el tono del avance) para que la caja mida
     exactamente lo mismo. */
  border-top: 3px solid var(--ax-success);
  border-radius: var(--ax-radius-md);
  padding: var(--ax-space-2) var(--ax-space-3);
  /* Igual que las tarjetas de estado: derecho más corto. */
  padding-right: 6px;
  font-family: var(--ax-font-family);
}

/* El anillo se pinta con un conic-gradient y un agujero interior: queda como un icono de progreso. */
[b-wyxzopodpv] .op-avance-anillo {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: conic-gradient(
    var(--ax-success) calc(var(--op-avance, 0) * 1%),
    var(--ax-border-light) 0);
}

[b-wyxzopodpv] .op-avance-anillo::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--ax-bg-card);
}

/* ---- Tarjeta compacta de estado (diseño 1): icono a la izquierda, valor y etiqueta ---- */
[b-wyxzopodpv] .op-kpi {
  display: flex;
  flex-direction: row;
  /* Tarjeta compacta dentro de la MISMA fila: comparte el ancho disponible con el panel de leyenda
     y el avance en vez de empujarlos a otra línea. */
  flex: 1 1 130px;
  max-width: 200px;
  min-height: 56px;
  /* El contenido se centra en el alto de la tarjeta. */
  align-items: center;
  justify-content: flex-start;
  gap: var(--ax-space-2);
  text-align: left;
  background: var(--ax-bg-card);
  border: 1px solid var(--ax-border);
  /* Filete superior con el tono del estado: la tarjeta se identifica sin leer la etiqueta. */
  border-top: 3px solid var(--op-kpi-tono, var(--ax-border));
  border-radius: var(--ax-radius-md);
  padding: var(--ax-space-2) var(--ax-space-3);
  /* Derecho más corto: la cantidad no queda tan separada del borde de la tarjeta. */
  padding-right: 6px;
  font-family: var(--ax-font-family);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

[b-wyxzopodpv] .op-kpi:hover {
  background: var(--ax-alpha-hover);
}

[b-wyxzopodpv] .op-kpi.on {
  background: var(--ax-bg-card);
  border-color: var(--op-kpi-tono, var(--ax-primary));
  box-shadow: inset 0 0 0 1px var(--op-kpi-tono, var(--ax-primary));
}

[b-wyxzopodpv] .op-kpi:focus-visible {
  outline: none;
  box-shadow: var(--ax-shadow-focus);
}

/* =========================================================
   Vista de la pantalla: Listado | Resumen
   ---------------------------------------------------------
   La barra de trabajo deja de cargar los KPI: la vista de
   trabajo (Listado) se queda con una sola línea de chrome y el
   resumen vive en su propia vista, donde además crece
   (avance por ruta) y no le quita alto al listado.
   ========================================================= */
[b-wyxzopodpv] .op-vista {
  display: inline-flex;
  align-self: flex-end;
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius);
  overflow: hidden;
  background: var(--ax-bg-card);
}

[b-wyxzopodpv] .op-vista-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 var(--ax-space-3);
  border: 0;
  background: transparent;
  font-family: var(--ax-font-family);
  font-size: var(--ax-font-size-base);
  font-weight: 600;
  color: var(--ax-text-secondary);
  cursor: pointer;
}

[b-wyxzopodpv] .op-vista-btn + .op-vista-btn {
  border-left: 1px solid var(--ax-border);
}

[b-wyxzopodpv] .op-vista-btn:hover {
  background: var(--ax-alpha-hover);
}

[b-wyxzopodpv] .op-vista-btn.on {
  background: var(--ax-primary-50);
  color: var(--ax-primary-700);
}

[b-wyxzopodpv] .op-vista-btn:focus-visible {
  outline: none;
  box-shadow: var(--ax-shadow-focus);
}

/* Pendientes de la cola, en la pestaña: la vista Resumen avisa sin abrirla. */
[b-wyxzopodpv] .op-vista-badge {
  font-family: var(--ax-font-mono);
  font-size: var(--ax-font-size-xs);
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--ax-warning-100);
  color: var(--ax-warning);
}

/* El avance, en línea, para la vista de trabajo: título encima y barra debajo, con la misma
   alineación de base que los grupos de filtros. Sin tarjetas y sin una fila propia. */
[b-wyxzopodpv] .op-avance-grupo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* La barra de dos tramos: el leído en verde y el pendiente en ámbar sobre la pista neutra, el mismo
   patrón del panel «Avance de lecturas por ruta» del tablero.
   El bloque mide 32px y su contenido va CENTRADO, así que la pista dejaba ~11px de aire con el
   rótulo «Avance»: se devuelven con margen negativo para que la etiqueta quede pegada a la barra
   (el grupo es una columna alineada a la base, así que al encoger el bloque el rótulo baja). */
[b-wyxzopodpv] .op-avance-barra {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-space-2);
  min-height: 32px;
  margin-top: -11px;
  white-space: nowrap;
}

[b-wyxzopodpv] .op-avance-pista {
  display: flex;
  width: 150px;
  height: 9px;
  border-radius: var(--ax-radius-full);
  background: var(--ax-gray-100);
  overflow: hidden;
}

[b-wyxzopodpv] .op-avance-pista i {
  display: block;
  height: 100%;
}

[b-wyxzopodpv] .op-avance-pista i.op-avance-leidas {
  background: var(--ax-teal-500);
}

[b-wyxzopodpv] .op-avance-pista i.op-avance-pendientes {
  background: var(--ax-gold-400);
}

[b-wyxzopodpv] .op-avance-valor {
  /* La cifra va en mono con cifras tabulares, como todo número del sistema. */
  font-family: var(--ax-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ax-font-size-md);
  color: var(--ax-text-primary);
}

[b-wyxzopodpv] .op-resumen-nota {
  align-self: flex-end;
  padding-bottom: 8px;
  font-size: var(--ax-font-size-sm);
  color: var(--ax-text-muted);
}

/* ---- Vista Resumen ---- */
[b-wyxzopodpv] .op-resumen {
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-2);
  margin-bottom: var(--ax-space-2);
}

/* Paneles del resumen: el avance por ruta (ancho) y el estado de la cola, lado a lado. */
[b-wyxzopodpv] .op-resumen-paneles {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--ax-space-2);
  align-items: start;
}

[b-wyxzopodpv] .op-panel {
  background: var(--ax-bg-card);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-md);
  padding: var(--ax-space-3);
}

[b-wyxzopodpv] .op-panel-head {
  display: flex;
  align-items: baseline;
  gap: var(--ax-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--ax-space-2);
}

[b-wyxzopodpv] .op-panel-head h3 {
  font-size: var(--ax-font-size-md);
  font-weight: 700;
  color: var(--ax-text-primary);
  margin: 0;
}

[b-wyxzopodpv] .op-panel-nota {
  font-size: var(--ax-font-size-xs);
  color: var(--ax-text-muted);
}

[b-wyxzopodpv] .op-panel-pie {
  display: block;
  margin-top: var(--ax-space-3);
  color: var(--ax-text-muted);
}

/* Avance por ruta: nombre, barra y cifra. La barra es del tono del avance (verde) porque es lo
   capturado; el resto del ancho es lo que falta. */
[b-wyxzopodpv] .op-rutas {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

[b-wyxzopodpv] .op-ruta-fila {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(80px, 1.4fr) auto;
  align-items: center;
  gap: var(--ax-space-3);
  font-size: var(--ax-font-size-sm);
  color: var(--ax-text-secondary);
}

[b-wyxzopodpv] .op-ruta-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[b-wyxzopodpv] .op-ruta-barra {
  display: block;
  height: 9px;
  border-radius: 3px;
  background: var(--ax-border-light);
  overflow: hidden;
}

[b-wyxzopodpv] .op-ruta-barra i {
  display: block;
  height: 100%;
  background: var(--ax-success);
}

[b-wyxzopodpv] .op-ruta-cifra {
  font-family: var(--ax-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

[b-wyxzopodpv] .op-ruta-cifra small {
  margin-left: 6px;
  color: var(--ax-text-muted);
}

/* Cómo está el listado: el mismo contador de las tarjetas, como renglón pulsable que filtra. */
[b-wyxzopodpv] .op-estado-filas {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

[b-wyxzopodpv] .op-estado-fila {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(80px, 1.4fr) auto;
  align-items: center;
  gap: var(--ax-space-3);
  width: 100%;
  padding: 6px var(--ax-space-2);
  border: 0;
  border-radius: var(--ax-radius);
  background: transparent;
  font-family: var(--ax-font-family);
  font-size: var(--ax-font-size-sm);
  color: var(--ax-text-secondary);
  text-align: left;
  cursor: pointer;
}

[b-wyxzopodpv] .op-estado-fila:hover {
  background: var(--ax-alpha-hover);
}

[b-wyxzopodpv] .op-estado-fila:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

[b-wyxzopodpv] .op-estado-fila:disabled:hover {
  background: transparent;
}

[b-wyxzopodpv] .op-estado-fila:focus-visible {
  outline: none;
  box-shadow: var(--ax-shadow-focus);
}

[b-wyxzopodpv] .op-estado-barra {
  display: block;
  height: 9px;
  border-radius: 3px;
  background: var(--ax-border-light);
  overflow: hidden;
}

[b-wyxzopodpv] .op-estado-barra i {
  display: block;
  height: 100%;
  background: var(--op-kpi-tono, var(--ax-primary));
}

[b-wyxzopodpv] .op-estado-cifra {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--ax-font-mono);
  font-variant-numeric: tabular-nums;
}

[b-wyxzopodpv] .op-estado-cifra small {
  color: var(--ax-text-muted);
}

/* ---- Capturas sin guardar: la navegación de la barra queda bloqueada ----
   Buscar, filtrar, paginar, ordenar y refrescar vuelven a pedir la cola y se llevarían por delante
   lo digitado. Los controles de la barra viajan deshabilitados desde el markup; del listado se
   apagan aquí el paginador y las cabeceras ordenables, que no admiten `Disabled`. Las salidas son las
   dos acciones del AppBar: Guardar y Descartar. */
[b-wyxzopodpv] .op-kpi:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

[b-wyxzopodpv] .op-kpi:disabled:hover {
  background: var(--ax-bg-card);
}

[b-wyxzopodpv] .op-busqueda-input:disabled {
  cursor: not-allowed;
  color: var(--ax-text-muted);
  background: var(--ax-bg-card);
}

[b-wyxzopodpv] .op-kpi--total { --op-kpi-tono: var(--ax-primary); }
[b-wyxzopodpv] .op-kpi--pendientes { --op-kpi-tono: var(--ax-warning); }
[b-wyxzopodpv] .op-kpi--capturadas { --op-kpi-tono: var(--ax-success); }
[b-wyxzopodpv] .op-kpi--alerta { --op-kpi-tono: var(--ax-error); }
[b-wyxzopodpv] .op-kpi--sinmedidor { --op-kpi-tono: var(--ax-text-muted); }

[b-wyxzopodpv] .op-kpi-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--op-kpi-tono, var(--ax-primary));
  background: color-mix(in srgb, var(--op-kpi-tono, var(--ax-primary)) 12%, var(--ax-bg-card));
}

[b-wyxzopodpv] .op-kpi-datos {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Título del KPI: la página solo fija el TAMAÑO. El tono y el peso los pone la etiqueta de
   estadística del sistema (`.kpi-label`, global), que es la misma que usan los contadores en línea
   de la barra: los rótulos de las cifras se ven igual en toda la pantalla. */
[b-wyxzopodpv] .op-kpi-label {
  font-size: var(--ax-font-size-xs);
}

[b-wyxzopodpv] .op-kpi-value {
  font-size: var(--ax-font-size-2xl);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ax-text-primary);
}

[b-wyxzopodpv] .op-kpi.on .op-kpi-value {
  color: var(--op-kpi-tono, var(--ax-primary));
}

/* =========================================================
   Búsqueda de la barra: suscriptor, suscripción, medidor o
   dirección. Mismo patrón que los filtros (etiqueta arriba).
   ========================================================= */
[b-wyxzopodpv] .op-busqueda {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* No crece: los dos espaciadores de la barra lo centran. */
  flex: 0 1 460px;
  min-width: 0;
  max-width: 460px;
  /* Centrado vertical con el resto de la barra (que va alineada por la base). */
  align-self: center;
}

[b-wyxzopodpv] .op-busqueda-caja {
  position: relative;
  display: flex;
  align-items: center;
}

[b-wyxzopodpv] .op-busqueda-icono {
  position: absolute;
  left: 10px;
  color: var(--ax-gray-500);
  font-size: 1.1rem;
  pointer-events: none;
}

/* Mismo aspecto que el buscador del Explorer (ListaTerceros): radio, borde y
   placeholder globales, para que “Buscar” se vea igual. */
[b-wyxzopodpv] .op-busqueda-input {
  width: 100%;
  min-height: 30px;
  padding: 4px 10px 4px 34px;
  font-family: var(--ax-font-family);
  font-size: var(--ax-font-size-sm);
  font-weight: 400;
  color: var(--ax-text-primary);
  background: var(--ax-bg-card);
  border: 1px solid var(--ax-gray-200);
  border-radius: var(--ax-radius);
}

[b-wyxzopodpv] .op-busqueda-input::placeholder {
  font-weight: 400;
  color: var(--ax-text-placeholder);
  opacity: 1;
}

[b-wyxzopodpv] .op-busqueda-input:hover,
[b-wyxzopodpv] .op-busqueda-input:focus {
  outline: none;
  border-color: var(--ax-border-focus);
  box-shadow: none;
}

/* =========================================================
   Tabla densa (desktop)
   ========================================================= */
[b-wyxzopodpv] .op-grid-paper {
  background: var(--ax-bg-card);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-md);
  /* Alto del listado: MISMO criterio que el listado de Terceros —que llena el alto disponible bajo
     el AppBar—. Se descuenta la altura del AppBar (token) más el chrome propio de esta pantalla
     (padding del .page-root + barra de trabajo + pie del grid, ~90px): así el listado ocupa el
     viewport completo y scrollea por dentro, en vez de dejar un hueco al pie. */
  height: calc(100vh - var(--ax-appbar-height) - 90px);
  min-height: 320px;
  overflow: hidden;
}

/* ---- Encabezado FIJO y scroll del listado (vertical y horizontal) ----
   El data grid no acota el alto de su contenedor —solo le pone `overflow-x`—, así que sin esto el
   listado se recortaba contra el panel en vez de desplazarse. El root del grid (único hijo del
   panel) se vuelve una columna: el contenedor se queda con el alto disponible (y scrollea en los DOS
   ejes) y el paginador conserva su sitio abajo. El encabezado pegado arriba lo aporta `FixedHeader`
   (clase `mud-table-sticky-header`) y necesita `border-collapse: separate` para pegar de verdad. */
[b-wyxzopodpv] .op-grid-paper > * {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

[b-wyxzopodpv] .op-grid-paper .mud-table-container {
  flex: 1 1 auto;
  min-height: 0;      /* sin esto el flex no lo deja encoger y el scroll no aparece */
  overflow: auto;     /* vertical y horizontal */
}

[b-wyxzopodpv] .op-grid-paper .mud-table-root {
  border-collapse: separate;
  border-spacing: 0;
}

/* La celda congelada necesita fondo propio: tapa lo que pasa por debajo al desplazarse. */
[b-wyxzopodpv] .mud-data-grid .mud-table-cell.sticky-left,
[b-wyxzopodpv] .mud-data-grid .mud-table-cell.sticky-right {
  background-color: var(--ax-bg-card);
}

/* ENCABEZADOS EN UNA SOLA LÍNEA Y CON MAYÚSCULA INICIAL: las etiquetas compuestas —«Suscriptor /
   medidor», «Estado medidor», «Cobro del consumo»— se escriben tal cual (sin transformar a
   mayúsculas) y no se parten en dos renglones.
   El ancho lo fija el `min-width` de cada columna; si el conjunto no cabe, el listado se
   desplaza en horizontal. */
[b-wyxzopodpv] .mud-data-grid .mud-table-head .mud-table-cell {
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: calc(var(--ax-font-size-2xs) + 2px);
}

/* ---- Pie fijo del listado: Sync y el ícono de evidencias ----
   MudBlazor solo declara `right: 0` para toda celda sticky-right, así que dos columnas
   fijas se superpondrían: la penúltima (Sync) se corre el ancho de la última (📷). Por eso
   la última tiene ancho fijo —una sola fuente para el ancho y para el corrimiento— y no se
   puede redimensionar. */
[b-wyxzopodpv] .op-grid-paper {
  --op-ancho-col-foto: 48px;
  /* Densidad del listado: padding vertical de cada celda del cuerpo. Subirlo separa los renglones
     (el piso real del alto lo pone el control más alto de la fila: 32px del sistema). */
  --op-row-pad-y: 2px;
}

/* Aire entre renglones ajustado: el piso real del alto lo pone el control de 32px de la fila.
   Todo el texto del renglón comparte el tono de la columna «Anterior» (--ax-text-secondary), sin
   cambios de tamaño. */
[b-wyxzopodpv] .mud-data-grid .mud-table-body .mud-table-cell {
  padding-top: var(--op-row-pad-y);
  padding-bottom: var(--op-row-pad-y);
  color: var(--ax-text-secondary);
}

[b-wyxzopodpv] .mud-data-grid .mud-table-cell.op-col-foto {
  width: var(--op-ancho-col-foto);
  min-width: var(--op-ancho-col-foto);
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

/* Solo se corre si de verdad hay una columna fija detrás (si el usuario oculta el ícono,
   Sync vuelve a pegarse al borde derecho con el right:0 de MudBlazor). */
[b-wyxzopodpv] .mud-data-grid .mud-table-cell.op-col-sync:not(:last-child) {
  right: var(--op-ancho-col-foto);
}

[b-wyxzopodpv] .op-identidad {
  display: flex;
  align-items: center;
  gap: var(--ax-space-2);
  min-height: 20px;   /* v9.6: proporción con las filas cortas */
}

[b-wyxzopodpv] .op-identidad-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.2;   /* v9.6: 1.25 → 1.2, el bloque de dos líneas acompaña la fila corta */
  min-width: 0;
}

[b-wyxzopodpv] .op-identidad-nombre {
  font-size: var(--ax-font-size-lg);
  /* Tono de FILA: el nombre identifica el renglón, no compite con los datos que se capturan.
     Baja de peso (600 → 500) para que la lectura y el consumo sean lo que resalta. */
  font-weight: 500;
  color: var(--ax-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* El nombre del suscriptor es un ACCESO DIRECTO a sus contratos (directorio de Suscripciones
   filtrado por el tercero): es un botón sin cromo —se ve como el texto— con cursor de enlace y
   subrayado al pasar el mouse. */
[b-wyxzopodpv] .op-suscriptor-link {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

[b-wyxzopodpv] .op-suscriptor-link:hover {
  text-decoration: underline;
}

/* Meta del suscriptor (nº de suscripción · medidor): sube un paso de tono respecto
   al muted para que el dato sea legible, sin llegar a competir con el nombre. */
[b-wyxzopodpv] .op-identidad-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--ax-font-size-sm);
  color: var(--ax-text-secondary);
}

[b-wyxzopodpv] .op-identidad-meta code {
  font-family: var(--ax-font-mono);
  font-size: var(--ax-font-size-xs);
}

[b-wyxzopodpv] .op-sep {
  color: var(--ax-text-muted);
}

/* RENGLÓN CON EL FOCO: los datos del suscriptor —el nombre y su meta (nº de suscripción · medidor)—
   se leen en el color PRIMARIO del sitio mientras el foco esté en CUALQUIERA de los controles de la
   fila (la lectura, el estado, el cobro, el check). Es la señal de «este es el renglón que estoy
   capturando», sin teñir la fila entera ni pisar los tonos de los datos. */
[b-wyxzopodpv] .mud-table-row:focus-within .op-identidad-nombre,
[b-wyxzopodpv] .mud-table-row:focus-within .op-identidad-meta,
[b-wyxzopodpv] .op-card:focus-within .op-card-nombre,
[b-wyxzopodpv] .op-card:focus-within .op-card-meta {
  color: var(--ax-primary);
}

[b-wyxzopodpv] .op-chip-mini {
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-full);
  padding: 0 6px;
  font-size: var(--ax-font-size-2xs);
  color: var(--ax-text-secondary);
  white-space: nowrap;
}

[b-wyxzopodpv] .op-comentario-chip,
[b-wyxzopodpv] .op-sync-pend {
  font-size: var(--ax-font-size-md);
  flex: 0 0 auto;
}

[b-wyxzopodpv] .op-head-identidad {
  display: flex;
  align-items: center;
  gap: var(--ax-space-2);
}

/* Título de la columna centrado en el espacio que deja el check de selección (que se mantiene
   pegado a la izquierda para alinear con los checks del cuerpo). */
[b-wyxzopodpv] .op-head-identidad-titulo {
  flex: 1;
  text-align: center;
}

[b-wyxzopodpv] .op-check {
  width: 15px;
  height: 15px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--ax-primary);
  cursor: pointer;
}

[b-wyxzopodpv] .op-check-vacio {
  width: 15px;
  flex: 0 0 auto;
}

[b-wyxzopodpv] .op-lectura {
  max-width: 84px;
  margin-left: auto;
}

[b-wyxzopodpv] .op-lectura input {
  text-align: right;
  font-family: var(--ax-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Densidad del campo de captura de la columna «Actual»: se acorta la caja que fija el sistema
   (36px) para que el control no estire su fila. La especificidad se eleva con .mud-input-control
   para ganarle a la regla global del sistema de diseño (sin !important). */
[b-wyxzopodpv] .mud-input-control.op-lectura .mud-input,
[b-wyxzopodpv] .mud-input-control.op-lectura .mud-input.mud-input-outlined {
  height: 30px;
  min-height: 30px;
}

[b-wyxzopodpv] .mud-input-control.op-lectura .mud-input.mud-input-outlined > input.mud-input-root {
  height: 30px;
  min-height: 30px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

/* La columna «Actual» comparte SIEMPRE el tono de la «Anterior» (la referencia): mismo color en
   reposo, en foco y deshabilitado, para que ambas cifras se lean como pareja. */
[b-wyxzopodpv] .mud-input-control.op-lectura .mud-input.mud-input-outlined > input.mud-input-root,
[b-wyxzopodpv] .mud-input-control.op-lectura .mud-input.mud-input-outlined > input.mud-input-root:focus,
[b-wyxzopodpv] .mud-input-control.op-lectura .mud-input.mud-input-outlined > input.mud-input-root:hover {
  color: var(--ax-text-secondary);
  -webkit-text-fill-color: var(--ax-text-secondary);
}

/* Renglón sin medidor que observar: su campo va deshabilitado (no recibe el foco) y conserva el
   MISMO tono de la columna «Anterior». */
[b-wyxzopodpv] .op-lectura input:disabled {
  color: var(--ax-text-secondary);
  -webkit-text-fill-color: var(--ax-text-secondary);
  opacity: 1;
}

/* ---- Selectores NATIVOS del listado (estado del medidor y cobro del consumo) ----
   Son `<select>` del navegador —no `MudSelect`—: en la tabla densa ahorran el overlay por renglón y
   en el teléfono abren el picker del sistema. Alto propio MENOR que el campo de lectura (26px) para
   que los dos selectores de la fila pesen menos verticalmente. */
[b-wyxzopodpv] select.op-estado,
[b-wyxzopodpv] select.op-cobro {
  box-sizing: border-box;
  min-height: 26px;
  font-family: var(--ax-font-family);
  font-size: var(--ax-font-size-sm);
  font-weight: 400;
  color: var(--ax-text-secondary);
  background: var(--ax-bg-input);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius);
  padding: 1px 8px;
}

[b-wyxzopodpv] select.op-estado:focus-visible,
[b-wyxzopodpv] select.op-cobro:focus-visible {
  outline: none;
  border-color: var(--ax-border-focus);
  box-shadow: var(--ax-shadow-focus);
}

/* Deshabilitado: tono apagado, que es la señal de que ese renglón no admite captura. */
[b-wyxzopodpv] select.op-estado:disabled,
[b-wyxzopodpv] select.op-cobro:disabled {
  color: var(--ax-text-muted);
  opacity: 1;
}

/* ---- Estado del medidor ---- */
[b-wyxzopodpv] .op-estado {
  min-width: 132px;
}

/* ---- Cobro del consumo: el tipo de cálculo que se guarda en la base del período ---- */
[b-wyxzopodpv] .op-cobro {
  min-width: 158px;
}

/* Renglón sin medidor: no hay consumo que cobrar (mismo alto corto que los selectores). */
[b-wyxzopodpv] .op-cobro-vacio {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 26px;
  color: var(--ax-text-muted);
}

/* Suscripción sin medidor vigente (retirado o nunca instalado): el estado es
   «Sin Medidor» y no admite captura.
   v9.6 — alto de fila: con box-sizing: content-box esta celda medía 38+12+2 = 52px y
   estiraba su fila a ~60px. Se fija border-box y se iguala a los 32px del input, para
   que todas las filas del listado midan lo mismo. */
[b-wyxzopodpv] .op-estado-sinmedidor {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 26px;
  min-width: 132px;
  padding: 1px 10px;
  border: 1px dashed var(--ax-border);
  border-radius: var(--ax-radius);
  color: var(--ax-text-muted);
  font-size: var(--ax-font-size-sm);
  white-space: nowrap;
}

[b-wyxzopodpv] .op-fecha {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- Comentario de la lectura: acotado con puntos suspensivos (el texto completo va en el tooltip) */
[b-wyxzopodpv] .op-col-comentario {
  max-width: 260px;
}

[b-wyxzopodpv] .op-comentario-texto {
  display: block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ax-font-size-sm);
}

[b-wyxzopodpv] .op-comentario-vacio {
  color: var(--ax-text-muted);
}

/* La celda del comentario es EDITABLE con doble clic: el texto se muestra como superficie de la
   celda (cursor de edición) y el campo en línea ocupa su ancho, sin mover la fila. */
[b-wyxzopodpv] .op-comentario-editable {
  display: block;
  max-width: 240px;
  cursor: text;
}

[b-wyxzopodpv] .op-comentario-input {
  width: 100%;
  max-width: 240px;
  padding: 2px 6px;
  font-family: inherit;
  font-size: var(--ax-font-size-sm);
  color: var(--ax-text-primary);
  background: var(--ax-bg-card, #ffffff);
  border: 1px solid var(--ax-primary, #5b5ce6);
  border-radius: var(--ax-radius, 6px);
  outline: none;
}

[b-wyxzopodpv] .op-grid-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px 0;
  font-size: var(--ax-font-size-xs);
  color: var(--ax-text-muted);
}

/* =========================================================
   Barra de lote: acciones sobre lo seleccionado
   ========================================================= */
[b-wyxzopodpv] .op-batchbar {
  position: fixed;
  left: 50%;
  bottom: var(--ax-space-5);
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--ax-space-3);
  background: var(--ax-bg-card);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-lg);
  padding: var(--ax-space-2) var(--ax-space-3);
  box-shadow: var(--ax-shadow-lg);
}

[b-wyxzopodpv] .op-batch-count {
  font-size: var(--ax-font-size-sm);
  color: var(--ax-text-secondary);
  white-space: nowrap;
}

[b-wyxzopodpv] .op-batch-count b {
  font-family: var(--ax-font-mono);
  color: var(--ax-text-primary);
}

[b-wyxzopodpv] .op-batch-input {
  font-family: var(--ax-font-family);
  font-size: var(--ax-font-size-sm);
  color: var(--ax-text-primary);
  background: var(--ax-bg-input);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius);
  padding: 6px 9px;
  min-width: 280px;
}

[b-wyxzopodpv] .op-batch-input:focus-visible {
  outline: none;
  border-color: var(--ax-border-focus);
  box-shadow: var(--ax-shadow-focus);
}

/* =========================================================
   Leyenda
   ========================================================= */
[b-wyxzopodpv] .op-leyenda-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* =========================================================
   Mobile (≤960px): tarjetas de captura
   La tabla densa no cabe ni se opera con el pulgar: una tarjeta por medidor con el input
   grande, selector nativo de novedad y la barra de lote ocupando el ancho completo.
   ========================================================= */
@media (max-width: 960px) {

  /* Los filtros se revelan desde el botón: en el teléfono el alto es del trabajo, no del filtro. */
  [b-wyxzopodpv] .op-filtros {
    display: none;
    width: 100%;
  }

  [b-wyxzopodpv] .op-filtros.open {
    display: flex;
  }

  [b-wyxzopodpv] .op-filtro-grupo {
    flex: 1 1 100%;
    min-width: 0;
  }

  [b-wyxzopodpv] .op-filtro {
    min-width: 0;
    width: 100%;
  }

  [b-wyxzopodpv] .op-filtros-cerrar,
  [b-wyxzopodpv] .op-filtros-toggle,
  [b-wyxzopodpv] .op-seleccionar-pendientes {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ax-font-family);
    font-size: var(--ax-font-size-sm);
    font-weight: 600;
    color: var(--ax-text-secondary);
    background: var(--ax-bg-card);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius);
    padding: 7px 11px;
    cursor: pointer;
  }

  [b-wyxzopodpv] .op-seleccionar-pendientes {
    margin-left: auto;
  }

  /* Los KPI siguen siendo la navegación de la cola en el teléfono: dos tarjetas por fila, el panel
     de leyenda a todo el ancho y el avance encajado como una tarjeta más. */
  [b-wyxzopodpv] .op-kpis {
    gap: 6px;
  }

  [b-wyxzopodpv] .op-kpi,
  [b-wyxzopodpv] .op-avance {
    flex: 1 1 calc(50% - 3px);
    max-width: none;
    margin-left: 0;
    gap: 6px;
    padding: 6px var(--ax-space-2);
    padding-right: 6px;
  }

  [b-wyxzopodpv] .op-leyenda-panel {
    flex: 1 1 100%;
  }

  [b-wyxzopodpv] .op-kpi-icono,
  [b-wyxzopodpv] .op-avance-anillo {
    width: 28px;
    height: 28px;
  }

  [b-wyxzopodpv] .op-avance-anillo::after {
    inset: 3px;
  }

  /* ---- Vista Resumen en el teléfono ---- */
  /* Las tarjetas de estado ya se apilan de a dos (regla de arriba); los paneles van uno debajo del
     otro y las barras ceden el ancho del nombre para no empujar la cifra fuera de la tarjeta. */
  [b-wyxzopodpv] .op-resumen-paneles {
    grid-template-columns: 1fr;
  }

  [b-wyxzopodpv] .op-ruta-fila,
  [b-wyxzopodpv] .op-estado-fila {
    grid-template-columns: minmax(84px, 1fr) minmax(40px, 0.8fr) auto;
    gap: var(--ax-space-2);
  }

  /* El avance en línea no cabe junto a la búsqueda en el teléfono: la vista Resumen lo muestra
     completo, así que en la barra sobra. */
  [b-wyxzopodpv] .op-avance-barra {
    display: none;
  }

  /* La búsqueda ocupa el ancho de la barra: es el control que más se usa en el teléfono. */
  [b-wyxzopodpv] .op-busqueda {
    flex: 1 1 100%;
    max-width: none;
  }

  /* ---- Tarjetas ---- */
  [b-wyxzopodpv] .op-cards {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-2);
  }

  [b-wyxzopodpv] .op-card {
    background: var(--ax-bg-card);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-md);
    padding: var(--ax-space-3);
  }

  [b-wyxzopodpv] .op-card.anom {
    border-color: var(--ax-error);
  }

  [b-wyxzopodpv] .op-card.dirty {
    box-shadow: inset 3px 0 0 0 var(--ax-warning);
  }

  [b-wyxzopodpv] .op-card-head {
    display: flex;
    align-items: flex-start;
    gap: var(--ax-space-2);
  }

  [b-wyxzopodpv] .op-card-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
  }

  [b-wyxzopodpv] .op-card-nombre {
    font-size: var(--ax-font-size-lg);
    /* Mismo tono de FILA que la grilla: el nombre identifica el renglón, no compite con los datos. */
    font-weight: 550;
    color: var(--ax-text-secondary);
  }

  /* Misma subida de tono que la vista de grilla: la meta se lee, no se adivina. */
  [b-wyxzopodpv] .op-card-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    font-size: var(--ax-font-size-xs);
    color: var(--ax-text-secondary);
  }

  [b-wyxzopodpv] .op-card-meta code {
    font-family: var(--ax-font-mono);
    font-size: var(--ax-font-size-2xs);
  }

  [b-wyxzopodpv] .op-card-captura {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    align-items: center;
    gap: var(--ax-space-2);
    margin: var(--ax-space-3) 0;
  }

  [b-wyxzopodpv] .op-card-dato {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  [b-wyxzopodpv] .op-card-lbl {
    font-size: var(--ax-font-size-2xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ax-text-muted);
  }

  /* El campo de captura es el protagonista de la tarjeta. */
  [b-wyxzopodpv] .op-lectura {
    max-width: none;
    margin-left: 0;
  }

  [b-wyxzopodpv] .op-lectura input {
    font-size: var(--ax-font-size-3xl);
    min-height: 44px;
  }

  [b-wyxzopodpv] .op-card-pie {
    display: flex;
    align-items: center;
    gap: var(--ax-space-2);
    flex-wrap: wrap;
  }

  /* Selector nativo: abre el picker del sistema, que es como se elige en el teléfono. */
  [b-wyxzopodpv] .op-estado-nativo {
    flex: 1 1 auto;
    min-height: 38px;
    font-family: var(--ax-font-family);
    font-size: var(--ax-font-size-md);
    color: var(--ax-text-primary);
    background: var(--ax-bg-input);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius);
    padding: 6px 8px;
  }

  [b-wyxzopodpv] .op-estado-nativo:disabled {
    opacity: var(--ax-opacity-disabled);
  }

  /* El rótulo de solo lectura ocupa el lugar del selector en la tarjeta. */
  [b-wyxzopodpv] .op-estado-sinmedidor {
    flex: 1 1 auto;
  }

  [b-wyxzopodpv] .op-card-fecha {
    font-size: var(--ax-font-size-xs);
    color: var(--ax-text-muted);
    white-space: nowrap;
  }

  [b-wyxzopodpv] .op-mobile-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ax-space-2);
    padding: var(--ax-space-2) 0;
  }

  [b-wyxzopodpv] .op-mobile-pager-info {
    font-size: var(--ax-font-size-xs);
    color: var(--ax-text-secondary);
    text-align: center;
  }

  [b-wyxzopodpv] .op-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ax-space-3);
    padding: var(--ax-space-6) var(--ax-space-3);
    background: var(--ax-bg-card);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-md);
    text-align: center;
  }

  /* ---- Barra de lote al pie, ancho completo ---- */
  [b-wyxzopodpv] .op-batchbar {
    left: var(--ax-space-2);
    right: var(--ax-space-2);
    bottom: var(--ax-space-2);
    transform: none;
    flex-wrap: wrap;
    border-radius: var(--ax-radius-md);
  }

  [b-wyxzopodpv] .op-batch-input {
    flex: 1 1 100%;
    min-width: 0;
  }

  [b-wyxzopodpv] .op-grid-foot {
    display: none;
  }
}
/* /Pages/Operaciones/OrdenesTrabajo/ListaOrdenesTrabajo.razor.rz.scp.css */
/* =========================================================
   Órdenes de Trabajo — panel de detalle (scoped)
   Replica el patrón master-detail del directorio de Terceros:
   identidad + stat-cards + grilla de tarjetas. Las clases
   .ax-stat-row/.ax-stat*/.ax-chip* son globales (axioma-layout.css).
   ========================================================= */

/* ===== Estado vacío ===== */

.detail-empty[b-5frb6e16tj] {
  flex: 1;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
}

.detail-empty-icon[b-5frb6e16tj] {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ax-primary-50);
  color: var(--ax-primary);
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}

.detail-empty-title[b-5frb6e16tj] {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.detail-empty-sub[b-5frb6e16tj] {
  font-size: var(--ax-font-size-base); /* 13px */
  color: var(--muted);
  max-width: 240px;
  line-height: 1.5;
}

/* ===== Identidad de la orden ===== */

.identity[b-5frb6e16tj] {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.identity-left[b-5frb6e16tj] {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.identity-actions[b-5frb6e16tj] {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Indicador de imágenes adjuntas cuando la orden NO tiene evidencias: el botón azul de
   «Ver imágenes» aparece solo cuando las hay; sin ellas este indicador apagado ocupa su
   lugar con la misma caja que un MudIconButton. */
.ot-evidencia-indicador[b-5frb6e16tj] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--ax-text-muted);
}

@media (max-width: 960px) {
  .identity[b-5frb6e16tj] {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .identity-actions[b-5frb6e16tj] {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.identity-avatar[b-5frb6e16tj] {
  width: 55px;
  height: 55px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: var(--ax-font-size-xl);
  font-weight: 700;
  flex-shrink: 0;
  background: var(--ax-primary-100);
  color: var(--ax-primary);
}

.identity h3[b-5frb6e16tj] {
  font: 700 var(--ax-font-size-3xl) var(--ax-font-display);
  margin: 0 0 4px;
  color: var(--ink);
}

.identity p[b-5frb6e16tj] {
  margin: 2px 0 0;
  color: var(--ax-text-secondary);
  font-size: var(--ax-font-size-xs);
  font-weight: 500;
}

/* ===== Cuerpo y grilla ===== */

.detail-body[b-5frb6e16tj] {
  flex: 1;
  min-height: 0;
  padding: 18px 20px;
  overflow-y: auto;
}

.card[b-5frb6e16tj] {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--ax-bg-card);
}

/* =========================================================
   Detalle a dos columnas (Alternativa 3)
   Izquierda: lo que identifica la orden (cifras, Orden, Suscripción).
   Derecha: lo que se opera (líneas reportadas, descriptivos).
   Colapsa a una columna según el ancho del PROPIO panel
   (container query), no del viewport.
   ========================================================= */

.ot-detail-cols-wrap[b-5frb6e16tj] {
  container-type: inline-size;
}

.ot-detail-cols[b-5frb6e16tj] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.ot-detail-col[b-5frb6e16tj] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

@container (min-width: 520px) {
  .ot-detail-cols[b-5frb6e16tj] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 20px;
  }
}

.card h3[b-5frb6e16tj] {
  /* eyebrow: label uppercase tenue sobre el valor (patrón OpenRouter v9.1) */
  font-size: var(--ax-font-size-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ax-letter-spacing-widest);
  margin: 0 0 10px;
  color: var(--ax-text-muted);
}

.info[b-5frb6e16tj] {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 7px 0;
  font-size: var(--ax-font-size-base); /* 13px */
  line-height: 1.35;
  gap: 12px;
}

.info:last-child[b-5frb6e16tj] {
  border-bottom: 0;
}

.info span[b-5frb6e16tj] {
  color: var(--ax-gray-700);
  flex-shrink: 0;
  font-size: 12px;
}

.info b[b-5frb6e16tj] {
  text-align: right;
  color: var(--ink);
  word-break: break-word;
}

/* Detalle: la fila de stats queda en 3 columnas al no mostrar «Tipo». */
.ot-stat-row-3[b-5frb6e16tj] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Columna Orden en dos líneas: clasificación (título) + operario debajo. */
.ot-cell-operario[b-5frb6e16tj] {
  color: var(--ax-text-secondary);
  font-size: var(--ax-font-size-sm);
}

/* Estado de carga del panel al persistir una operación (crear/editar/asignar/cancelar). */
.ot-panel-loading[b-5frb6e16tj] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 240px;
  padding: 48px 24px;
  text-align: center;
}

/* Filas del listado de órdenes: más aire vertical que el resto de grillas ERP
   (la densidad global es --ax-row-pad-y = 6px). Solo el maestro, no el panel. */
.directory-page[b-5frb6e16tj]  .master-pane .erp-table tbody td {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* =========================================================
   Formulario a dos columnas (Alternativa D)
   Izquierda: la decisión (tipo/clasificación de la orden).
   Derecha: asignación y detalle.
   Colapsa a una columna según el ancho del PROPIO panel
   (container query), no del viewport.
   ========================================================= */

/* En desktop el panel se ensancha (36/64 → 35/65) cuando muestra el formulario
   de captura o el detalle a dos columnas; el listado conserva ~10% más de ancho. */
@media (min-width: 961px) {
  .directory-page[b-5frb6e16tj]  .master-detail:has(.ot-form-cols),
  .directory-page[b-5frb6e16tj]  .master-detail:has(.ot-detail-cols) {
    grid-template-columns: minmax(300px, 35fr) minmax(0, 65fr);
  }
}

.ot-form-cols-wrap[b-5frb6e16tj] {
  container-type: inline-size;
}

.ot-form-cols[b-5frb6e16tj] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.ot-form-col[b-5frb6e16tj] {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* El umbral es el ancho mínimo útil de DOS columnas de campos (dos inputs
   outlined de ~240px + gap): por debajo, apila. */
@container (min-width: 500px) {
  .ot-form-cols[b-5frb6e16tj] {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 20px;
  }
}

/* Rail de decisión (Alternativa 9): el selector de tipo (familia + tipos en
   vertical) vive en una columna angosta fija; el resto de campos a la derecha. */
@container (min-width: 560px) {
  .ot-form-cols--rail[b-5frb6e16tj] {
    grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
    gap: 20px;
  }
}

/* Selector de clasificación por chips (alternativa semántica al dropdown). */
.ot-clasif-chips[b-5frb6e16tj] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.ot-clasif-chip[b-5frb6e16tj] {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ax-text-secondary);
  background: var(--ax-bg-card, #fff);
  border: 1px solid var(--ax-border);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.ot-clasif-chip:hover[b-5frb6e16tj] {
  border-color: var(--ax-primary);
}

.ot-clasif-chip.active[b-5frb6e16tj] {
  border-color: var(--ax-primary);
  background: var(--ax-primary-50);
  color: var(--ax-primary);
}

/* =========================================================
   Jerarquía de color del listado:
   - El color de identidad vive en el chip de TIPO de cada fila (ver RenderCeldaOrden).
   - Los filtros de la toolbar son controles neutros (con ícono de filtro): no compiten
     visualmente con el tipo, para no confundir «filtro» con «tipo propiamente».
   ========================================================= */
[b-5frb6e16tj] .explorer-tipo-filter,
[b-5frb6e16tj] .explorer-clasificacion-filter,
[b-5frb6e16tj] .explorer-estado-filter {
  min-width: 160px;
}

/* /Pages/Operaciones/RutasAsignadas/ListaRutaAsignada.razor.rz.scp.css */
/* =========================================================
   Listado de asignaciones a empleados — primera columna
   =========================================================
   La lista tiene dos columnas: «Operario / Ruta» y «Estado». La primera
   concentra el operario y el nombre de la ruta en una sola celda de dos
   líneas. Los elementos los construye el CellTemplate del Explorer, por eso
   las reglas van con ::deep (no llevan el atributo de scope). */

[b-ojshk3ab8x] .ra-asignacion {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

[b-ojshk3ab8x] .ra-asignacion-operario {
    font-weight: 600;
    color: var(--ax-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-ojshk3ab8x] .ra-asignacion-ruta {
    font-size: var(--ax-font-size-xs);
    color: var(--ax-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Segunda columna: el badge de estado y, debajo, el período (YYYY-MM). Misma
   estructura de dos líneas que la celda de operario/ruta. */
[b-ojshk3ab8x] .ra-estado {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    line-height: 1.3;
}

[b-ojshk3ab8x] .ra-estado-periodo {
    font-size: var(--ax-font-size-xs);
    color: var(--ax-text-muted);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Pages/Pagos/FormularioAplicarPago.razor.rz.scp.css */
/* FormularioAplicarPago.razor.css — estilos puntuales de la página de aplicación de pagos. */

.ax-grid-2col[b-apaw8y4yxn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--ax-space-4, 16px);
    align-items: start;
}

.ax-panel[b-apaw8y4yxn] {
    background: var(--ax-bg-card, #ffffff);
    border: 1px solid var(--ax-border, #e2e5ea);
    border-radius: var(--ax-radius, 6px);
    padding: var(--ax-space-4, 16px);
    margin-bottom: var(--ax-space-4, 16px);
}

/* Panel a media página (comprobante de consulta): ocupa el 50% del ancho disponible. */
.ax-panel--half[b-apaw8y4yxn] {
    width: 50%;
}

@media (max-width: 960px) {
    .ax-panel--half[b-apaw8y4yxn] {
        width: 100%;
    }
}

.ax-panel-header[b-apaw8y4yxn] {
    display: flex;
    align-items: center;
    gap: var(--ax-space-2, 8px);
    margin-bottom: var(--ax-space-3, 12px);
    padding-bottom: var(--ax-space-2, 8px);
    border-bottom: 1px solid var(--ax-border, #e2e5ea);
}

.ax-panel-ico[b-apaw8y4yxn] {
    color: var(--ax-primary, #3b6fe0);
}

.ax-panel-title[b-apaw8y4yxn] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ax-text-primary, #1d2330);
}

.ax-panel-badge[b-apaw8y4yxn] {
    margin-left: auto;
    font-size: 11px;
    color: var(--ax-text-muted, #8a93a2);
}

.ax-form-grid-2[b-apaw8y4yxn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ax-space-3, 12px);
}

/* Columnas del panel Comprobante: el cuerpo se parte en dos columnas desde
   «Método de pago». Izquierda: tercero · suscripción · fecha de pago.
   Derecha: método/lugar de pago, nº de transacción y valor total con acciones. */
.ax-comprobante-cols[b-apaw8y4yxn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ax-space-4, 16px);
    align-items: start;
}

.ax-comprobante-col[b-apaw8y4yxn] {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-3, 12px);
    min-width: 0;
}

/* Fila de paneles con ancho proporcional a su número de columnas:
   facturas (7 columnas) : suscripciones (4 columnas) = 7 : 4.
   Si solo hay un panel (tercero con una sola suscripción), ocupa toda la fila. */
.ax-panels-row[b-apaw8y4yxn] {
    display: flex;
    gap: var(--ax-space-4, 16px);
    align-items: flex-start;
}

.ax-panels-row > .ax-panel[b-apaw8y4yxn] {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: var(--ax-space-4, 16px);
}

.ax-panels-row > .ax-panel--facturas[b-apaw8y4yxn] {
    flex-grow: 7;
}

.ax-panels-row > .ax-panel--suscripciones[b-apaw8y4yxn] {
    flex-grow: 4;
}

/* La tabla de suscripciones tiene 4 columnas: no necesita el ancho mínimo largo. */
.ax-panel--suscripciones .ax-table[b-apaw8y4yxn] {
    min-width: 0;
}

.ax-totales-panel[b-apaw8y4yxn] {
    position: sticky;
    top: 8px;
}

.ax-totales[b-apaw8y4yxn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ax-total-item[b-apaw8y4yxn] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 5px 2px;
    border-bottom: 1px dashed var(--ax-border, #e2e5ea);
    color: var(--ax-text-primary, #1d2330);
    font-variant-numeric: tabular-nums;
}

.ax-total-item span:last-child[b-apaw8y4yxn] {
    font-weight: 600;
}

.ax-total-item:first-child span:last-child[b-apaw8y4yxn] {
    color: var(--ax-primary, #3b6fe0);
    font-weight: 800;
    font-size: 15px;
}

.ax-acciones-panel[b-apaw8y4yxn] {
    margin-top: var(--ax-space-3, 12px);
}

/* ===== Tablas ===== */
.ax-table-wrap[b-apaw8y4yxn] {
    overflow-x: auto;
    border: 1px solid var(--ax-border, #e2e5ea);
    border-radius: var(--ax-radius, 6px);
}

.ax-table[b-apaw8y4yxn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    min-width: 720px;
}

.ax-table th[b-apaw8y4yxn] {
    background: var(--ax-bg-panel, #f7f8fa);
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--ax-text-secondary, #5b6472);
    padding: 7px 10px;
    border-bottom: 1px solid var(--ax-border, #e2e5ea);
    white-space: nowrap;
}

.ax-table td[b-apaw8y4yxn] {
    padding: 7px 10px;
    border-bottom: 1px solid var(--ax-border-light, #eef0f3);
    vertical-align: middle;
}

.ax-table tr:last-child td[b-apaw8y4yxn] {
    border-bottom: none;
}

.ax-table th.r[b-apaw8y4yxn], .ax-table td.r[b-apaw8y4yxn] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ax-table .mono[b-apaw8y4yxn] {
    font-family: var(--ax-font-mono, ui-monospace, Consolas, monospace);
    font-size: 12px;
}

.ax-table td.saldo[b-apaw8y4yxn] {
    color: var(--ax-text-secondary, #5b6472);
    font-weight: 600;
}

/* ===== Distribución granular por línea ===== */
.ax-col-expand[b-apaw8y4yxn] {
    width: 34px;
    padding: 0 2px !important;
    text-align: center;
}

.ax-nested-cell[b-apaw8y4yxn] {
    background: var(--ax-bg-panel, #f7f8fa);
    padding: 10px 14px !important;
}

.ax-nested-table-wrap[b-apaw8y4yxn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ax-nested-toolbar[b-apaw8y4yxn] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ax-nested-title[b-apaw8y4yxn] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--ax-text-secondary, #5b6472);
    margin-right: auto;
}

.ax-table-nested[b-apaw8y4yxn] {
    min-width: 0;
    background: var(--ax-bg-card, #ffffff);
    border: 1px solid var(--ax-border, #e2e5ea);
    border-radius: var(--ax-radius, 6px);
}

.ax-table-nested td[b-apaw8y4yxn] {
    padding: 5px 10px;
}

/* ===== Responsive (desktop-first) ===== */
@media (max-width: 1200px) {
    .ax-grid-2col[b-apaw8y4yxn] {
        grid-template-columns: 1fr;
    }

    .ax-totales-panel[b-apaw8y4yxn] {
        position: static;
    }

    .ax-panels-row[b-apaw8y4yxn] {
        flex-direction: column;
    }

    .ax-panels-row > .ax-panel[b-apaw8y4yxn] {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (max-width: 960px) {
    .ax-comprobante-cols[b-apaw8y4yxn] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .ax-form-grid-2[b-apaw8y4yxn] {
        grid-template-columns: 1fr;
    }
}

/* ===== Comprobante de consulta: grupos semánticos en dos columnas =====
   El comprobante se agrupa por bloques (Documento · Recaudo · Totales) y se dispone en
   dos columnas; los totales cierran a todo el ancho. Cada partida es una fila dt/dd con el
   rótulo a la izquierda y el valor a la derecha. */
.ax-recibo[b-apaw8y4yxn] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ax-space-4, 16px) var(--ax-space-6, 32px);
    align-items: start;
}

.ax-recibo-grupo[b-apaw8y4yxn] {
    min-width: 0;
}

.ax-recibo-grupo--full[b-apaw8y4yxn] {
    grid-column: 1 / -1;
}

.ax-recibo-grupo-t[b-apaw8y4yxn] {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--ax-text-secondary, #5b6472);
}

.ax-recibo-lista[b-apaw8y4yxn] {
    margin: 0;
}

.ax-recibo-fila[b-apaw8y4yxn] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--ax-space-4, 16px);
    padding: 9px 2px;
    border-bottom: 1px solid var(--ax-border-light, #eef0f3);
}

.ax-recibo-fila:last-child[b-apaw8y4yxn] {
    border-bottom: none;
}

.ax-recibo-fila dt[b-apaw8y4yxn] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--ax-text-muted, #8a93a2);
}

.ax-recibo-fila dd[b-apaw8y4yxn] {
    margin: 0;
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: var(--ax-text-primary, #1d2330);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.ax-recibo-fila dd.mono[b-apaw8y4yxn] {
    font-family: var(--ax-font-mono, ui-monospace, Consolas, monospace);
}

.ax-recibo-fila.ax-recibo-destacada[b-apaw8y4yxn] {
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--ax-border, #e2e5ea);
    border-bottom: none;
}

.ax-recibo-fila.ax-recibo-destacada dt[b-apaw8y4yxn] {
    color: var(--ax-primary, #3b6fe0);
}

.ax-recibo-fila.ax-recibo-destacada dd[b-apaw8y4yxn] {
    font-size: 20px;
    font-weight: 800;
    color: var(--ax-primary, #3b6fe0);
    letter-spacing: -.3px;
}

@media (max-width: 720px) {
    .ax-recibo[b-apaw8y4yxn] {
        grid-template-columns: 1fr;
    }
}

.ax-saldo-comp[b-apaw8y4yxn] {
    font-size: 11px;
    opacity: 0.6;
    font-weight: 400;
}

/* ===== Modo fila del panel Comprobante (Guiada, UI-FORMS 7.3.1 v9.4) =====
   La pantalla conserva su contenedor propio (.ax-panel); estas reglas aplican el modo
   fila del sistema — etiqueta a la izquierda sobre columna fija y control a la derecha —
   al cuerpo del panel Comprobante, mientras el modulo no migre su vocabulario a
   .panel + .form-grid (alli el modo fila ya lo gobierna el CSS global). Por debajo de
   961px no hay overrides: el campo vuelve a etiqueta arriba / control al 100%.
   La columna de etiquetas es FIJA (nunca por contenido): cada campo es su propia grilla, y
   un ancho max-content daria una columna distinta por fila, desalineando los inputs. 160px
   contiene el label mas largo del panel en una linea.
   El ancho de cada control lo fija el ancho semantico del FormField (Ancho=xs|sm|md|lg|full). */
.ax-form-rows[b-apaw8y4yxn] {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-3, 12px);
}

.ax-row-inline[b-apaw8y4yxn] {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-3, 12px);
}

/* Helper del excedente: ocupa toda la fila del recibo de pago, en tono tenue. */
.ax-row-helper[b-apaw8y4yxn] {
    flex: 1 1 100%;
    color: var(--ax-text-secondary, #45505e);
    font-size: var(--ax-font-size-xs, 11px);
    line-height: 1.3;
}

/* Ítem del buscador de tercero: nombre + campos etiquetados (Suscripción / Identificación). */
.ax-tercero-item[b-apaw8y4yxn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0;
}

.ax-tercero-item-nombre[b-apaw8y4yxn] {
    font-weight: 600;
    font-size: 13px;
}

.ax-tercero-item-campo[b-apaw8y4yxn] {
    font-size: 11.5px;
    color: var(--ax-text-secondary, #45505e);
}

.ax-tercero-item-lbl[b-apaw8y4yxn] {
    display: inline-block;
    min-width: 88px;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ax-text-muted, #8a93a2);
}

/* Tarjetas de suscripción: una por suscripción activa del tercero; la seleccionada se marca con
   el color de marca. Sustituyen al selector de suscripción. */
.ax-susc-cards[b-apaw8y4yxn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--ax-space-3, 12px);
    padding: var(--ax-space-3, 12px) var(--ax-space-4, 16px);
}

/* Dentro de una columna del panel comprobante (debajo del tercero): una sola columna, sin relleno. */
.ax-susc-cards--inline[b-apaw8y4yxn] {
    grid-template-columns: 1fr;
    gap: var(--ax-space-2, 8px);
    padding: var(--ax-space-2, 8px) 0 0;
}

.ax-susc-card[b-apaw8y4yxn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--ax-border, #e7eaf0);
    border-radius: var(--ax-radius-md, 8px);
    background: var(--ax-surface, #fff);
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.ax-susc-card:hover[b-apaw8y4yxn] {
    border-color: var(--ax-border-focus, #3b7dbd);
}

.ax-susc-card.is-selected[b-apaw8y4yxn] {
    border-color: var(--ax-primary, #3b7dbd);
    background: color-mix(in srgb, var(--ax-primary) 4%, var(--ax-surface));
    box-shadow: 0 0 0 1px var(--ax-primary, #3b7dbd);
}

.ax-susc-card-top[b-apaw8y4yxn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ax-susc-card-num[b-apaw8y4yxn] {
    font-weight: 700;
    font-size: 13px;
}

.ax-susc-card-check[b-apaw8y4yxn] {
    margin-left: auto;
    color: var(--ax-gray-400, #94a3b8);
}

.ax-susc-card.is-selected .ax-susc-card-check[b-apaw8y4yxn] {
    color: var(--ax-primary, #3b7dbd);
}

.ax-susc-card-serv[b-apaw8y4yxn] {
    font-size: 11.5px;
    color: var(--ax-text-secondary, #45505e);
}

.ax-susc-card-saldo[b-apaw8y4yxn] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ax-success, #14845f);
}

.ax-susc-card-saldo.is-muted[b-apaw8y4yxn] {
    font-weight: 400;
    color: var(--ax-text-muted, #8a93a2);
}

@media (min-width: 961px) {
    .ax-form-rows[b-apaw8y4yxn] {
        gap: 2px;
    }

    .ax-form-rows[b-apaw8y4yxn]  .ax-form-field {
        display: grid;
        grid-template-columns: 160px minmax(0, 1fr);
        column-gap: 14px;
        align-items: center;
        margin-bottom: 0;
        padding: 3px 0;
    }

    .ax-form-rows[b-apaw8y4yxn]  .ax-form-field-label {
        text-align: right;
    }

    /* Tercero a media anchura: el input ocupa la mitad de la columna de control y la
       etiqueta permanece en la misma fila (no usa la variante apilada). */
    .ax-form-rows[b-apaw8y4yxn]  .ax-w-half .ax-form-field-input {
        max-width: 50%;
    }

    /* Excepción apilada (EtiquetaArriba): la etiqueta va arriba, pero etiqueta y control
       viven en la MISMA columna del input (la columna 2), de modo que el input arranca
       alineado horizontalmente con los demás inputs. La columna 1 (160px) queda libre. */
    .ax-form-rows[b-apaw8y4yxn]  .ax-form-field--stack {
        display: grid;
        grid-template-columns: 160px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 14px;
        row-gap: 2px;
        align-items: center;
    }

    .ax-form-rows[b-apaw8y4yxn]  .ax-form-field--stack .ax-form-field-label {
        grid-column: 2;
        grid-row: 1;
        text-align: left;
        margin-bottom: 0;
    }

    .ax-form-rows[b-apaw8y4yxn]  .ax-form-field--stack .ax-form-field-input {
        grid-column: 2;
        grid-row: 2;
    }

    /* Campo + accion en el mismo renglon: el campo cede ancho, la accion no se comprime. */
    .ax-row-inline[b-apaw8y4yxn] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--ax-space-2, 8px);
        padding: 3px 0;
    }

    /* El valor del pago crece y las acciones no se comprimen; si no caben, envuelven. */
    .ax-row-inline[b-apaw8y4yxn]  .ax-valor-pago {
        flex: 1 1 240px;
        min-width: 0;
    }

    .ax-row-inline[b-apaw8y4yxn]  .ax-form-field {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .ax-row-inline[b-apaw8y4yxn]  .mud-button-root {
        flex: none;
    }
}

/* Selector de modo de recaudo (Suscripción / Por tercero): dos botones hermanos en fila. */
.ax-modo-toggle[b-apaw8y4yxn] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
/* /Pages/PeriodosFacturacion/FormularioPeriodoFacturacion.razor.rz.scp.css */
/* FormularioPeriodoFacturacion.razor.css — ajustes de presentación de la pantalla.
   Consume tokens de axioma-tokens.css (var(--ax-*)); no duplica globales. */

/* El estado del período es una LECTURA (chip semántico), no un control: se alinea con la altura
   del input de al lado (40px, la altura de un campo outlined denso de MudBlazor) para que la fila
   del panel no quede desnivelada. El texto de apoyo va debajo del chip. */
.pf-estado[b-vlwldas5z5] {
  display: flex;
  align-items: center;
  gap: var(--ax-space-2, 8px);
  min-height: 40px;
}
/* /Pages/Reports/FormularioReporte.razor.rz.scp.css */
/* =========================================================
   FormularioReporte.razor.css — hub de reportes del módulo.
   Tipo de pantalla Consulta/Reporte (UI-FORMS §7.11), composición
   catálogo en tarjetas: buscador + filtro por etapa + rejilla de
   reportes. Aquí queda solo lo propio de la pantalla; los ingredientes
   compartidos (buscador, tarjeta de formato) viven en axioma-layout.css.
   Solo tokens; sin hex literales.
   ========================================================= */

/* ---------- Encabezado de página ---------- */

.fr-head[b-ik5zxwrpcc] {
  display: flex;
  align-items: flex-end;
  gap: var(--ax-space-3);
  padding: 0 2px;
}

.fr-eyebrow[b-ik5zxwrpcc] {
  font-size: var(--ax-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ax-primary-700);
}

.fr-title[b-ik5zxwrpcc] {
  margin: 0;
  font-size: var(--ax-font-size-4xl, 20px);
  line-height: 1.15;
}

.fr-count[b-ik5zxwrpcc] {
  margin-left: auto;
  font-size: var(--ax-font-size-xs);
  color: var(--ax-text-muted);
  font-variant-numeric: tabular-nums;
}

.fr-sub[b-ik5zxwrpcc] {
  margin: 0 2px;
  font-size: var(--ax-font-size-sm);
  color: var(--ax-text-secondary);
}

/* ---------- Toolbar: búsqueda + filtro por etapa + contador ---------- */

.fr-toolbar[b-ik5zxwrpcc] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ax-space-3);
  margin-bottom: var(--ax-space-3);
}

.fr-filtros[b-ik5zxwrpcc] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ax-space-1x5);
}

.fr-contador[b-ik5zxwrpcc] {
  margin-left: auto;
  font-size: var(--ax-font-size-xs);
  color: var(--ax-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Pipeline del ciclo: una columna por etapa ---------- */

.fr-pipeline[b-ik5zxwrpcc] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: var(--ax-space-3);
  align-items: stretch;
}

.fr-stage[b-ik5zxwrpcc] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--ax-surface-2);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-md);
  overflow: hidden;
}

.fr-stage-head[b-ik5zxwrpcc] {
  display: flex;
  align-items: center;
  gap: var(--ax-space-2);
  padding: var(--ax-space-2) var(--ax-space-3);
  border-bottom: 1px solid var(--ax-border-light);
}

.fr-stage-num[b-ik5zxwrpcc] {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: var(--ax-radius-full);
  background: var(--ax-primary);
  color: var(--ax-primary-contrast);
  font-family: var(--ax-font-mono);
  font-size: var(--ax-font-size-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fr-stage-title[b-ik5zxwrpcc] {
  font-size: var(--ax-font-size-md);
  font-weight: 600;
  color: var(--ax-text-primary);
}

.fr-stage-count[b-ik5zxwrpcc] {
  margin-left: auto;
  font-size: var(--ax-font-size-xs);
  color: var(--ax-text-muted);
  white-space: nowrap;
}

.fr-stage-body[b-ik5zxwrpcc] {
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-2);
  flex: 1;
  padding: var(--ax-space-2);
}

/* Etapa vacía: el vacío es información, se declara en su lugar del pipeline. */
.fr-stage-empty[b-ik5zxwrpcc] {
  margin: 0;
  padding: var(--ax-space-3);
  border: 1px dashed var(--ax-border);
  border-radius: var(--ax-radius);
  font-size: var(--ax-font-size-xs);
  color: var(--ax-text-muted);
  text-align: center;
}

/* ---------- Tarjeta de reporte ---------- */

.fr-card[b-ik5zxwrpcc] {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--ax-bg-card);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-md);
  box-shadow: var(--ax-shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.fr-card:hover[b-ik5zxwrpcc] {
  border-color: var(--ax-primary-100);
  box-shadow: var(--ax-shadow);
}

.fr-card-head[b-ik5zxwrpcc] {
  display: flex;
  align-items: center;
  gap: var(--ax-space-2x5);
  padding: var(--ax-space-3);
}

.fr-card-ic[b-ik5zxwrpcc] {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--ax-primary-100);
  border-radius: var(--ax-radius-md);
  background: var(--ax-primary-50);
  color: var(--ax-primary-700);
}

/* Nombre del reporte: es el acceso a su formulario, así que va un paso por debajo del texto
   principal (peso 500 y tono secundario). La jerarquía la sostienen el tamaño y el ícono. */
.fr-card-nm[b-ik5zxwrpcc] {
  margin: 0;
  font-size: var(--ax-font-size-lg);
  font-weight: 500;
  line-height: 1.25;
}

/* Acción de la tarjeta — patrón stretched link: el botón del nombre cubre toda la tarjeta, así
   el click vale en cualquier punto y el foco de teclado queda en un control real. */
.fr-card-abrir[b-ik5zxwrpcc] {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ax-text-secondary);
  text-align: left;
  cursor: pointer;
}

.fr-card-abrir[b-ik5zxwrpcc]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--ax-radius-md);
}

.fr-card-abrir:hover[b-ik5zxwrpcc] {
  color: var(--ax-primary);
  text-decoration: underline;
}

.fr-card-abrir:focus-visible[b-ik5zxwrpcc] {
  outline: none;
}

.fr-card:has(.fr-card-abrir:focus-visible)[b-ik5zxwrpcc] {
  border-color: var(--ax-primary-100);
  box-shadow: var(--ax-shadow-focus);
}

/* Pie de la tarjeta con los formatos. Anclado abajo: las tarjetas de la fila alinean su pie
   aunque tengan distinto alto. */
.fr-card-meta[b-ik5zxwrpcc] {
  display: flex;
  align-items: center;
  gap: var(--ax-space-2);
  margin-top: auto;
  padding: var(--ax-space-2) var(--ax-space-3);
  border-top: 1px solid var(--ax-border-light);
  background: var(--ax-surface-2);
}

/* ---------- Estado vacío con acción ---------- */

.fr-vacio[b-ik5zxwrpcc] {
  padding: var(--ax-space-8) var(--ax-space-5);
  border: 1px dashed var(--ax-border);
  border-radius: var(--ax-radius-md);
  background: var(--ax-bg-card);
  text-align: center;
}

.fr-vacio h2[b-ik5zxwrpcc] {
  font-size: var(--ax-font-size-3xl, 18px);
  color: var(--ax-text-primary);
}

.fr-vacio p[b-ik5zxwrpcc] {
  margin: var(--ax-space-1x5) 0 var(--ax-space-3);
  font-size: var(--ax-font-size-sm);
  color: var(--ax-text-secondary);
}

/* ---------- Chips de formato ---------- */

.fr-fmt[b-ik5zxwrpcc] {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.fr-fmt-chip[b-ik5zxwrpcc] {
  padding: 1px 4px;
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-sm);
  background: var(--ax-surface);
  color: var(--ax-text-secondary);
  font-size: var(--ax-font-size-2xs, 10px);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.fr-fmt-screen[b-ik5zxwrpcc] {
  border-color: var(--ax-primary-100);
  background: var(--ax-primary-50);
  color: var(--ax-primary-700);
}

/* ---------- Leyenda ---------- */

.fr-legend[b-ik5zxwrpcc] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-space-4);
  margin-top: var(--ax-space-3);
  font-size: var(--ax-font-size-xs);
  color: var(--ax-text-muted);
}

.fr-legend b[b-ik5zxwrpcc] {
  font-weight: 600;
  color: var(--ax-text-secondary);
}

@media (max-width: 960px) {
  .fr-pipeline[b-ik5zxwrpcc] {
    grid-template-columns: 1fr;
  }

  .fr-contador[b-ik5zxwrpcc] {
    margin-left: 0;
  }
}
/* /Pages/Suscripciones/AsignarRutaSuscripcion.razor.rz.scp.css */
/* AsignarRutaSuscripcion.razor.css - Estilos específicos de la página */

/* Layout de sidebar — propiedad adicional al de axioma-layout.css */
.sidebar-layout .sidebar[b-npn5mwtlnb] {
  overflow-y: auto;
}

/* Tarjetas de modo de operación */
.mode-card[b-npn5mwtlnb] {
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius);
  cursor: pointer;
  transition: all 0.2s ease;
}

.mode-card:hover[b-npn5mwtlnb] {
  background-color: var(--ax-gray-50);
}

.mode-card.active[b-npn5mwtlnb] {
  border-color: var(--ax-primary);
  background-color: var(--ax-primary-50);
}

/* Lista de rutas scrollable */
.route-list-scrollable[b-npn5mwtlnb] {
  max-height: 300px;
  overflow-y: auto;
}

/* Tarjetas de ruta */
.route-card[b-npn5mwtlnb] {
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.route-card:hover[b-npn5mwtlnb] {
  background-color: var(--ax-gray-50);
  border-color: var(--ax-primary-100);
}

.route-card.selected[b-npn5mwtlnb] {
  border-color: var(--ax-primary);
  background-color: var(--ax-primary-50);
}

/* Indicadores de selección */
.selection-count[b-npn5mwtlnb] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background-color: var(--ax-primary-50);
  border-radius: var(--ax-radius-full);
}

.selection-count-secondary[b-npn5mwtlnb] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background-color: var(--ax-accent-100);
  border-radius: var(--ax-radius-full);
}

/* Controles de transferencia */
.transfer-controls[b-npn5mwtlnb] {
  background-color: var(--ax-gray-50);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius);
}

/* Estado vacío */
.empty-state[b-npn5mwtlnb] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.empty-state.py-4[b-npn5mwtlnb] {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Anchos de campos */
[b-npn5mwtlnb] .field-flex-1 {
  flex: 1;
  min-width: 180px;
}

[b-npn5mwtlnb] .field-width-md {
  width: 180px;
}

[b-npn5mwtlnb] .field-width-sm {
  width: 140px;
}

/* Select items con ancho completo */
[b-npn5mwtlnb] .select-item-full {
  width: 100%;
}

/* Responsive */
@media (max-width: 960px) {
  .sidebar-layout .sidebar[b-npn5mwtlnb] {
    max-height: 300px;
  }

  .route-list-scrollable[b-npn5mwtlnb] {
    max-height: 200px;
  }
}

@media (max-width: 600px) {
  .mode-card[b-npn5mwtlnb] {
    padding: 10px;
  }

  .route-card[b-npn5mwtlnb] {
    padding: 8px 10px;
  }
}

/* Animación de fade in para elementos que aparecen */
@keyframes fadeIn-b-npn5mwtlnb {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in[b-npn5mwtlnb] {
  animation: fadeIn-b-npn5mwtlnb 0.2s ease-out forwards;
}

/* Truncamiento de texto */
.text-truncate[b-npn5mwtlnb] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* /Pages/Suscripciones/FormularioSuscripcion.razor.rz.scp.css */
/* =========================================================
   Formulario de Suscripción — panel único con riel de secciones
   (variante «Alternativa C»). Un solo .panel con un riel vertical a la
   izquierda; cada sección ocupa el área de contenido a la derecha.
   Los campos usan el skin global v10 (label flotante en el control) y el
   apilado de .panel-body; aquí solo vive el layout propio del riel.
   ========================================================= */

/* Todo el ancho disponible: se anula el tope de 1180px del page-root centrado
   estándar. El marcador .form-grid-full da la especificidad necesaria para ganar
   a la regla global `.page-root:has(.form-grid):not(:has(.master-detail))`. */
.page-root:has(.form-grid.form-grid-full)[b-vu4j68ilwk] {
    max-width: none;
}

.panel-unified .unified-cols[b-vu4j68ilwk] {
    display: grid;
    /* «Cliente y ubicación» un 15% más angosto (1.5fr → 1.275fr, 85% de su ancho previo).
       El espacio liberado se reparte proporcionalmente entre «Suscripción y servicios» y
       «Servicios» para conservar el total (mismos porcentajes del contenedor). */
    grid-template-columns: 1.275fr 1.2375fr 0.7875fr;
    column-gap: 0;
}

/* Servicios: una opción por fila, alineada a la izquierda (antes fluían en
   línea y se alineaban a la derecha). */
.panel-unified .role-checklist[b-vu4j68ilwk] {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
}

.panel-unified .role-checklist-item[b-vu4j68ilwk] {
    justify-content: flex-start;
}

/* =========================================================
   Riel de secciones — variante «Alternativa C» (alt C del
   alternpanel.html). Reemplaza la fila de pestañas del panel
   unificado: navegación vertical a la izquierda + contenido.
   ========================================================= */
.rail-layout[b-vu4j68ilwk] {
    display: grid;
    grid-template-columns: 196px minmax(0, 1fr);
    align-items: start;
}

.rail[b-vu4j68ilwk] {
    border-right: 1px solid var(--ax-alpha-line, #eef0f4);
    padding: 16px 12px;
    background: linear-gradient(180deg, var(--ax-gray-50), var(--ax-bg-card) 40%);
}

.rail-item[b-vu4j68ilwk] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 2px;
    padding: 8px 9px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: var(--ax-font-size-lg, 14px);
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--ax-text-secondary);
    text-align: right;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.rail-item:hover[b-vu4j68ilwk] {
    background: var(--ax-gray-100);
    color: var(--ax-text-primary);
}

.rail-item.active[b-vu4j68ilwk] {
    background: var(--ax-primary-50);
    color: var(--ax-primary);
}

/* Numeración del menú vertical: el número se ancla a la izquierda del riel (margin-right
   auto) y la etiqueta permanece alineada a la derecha. */
.rail-num[b-vu4j68ilwk] {
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9999px;
    background: var(--ax-gray-100);
    color: var(--ax-text-muted);
    font-size: var(--ax-font-size-xs, 11px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background var(--ax-transition-fast), color var(--ax-transition-fast);
}

.rail-item:hover .rail-num[b-vu4j68ilwk] {
    background: var(--ax-gray-200);
    color: var(--ax-text-primary);
}

.rail-item.active .rail-num[b-vu4j68ilwk] {
    background: var(--ax-primary);
    color: #fff;
}

.rail-content[b-vu4j68ilwk] {
    /* El padding lo aporta .panel-body (12px) del contenido de cada sección. */
    min-width: 0;
}

@media (max-width: 960px) {
    .rail-layout[b-vu4j68ilwk] {
        grid-template-columns: 1fr;
    }

    .rail[b-vu4j68ilwk] {
        position: static;
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding: 10px 12px;
        border-right: 0;
        border-bottom: 1px solid var(--ax-alpha-line, #eef0f4);
        background: var(--ax-gray-50);
    }

    .rail-item[b-vu4j68ilwk] {
        width: auto;
        margin-bottom: 0;
        white-space: nowrap;
    }
}

/* El espacio vertical entre campos lo gobierna .panel-body (flex column, gap 8px) del
   skin global v10; este formulario ya no necesita compactación propia ni modo fila. */

/* Número predial segmentado: cada casilla aporta una parte y su unión reconstruye el
   valor único del campo. El ancho de cada casilla es proporcional a sus dígitos. */
.panel-unified[b-vu4j68ilwk]  .predial-segmentado {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
}

/* Fila predial: número predial segmentado + «Información predial utilizada» en la misma fila. */
.panel-unified[b-vu4j68ilwk]  .predial-row {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.panel-unified[b-vu4j68ilwk]  .predial-row-seg {
    flex: 1 1 auto;
    min-width: 0;
}

.panel-unified[b-vu4j68ilwk]  .predial-row-info {
    flex: 0 0 260px;
}

/* «Unidades multiusuario residencial»: input compacto. */
.panel-unified[b-vu4j68ilwk]  .predial-unidades {
    max-width: 240px;
}

@media (max-width: 960px) {
    .panel-unified[b-vu4j68ilwk]  .predial-row {
        flex-direction: column;
        align-items: stretch;
    }

    .panel-unified[b-vu4j68ilwk]  .predial-row-info {
        flex: 1 1 auto;
    }

    .panel-unified[b-vu4j68ilwk]  .predial-unidades {
        max-width: none;
    }
}

.panel-unified[b-vu4j68ilwk]  .predial-segmento {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
    width: calc(var(--seg-largo) * 8px + 22px);
    min-width: 34px;
}

.panel-unified[b-vu4j68ilwk]  .predial-segmento-label {
    font-size: var(--ax-font-size-xs);
    font-weight: 600;
    color: var(--ax-text-secondary);
    text-align: center;
    white-space: nowrap;
}

.panel-unified[b-vu4j68ilwk]  .predial-segmento-input .mud-input-control,
.panel-unified[b-vu4j68ilwk]  .predial-segmento-input .mud-input-control .mud-input,
.panel-unified[b-vu4j68ilwk]  .predial-segmento-input .mud-input-control .mud-input > input.mud-input-root {
    height: 34px;
    min-height: 34px;
    line-height: 34px;
    font-size: var(--ax-font-size-lg);
    font-variant-numeric: tabular-nums;
}

.panel-unified[b-vu4j68ilwk]  .predial-segmento-input .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

/* «Posición en ruta» — un paso más grande que el readout por defecto. */
.panel-unified[b-vu4j68ilwk]  .pos-readout-label {
    font-size: var(--ax-font-size-xs); /* 11px (default 10px) */
}

.panel-unified[b-vu4j68ilwk]  .pos-readout-sub {
    font-size: var(--ax-font-size-base); /* 13px (default 11px) */
}

/* Card de lectura del titular en modo edición: reemplaza al buscador hasta que el
   usuario pulsa «Cambiar Cliente», que abre el input vacío para buscar. */
.cliente-card[b-vu4j68ilwk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--ax-alpha-line, #eef0f4);
    border-radius: var(--ax-radius, 6px);
    background: var(--ax-bg-card);
}

.cliente-card-avatar[b-vu4j68ilwk] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-weight: 700;
    font-size: var(--ax-font-size-lg);
    background: var(--ax-primary-100);
    color: var(--ax-primary);
}

.cliente-card-info[b-vu4j68ilwk] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.cliente-card-name[b-vu4j68ilwk] {
    font-weight: 600;
    font-size: var(--ax-font-size-lg);
    color: var(--ax-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cliente-card-doc[b-vu4j68ilwk] {
    font-size: var(--ax-font-size-base);
    color: var(--ax-text-muted);
}

/* «Cambiar Cliente» fuera de la card, alineado a la derecha bajo ella. */
.cliente-card-actions[b-vu4j68ilwk] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}

.unified-col[b-vu4j68ilwk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 0 16px;
    border-left: 1px solid var(--ax-alpha-line, #eef0f4);
}

.unified-col:first-child[b-vu4j68ilwk] {
    border-left: 0;
    padding-left: 0;
}

.unified-col:last-child[b-vu4j68ilwk] {
    padding-right: 0;
}

.unified-col-head[b-vu4j68ilwk] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--ax-alpha-line, #eef0f4);
}

.unified-col-head h3[b-vu4j68ilwk] {
    flex: 1;
    margin: 0;
    font-family: var(--ax-font-display);
    font-size: var(--ax-font-size-base);
    font-weight: 600;
    color: var(--ax-text-primary);
}

.unified-col-head .panel-badge[b-vu4j68ilwk] {
    white-space: nowrap;
}

@media (max-width: 960px) {
    .panel-unified .unified-cols[b-vu4j68ilwk] {
        grid-template-columns: 1fr;
    }

    .unified-col[b-vu4j68ilwk] {
        border-left: 0;
        border-top: 1px solid var(--ax-alpha-line, #eef0f4);
        padding: 14px 0 4px;
    }

    .unified-col:first-child[b-vu4j68ilwk] {
        border-top: 0;
        padding-top: 0;
    }
}
/* /Pages/Suscripciones/ListaSuscripciones.razor.rz.scp.css */
/* =========================================================
   Directorio de Suscripciones (Explorer) — estilos scoped
   Solo lo propio de la página; el shell master-detail y la
   lista de tarjetas/columnas viven en axioma-layout.css (Explorer).
   ========================================================= */

.directory-page[b-ks34tgysc5] {
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-3);
}

/* ===== Selector de ruta en la barra de filtros del directorio ===== */

.explorer-ruta-filter[b-ks34tgysc5] {
  width: 220px;
  min-width: 180px;
  max-width: 260px;
}

.explorer-ruta-filter .mud-input-control[b-ks34tgysc5] {
  min-width: 180px;
}

/* ===== Panel lateral (PanelContent del Explorer) ===== */

.detail-empty[b-ks34tgysc5] {
  flex: 1;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
}

.detail-empty-icon[b-ks34tgysc5] {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ax-primary-50);
  color: var(--ax-primary);
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}

.detail-empty-title[b-ks34tgysc5] {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.detail-empty-sub[b-ks34tgysc5] {
  font-size: var(--ax-font-size-base); /* 13px */
  color: var(--muted);
  max-width: 240px;
  line-height: 1.5;
}

.identity[b-ks34tgysc5] {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.identity-left[b-ks34tgysc5] {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.identity-actions[b-ks34tgysc5] {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Ancho estrecho (≤960px): las acciones bajan a una fila debajo de la
   identidad para no solaparse con .identity-left. */
@media (max-width: 960px) {
  .identity[b-ks34tgysc5] {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .identity-actions[b-ks34tgysc5] {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.identity-avatar[b-ks34tgysc5] {
  width: 55px;
  height: 55px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: var(--ax-font-size-xl);
  font-weight: 700;
  flex-shrink: 0;
  background: var(--ax-primary-100);
  color: var(--ax-primary);
}

.identity h3[b-ks34tgysc5] {
  font: 700 var(--ax-font-size-3xl) var(--ax-font-display);
  margin: 0 0 4px;
  color: var(--ink);
}

.identity p[b-ks34tgysc5] {
  margin: 2px 0 0;
  color: var(--ax-text-secondary);
  font-size: var(--ax-font-size-xl);
  font-weight: 500;
}

.detail-tabs[b-ks34tgysc5] {
  display: flex;
  gap: 18px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  height: 42px;
  flex-shrink: 0;
  /* El panel del shell recorta su contenido (overflow: hidden): la fila de tabs
     scrollea en horizontal antes que dejar el último tab inalcanzable. */
  overflow-x: auto;
  scrollbar-width: thin;
}

.detail-tabs[b-ks34tgysc5]::-webkit-scrollbar {
  height: 4px;
}

.detail-tabs[b-ks34tgysc5]::-webkit-scrollbar-thumb {
  background: var(--ax-alpha-line);
  border-radius: 2px;
}

/* Tabs del detalle: <button> real (teclado + roles ARIA), sin el chrome nativo. */
.detail-tab[b-ks34tgysc5] {
  display: flex;
  align-items: center;
  /* Icono + texto en el mismo renglón (estilo MudTabs del FormularioSuscripcion). */
  gap: 7px;
  /* Tono reforzado: los tabs inactivos usan el paso secundario (no el muted)
     para que la fila de tabs se lea con el mismo peso que el resto del detalle. */
  color: var(--ax-text-secondary);
  font-size: calc(var(--ax-font-size-base) + 1px);
  font-weight: 500;
  cursor: pointer;
  position: relative;
  user-select: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  height: 100%;
}

.detail-tab:hover[b-ks34tgysc5] {
  color: var(--ax-primary);
}

/* Iconos del tab: proporción de pestaña (MudBlazor los pinta a 20px con Size.Small). */
.detail-tab[b-ks34tgysc5]  .mud-icon-root {
  font-size: 16px;
}

.detail-tabs-sub .detail-tab[b-ks34tgysc5]  .mud-icon-root {
  font-size: 14px;
}

.detail-tab-active[b-ks34tgysc5] {
  color: var(--ax-primary);
  font-weight: 700;
}

.detail-tab-active[b-ks34tgysc5]::after {
  content: '';
  height: 2px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ax-primary);
}

/* Segundo nivel de pestañas del detalle (.detail-tabs-sub). Es una fila propia —no un
   anidamiento de la primera— con la gestión del servicio y las Observaciones: se lee como un
   escalón inferior —mismo TAMAÑO de letra que la fila principal, pero tono más bajo y fondo
   hundido— sin competir con la fila principal. Comparte el resalte activo: una sola sección
   activa en todo el detalle.
   La fila va pegada al borde derecho del panel (espejo de la principal, que arranca a la
   izquierda): la alineación se logra con `margin-left: auto` en el primer tab y no con
   `justify-content: flex-end`, porque con flex-end un desborde horizontal dejaría el inicio de
   la fila inalcanzable al scroll. */
.detail-tabs-sub[b-ks34tgysc5] {
  height: 36px;
  gap: 14px;
  background: var(--ax-surface-2);
}

.detail-tabs-sub > .detail-tab:first-child[b-ks34tgysc5] {
  margin-left: auto;
}

.detail-tabs-sub .detail-tab[b-ks34tgysc5] {
  /* Mismo tamaño de letra que la fila principal: el escalón lo marcan el tono más bajo y el
     fondo hundido, no el tamaño. */
  font-size: calc(var(--ax-font-size-base) + 1px);
  font-weight: 500;
  color: var(--ax-text-muted);
}

.detail-tabs-sub .detail-tab:hover[b-ks34tgysc5],
.detail-tabs-sub .detail-tab-active[b-ks34tgysc5] {
  color: var(--ax-primary);
}

.detail-body[b-ks34tgysc5] {
  flex: 1;
  min-height: 0;
  padding: 18px 20px;
  overflow-y: auto;
}

.detail-grid[b-ks34tgysc5] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.card[b-ks34tgysc5] {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--ax-bg-card);
}

.card-full[b-ks34tgysc5] {
  grid-column: 1 / -1;
}

.card h3[b-ks34tgysc5],
.timeline h3[b-ks34tgysc5] {
  /* eyebrow: label uppercase tenue sobre el valor (patron OpenRouter v9.1) */
  font-size: var(--ax-font-size-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ax-letter-spacing-widest);
  margin: 0 0 10px;
  color: var(--ax-text-muted);
}

.info[b-ks34tgysc5] {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 7px 0;
  font-size: var(--ax-font-size-base); /* 13px */
  line-height: 1.35;
  gap: 12px;
}

.info:last-child[b-ks34tgysc5] {
  border-bottom: 0;
}

.info span[b-ks34tgysc5] {
  color: var(--ax-gray-700);
  flex-shrink: 0;
  font-size: 12px;
}

.info b[b-ks34tgysc5] {
  text-align: right;
  color: var(--ink);
  word-break: break-word;
}

/* Filas de información en dos columnas dentro de una tarjeta ancha (Notificaciones). */
.info-grid[b-ks34tgysc5] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
}

.info-col[b-ks34tgysc5] {
  display: flex;
  flex-direction: column;
}

.observaciones[b-ks34tgysc5] {
  margin: 0;
  font-size: var(--ax-font-size-base); /* 13px */
  color: var(--ink);
  white-space: pre-wrap;
}

/* Chip de estado en la identidad del detalle */
.identity .ax-chip[b-ks34tgysc5] {
  margin-top: 8px;
}

.subscription[b-ks34tgysc5] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.subscription:last-child[b-ks34tgysc5] {
  border: 0;
}

.subscription b[b-ks34tgysc5] {
  font-size: var(--ax-font-size-base); /* 13px */
  color: var(--ink);
}

.subscription small[b-ks34tgysc5] {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 3px;
}

.subscription strong[b-ks34tgysc5] {
  font-size: 12px;
  color: var(--ax-primary);
}

.subscription-empty[b-ks34tgysc5] {
  color: var(--muted);
  font-size: 12px;
  padding: 6px 0;
}

.timeline[b-ks34tgysc5] {
  padding: 0;
}

.event[b-ks34tgysc5] {
  border-left: 1px solid var(--line);
  padding: 0 0 12px 15px;
  position: relative;
}

.event:last-child[b-ks34tgysc5] {
  border-left: 0;
}

.event[b-ks34tgysc5]::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 1px;
  width: 7px;
  height: 7px;
  background: var(--ax-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--ax-primary-50);
}

.event b[b-ks34tgysc5] {
  display: block;
  font-size: 11px;
  color: var(--ink);
}

.event small[b-ks34tgysc5] {
  font-size: 10px;
  color: var(--muted);
}

/* Pestaña «Facturas»: la fila es accionable (abre el FormularioFactura).
   ::deep alcanza las filas que renderiza el MudDataGrid (componente hijo) y va separado por un
   espacio: sin él la regla se emitía como `.facturas-grid::deep …[scope]` y el navegador la
   descartaba, así que el cursor de acción no llegaba a aplicarse. */
.facturas-grid[b-ks34tgysc5]  .mud-table-body .mud-table-row {
  cursor: pointer;
}

/* Tarjeta de los listados de consulta del detalle (Facturas, Pagos, Notas crédito y
   Financiaciones): tono rebajado — son listados de consulta, no la tabla de trabajo. Se
   redefinen los tokens que ya consumen las reglas globales de encabezado (.erp-table thead th
   y .mud-table-head .mud-table-cell en axioma-layout.css / axioma-overrides.css), así que no
   hace falta !important ni tocar el sistema de diseño. */
.detalle-lista-card[b-ks34tgysc5] {
  --ax-grid-header-weight: 500;
  --ax-grid-header-text: var(--ax-text-muted);
}

/* …y baja también de tamaño: mismo paso que ya declara la regla de referencia de encabezados
   del sistema en axioma-layout.css (--ax-font-size-xs, 11px); el cuerpo de la tabla conserva
   --ax-font-size-md (13px). Reemplaza exactamente la regla global que hoy fija el tamaño
   (.erp-table .mud-table-head .mud-table-cell) con mayor especificidad, sin !important.
   Las celdas del histórico van +2px sobre el tamaño base del sistema. */
.detalle-lista-card[b-ks34tgysc5]  .mud-table-head .mud-table-cell {
  font-size: calc(var(--ax-font-size-xs) + 2px);
}

.detalle-lista-card[b-ks34tgysc5]  .mud-table-body .mud-table-cell {
  /* Letra de las filas 2px más pequeña que el tamaño con el que quedaron las columnas,
     y filas 2px más bajas que el estándar del sistema (1px menos de padding vertical por lado). */
  font-size: var(--ax-font-size-md);
  padding-top: 3px;
  padding-bottom: 3px;
}

/* Color del Saldo pendiente del histórico: el valor va dentro de un <span> en la celda
   .col-amount y comunica el estado — ámbar cuando el pendiente es menor que lo facturado (pago
   total o parcial) y el color por defecto de la columna cuando iguala lo facturado. */
.saldo-ambar[b-ks34tgysc5] {
  color: var(--ax-warning-hover);
}

/* Resumen — Centro de mando: el estado y las magnitudes operativas quedan visibles
   antes del detalle, sin convertir la consulta en un tablero decorativo. */
.command-summary[b-ks34tgysc5] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.command-metric[b-ks34tgysc5] {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--ax-radius-md);
  background: var(--ax-bg-card);
}

.command-metric span[b-ks34tgysc5] {
  display: block;
  color: var(--ax-text-muted);
  font-size: var(--ax-font-size-2xs);
  letter-spacing: var(--ax-letter-spacing-wide);
  text-transform: uppercase;
}

.command-metric strong[b-ks34tgysc5] {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: var(--ink);
  font-size: var(--ax-font-size-lg);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-metric-primary[b-ks34tgysc5] {
  border-color: var(--ax-primary);
  background: var(--ax-primary);
}

.command-metric-primary span[b-ks34tgysc5],
.command-metric-primary strong[b-ks34tgysc5] {
  color: var(--ax-primary-contrast);
}

.command-grid[b-ks34tgysc5] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.command-grid .card[b-ks34tgysc5] {
  min-width: 0;
  padding: 12px 14px;
}

.command-grid .card h3[b-ks34tgysc5] {
  margin-bottom: 7px;
}

.command-grid .info[b-ks34tgysc5] {
  min-height: 30px;
  padding: 6px 0;
}

.mono-data[b-ks34tgysc5] {
  font-family: var(--ax-font-mono);
  font-variant-numeric: tabular-nums;
}

.contact-data[b-ks34tgysc5] {
  color: var(--ax-primary);
}

@media (max-width: 1100px) {
  .command-summary[b-ks34tgysc5] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .command-grid[b-ks34tgysc5] {
    grid-template-columns: 1fr 1fr;
  }

  .command-grid .card:last-child[b-ks34tgysc5] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .command-summary[b-ks34tgysc5],
  .command-grid[b-ks34tgysc5] {
    grid-template-columns: 1fr;
  }

  .command-grid .card:last-child[b-ks34tgysc5] {
    grid-column: auto;
  }
}
/* /Pages/Tarifas/DiagramaConceptosTarifas.razor.rz.scp.css */
.diagrama-page[b-kskhelqv4q] {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ax-surface-2, #f1f5f9);
}

/* ── Topbar (como la demo HTML) ── */
.diagrama-topbar[b-kskhelqv4q] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: var(--ax-gray-900, #0f172a);
  color: #fff;
  border-radius: 0 0 10px 10px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.diagrama-topbar-title[b-kskhelqv4q] { display: flex; align-items: center; gap: 10px; color: #fff; }
.diagrama-topbar-title[b-kskhelqv4q]  .mud-icon-root { color: rgba(255,255,255,.8); }
.diagrama-topbar-title[b-kskhelqv4q]  .mud-typography { color: #fff; }
.diagrama-topbar-sub[b-kskhelqv4q] { color: rgba(255,255,255,.7) !important; }
.diagrama-topbar-actions[b-kskhelqv4q] { display: flex; gap: 8px; }

/* ── Grid principal de 3 columnas ── */
.diagrama-grid[b-kskhelqv4q] {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

/* ── Paneles laterales genéricos ── */
.diagrama-panel[b-kskhelqv4q] {
  background: var(--ax-surface, #fff);
  border: 1px solid var(--ax-border, #e7eaf0);
  border-radius: 10px;
  overflow: hidden;
}
.diagrama-panel-header[b-kskhelqv4q] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ax-text-muted, #9aa4b5);
  border-bottom: 1px solid var(--ax-border, #e7eaf0);
}
.diagrama-panel-header[b-kskhelqv4q]  .mud-icon-root { font-size: 15px; }

/* ── Panel izquierdo ── */
.diagrama-left[b-kskhelqv4q] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
}
.diagrama-filtros[b-kskhelqv4q], .diagrama-leyenda[b-kskhelqv4q] { flex-shrink: 0; }

.diagrama-field[b-kskhelqv4q] { padding: 10px 14px; border-bottom: 1px solid var(--ax-border, #e7eaf0); }
.diagrama-label[b-kskhelqv4q] {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ax-text-muted, #9aa4b5);
  margin-bottom: 6px;
}
.diagrama-check[b-kskhelqv4q] { padding: 12px 14px; border-bottom: none; }

.diagrama-chips[b-kskhelqv4q] { display: flex; flex-wrap: wrap; gap: 4px; }
.diagrama-chip[b-kskhelqv4q] {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--ax-border, #e7eaf0);
  background: var(--ax-surface, #fff);
  color: var(--ax-text-muted, #9aa4b5);
  cursor: pointer;
  transition: all 150ms ease;
}
.diagrama-chip:hover[b-kskhelqv4q] { background: var(--ax-surface-2, #f1f5f9); color: var(--ax-text, #172033); }
.diagrama-chip.active[b-kskhelqv4q] {
  background: var(--ax-primary-50, #f0f0ff);
  border-color: var(--ax-primary, #5b5ce6);
  color: var(--ax-primary, #5b5ce6);
  font-weight: 600;
}

/* ── Leyenda ── */
.diagrama-leyenda .diagrama-panel-header[b-kskhelqv4q] { margin-bottom: 4px; }
.diagrama-legend-item[b-kskhelqv4q] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--ax-text-muted, #9aa4b5);
}
.diagrama-legend-dot[b-kskhelqv4q] {
  width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; border: 1px solid var(--ax-border, #e7eaf0);
}
.diagrama-legend-dot.kind-service[b-kskhelqv4q] { background: var(--ax-primary, #5b5ce6); }
.diagrama-legend-dot.kind-category[b-kskhelqv4q] { background: #f5f3ff; border-left: 3px solid var(--ax-purple, #8b5cf6); }
.diagrama-legend-dot.kind-concept[b-kskhelqv4q] { background: var(--ax-primary-50, #f0f0ff); border-left: 3px solid var(--ax-info, #5b5ce6); }
.diagrama-legend-dot.kind-rate[b-kskhelqv4q] { background: #eaf7f1; border-left: 3px solid var(--ax-success, #14845f); }
.diagrama-legend-dot.kind-summary[b-kskhelqv4q] { background: var(--ax-gray-900, #0f172a); }

/* División y título de la sección de categorías en la leyenda */
.diagrama-legend-divider[b-kskhelqv4q] { height: 1px; background: var(--ax-border, #e7eaf0); margin: 8px 14px 4px; }
.diagrama-legend-title[b-kskhelqv4q] {
  padding: 6px 14px 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ax-text-muted, #9aa4b5);
}
.diagrama-legend-item[b-kskhelqv4q] { padding-top: 4px; padding-bottom: 4px; }

/* Dots por categoría funcional */
.diagrama-legend-dot.leg-cobro[b-kskhelqv4q] { background: #ecfeff; border-left: 3px solid #06b6d4; }
.diagrama-legend-dot.leg-cobro-fijo[b-kskhelqv4q] { background: var(--ax-primary-50, #f0f0ff); border-left: 3px solid var(--ax-primary, #5b5ce6); }
.diagrama-legend-dot.leg-rango[b-kskhelqv4q] { background: #f0f9ff; border-left: 3px solid #0ea5e9; }
.diagrama-legend-dot.leg-subsidio[b-kskhelqv4q] { background: #eaf7f1; border-left: 3px solid var(--ax-success, #14845f); }
.diagrama-legend-dot.leg-contribucion[b-kskhelqv4q] { background: #fdf0ef; border-left: 3px solid var(--ax-error, #bd4d49); }
.diagrama-legend-dot.leg-impuesto[b-kskhelqv4q] { background: #fbf5e9; border-left: 3px solid var(--ax-warning, #c48a25); }
.diagrama-legend-dot.leg-descuento[b-kskhelqv4q] { background: #f0fdf4; border-left: 3px solid #16a34a; }
.diagrama-legend-dot.leg-interno[b-kskhelqv4q] { background: var(--ax-gray-100, #eef2f6); border-left: 3px solid var(--ax-gray-400, #94a3b8); }

/* ── Canvas central ── */
.diagrama-canvas-wrap[b-kskhelqv4q] {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ax-border, #e7eaf0);
  border-radius: 10px;
  background: var(--ax-surface, #fff);
  overflow: hidden;
  min-width: 0;
}
.diagrama-canvas[b-kskhelqv4q] { flex: 1; min-height: 420px; position: relative; }
.diagrama-loading[b-kskhelqv4q], .diagrama-empty[b-kskhelqv4q] {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.diagrama-canvas-hint[b-kskhelqv4q] {
  flex-shrink: 0;
  padding: 6px 12px;
  border-top: 1px solid var(--ax-border, #e7eaf0);
  background: var(--ax-surface-2, #f1f5f9);
  text-align: center;
}

/* ── Panel derecho ── */
.diagrama-right[b-kskhelqv4q] {
  min-height: 0;
  overflow-y: auto;
}
.diagrama-right .diagrama-panel[b-kskhelqv4q] { display: flex; flex-direction: column; }
.diagrama-detail-empty[b-kskhelqv4q] {
  padding: 40px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ax-text-muted, #9aa4b5);
}

/* ── Responsivo ── */
@media (max-width: 1300px) {
  .diagrama-grid[b-kskhelqv4q] { grid-template-columns: 220px minmax(0, 1fr) 260px; }
}
@media (max-width: 1100px) {
  .diagrama-grid[b-kskhelqv4q] { grid-template-columns: 1fr; }
  .diagrama-left[b-kskhelqv4q] { flex-direction: row; flex-wrap: wrap; }
  .diagrama-filtros[b-kskhelqv4q], .diagrama-leyenda[b-kskhelqv4q] { flex: 1; min-width: 240px; }
  .diagrama-right[b-kskhelqv4q] { overflow: visible; }
}
/* /Pages/Terceros/FormularioTercero.razor.rz.scp.css */
/* =========================================================
   Formulario de Tercero — estilos scoped.
   Los tres paneles de la misma fila usan el grid por defecto
   (.form-grid en axioma-layout.css = 3 tracks iguales topados).
   ========================================================= */

/* En la tercera columna, los roles se apilan: una decision por fila,
   escaneable de arriba a abajo (el wrap de pills se leia mal en columna). */
.role-checklist[b-dfyi3tgf4k] {
  flex-direction: column;
  align-items: stretch;
}

.role-checklist-item[b-dfyi3tgf4k] {
  justify-content: flex-start;
}

/* Fila del celular (indicativo + numero): el indicativo gana ancho y el
   numero cede proporcionalmente al ocupar el resto de la fila. Solo aplica
   en desktop (modo fila); en <=960px manda el apilado del sistema. */
@media (min-width: 961px) {
  [b-dfyi3tgf4k] .ax-phone-prefix {
    flex: 0 0 150px;
    width: 150px;
    max-width: 150px;
    min-width: 150px;
  }
}

@media (max-width: 1200px) {
  .form-grid[b-dfyi3tgf4k] {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 960px) {
  .form-grid[b-dfyi3tgf4k] {
    grid-template-columns: 1fr;
  }
}
/* /Pages/Terceros/ListaTerceros.razor.rz.scp.css */
/* =========================================================
   Directorio de Terceros (prototipo Marinilla) — estilos scoped
   Solo lo propio de la página; el shell master-detail y la
   lista de tarjetas viven en axioma-layout.css (Explorer).
   ========================================================= */

.directory-page[b-t65yw55qkt] {
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-4);
}

/* Título de página — fuera de la columna maestra */
.directory-title[b-t65yw55qkt] {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 2px;
}

.directory-title h1[b-t65yw55qkt] {
  font: 700 28px var(--ax-font-display);
  letter-spacing: var(--ax-letter-spacing-tighter);
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}

.directory-title small[b-t65yw55qkt] {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}



/* ===== Tarjeta de tercero (CardTemplate del Explorer) ===== */

.client[b-t65yw55qkt] {
  display: flex;
  align-items: center;
  gap: 11px;
  border-radius: 8px;
  padding: 12px 10px;
  border: 1px solid transparent;
  margin: 1px 0;
  background: transparent;
}

.client-avatar[b-t65yw55qkt] {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 11px;
  background: var(--ax-primary-50);
  color: var(--ax-primary);
}

.client-main[b-t65yw55qkt] {
  flex: 1;
  min-width: 0;
}

.client-main b[b-t65yw55qkt] {
  display: block;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}

.client-tags[b-t65yw55qkt] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 5px;
}

.client-tag-row[b-t65yw55qkt] {
  display: flex;
  gap: 10px;
  font-size: 12px;
  line-height: 1.4;
}

.client-tag-label[b-t65yw55qkt] {
  color: var(--muted);
  font-size: 11px;
  flex: 0 0 96px;
}

.client-tag-value[b-t65yw55qkt] {
  color: var(--ink);
  font-weight: 400;
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-meta[b-t65yw55qkt] {
  text-align: right;
  flex-shrink: 0;
}

.client-meta b[b-t65yw55qkt] {
  display: block;
  font-size: 12px;
  font-weight: 400;
}

.client-meta small[b-t65yw55qkt] {
  font-size: 11.5px;
  color: var(--ax-text-secondary);
  font-weight: 500;
  margin-top: 2px;
}

.estado[b-t65yw55qkt] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.estado-activo[b-t65yw55qkt] {
  color: var(--green);
}

.estado-inactivo[b-t65yw55qkt] {
  color: var(--muted);
}

.dot[b-t65yw55qkt] {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.estado-inactivo .dot[b-t65yw55qkt] {
  background: var(--muted);
}

/* ===== Panel lateral (PanelContent del Explorer) ===== */

.detail-empty[b-t65yw55qkt] {
  flex: 1;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
}

.detail-empty-icon[b-t65yw55qkt] {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ax-primary-50);
  color: var(--ax-primary);
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}

.detail-empty-title[b-t65yw55qkt] {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.detail-empty-sub[b-t65yw55qkt] {
  font-size: var(--ax-font-size-base); /* 13px */
  color: var(--muted);
  max-width: 240px;
  line-height: 1.5;
}

.detail-head[b-t65yw55qkt] {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
}

.detail-title h2[b-t65yw55qkt] {
  font: 700 16px var(--ax-font-display);
  margin: 0;
  color: var(--ink);
}

.detail-title small[b-t65yw55qkt] {
  color: var(--muted);
  font-size: 11px;
}

.detail-actions[b-t65yw55qkt] {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.button[b-t65yw55qkt] {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 7px;
  padding: 9px 14px;
  font: 600 13px var(--ax-font-family);
  cursor: pointer;
  transition: all 120ms ease;
  white-space: nowrap;
}

.button:hover[b-t65yw55qkt] {
  border-color: var(--ax-primary);
  color: var(--ax-primary);
}

.button-danger:hover[b-t65yw55qkt] {
  border-color: var(--red);
  color: var(--red);
}

.identity[b-t65yw55qkt] {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.identity-left[b-t65yw55qkt] {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.identity-actions[b-t65yw55qkt] {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Ancho estrecho (≤960px): las acciones bajan a una fila debajo de la
   identidad para no solaparse con .identity-left. */
@media (max-width: 960px) {
  .identity[b-t65yw55qkt] {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .identity-actions[b-t65yw55qkt] {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.identity-avatar[b-t65yw55qkt] {
  width: 55px;
  height: 55px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: var(--ax-font-size-xl);
  font-weight: 700;
  flex-shrink: 0;
  background: var(--ax-primary-100);
  color: var(--ax-primary);
}

.identity h3[b-t65yw55qkt] {
  font: 700 var(--ax-font-size-3xl) var(--ax-font-display);
  margin: 0 0 4px;
  color: var(--ink);
}

.identity p[b-t65yw55qkt] {
  margin: 2px 0 0;
  color: var(--ax-text-secondary);
  font-size: var(--ax-font-size-xs);
  font-weight: 500;
}

.detail-tabs[b-t65yw55qkt] {
  display: flex;
  gap: 24px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  height: 42px;
  flex-shrink: 0;
}

.detail-tab[b-t65yw55qkt] {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: var(--ax-font-size-base); /* 13px */
  cursor: pointer;
  position: relative;
  user-select: none;
}

.detail-tab:hover[b-t65yw55qkt] {
  color: var(--ax-primary);
}

.detail-tab-active[b-t65yw55qkt] {
  color: var(--ax-primary);
  font-weight: 700;
}

.detail-tab-active[b-t65yw55qkt]::after {
  content: '';
  height: 2px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ax-primary);
}

.detail-body[b-t65yw55qkt] {
  flex: 1;
  min-height: 0;
  padding: 18px 20px;
  overflow-y: auto;
}

.detail-grid[b-t65yw55qkt] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.card[b-t65yw55qkt] {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--ax-bg-card);
}

.card-full[b-t65yw55qkt] {
  grid-column: 1 / -1;
}

.card h3[b-t65yw55qkt],
.timeline h3[b-t65yw55qkt] {
  /* eyebrow: label uppercase tenue sobre el valor (patron OpenRouter v9.1) */
  font-size: var(--ax-font-size-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ax-letter-spacing-widest);
  margin: 0 0 10px;
  color: var(--ax-text-muted);
}

.card-header[b-t65yw55qkt] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.card-header h3[b-t65yw55qkt] {
  margin: 0;
}

.card-header small[b-t65yw55qkt] {
  color: var(--muted);
  font-size: 11px;
}

.info[b-t65yw55qkt] {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 7px 0;
  font-size: var(--ax-font-size-base); /* 13px */
  line-height: 1.35;
  gap: 12px;
}

.info:last-child[b-t65yw55qkt] {
  border-bottom: 0;
}

.info span[b-t65yw55qkt] {
  color: var(--ax-gray-700);
  flex-shrink: 0;
  font-size: 12px;
}

.info b[b-t65yw55qkt] {
  text-align: right;
  color: var(--ink);
  word-break: break-word;
}

.observaciones[b-t65yw55qkt] {
  margin: 0;
  font-size: var(--ax-font-size-base); /* 13px */
  color: var(--ink);
  white-space: pre-wrap;
}

.subscription[b-t65yw55qkt] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.subscription:last-child[b-t65yw55qkt] {
  border: 0;
}

.subscription b[b-t65yw55qkt] {
  font-size: var(--ax-font-size-base); /* 13px */
  color: var(--ink);
}

.subscription small[b-t65yw55qkt] {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 3px;
}

.subscription strong[b-t65yw55qkt] {
  font-size: 12px;
  color: var(--ax-primary);
}

.subscription .badge[b-t65yw55qkt] {
  margin-top: 0;
  flex-shrink: 0;
  margin-left: 10px;
}

.subscription-empty[b-t65yw55qkt] {
  color: var(--muted);
  font-size: 12px;
  padding: 6px 0;
}

.timeline[b-t65yw55qkt] {
  padding: 0;
}

.event[b-t65yw55qkt] {
  border-left: 1px solid var(--line);
  padding: 0 0 12px 15px;
  position: relative;
}

.event:last-child[b-t65yw55qkt] {
  border-left: 0;
}

.event[b-t65yw55qkt]::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 1px;
  width: 7px;
  height: 7px;
  background: var(--ax-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--ax-primary-50);
}

.event b[b-t65yw55qkt] {
  display: block;
  font-size: 11px;
  color: var(--ink);
}

.event small[b-t65yw55qkt] {
  font-size: 10px;
  color: var(--muted);
}

/* ===== Selector de rol en la barra de filtros del directorio ===== */

.explorer-rol-filter[b-t65yw55qkt] {
  width: 200px;
  min-width: 170px;
  max-width: 240px;
}

.explorer-rol-filter .mud-input-control[b-t65yw55qkt] {
  min-width: 170px;
}

/* ===== Cards independientes: Roles y Suscripciones activas ===== */

.role-list[b-t65yw55qkt] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.role-chip[b-t65yw55qkt] {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--ax-radius-full);
  background: var(--ax-info-bg);
  color: var(--ax-info-text);
  font-size: var(--ax-font-size-xs);
  font-weight: 600;
}

.suscripciones-valor[b-t65yw55qkt] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.suscripciones-valor b[b-t65yw55qkt] {
  font: 700 var(--ax-font-size-xl) var(--ax-font-display);
  color: var(--ax-primary);
}

.suscripciones-valor small[b-t65yw55qkt] {
  color: var(--muted);
  font-size: 11px;
}

/* Estado en la stat-card del detalle: texto del triplete semantico */
.ax-stat-val.ok[b-t65yw55qkt] {
  color: var(--ax-success-text);
}

.ax-stat-val.off[b-t65yw55qkt] {
  color: var(--ax-text-muted);
}