/* _content/Dotico.Shared.UI/Components/AppBadge.razor.rz.scp.css */
.app-badge[b-yq4ipyyhi6] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.125rem var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background-color: var(--color-bg);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.app-badge--primary[b-yq4ipyyhi6] {
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
}

.app-badge--success[b-yq4ipyyhi6] {
    background-color: var(--color-success-soft);
    color: var(--color-success);
}

.app-badge--warning[b-yq4ipyyhi6] {
    background-color: var(--color-warning-soft);
    color: var(--color-warning);
}

.app-badge--danger[b-yq4ipyyhi6] {
    background-color: var(--color-danger-soft);
    color: var(--color-danger);
}

.app-badge__dot[b-yq4ipyyhi6] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background-color: currentColor;
}
/* _content/Dotico.Shared.UI/Components/AppBarcodeInput.razor.rz.scp.css */
.app-barcode[b-0gv5h9uvm9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.app-barcode__fila[b-0gv5h9uvm9] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.app-barcode__input[b-0gv5h9uvm9] {
    flex: 1;
    min-width: 0;
    height: var(--control-height-md);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-mono, var(--font-family));
    font-size: var(--font-size-md);
    letter-spacing: 0.5px;
    color: var(--color-text);
    background-color: var(--color-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.app-barcode__input:focus[b-0gv5h9uvm9] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.app-barcode__input:disabled[b-0gv5h9uvm9] {
    background-color: var(--color-bg-subtle);
    color: var(--color-text-muted);
    cursor: not-allowed;
}
/* _content/Dotico.Shared.UI/Components/AppBottomSheet.razor.rz.scp.css */
/* Hoja inferior (AppBottomSheet) — F-52 spec del dueño 2026-09-10.
   Mismas convenciones que AppModal: tokens del sistema, BEM, z-index drawer (900):
   queda SOBRE la barra inferior (sticky, 100) y DEBAJO de modales (1000). */

.app-bottom-sheet[b-gqn5zmysoq] {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Fondo oscurecido: el contenido detrás de la hoja se cubre (mismo token de AppModal) */
.app-bottom-sheet__backdrop[b-gqn5zmysoq] {
    position: absolute;
    inset: 0;
    background-color: var(--color-overlay);
}

.app-bottom-sheet__panel[b-gqn5zmysoq] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 35rem; /* en escritorio la hoja no ocupa todo el ancho */
    margin-inline: auto;
    max-height: 75vh;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-lg);
    padding-bottom: env(safe-area-inset-bottom);
    outline: none;
    touch-action: pan-y; /* el scroll interno del body sigue funcionando */
    animation: app-bottom-sheet-entrar-b-gqn5zmysoq var(--transition-normal);
    transition: transform var(--transition-fast);
}

/* Retroalimentación del swipe (sin estilos inline, regla §4.1) */
.app-bottom-sheet__panel--arrastrando[b-gqn5zmysoq] {
    transform: translateY(var(--space-6));
    transition: none;
}

/* Handle 34×4px (spec): gesto de cierre por swipe hacia abajo */
.app-bottom-sheet__handle[b-gqn5zmysoq] {
    width: 34px;
    height: 4px;
    margin: var(--space-2) auto 0;
    border-radius: var(--radius-full);
    background-color: var(--color-border);
    touch-action: none;
}

.app-bottom-sheet__header[b-gqn5zmysoq] {
    padding: var(--space-2) var(--space-4) 0;
}

.app-bottom-sheet__title[b-gqn5zmysoq] {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    text-align: center;
}

.app-bottom-sheet__body[b-gqn5zmysoq] {
    flex: 1;
    min-height: 0;
    padding: var(--space-4);
    overflow-y: auto;
}

.app-bottom-sheet__footer[b-gqn5zmysoq] {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg-subtle);
}

@keyframes app-bottom-sheet-entrar-b-gqn5zmysoq {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}
/* _content/Dotico.Shared.UI/Components/AppBottomTabBar.razor.rz.scp.css */
/* Barra inferior móvil (AppBottomTabBar) — F-52 spec del dueño 2026-09-10.
   Altura 64px + safe-area, grid 1fr 60px 1fr, surface con hairline superior.
   El posicionamiento fixed lo aporta el consumidor (aquí solo la estructura visual). */

