/* Estilo admin del módulo Pricing — port de admin-theme.css de la skill
   frontend-mudblazor, con dos diferencias deliberadas:

   1. TODA regla va prefijada con .pricing-ui. La app tiene marca propia
      (paleta Adgroup, Roboto) y el resto de los módulos no debe verse
      afectado: el prefijo lo garantiza aunque esta hoja cargue al final.
   2. Los colores salen de var(--mud-palette-*), no de hex fijos. Así el
      modo oscuro del layout funciona sin duplicar reglas.

   Referenciada en Server/Pages/_Host.cshtml después de MudBlazor.min.css.
   Gana sobre los overrides globales de zigu.css por especificidad (el
   prefijo agrega una clase), no por orden de carga: zigu.css se inyecta
   desde MainLayout.razor y queda después en el documento.

   No declara nada dentro de @media print. */

.pricing-ui {
    --pricing-radius-card: 12px;
    --pricing-radius-badge: 6px;
    --pricing-shadow-card: 0 3px 4px 0 rgba(0, 0, 0, .03);
    --pricing-shadow-drop: 0 7px 18px 0 rgba(0, 0, 0, .09);
}

/* ── Texto atenuado ──────────────────────────────────────────────────────
   MudBlazor pinta Color.Secondary con --mud-palette-secondary, y en la paleta
   Adgroup Secondary es un acento de marca (verde), no el gris de apoyo: los
   subtítulos del encabezado, los labels de las tarjetas de métrica y los
   captions salían verdes. En el módulo Color.Secondary se usa siempre para
   texto de apoyo, así que dentro de .pricing-ui vuelve al gris del tema.
   Lleva !important porque MudBlazor declara la suya con !important. */
.pricing-ui .mud-typography.mud-secondary-text {
    color: var(--mud-palette-text-secondary) !important;
}

/* La tarjeta de acento manda sobre esto: sobre fondo oscuro el texto de apoyo
   es blanco al 65%, no el gris del tema (regla propia más abajo). */

/* ── Página: contenido centrado y encabezado ────────────────────────────
   El contenido no se estira infinito: 1320px centrados. */
.pricing-ui .uimud-contenido {
    max-width: 1320px;
    margin: 0 auto;
}

.pricing-ui .uimud-encabezado {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pricing-ui .uimud-encabezado .mud-typography-body2 {
    margin-top: .125rem;
}

/* Los inputs dentro de las acciones del encabezado no se estiran. */
.pricing-ui .uimud-encabezado .mud-input-control {
    width: auto;
}

/* Toolbars de filtros: TODOS los controles a la misma altura (40px).
   Los márgenes densos y los botones de 36px descuadran la fila. */
.pricing-ui .uimud-encabezado .mud-input-control,
.pricing-ui .uimud-filtros .mud-input-control {
    margin: 0;
}

.pricing-ui .uimud-filtros {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
}

/* Los controles del toolbar no crecen: MudBlazor les pone flex: 1 1 auto, así
   que el ancho que fija la pantalla queda pisado y los selects se reparten la
   fila completa (con el botón de filtrar empujado al otro extremo). */
.pricing-ui .uimud-encabezado .mud-select,
.pricing-ui .uimud-filtros .mud-select,
.pricing-ui .uimud-encabezado .mud-input-control,
.pricing-ui .uimud-filtros .mud-input-control,
.pricing-ui .uimud-encabezado .mud-picker,
.pricing-ui .uimud-filtros .mud-picker {
    flex: 0 0 auto;
}

.pricing-ui .uimud-encabezado .mud-input.mud-input-outlined,
.pricing-ui .uimud-filtros .mud-input.mud-input-outlined {
    height: 40px;
    display: flex;
    align-items: center;
}

/* El texto va centrado en esos 40px: fuera el padding vertical heredado. */
.pricing-ui .uimud-encabezado .mud-input.mud-input-outlined .mud-input-slot,
.pricing-ui .uimud-filtros .mud-input.mud-input-outlined .mud-input-slot {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}

.pricing-ui .uimud-encabezado .mud-button-root.mud-button,
.pricing-ui .uimud-filtros .mud-button-root.mud-button {
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    align-self: center;
}

/* ── Botones ─────────────────────────────────────────────────────────────
   Sin MAYÚSCULAS Material: el estilo admin usa minúscula normal. */
.pricing-ui .mud-button-root {
    text-transform: none;
    letter-spacing: normal;
}

/* ── Tarjeta ─────────────────────────────────────────────────────────────
   Uso: <MudPaper Elevation="0" Class="uimud-card pa-6">. El borde manda; la
   sombra es casi invisible. Nunca Elevation de Material. */
.pricing-ui .uimud-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pricing-radius-card);
    box-shadow: var(--pricing-shadow-card);
}

