/* Shared Jhirotec design system, layered over the existing template. */
:root { --default-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; --default-font-weight: 400; --body-bg-rgb: 245,247,251; --default-text-color: #23344b; --default-border: #e5eaf1; --portal-surface: #fff; --portal-muted: #65758b; --portal-soft: #f0f4f9; }
[data-theme-mode=dark] { --primary-rgb: 133,176,238; --body-bg-rgb2: 16,24,38; --default-text-color: #e2eaf5; --default-border: #2b3b50; --portal-surface: #192538; --portal-muted: #a5b4c9; --portal-soft: #213149; --custom-white: #192538; --header-bg: #192538; }
body { font-family: var(--default-font-family); font-size: 14px; line-height: 1.55; }
h1,h2,h3,h4,.card-title { letter-spacing: -.035em; }
h1[tabindex="-1"]:focus { outline: none; }
[data-theme-mode=dark] .btn-primary { color: #102744; }
button,input,select,textarea { font: inherit; }
:where(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid #5299e4 !important; outline-offset: 3px; }
.text-muted { color: var(--portal-muted) !important; }
.skip-link { position: fixed; top: -80px; left: 20px; padding: 12px 20px; z-index: 3000; background: var(--portal-surface); border-radius: 8px; }
.skip-link:focus { top: 12px; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .16em; display: inline-flex; align-items: center; gap: 10px; }
.brand-dash { width: 25px; height: 3px; background: #e44854; }
.btn { border-radius: 9px; font-weight: 600; padding: .65rem 1rem; transition: background-color .18s,box-shadow .18s,transform .18s; }
.btn-sm { padding: .4rem .7rem; }
.btn-primary { box-shadow: 0 3px 8px #0f2b5515; }
.btn:hover { transform: translateY(-1px); }
.form-control,.form-select { border-color: var(--default-border); border-radius: 9px; min-height: 40px; background-color: var(--portal-surface); color: var(--default-text-color); }
.form-control::placeholder { color: var(--portal-muted); opacity: .85; }
.form-label { font-weight: 600; font-size: 13px; }
.card.custom-card { border: 1px solid var(--default-border); border-radius: 14px; background: var(--portal-surface); box-shadow: 0 4px 24px #19345606; }
.card.custom-card .card-header { border-bottom: 1px solid var(--default-border); padding: 20px 22px; }
.card.custom-card .card-header .card-title { font-size: 15px; font-weight: 650; }
.card.custom-card .card-body { padding: 22px; }
.card.custom-card .card-title:before { display: none; }
.table { --bs-table-bg: transparent; color: var(--default-text-color); }
.table thead th { background: var(--portal-soft); color: var(--portal-muted); font-weight: 600; font-size: 11px; letter-spacing: .035em; padding-block: 13px; }
.table td { padding-block: 15px; vertical-align: middle; }
.table tbody tr:hover { background: var(--portal-soft); }
.table-responsive { border-radius: 0 0 14px 14px; }
.badge { border-radius: 6px; font-weight: 600; padding: .4em .65em; }
.page-header-breadcrumb { gap: 16px; }
.page-header-breadcrumb > div:first-child > .fs-20 { font-size: 25px !important; letter-spacing: -.035em; }
.app-content > .container-fluid { max-width: 1680px; margin-inline: auto; padding-inline: 28px; }
.app-header { border-bottom: 1px solid var(--default-border); box-shadow: none; }
.main-header-container { padding-inline: 24px !important; }
.shell-icon { background: transparent; border: 0; }
.header-content-right { gap: 10px; margin-bottom: 0; }
.tenant-switch { display: flex !important; align-items: center; gap: 11px; padding: 7px 14px; border-inline: 1px solid var(--default-border); }
.tenant-switch > div { min-width: 0; }
.tenant-switch label { display: block; font-size: 9px; letter-spacing: .12em; color: var(--portal-muted); font-weight: 700; margin-bottom: 0; }
.tenant-switch .form-select { min-height: 25px; padding: 0 24px 0 0; border: 0; background-color: transparent; font-size: 13px; font-weight: 600; max-width: 270px; text-overflow: ellipsis; }
.tenant-icon { font-size: 23px; color: var(--portal-muted); }
.app-sidebar,[data-menu-styles=color] .app-sidebar { background: #102744; border-inline-end: 0; }
.app-sidebar .main-sidebar-header { background: #102744 !important; border-bottom: 1px solid #ffffff12 !important; display: flex; flex-direction: column; justify-content: center; height: 105px; gap: 9px; }
.sidebar-edition { color: #99aec9; font-size: 8px; letter-spacing: .23em; font-weight: 700; }
.app-sidebar .main-sidebar { margin-block-start: 105px; height: calc(100vh - 105px); height: calc(100dvh - 105px); overflow-y: auto; overflow-x: hidden; padding: 18px 12px; scrollbar-width: thin; scrollbar-color: #41546d transparent; }
.app-sidebar .main-menu { padding: 0 !important; margin: 0; list-style: none; }
.app-sidebar .side-menu__item { border-radius: 8px !important; padding: 11px 12px !important; margin: 3px 0 !important; color: #c0cee0 !important; gap: 10px; }
.app-sidebar .side-menu__label { color: inherit !important; font-size: 12px; white-space: normal; line-height: 1.4; }
.app-sidebar .side-menu__icon { color: inherit !important; font-size: 18px; width: 20px; margin-inline-end: 0 !important; }
.app-sidebar .side-menu__item:hover { background: #ffffff0c !important; color: #fff !important; }
.app-sidebar .side-menu__item.active { color: #fff !important; background: #ffffff12 !important; box-shadow: inset 3px 0 #e44854; font-weight: 600; }
.footer { border-top: 1px solid var(--default-border); background: var(--portal-surface) !important; font-size: 11px; }
.dashboard-heading { display: flex; align-items: center; justify-content: space-between; padding-block: 32px 24px; }
.dashboard-heading h1 { font-size: clamp(24px,2.2vw,34px); font-weight: 650; margin: 7px 0 8px; }
.dashboard-heading p,.section-heading p { color: var(--portal-muted); margin: 0; font-size: 13px; }
.dashboard-heading .btn { flex-shrink: 0; }
.workspace-banner { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-radius: 17px; padding: 32px 36px; background: #102b4f; color: #fff; margin-bottom: 22px; }
.workspace-banner:after { content: ''; position: absolute; width: 330px; height: 330px; border: 1px solid #ffffff12; border-radius: 50%; right: 30px; top: -125px; box-shadow: 0 0 0 42px #ffffff03,0 0 0 85px #ffffff03; pointer-events: none; }
.workspace-banner-copy { position: relative; z-index: 1; min-width: 0; }
.workspace-banner .eyebrow { color: #a9bfdc; font-size: 9px; }
.workspace-banner h2 { font-size: clamp(23px,2vw,30px); font-weight: 600; color: #fff; margin: 12px 0 8px; overflow-wrap: anywhere; }
.workspace-banner p { color: #becce0; font-size: 13px; margin-bottom: 20px; }
.workspace-banner a { display: inline-flex; align-items: center; gap: 20px; color: #fff; font-size: 12px; font-weight: 600; border-bottom: 1px solid #ffffff40; padding-bottom: 5px; }
.workspace-emblem { width: 190px; flex-shrink: 0; text-align: center; position: relative; z-index: 1; }
.workspace-emblem > i { display: block; font-size: 58px; color: #c3d5ee; line-height: 1.5; }
.workspace-emblem span { font-size: 8px; letter-spacing: .2em; color: #a9bfdc; }
.quick-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 30px; }
.quick-actions > a { display: flex; align-items: center; gap: 13px; padding: 19px; border: 1px solid var(--default-border); border-radius: 12px; background: var(--portal-surface); color: var(--default-text-color); transition: border-color .2s,transform .2s,box-shadow .2s; }
.quick-actions > a:hover { border-color: #93abc9; transform: translateY(-2px); box-shadow: 0 6px 20px #102b4f08; }
.quick-actions strong { font-weight: 600; font-size: 12px; display: block; }
.quick-actions small { color: var(--portal-muted); font-size: 11px; }
.quick-actions > a > i:last-child { margin-left: auto; color: var(--portal-muted); }
.quick-icon { width: 40px; height: 40px; display: grid; place-items: center; background: var(--portal-soft); border-radius: 10px; font-size: 20px; flex-shrink: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-heading h2 { font-size: 19px; font-weight: 650; margin-bottom: 4px; }
.section-heading p { font-size: 12px; }
.section-tag { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--default-border); border-radius: 7px; padding: 6px 10px; font-size: 11px; color: var(--portal-muted); }
.company-summary .card-body { padding: 18px 22px !important; }
.company-name { font-size: 17px; font-weight: 600; display: block; margin-bottom: 4px; overflow-wrap: anywhere; }
.company-summary h1 { font-size: 27px; }
.portal-empty { text-align: center; padding: 38px 22px; border: 1px solid var(--default-border); border-radius: 14px; background: var(--portal-surface); margin-bottom: 24px; }
.empty-icon { display: grid; place-items: center; height: 56px; width: 56px; background: var(--portal-soft); color: var(--portal-muted); border-radius: 16px; font-size: 27px; margin: 0 auto 17px; }
.portal-empty h3 { font-size: 20px; }
.portal-empty p { color: var(--portal-muted); max-width: 520px; margin: 10px auto 20px; }
.dashboard-loading { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 24px; }
.skeleton { height: 150px; border-radius: 14px; background: linear-gradient(110deg,var(--portal-soft) 25%,var(--portal-surface) 40%,var(--portal-soft) 60%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
.dashboard-loading > span { grid-column: 1/-1; color: var(--portal-muted); font-size: 12px; }
@keyframes shimmer { to { background-position: -200% 0; } }
/* Editorial brand panel and accessible login form. */
.login-shell { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; min-height: 100dvh; }
.login-story { position: relative; overflow: hidden; background: #0e2746; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 42px clamp(32px,5vw,84px); }
.login-brand { display: flex; align-items: center; gap: 18px; color: #9eb3cf; z-index: 1; }
.login-brand > span:last-child { font-size: 8px; letter-spacing: .17em; font-weight: 600; border-left: 1px solid #ffffff30; padding-left: 18px; }
.login-story-content { position: relative; z-index: 1; padding-block: 65px; max-width: 490px; }
.login-story-content .eyebrow { color: #b3c5df; font-size: 9px; }
.login-story h1 { font-size: clamp(50px,5.6vw,85px); font-weight: 600; line-height: 1.04; letter-spacing: -.065em; margin: 26px 0; color: #fff; }
.login-story h1 > span { color: #93b3dc; }
.login-story-content > p { font-size: 14px; line-height: 1.85; color: #b6c7dd; max-width: 365px; }
.login-capabilities { display: grid; gap: 22px; margin-top: 38px; }
.login-capabilities > div { display: flex; align-items: center; gap: 14px; }
.login-capabilities i { display: grid; place-items: center; width: 41px; height: 41px; border: 1px solid #ffffff20; border-radius: 11px; font-size: 20px; color: #bfcee2; }
.login-capabilities strong { display: block; font-weight: 500; font-size: 12px; }
.login-capabilities small { color: #9eb3cf; font-size: 11px; display: block; margin-top: 4px; }
.login-story-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #ffffff20; padding-top: 20px; z-index: 1; font-size: 10px; color: #9eb3cf; }
.login-story-footer > span:first-child { font-size: 8px; letter-spacing: .14em; }
.login-orbit { position: absolute; width: 500px; height: 500px; border: 1px solid #ffffff0b; border-radius: 50%; right: -300px; top: 30%; box-shadow: 0 0 0 60px #ffffff02,0 0 0 120px #ffffff02; pointer-events: none; }
.login-access { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 65px 40px 28px; background: var(--portal-surface); }
.login-form-wrap { width: 100%; max-width: 380px; margin-block: auto; padding-block: 35px; }
.login-badge { display: inline-flex; gap: 7px; align-items: center; color: var(--portal-muted); font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.login-badge i { font-size: 16px; }
.login-access h2 { font-size: clamp(32px,3vw,44px); line-height: 1.17; font-weight: 650; letter-spacing: -.05em; margin: 22px 0 15px; }
.login-description { font-size: 13px; color: var(--portal-muted); line-height: 1.8; margin-bottom: 35px; }
.login-access .form-label { font-size: 12px; margin-bottom: 9px; }
.login-access .form-control { height: 52px; font-size: 13px; padding-inline: 16px; }
.password-field { position: relative; }
.password-field input { padding-right: 52px !important; }
.password-toggle { display: grid; place-items: center; position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; border: 0; border-radius: 7px; background: transparent; color: var(--portal-muted); font-size: 18px; }
.login-submit { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; font-size: 13px; }
.login-submit > i { margin-left: auto; }
.login-submit > span:first-child { margin-left: auto; }
.login-help { display: flex; gap: 11px; padding-top: 25px; margin-top: 28px; border-top: 1px solid var(--default-border); color: var(--portal-muted); }
.login-help > i { font-size: 17px; }
.login-help p { font-size: 12px; color: var(--default-text-color); line-height: 1.8; margin: 0; }
.login-help p > span { color: var(--portal-muted); font-size: 11px; }
.login-footer { width: 100%; max-width: 380px; display: flex; justify-content: space-between; gap: 15px; color: var(--portal-muted); font-size: 10px; padding-top: 30px; }
#blazor-error-ui { display: none; position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%); width: min(94%,600px); background: #fff4df; color: #61450f; padding: 16px 40px 16px 20px; border: 1px solid #e6d4ae; border-radius: 12px; box-shadow: 0 4px 24px #0002; z-index: 3000; }
#blazor-error-ui .reload { margin-left: 12px; text-decoration: underline; }
#blazor-error-ui .dismiss { position: absolute; right: 14px; cursor: pointer; }
@media (min-width: 992px) {
    [data-toggled=icon-overlay-close]:not([data-icon-overlay=open]) .marca-logo-chip { width: 43px; overflow: hidden; padding: 7px; }
    [data-toggled=icon-overlay-close]:not([data-icon-overlay=open]) .marca-logo-chip img { max-width: none; }
}
@media (max-width: 1199.98px) {
    .quick-actions { gap: 10px; }
    .quick-actions > a { padding: 14px 12px; gap: 10px; }
    .quick-actions small { font-size: 10px; }
    .quick-actions > a > i:last-child { display: none; }
    .dashboard-heading,.login-brand { flex-wrap: wrap; }
    .login-brand > span:last-child { border: 0; padding: 0; }
}
@media (max-width: 991.98px) {
    .app-sidebar .main-sidebar-header { display: flex !important; }
    .app-content > .container-fluid { padding-inline: 20px; }
    .main-header-container { padding-inline: 12px !important; }
    .app-header .marca-logo { height: 23px; }
    .app-sidebar { z-index: 1050; }
    #responsive-overlay.active { z-index: 1040; }
    .app-sidebar .main-sidebar { padding-bottom: 35px; }
    .login-story { padding: 30px; }
    .login-story h1 { font-size: 58px; }
    .login-story-footer > span:last-child { display: none; }
    .login-access { padding-inline: 30px; }
}
@media (max-width: 767.98px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-story { padding: 24px; }
    .login-brand { flex-wrap: nowrap; justify-content: space-between; }
    .login-story-content { padding: 30px 0 8px; max-width: 100%; }
    .login-story h1 { font-size: 43px; margin: 16px 0; }
    .login-story h1 br,.login-access h2 br { display: none; }
    .login-story-content > p { max-width: 100%; font-size: 12px; margin: 0; }
    .login-capabilities,.login-story-footer { display: none; }
    .login-access { padding: 16px 24px 25px; }
    .login-form-wrap { max-width: 440px; padding-block: 24px; }
    .login-access h2 { font-size: 32px; margin-top: 16px; }
    .login-description { margin-bottom: 25px; }
    .login-footer { padding-top: 15px; max-width: 440px; }
    .header-fullscreen { display: none !important; }
    .tenant-switch { max-width: 240px; padding-inline: 10px; }
    .tenant-switch .form-select { max-width: 190px; }
    .workspace-emblem { display: none; }
    .workspace-banner { padding: 26px; }
    .quick-actions { grid-template-columns: 1fr; gap: 9px; margin-bottom: 25px; }
    .quick-actions > a { padding: 13px 16px; }
    .quick-actions > a > i:last-child { display: block; }
    .quick-actions small { font-size: 11px; }
    .section-tag { display: none; }
    .dashboard-heading { padding-top: 25px; }
    .dashboard-loading { grid-template-columns: 1fr; }
    .dashboard-loading .skeleton { height: 80px; }
}
@media (max-width: 575.98px) {
    .app-header { height: 108px; }
    .app-header .main-header-container { flex-wrap: wrap; min-height: 108px; align-content: start; }
    .header-content-left { height: 53px; }
    .header-content-right { margin-left: auto; gap: 0; }
    .tenant-switch { position: absolute; inset: auto 12px 7px; max-width: none; padding: 4px 10px; background: var(--portal-soft); border-radius: 7px; border: 0; }
    .tenant-switch > div { display: flex; align-items: center; gap: 12px; width: 100%; }
    .tenant-switch .form-select { width: 100%; max-width: none; min-width: 0; }
    .tenant-switch label { flex-shrink: 0; font-size: 8px; }
    .tenant-icon { font-size: 18px; }
    .app-content { margin-block-start: 108px !important; padding-block-start: 0; }
    .app-content > .container-fluid { padding-inline: 14px; }
    .dashboard-heading h1 { font-size: 25px; }
    .dashboard-heading p { font-size: 12px; }
    .dashboard-heading .btn { padding: 9px 12px; font-size: 12px; }
    .company-summary .card-body { align-items: flex-start !important; }
    .company-summary .text-center { text-align: left !important; }
    .page-header-breadcrumb { align-items: flex-start !important; }
    .card.custom-card .card-header,.card.custom-card .card-body { padding: 18px; }
    .login-brand .marca-logo { height: 24px; }
    .login-brand > span:last-child { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Original menu structure, with the renewed visual styling. */
.app-sidebar .slide__category { padding: 20px 13px 8px; }
.app-sidebar .slide__category .category-name { color: #a9bdd6 !important; font-size: 9px; letter-spacing: .1em; font-weight: 700; }
@media (min-width: 992px) {
    [data-toggled=icon-overlay-close]:not([data-icon-overlay=open]) .sidebar-edition { display: none; }
}

/* Emisión de comprobantes: selector de tipo, grilla del detalle y panel de totales. */
.tipo-switch { flex-wrap: wrap; box-shadow: none; }
.tipo-switch .btn { border-radius: 8px !important; margin-inline-end: 6px; padding: .5rem .85rem; font-size: 12px; }
.tabla-items thead th { padding-block: 11px; }
.tabla-items td { padding: 10px 12px; }
.tabla-items tbody tr:hover { background: transparent; }
.tabla-items .form-control,.tabla-items .form-select { min-height: 34px; font-size: 12px; padding: .3rem .55rem; }
.tabla-items .form-control::placeholder { font-size: 11px; }
.bloque-cuotas { border-top: 1px solid var(--default-border); padding-top: 18px; }
.panel-emision { position: sticky; top: 92px; }
.linea-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 13px; padding-block: 7px; color: var(--portal-muted); }
.linea-total b { color: var(--default-text-color); font-variant-numeric: tabular-nums; font-weight: 600; }
.linea-total-final { border-top: 1px solid var(--default-border); margin-top: 6px; padding-top: 13px; font-size: 15px; color: var(--default-text-color); }
.linea-total-final b { font-size: 21px; letter-spacing: -.03em; }
.nota-detraccion { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--portal-soft); color: var(--portal-muted); font-size: 12px; line-height: 1.6; }
.boton-emitir { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; }
.resultado-emision { border-width: 1px; border-style: solid; }
.resultado-titulo { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.resultado-titulo i { font-size: 17px; }
.resultado-ok { border-color: #7fc6a0; } .resultado-ok .resultado-titulo { color: #1d7a4c; }
.resultado-aviso { border-color: #e0bd7a; } .resultado-aviso .resultado-titulo { color: #8a6114; }
.resultado-error { border-color: #e09a9a; } .resultado-error .resultado-titulo { color: #a52f2f; }
[data-theme-mode=dark] .resultado-ok .resultado-titulo { color: #79d3a5; }
[data-theme-mode=dark] .resultado-aviso .resultado-titulo { color: #e6c076; }
[data-theme-mode=dark] .resultado-error .resultado-titulo { color: #eb9c9c; }
@media (max-width: 1199px) { .panel-emision { position: static; } }