.app-bottom-tabbar[b-zpklkxjz5f] {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    align-items: center;
    min-height: 64px;
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding-bottom: env(safe-area-inset-bottom);
}

.app-bottom-tabbar__tab[b-zpklkxjz5f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    position: relative;
    height: 100%;
    padding: var(--space-2) var(--space-1);
    text-decoration: none;
    color: var(--color-text-muted);
    border-radius: var(--radius-md);
}

.app-bottom-tabbar__tab--activa[b-zpklkxjz5f] {
    color: var(--nav-active-text);
}

.app-bottom-tabbar__tab--activa .app-bottom-tabbar__label[b-zpklkxjz5f] {
    font-weight: var(--font-weight-bold);
}

.app-bottom-tabbar__icono[b-zpklkxjz5f] {
    font-size: var(--font-size-xl);
    line-height: 1;
}

.app-bottom-tabbar__label[b-zpklkxjz5f] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* Círculo central: 46px sobresaliendo 22px por encima de la barra, con anillo de 3px del
   color de la barra (spec F-52). NUNCA icono "+" (comunica crear, no navegar). */
.app-bottom-tabbar__centro[b-zpklkxjz5f] {
    position: relative;
    top: -22px;
    justify-self: center;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border: 3px solid var(--color-surface);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    padding: 0;
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.app-bottom-tabbar__centro:hover[b-zpklkxjz5f] {
    background-color: var(--color-primary-strong);
}

.app-bottom-tabbar__centro:active[b-zpklkxjz5f] {
    transform: scale(0.94);
}

.app-bottom-tabbar__centro-icono[b-zpklkxjz5f] {
    font-size: var(--font-size-xl);
    line-height: 1;
}

/* Badge del slot derecho: píldora de peligro sobre la esquina del tab; oculto en 0; "99+" */
.app-bottom-tabbar__badge[b-zpklkxjz5f] {
    position: absolute;
    top: 2px;
    left: calc(50% + var(--space-1));
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 var(--space-1);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-danger);
    color: var(--color-on-primary);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-surface);
}
/* _content/Dotico.Shared.UI/Components/AppButton.razor.rz.scp.css */
/* El estilo visual completo del botón vive AQUÍ + tokens.css.
   Cambiar todos los botones = editar tokens o este archivo. Nada más. */

.app-button[b-34kscwvc5w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    height: var(--control-height-md);
    padding: 0 var(--space-4);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
    white-space: nowrap;
}