/* Encabezado de tarjeta con acciones a la derecha. */
.pricing-ui .uimud-card-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

/* ── Tarjeta de acento (máximo UNA por página) ───────────────────────────
   El número principal de la pantalla sobre el color oscuro del tema. */
.pricing-ui .uimud-card-dark {
    background: var(--mud-palette-dark);
    border-color: var(--mud-palette-dark);
    color: var(--mud-palette-dark-text);
}

/* El !important no es adorno: MudBlazor declara .mud-primary-text y
   .mud-secondary-text con !important, así que sin él la etiqueta y el número de
   esta tarjeta se pintan con el violeta y el verde de la marca sobre el fondo
   oscuro, y quedan sin contraste. */
.pricing-ui .uimud-card-dark .mud-typography {
    color: var(--mud-palette-dark-text) !important;
}

.pricing-ui .uimud-card-dark .mud-typography.mud-secondary-text,
.pricing-ui .uimud-card-dark .mud-secondary-text {
    color: rgba(255, 255, 255, .65) !important;
}

.pricing-ui .uimud-card-dark a.mud-link,
.pricing-ui .uimud-card-dark .mud-icon-root {
    color: var(--mud-palette-dark-text) !important;
}

/* ── Fila de tarjetas de métrica ─────────────────────────────────────────
   Todas las tarjetas de una misma fila al alto de la más alta: una tarjeta más
   baja porque no tiene delta corta la línea de la fila y se lee como un error
   de maquetado. El delta se ancla al pie para que los números de arriba queden
   alineados entre tarjetas. */
.pricing-ui .uimud-kpi > .mud-grid-item {
    display: flex;
}

.pricing-ui .uimud-kpi > .mud-grid-item > .uimud-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.pricing-ui .uimud-kpi .uimud-metric-delta {
    margin-top: auto;
}

/* ── Badges de estado ────────────────────────────────────────────────────
   Fondo al 12% del color + texto al 100%. Nunca chip relleno sólido: sirven
   igual sobre claro y oscuro. */
.pricing-ui .uimud-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1875rem .5rem;
    border-radius: var(--pricing-radius-badge);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.pricing-ui .uimud-badge .mud-icon-root {
    font-size: .875rem;
}

.pricing-ui .uimud-badge-primary {
    background: rgba(var(--mud-palette-primary-rgb), .12);
    color: var(--mud-palette-primary);
}

.pricing-ui .uimud-badge-success {
    background: rgba(var(--mud-palette-success-rgb), .12);
    color: var(--mud-palette-success);
}

.pricing-ui .uimud-badge-danger {
    background: rgba(var(--mud-palette-error-rgb), .12);
    color: var(--mud-palette-error);
}

.pricing-ui .uimud-badge-warning {
    background: rgba(var(--mud-palette-warning-rgb), .15);
    color: var(--mud-palette-warning);
}

.pricing-ui .uimud-badge-info {
    background: rgba(var(--mud-palette-info-rgb), .12);
    color: var(--mud-palette-info);
}