.app-button:disabled[b-34kscwvc5w],
.app-button--loading[b-34kscwvc5w],
.app-button--deshabilitado[b-34kscwvc5w] {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

/* Versión enlace: sin subrayado de link */
a.app-button[b-34kscwvc5w] {
    text-decoration: none;
}

/* Variantes */
.app-button--primary[b-34kscwvc5w] {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.app-button--primary:hover:not(:disabled)[b-34kscwvc5w] {
    background-color: var(--color-primary-strong);
}

.app-button--secondary[b-34kscwvc5w] {
    background-color: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.app-button--secondary:hover:not(:disabled)[b-34kscwvc5w] {
    background-color: var(--color-primary-soft);
}

.app-button--danger[b-34kscwvc5w] {
    background-color: var(--color-danger);
    color: var(--color-surface);
}

.app-button--danger:hover:not(:disabled)[b-34kscwvc5w] {
    opacity: 0.9;
}

.app-button--ghost[b-34kscwvc5w] {
    background-color: transparent;
    color: var(--color-text-secondary);
}

.app-button--ghost:hover:not(:disabled)[b-34kscwvc5w] {
    background-color: var(--color-bg-subtle);
}

/* Tamaños */
.app-button--sm[b-34kscwvc5w] {
    height: var(--control-height-sm);
    padding: 0 var(--space-3);
    font-size: var(--font-size-xs);
}

.app-button--lg[b-34kscwvc5w] {
    height: var(--control-height-lg);
    padding: 0 var(--space-6);
    font-size: var(--font-size-md);
}

/* Contorno: blanco con borde azul Dotico, texto centrado; hover rellena azul */
.app-button--outline[b-34kscwvc5w] {
    background-color: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.app-button--outline:hover:not(:disabled)[b-34kscwvc5w] {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

/* Contorno peligro: blanco con borde azul Dotico; al pasar el cursor se pone ROJO
   (estilo oficial del botón de cerrar sesión, decidido por el dueño) */
.app-button--outline-peligro[b-34kscwvc5w] {
    background-color: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.app-button--outline-peligro:hover:not(:disabled)[b-34kscwvc5w] {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-surface);
}

/* Elementos internos (BEM) */
.app-button__spinner[b-34kscwvc5w] {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-full);
    animation: app-button-spin-b-34kscwvc5w 0.8s linear infinite;
}

@keyframes app-button-spin-b-34kscwvc5w {
    to { transform: rotate(360deg); }
}
/* _content/Dotico.Shared.UI/Components/AppCard.razor.rz.scp.css */
.app-card[b-ihcdvxommx] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.app-card__header[b-ihcdvxommx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.app-card__title[b-ihcdvxommx] {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.app-card__body[b-ihcdvxommx] {
    padding: var(--space-4);
}

.app-card__footer[b-ihcdvxommx] {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg-subtle);
}
/* _content/Dotico.Shared.UI/Components/AppCargando.razor.rz.scp.css */
/* Overlay de operaciones: solo disposición del cuerpo; el backdrop/centrado vienen de AppModal. */
.app-cargando__cuerpo[b-99cbshq2kf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
/* _content/Dotico.Shared.UI/Components/AppCheckbox.razor.rz.scp.css */
.app-checkbox[b-phe0vrv1nw] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.app-checkbox__input[b-phe0vrv1nw] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
}

.app-checkbox:has(.app-checkbox__input:disabled)[b-phe0vrv1nw] {
    cursor: not-allowed;
    color: var(--color-text-muted);
}
/* _content/Dotico.Shared.UI/Components/AppComboBox.razor.rz.scp.css */
.app-combo[b-729e1165or] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.app-combo__label[b-729e1165or] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.app-combo__input[b-729e1165or] {
    height: var(--control-height-md);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    color: var(--color-text);
    background-color: var(--color-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.app-combo__input:focus[b-729e1165or] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.app-combo__lista[b-729e1165or] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    margin: var(--space-1) 0 0;
    padding: var(--space-1);
    list-style: none;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 14rem;
    overflow-y: auto;
}

.app-combo__opcion[b-729e1165or] {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    cursor: pointer;
}

.app-combo__opcion:hover[b-729e1165or],
.app-combo__opcion[aria-selected="true"][b-729e1165or] {
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
}

.app-combo__vacio[b-729e1165or] {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
/* _content/Dotico.Shared.UI/Components/AppConfirmDialog.razor.rz.scp.css */
/* Solo los detalles internos del diálogo de confirmación;
   el modal (backdrop + centrado) lo aporta AppModal (§4.2b). */

.app-confirm__body[b-122irgkv2u] {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    white-space: pre-line;
}
/* _content/Dotico.Shared.UI/Components/AppCurrencyInput.razor.rz.scp.css */
.app-currency[b-y5c85t0aqk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.app-currency__label[b-y5c85t0aqk] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.app-currency__grupo[b-y5c85t0aqk] {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.app-currency__grupo:focus-within[b-y5c85t0aqk] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.app-currency__simbolo[b-y5c85t0aqk] {
    padding-left: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.app-currency__input[b-y5c85t0aqk] {
    flex: 1;
    height: var(--control-height-md);
    padding: 0 var(--space-3);
    border: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    color: var(--color-text);
}

.app-currency__input:focus[b-y5c85t0aqk] {
    outline: none;
}

.app-currency__input:disabled[b-y5c85t0aqk] {
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.app-currency__error[b-y5c85t0aqk] {
    font-size: var(--font-size-xs);
    color: var(--color-danger);
}
/* _content/Dotico.Shared.UI/Components/AppDataGrid.razor.rz.scp.css */
.app-table__wrapper[b-tzkwgc62gb] {
    width: 100%;
    overflow-x: auto;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.app-table[b-tzkwgc62gb] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.app-table__th[b-tzkwgc62gb] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg-subtle);
    white-space: nowrap;
}

.app-table__td[b-tzkwgc62gb] {
    padding: var(--space-3) var(--space-4);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.app-table__tr:last-child .app-table__td[b-tzkwgc62gb] {
    border-bottom: none;
}

.app-table__tr:hover[b-tzkwgc62gb] {
    background-color: var(--color-bg-subtle);
}

.app-table__th--acciones[b-tzkwgc62gb],
.app-table__td--acciones[b-tzkwgc62gb] {
    text-align: right;
    white-space: nowrap;
}

.app-table__vacio[b-tzkwgc62gb] {
    text-align: center;
    padding: var(--space-8);
}

/* Paginación de 20 filas (F-52 paso 5): al pie de la tabla, alineada a la derecha */
.app-table__paginacion[b-tzkwgc62gb] {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg-subtle);
}
/* _content/Dotico.Shared.UI/Components/AppDatePicker.razor.rz.scp.css */
.app-date[b-89qyufu38a] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.app-date__label[b-89qyufu38a] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.app-date__input[b-89qyufu38a] {
    height: var(--control-height-md);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background-color: var(--color-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.app-date__input:focus[b-89qyufu38a] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.app-date__input:disabled[b-89qyufu38a] {
    background-color: var(--color-bg-subtle);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.app-date__error[b-89qyufu38a] {
    font-size: var(--font-size-xs);
    color: var(--color-danger);
}
/* _content/Dotico.Shared.UI/Components/AppDateRangePicker.razor.rz.scp.css */
.app-daterange[b-srwd56urtp] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
}
/* _content/Dotico.Shared.UI/Components/AppEmptyState.razor.rz.scp.css */
.app-empty[b-r0s3n0fazi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-12) var(--space-4);
    text-align: center;
}

.app-empty__icon[b-r0s3n0fazi] {
    font-size: 2.5rem;
}

.app-empty__title[b-r0s3n0fazi] {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.app-empty__description[b-r0s3n0fazi] {
    margin: 0;
    max-width: 24rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.app-empty__action[b-r0s3n0fazi] {
    margin-top: var(--space-2);
}
/* _content/Dotico.Shared.UI/Components/AppFileUpload.razor.rz.scp.css */
.app-file-upload[b-bvhf3ug43k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.app-file-upload__label[b-bvhf3ug43k] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.app-file-upload__zona[b-bvhf3ug43k] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.app-file-upload__zona:hover[b-bvhf3ug43k] {
    border-color: var(--color-primary);
    background-color: var(--color-primary-soft);
}

.app-file-upload__zona--invalid[b-bvhf3ug43k] {
    border-color: var(--color-danger);
}

.app-file-upload__icono[b-bvhf3ug43k] {
    font-size: var(--font-size-lg);
}

.app-file-upload__texto[b-bvhf3ug43k] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
}

.app-file-upload__seleccion[b-bvhf3ug43k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.app-file-upload__nombre[b-bvhf3ug43k] {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.app-file-upload__tamano[b-bvhf3ug43k] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* El input real cubre toda la zona (clic en cualquier parte abre el selector) */
.app-file-upload__input[b-bvhf3ug43k] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.app-file-upload__input:disabled[b-bvhf3ug43k] {
    cursor: not-allowed;
}

.app-file-upload__quitar[b-bvhf3ug43k] {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: 1;
    border: none;
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: var(--font-size-sm);
    line-height: 1;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.app-file-upload__quitar:hover[b-bvhf3ug43k] {
    background-color: var(--color-danger);
    color: var(--color-on-primary);
}

.app-file-upload__error[b-bvhf3ug43k] {
    font-size: var(--font-size-xs);
    color: var(--color-danger);
}
/* _content/Dotico.Shared.UI/Components/AppFilterBar.razor.rz.scp.css */
.app-filterbar[b-v5aweh82ho] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.app-filterbar__filtros[b-v5aweh82ho] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    flex: 1;
}

.app-filterbar__acciones[b-v5aweh82ho] {
    display: flex;
    gap: var(--space-2);
}
/* _content/Dotico.Shared.UI/Components/AppGraficaBarras.razor.rz.scp.css */
/* M25 R-6: gráfica de barras con SVG propio (sin librerías, maestro §9).
   El ancho del svg se acota al contenedor y la altura acompaña la proporción del viewBox. */

.app-grafica[b-tmd8rjwgk5] {
    margin: 0;
}

.app-grafica__titulo[b-tmd8rjwgk5] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.5rem;
}

.app-grafica__svg[b-tmd8rjwgk5] {
    width: 100%;
    height: auto;
    display: block;
}

.app-grafica__texto[b-tmd8rjwgk5] {
    fill: var(--color-text);
    font-size: 10px;
}

.app-grafica__texto--leyenda[b-tmd8rjwgk5] {
    fill: var(--color-text-secondary, #4b5563);
    font-size: 9px;
}

.app-grafica__texto--valor[b-tmd8rjwgk5] {
    font-size: 9px;
    font-weight: 600;
    fill: var(--color-text-secondary, #4b5563);
}

/* Paleta de series (mismo espíritu de la paleta de marca: azul Dotico + derivados) */
.app-grafica__barra--s0[b-tmd8rjwgk5] {
    fill: var(--color-primary);
}

.app-grafica__barra--s1[b-tmd8rjwgk5] {
    fill: #4c8fe0;
}

.app-grafica__barra--s2[b-tmd8rjwgk5] {
    fill: var(--color-warning);
}

.app-grafica__barra--s3[b-tmd8rjwgk5] {
    fill: var(--color-success);
}
/* _content/Dotico.Shared.UI/Components/AppGraficaDona.razor.rz.scp.css */
/* B-43 (F5R2-S1): gráfica de dona con SVG propio; 6 colores de serie que se repiten. */
.app-grafica-dona[b-soi0pn73l6] { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0; }
.app-grafica-dona__titulo[b-soi0pn73l6] { flex-basis: 100%; font-size: 0.85rem; font-weight: 600; color: var(--color-text); margin: 0; }
.app-grafica-dona__svg[b-soi0pn73l6] { width: 120px; height: 120px; flex: 0 0 auto; }
.app-grafica-dona__leyenda[b-soi0pn73l6] { list-style: none; margin: 0; padding: 0; font-size: 0.8rem; display: grid; gap: 4px; }
.app-grafica-dona__muestra[b-soi0pn73l6] { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; background: currentColor; }
.app-grafica-dona__sector--s0[b-soi0pn73l6] { stroke: var(--color-primary, #003B7A); color: var(--color-primary, #003B7A); }
.app-grafica-dona__sector--s1[b-soi0pn73l6] { stroke: #2E90FA; color: #2E90FA; }
.app-grafica-dona__sector--s2[b-soi0pn73l6] { stroke: #12B76A; color: #12B76A; }
.app-grafica-dona__sector--s3[b-soi0pn73l6] { stroke: #F79009; color: #F79009; }
.app-grafica-dona__sector--s4[b-soi0pn73l6] { stroke: #7A5AF8; color: #7A5AF8; }
.app-grafica-dona__sector--s5[b-soi0pn73l6] { stroke: #98A2B3; color: #98A2B3; }
/* _content/Dotico.Shared.UI/Components/AppGraficaLinea.razor.rz.scp.css */
/* B-43 (F5R2-S1): gráfica de línea con SVG propio; colores por tokens del design system. */
.app-grafica-linea[b-2ylhkakkt6] { margin: 0; }
.app-grafica-linea__titulo[b-2ylhkakkt6] { font-size: 0.85rem; font-weight: 600; color: var(--color-text); margin: 0 0 0.5rem; }
.app-grafica-linea__svg[b-2ylhkakkt6] { width: 100%; height: 140px; display: block; }
.app-grafica-linea__eje[b-2ylhkakkt6] { stroke: var(--color-border, #d0d5dd); stroke-width: 1; }
.app-grafica-linea__linea[b-2ylhkakkt6] { fill: none; stroke: var(--color-primary, #003B7A); stroke-width: 2; vector-effect: non-scaling-stroke; }
.app-grafica-linea__punto[b-2ylhkakkt6] { fill: var(--color-primary, #003B7A); }
.app-grafica-linea__texto[b-2ylhkakkt6] { font-size: 9px; fill: var(--color-text-muted, #667085); }
/* _content/Dotico.Shared.UI/Components/AppInput.razor.rz.scp.css */
.app-input-group[b-pes2j6xjbo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.app-input-group__label[b-pes2j6xjbo] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.app-input[b-pes2j6xjbo] {
    height: var(--control-height-md);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    color: var(--color-text);
    background-color: var(--color-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.app-input:focus[b-pes2j6xjbo] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.app-input:disabled[b-pes2j6xjbo] {
    background-color: var(--color-bg-subtle);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.app-input--invalid[b-pes2j6xjbo] {
    border-color: var(--color-danger);
}

/* Contraseña con ojo de ver/ocultar */
.app-input-contrasena[b-pes2j6xjbo] {
    position: relative;
    display: flex;
}

.app-input-contrasena .app-input[b-pes2j6xjbo] {
    flex: 1;
    padding-right: var(--space-10);
}

.app-input-contrasena__ojo[b-pes2j6xjbo] {
    position: absolute;
    right: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    font-size: var(--font-size-md);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.app-input-contrasena__ojo:hover[b-pes2j6xjbo] {
    background-color: var(--color-bg-subtle);
}

.app-input-group__error[b-pes2j6xjbo] {
    font-size: var(--font-size-xs);
    color: var(--color-danger);
}
/* _content/Dotico.Shared.UI/Components/AppLogo.razor.rz.scp.css */
.app-logo[b-keqxqk5sr7] {
    display: flex;
    justify-content: center;
}

.app-logo img[b-keqxqk5sr7] {
    max-width: 14rem;
    width: 100%;
    height: auto;
}

.app-logo--compacto img[b-keqxqk5sr7] {
    max-width: 10rem;
}
/* _content/Dotico.Shared.UI/Components/AppModal.razor.rz.scp.css */
/* Regla §4.2b del maestro: fondo oscurecido + formulario centrado.
   Cambiar el comportamiento visual de TODOS los modales = editar este archivo + tokens.css. */

.app-modal[b-i5w6djdl59] {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

/* Fondo ligeramente más oscuro: el contenido detrás del formulario se oscurece */
.app-modal__backdrop[b-i5w6djdl59] {
    position: absolute;
    inset: 0;
    background-color: var(--color-overlay);
}

/* Formulario centrado (flex del contenedor) con ancho máximo y scroll interno */
.app-modal__panel[b-i5w6djdl59] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 28rem;
    max-height: calc(100vh - var(--space-8));
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    outline: none;
}

.app-modal__panel--sm[b-i5w6djdl59] {
    max-width: 20rem;
}

.app-modal__panel--lg[b-i5w6djdl59] {
    max-width: 42rem;
}

/* Extra grande (~30 % más que el grande): tablas anchas como el historial de costos */
.app-modal__panel--xl[b-i5w6djdl59] {
    max-width: 55rem;
}

.app-modal__header[b-i5w6djdl59] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.app-modal__title[b-i5w6djdl59] {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.app-modal__close[b-i5w6djdl59] {
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.app-modal__close:hover[b-i5w6djdl59] {
    background-color: var(--color-bg-subtle);
}

.app-modal__body[b-i5w6djdl59] {
    padding: var(--space-4);
    overflow-y: auto;
}

.app-modal__footer[b-i5w6djdl59] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg-subtle);
}

/* En móvil el modal aprovecha todo el ancho disponible menos el padding del contenedor */
@media (max-width: 480px) {
    .app-modal[b-i5w6djdl59] {
        padding: var(--space-3);
    }

    .app-modal__panel[b-i5w6djdl59] {
        max-height: calc(100vh - var(--space-6));
    }
}
/* _content/Dotico.Shared.UI/Components/AppPageHeader.razor.rz.scp.css */
.app-page-header[b-fkaqd3yk4p] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-4) 0;
}

.app-page-header__title[b-fkaqd3yk4p] {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.app-page-header__subtitle[b-fkaqd3yk4p] {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.app-page-header__actions[b-fkaqd3yk4p] {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* D-10: los botones nowrap desbordaban los 390 px (caso real: Piso) */
    justify-content: flex-end;
    gap: var(--space-2);
}
/* _content/Dotico.Shared.UI/Components/AppPagination.razor.rz.scp.css */
.app-pagination[b-kzgpzt4vl3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) 0;
}
/* _content/Dotico.Shared.UI/Components/AppSelect.razor.rz.scp.css */
.app-select-group[b-14zftvsw9z] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.app-select-group__label[b-14zftvsw9z] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.app-select[b-14zftvsw9z] {
    height: var(--control-height-md);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    color: var(--color-text);
    background-color: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.app-select:focus[b-14zftvsw9z] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.app-select:disabled[b-14zftvsw9z] {
    background-color: var(--color-bg-subtle);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.app-select-group__error[b-14zftvsw9z] {
    font-size: var(--font-size-xs);
    color: var(--color-danger);
}
/* _content/Dotico.Shared.UI/Components/AppSkeleton.razor.rz.scp.css */
.app-skeleton[b-0kygg5ua8z] {
    height: 1rem;
    width: 100%;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--color-border) 25%, var(--color-bg-subtle) 50%, var(--color-border) 75%);
    background-size: 200% 100%;
    animation: app-skeleton-pulse-b-0kygg5ua8z 1.4s ease infinite;
}

.app-skeleton--circle[b-0kygg5ua8z] {
    border-radius: var(--radius-full);
}

@keyframes app-skeleton-pulse-b-0kygg5ua8z {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* _content/Dotico.Shared.UI/Components/AppSwitch.razor.rz.scp.css */
.app-switch[b-zh1xk7tnp2] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.app-switch__input[b-zh1xk7tnp2] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.app-switch__pista[b-zh1xk7tnp2] {
    position: relative;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: var(--radius-full);
    background-color: var(--color-border-strong);
    transition: background-color var(--transition-fast);
}

.app-switch__pulgar[b-zh1xk7tnp2] {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    transition: transform var(--transition-fast);
}

.app-switch__input:checked + .app-switch__pista[b-zh1xk7tnp2] {
    background-color: var(--color-primary);
}

.app-switch__input:checked + .app-switch__pista .app-switch__pulgar[b-zh1xk7tnp2] {
    transform: translateX(1rem);
}

.app-switch:has(.app-switch__input:disabled)[b-zh1xk7tnp2] {
    cursor: not-allowed;
    opacity: 0.6;
}
/* _content/Dotico.Shared.UI/Components/AppTabs.razor.rz.scp.css */
.app-tabs[b-sjd2y3wwdh] {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
}

.app-tabs__tab[b-sjd2y3wwdh] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.app-tabs__tab:hover[b-sjd2y3wwdh] {
    color: var(--color-text);
}

.app-tabs__tab--activa[b-sjd2y3wwdh] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.app-tabs__badge[b-sjd2y3wwdh] {
    min-width: 1.25rem;
    padding: 0 var(--space-1);
    border-radius: var(--radius-full);
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    text-align: center;
}
/* _content/Dotico.Shared.UI/Components/AppTextArea.razor.rz.scp.css */
/* Estilos del grupo y del área de texto (CSS aislado por componente: se repite el bloque
   del grupo de AppInput porque el aislamiento de Blazor no comparte clases entre archivos). */

.app-input-group[b-ueuzzx39tl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.app-input-group__label[b-ueuzzx39tl] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.app-input-group__error[b-ueuzzx39tl] {
    font-size: var(--font-size-xs);
    color: var(--color-danger);
}

.app-textarea[b-ueuzzx39tl] {
    min-height: calc(var(--control-height-md) * 2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-surface);
    resize: vertical;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.app-textarea:focus[b-ueuzzx39tl] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.app-textarea:disabled[b-ueuzzx39tl] {
    background-color: var(--color-bg-subtle);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.app-textarea--invalid[b-ueuzzx39tl] {
    border-color: var(--color-danger);
}
/* _content/Dotico.Shared.UI/Components/AppTooltip.razor.rz.scp.css */
.app-tooltip[b-fzlu691qip] {
    position: relative;
    display: inline-flex;
}

.app-tooltip[b-fzlu691qip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + var(--space-1));
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background-color: var(--color-text);
    color: var(--color-surface);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
    z-index: var(--z-tooltip, 800);
}

.app-tooltip:hover[b-fzlu691qip]::after,
.app-tooltip:focus[b-fzlu691qip]::after {
    opacity: 1;
}