.pricing-ui .uimud-badge-muted {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

/* Los MudChip que queden dentro de Pricing se acercan al look. */
.pricing-ui .mud-chip {
    border-radius: var(--pricing-radius-badge);
    font-weight: 500;
}

/* ── Tiles de icono para tarjetas de métrica ─────────────────────────────
   Cuadrado 44px con fondo al 12% del color e icono al 100%. */
.pricing-ui .uimud-tile {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.pricing-ui .uimud-tile .mud-icon-root {
    font-size: 22px;
}

.pricing-ui .uimud-tile-primary {
    background: rgba(var(--mud-palette-primary-rgb), .12);
    color: var(--mud-palette-primary);
}

.pricing-ui .uimud-tile-success {
    background: rgba(var(--mud-palette-success-rgb), .12);
    color: var(--mud-palette-success);
}

.pricing-ui .uimud-tile-warning {
    background: rgba(var(--mud-palette-warning-rgb), .15);
    color: var(--mud-palette-warning);
}

.pricing-ui .uimud-tile-danger {
    background: rgba(var(--mud-palette-error-rgb), .12);
    color: var(--mud-palette-error);
}

.pricing-ui .uimud-tile-info {
    background: rgba(var(--mud-palette-info-rgb), .12);
    color: var(--mud-palette-info);
}

.pricing-ui .uimud-tile-muted {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

/* ── Avatar de iniciales ─────────────────────────────────────────────────
   26px, fondo al 12% del color y letra al 100%; el color sale del nombre. */
.pricing-ui .uimud-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: .6875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* ── Tablas (MudSimpleTable, MudTable y MudDataGrid) ─────────────────────
   Header 13px/500 gris sobre fondo gris; filas de 48px con línea 1px.
   Los tres primeros bloques deshacen los overrides globales de zigu.css
   (padding lateral de 32px y celdas de .75rem), que dentro de Pricing
   descuadran la tarjeta que contiene la tabla. */
.pricing-ui .mud-table {
    padding: 0;
}

.pricing-ui .mud-table .mud-table-cell,
.pricing-ui .mud-table .mud-table-cell .mud-typography-body1,
.pricing-ui .mud-simple-table tbody td {
    font-size: .875rem;
}

.pricing-ui .mud-table .mud-table-head .mud-table-cell,
.pricing-ui .mud-simple-table thead th {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.pricing-ui .mud-table .mud-table-body .mud-table-cell,
.pricing-ui .mud-simple-table tbody td {
    height: 48px;
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

/* Sin cebra: el estilo separa las filas con líneas, no con fondo alterno. */
.pricing-ui .mud-table.mud-table-striped tbody .mud-table-row:nth-of-type(odd),
.pricing-ui .mud-simple-table.mud-table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

/* Grillas y tablas dentro de una uimud-card no duplican el marco. */
.pricing-ui .uimud-card .mud-table,
.pricing-ui .uimud-card .mud-simple-table {
    box-shadow: none;
    border: none;
    background: transparent;
}

/* MudDataGrid suelto en la página: que se vea como tarjeta. */
.pricing-ui .mud-table.mud-data-grid {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pricing-radius-card);
    box-shadow: var(--pricing-shadow-card);
}

/* Los enlaces dentro de tablas no llevan subrayado permanente. */
.pricing-ui .mud-table a.mud-link,
.pricing-ui .mud-simple-table a.mud-link {
    text-decoration: none;
}

.pricing-ui .mud-table a.mud-link:hover,
.pricing-ui .mud-simple-table a.mud-link:hover {
    text-decoration: underline;
}

/* Iconos sin Color: grises, no de color. La paleta Adgroup define
   --mud-palette-action-default en carmín, así que un MudIconButton sin Color sale
   teñido. Tres lugares donde eso rompe la lectura: las acciones de fila (la tabla
   se vuelve un semáforo), el calendario de un picker (grita más que el dato) y la X
   de cerrar del drawer (parece un botón de borrar). La lista es explícita a
   propósito: un icono al que la pantalla SÍ le pasa Color debe conservarlo. */
.pricing-ui .mud-table .mud-icon-button,
.pricing-ui .mud-simple-table .mud-icon-button,
.pricing-ui .mud-input-adornment .mud-icon-button,
.pricing-ui .uimud-drawer-header .mud-icon-button {
    color: var(--mud-palette-text-secondary);
}

.pricing-ui .mud-table .mud-icon-button:hover,
.pricing-ui .mud-simple-table .mud-icon-button:hover,
.pricing-ui .mud-input-adornment .mud-icon-button:hover,
.pricing-ui .uimud-drawer-header .mud-icon-button:hover {
    color: var(--mud-palette-text-primary);
}

/* Columna numérica alineada a la derecha (uso: CellClass="text-right"). */
.pricing-ui .mud-table .text-right,
.pricing-ui .mud-simple-table .text-right {
    text-align: right;
}

/* El encabezado de esa columna no sigue al text-align: MudDataGrid mete el
   título en un contenedor flex, así que hay que mover el eje principal. */
.pricing-ui .mud-table .mud-table-head .text-right .column-header {
    justify-content: flex-end;
}

/* zigu.css lleva a 150px el icono de cualquier MudFileUpload (viene del
   dropzone grande de otra pantalla). En Pricing el upload es un botón normal,
   así que el icono vuelve al tamaño del texto del botón. */
.pricing-ui .mud-file-upload label svg.mud-icon-root {
    width: 1em;
    height: 1em;
}

/* Bajo el breakpoint, MudDataGrid pasa a tarjetas label/valor y pinta el label (un
   ::before con el data-label de la columna) con un color de la marca: la tarjeta se
   lee como una lista de enlaces. Es el label de un dato, va en el gris de apoyo.
   La regla solo alcanza al modo tarjetas: en escritorio ese ::before no tiene
   contenido. Lleva !important porque la declara MudBlazor con !important. */
.pricing-ui .mud-table .mud-table-cell::before {
    color: var(--mud-palette-text-secondary) !important;
}

/* Celda que no parte: rangos de fecha y fecha+hora. Sin esto MudDataGrid reparte el
   ancho entre las columnas y una fecha corta queda en tres líneas. */
.pricing-ui .mud-table .uimud-nowrap,
.pricing-ui .mud-simple-table .uimud-nowrap {
    white-space: nowrap;
}

/* Celda de acciones: los iconos en una sola línea. Con tres acciones, el
   espacio entre botones inline hace que el tercero caiga a una segunda fila. */
.pricing-ui .mud-table .uimud-acciones,
.pricing-ui .mud-simple-table .uimud-acciones {
    display: flex;
    gap: .125rem;
}

/* Cifra negativa: el indicador en rojo se lee sin buscar el signo. */
.pricing-ui .pricing-neg {
    color: var(--mud-palette-error);
    font-weight: 600;
}

/* ── Pestañas de texto ───────────────────────────────────────────────────
   Botones de texto con línea de base gris; el activo va primario con el
   subrayado encima. Sin los 160px de ancho mínimo de Material. */
.pricing-ui .uimud-tabs {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: .25rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pricing-ui .uimud-tabs .mud-button-root {
    min-width: unset;
    height: 44px;
    padding: 10px 16px;
    border-radius: 0;
    font-size: .875rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    border-bottom: 2px solid transparent;
}

.pricing-ui .uimud-tabs .mud-button-root:hover {
    background: transparent;
    color: var(--mud-palette-text-primary);
}

.pricing-ui .uimud-tabs .mud-button-root.activa {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
}

/* Cuando la tira de pestañas es la acción del encabezado de una tarjeta, ocupa todo
   el ancho: si no, el MudSpacer del encabezado la empuja a la derecha y la línea
   inferior queda flotando en media tarjeta. */
.pricing-ui .uimud-card-header .uimud-tabs {
    flex: 1 1 auto;
}

/* ── Formularios ─────────────────────────────────────────────────────────
   Label externo 13px/500 cuando el formulario es grande; para los cortos
   basta el label flotante de MudBlazor. */
.pricing-ui .uimud-field-label {
    display: block;
    margin-bottom: .375rem;
    color: var(--mud-palette-text-primary);
    font-size: .8125rem;
    font-weight: 500;
}

.pricing-ui .mud-input-control .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs);
}

/* ── Fila label-valor ────────────────────────────────────────────────────
   Label gris de ancho fijo, valor con peso. Nunca una tabla para esto. */
.pricing-ui .uimud-fila {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .4375rem 0;
}

.pricing-ui .uimud-fila-label {
    flex: none;
    width: 140px;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}

.pricing-ui .uimud-fila-valor {
    font-size: .875rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Icono opcional en el label de la fila (panel lateral de una ficha). */
.pricing-ui .uimud-fila-label .mud-icon-root {
    font-size: 17px;
    color: var(--mud-palette-text-secondary);
    margin-right: .5rem;
    vertical-align: -4px;
}

/* ── Desglose de un cálculo (calculadoras) ───────────────────────
   Las mismas filas label-valor, pero con el monto pegado al borde derecho: las
   etiquetas del desglose son de largo dispar y el ancho fijo de 140px las
   cortaría. Los subtotales se marcan con una línea y peso, nunca con color: el
   color en esta tarjeta está reservado a los badges de aviso. */
.pricing-ui .uimud-desglose .uimud-fila-label {
    flex: 1 1 auto;
    width: auto;
}

.pricing-ui .uimud-desglose .uimud-fila-valor {
    margin-left: auto;
    text-align: right;
}

.pricing-ui .uimud-desglose .uimud-fila-separada {
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: .25rem;
    padding-top: .75rem;
}

.pricing-ui .uimud-desglose .uimud-fila-fuerte .uimud-fila-label,
.pricing-ui .uimud-desglose .uimud-fila-fuerte .uimud-fila-valor {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

/* ── Grupo de datos en columnas (label arriba, valor abajo) ─────────────── */
.pricing-ui .uimud-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.pricing-ui .uimud-datos > div {
    min-width: 0;
}

.pricing-ui .uimud-dato-label {
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: .125rem;
}

.pricing-ui .uimud-dato-valor {
    font-size: .875rem;
    font-weight: 600;
}

/* Panel lateral de detalles: acompaña el scroll del contenido. */
.pricing-ui .uimud-lateral {
    position: sticky;
    top: 88px;
}

/* Texto largo (motivo, comentarios): contenido a un ancho legible. */
.pricing-ui .uimud-prosa {
    max-width: 72ch;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Bitácora (actividad) ────────────────────────────────────────────────
   Riel de 1px con un disco de icono por entrada, texto plano al lado y
   fecha relativa gris debajo. Una entrada NO va en tarjeta: 40 entradas en
   40 cajas se leen como 40 formularios. */
.pricing-ui .uimud-bitacora {
    position: relative;
}

.pricing-ui .uimud-bitacora::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: var(--mud-palette-lines-default);
}

.pricing-ui .uimud-bitacora-item {
    position: relative;
    display: flex;
    gap: .875rem;
    padding-bottom: 1.5rem;
}

.pricing-ui .uimud-bitacora-item:last-child {
    padding-bottom: 0;
}

.pricing-ui .uimud-bitacora-icono {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.pricing-ui .uimud-bitacora-icono .mud-icon-root {
    font-size: 1.0625rem;
    color: var(--mud-palette-text-secondary);
}

.pricing-ui .uimud-bitacora-cuerpo {
    flex: 1;
    min-width: 0;
    padding-top: .125rem;
}

.pricing-ui .uimud-bitacora-titulo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: .875rem;
    color: var(--mud-palette-text-primary);
}

.pricing-ui .uimud-bitacora-autor {
    font-weight: 600;
}

.pricing-ui .uimud-bitacora-fecha {
    margin-top: .125rem;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.pricing-ui .uimud-bitacora-texto {
    margin-top: .5rem;
    font-size: .875rem;
    color: var(--mud-palette-text-primary);
}

/* ── Drawer lateral (formulario / detalle) ───────────────────────────────
   Flotante, despegado del borde, con header y pie fijos y el cuerpo
   scrolleable. El overlay oscurece y desenfoca lo que queda detrás. */
.pricing-ui .uimud-drawer {
    box-shadow: var(--pricing-shadow-drop);
    max-width: calc(100vw - 24px);
}

.pricing-ui .mud-drawer.uimud-drawer {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.pricing-ui .uimud-drawer .mud-drawer-content,
.pricing-ui .uimud-drawer .uimud-drawer-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* El panel recibe el foco al abrir solo para capturar Esc: sin anillo. */
.pricing-ui .uimud-drawer .uimud-drawer-panel:focus {
    outline: none;
}

/* Cerrado no debe ocupar caja. MudBlazor lo deja en position:absolute a la
   derecha del contenido, y con el ancho del drawer (560-640px) eso agrega
   scroll horizontal a toda la página: medido en angosto, 1052px de
   scrollWidth contra 492px de viewport. */
.pricing-ui .mud-drawer.uimud-drawer.mud-drawer--closed {
    display: none;
}

/* SOLO abierto: cerrado vuelve al posicionamiento de MudBlazor (fuera de
   pantalla) o queda flotando encima interceptando clics. */
.pricing-ui .mud-drawer.uimud-drawer.mud-drawer--open {
    top: 12px !important;
    height: calc(100vh - 24px) !important;
    border-radius: 16px;
    overflow: hidden;
}

.pricing-ui .mud-drawer.uimud-drawer.mud-drawer--open.mud-drawer-pos-right {
    right: 12px !important;
}

.pricing-ui .mud-overlay.mud-overlay-drawer {
    background-color: rgba(13, 14, 18, .45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.pricing-ui .uimud-drawer-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 16px 24px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pricing-ui .uimud-drawer-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 24px;
}

.pricing-ui .uimud-drawer-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    padding: 16px 24px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Formulario que va entero en el Body del drawer, con su propio pie (el pie del
   drawer queda vacío): el pie se pega abajo y ocupa todo el ancho, para que
   Guardar no quede flotando a media altura ni se pierda al scrollear. */
.pricing-ui .uimud-drawer-form {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

.pricing-ui .uimud-drawer-campos {
    flex: 1 0 auto;
}

.pricing-ui .uimud-drawer-form > .uimud-drawer-footer {
    position: sticky;
    bottom: -24px;
    margin: 24px -24px -24px;
    background: var(--mud-palette-surface);
}

/* ── ApexCharts con el tema ──────────────────────────────────────────────
   Las opciones del gráfico llevan los colores de serie; ejes, grilla,
   leyenda y tooltip se pintan acá con las variables de MudBlazor, así el
   modo oscuro funciona sin re-renderizar el gráfico. */
.pricing-ui .apexcharts-text {
    fill: var(--mud-palette-text-secondary) !important;
}

.pricing-ui .apexcharts-gridline {
    stroke: var(--mud-palette-lines-default) !important;
}

.pricing-ui .apexcharts-legend-text {
    color: var(--mud-palette-text-secondary) !important;
}

.pricing-ui .apexcharts-tooltip {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-color: var(--mud-palette-lines-default) !important;
    box-shadow: var(--pricing-shadow-drop) !important;
}

.pricing-ui .apexcharts-tooltip-title {
    background: var(--mud-palette-background-gray) !important;
    border-color: var(--mud-palette-lines-default) !important;
}

/* Los bordes entre porciones del donut siguen a la superficie. */
.pricing-ui .apexcharts-pie-series path {
    stroke: var(--mud-palette-surface) !important;
}

/* ── Detalle plegable ────────────────────────────────────────────────────
   <details> nativo en lugar de MudExpansionPanel: el panel trae su propia
   tarjeta con sombra y, dentro de una tarjeta, anida una caja en otra. Acá el
   resumen es solo un texto con su flecha y el contenido, un bloque gris. */
.pricing-ui .uimud-detalle > summary {
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
    font-weight: 500;
    list-style-position: inside;
    padding: .25rem 0;
}

.pricing-ui .uimud-detalle > summary:hover {
    color: var(--mud-palette-text-primary);
}

.pricing-ui .uimud-detalle > pre {
    max-height: 320px;
    overflow: auto;
    margin: .5rem 0 0;
    padding: .75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pricing-radius-badge);
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Menús y popovers ───────────────────────────────────────────────────── */
.pricing-ui .mud-popover,
.pricing-ui .mud-menu-list {
    box-shadow: var(--pricing-shadow-drop);
}

/* ── Responsivo ──────────────────────────────────────────────────────────
   Las grillas ya escalan con xs/sm/md de MudGrid; esto cubre lo demás.
   Verificar siempre a 390px, no de ojo. */
@media (max-width: 599.98px) {
    .pricing-ui .uimud-card {
        padding: 16px !important;
    }

    .pricing-ui .uimud-encabezado {
        align-items: flex-start;
        gap: .75rem;
    }

    /* La banda de KPI colapsa a columna. */
    .pricing-ui .uimud-datos {
        flex-direction: column;
        gap: 1rem;
    }

    .pricing-ui .uimud-fila {
        align-items: flex-start;
        flex-direction: column;
        gap: .125rem;
    }

    .pricing-ui .uimud-fila-label {
        width: auto;
    }

    /* El desglose sí mantiene label y valor en la misma línea: son pares cortos
       y apilarlos duplicaría el alto de la tarjeta en el teléfono. */
    .pricing-ui .uimud-desglose .uimud-fila {
        align-items: center;
        flex-direction: row;
        gap: 1rem;
    }

    .pricing-ui .uimud-lateral {
        position: static;
    }

    .pricing-ui .uimud-drawer,
    .pricing-ui .mud-drawer.uimud-drawer.mud-drawer--open {
        max-width: 100vw;
    }

    .pricing-ui .mud-drawer.uimud-drawer.mud-drawer--open {
        top: 0 !important;
        height: 100vh !important;
        border-radius: 0;
    }

    .pricing-ui .mud-drawer.uimud-drawer.mud-drawer--open.mud-drawer-pos-right {
        right: 0 !important;
    }

    .pricing-ui .uimud-drawer-body {
        padding: 16px;
    }

    .pricing-ui .uimud-drawer-header,
    .pricing-ui .uimud-drawer-footer {
        padding: 12px 16px;
    }

    .pricing-ui .uimud-drawer-form > .uimud-drawer-footer {
        bottom: -16px;
        margin: 16px -16px -16px;
    }
}