/* Compatibilidad para clases generadas dinamicamente por JavaScript. */
.col-span-full{grid-column:1 / -1}
.bg-orange-100{--tw-bg-opacity:1;background-color:rgb(255 237 213 / var(--tw-bg-opacity, 1))}
.bg-emerald-100{--tw-bg-opacity:1;background-color:rgb(209 250 229 / var(--tw-bg-opacity, 1))}
.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1))}
.bg-amber-50{background-color:#fffbeb!important}
.bg-blue-50{background-color:#eff6ff!important}
.bg-emerald-50{background-color:#ecfdf5!important}
.bg-amber-100{background-color:#fef3c7!important}
.bg-slate-100{background-color:#f1f5f9!important}
.border-red-200{border-color:#fecaca!important}
.border-amber-200{border-color:#fde68a!important}
.border-blue-200{border-color:#bfdbfe!important}
.border-emerald-200{border-color:#a7f3d0!important}
.text-orange-700{--tw-text-opacity:1;color:rgb(194 65 12 / var(--tw-text-opacity, 1))}
.text-emerald-700{--tw-text-opacity:1;color:rgb(4 120 87 / var(--tw-text-opacity, 1))}
.text-red-700{color:#b91c1c!important}
.text-amber-700{color:#b45309!important}
.text-blue-700{color:#1d4ed8!important}
.inline-flex{display:inline-flex}
.min-w-16{min-width:4rem}
.leading-snug{line-height:1.375}
.opacity-60{opacity:.6}
@media (min-width:1280px){.xl\:col-span-2{grid-column:span 2 / span 2}}

/* Modo oscuro: capa compatible con Tailwind local y contenido renderizado por JavaScript. */
.theme-toggle{
  background:#ffffff;
  color:#334155;
  border-color:#cbd5e1;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.theme-toggle:hover{background:#f8fafc;box-shadow:0 4px 14px rgba(15,23,42,.10)}

body.theme-dark{
  background:#020617;
  color:#e2e8f0;
}
body.theme-dark .theme-toggle{
  background:#0f172a;
  color:#f8fafc;
  border-color:#334155;
}
body.theme-dark .theme-toggle:hover{
  background:#1e293b;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
}

body.theme-dark .bg-white,
body.theme-dark .bg-slate-50,
body.theme-dark .bg-slate-100{
  background-color:#0f172a !important;
}
body.theme-dark main,
body.theme-dark .flex-1.overflow-y-auto{
  background:#020617 !important;
}
body.theme-dark header,
body.theme-dark .card-shadow,
body.theme-dark .rounded-xl,
body.theme-dark .rounded-2xl{
  border-color:#1e293b !important;
}
body.theme-dark header{
  background:#0f172a !important;
  box-shadow:0 1px 0 rgba(148,163,184,.12);
}
body.theme-dark .card-shadow{
  box-shadow:0 10px 28px rgba(0,0,0,.32);
}

body.theme-dark .border,
body.theme-dark .border-b,
body.theme-dark .border-slate-200,
body.theme-dark .border-slate-300,
body.theme-dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]){
  border-color:#1e293b !important;
}

body.theme-dark .text-slate-800,
body.theme-dark .text-slate-900,
body.theme-dark .text-slate-700,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5{
  color:#f8fafc !important;
}
body.theme-dark .text-slate-600,
body.theme-dark .text-slate-500{
  color:#cbd5e1 !important;
}
body.theme-dark .text-slate-400{
  color:#94a3b8 !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea{
  background:#020617 !important;
  color:#e2e8f0 !important;
  border-color:#334155 !important;
}
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder{
  color:#64748b !important;
}
body.theme-dark input[type="color"]{
  background:#0f172a !important;
}
body.theme-dark input[type="file"]::file-selector-button{
  background:#1e293b;
  color:#f8fafc;
  border:0;
}

body.theme-dark table{
  color:#e2e8f0;
}
body.theme-dark thead,
body.theme-dark th{
  background:#111827 !important;
  color:#cbd5e1 !important;
}
body.theme-dark tbody tr{
  background:#0f172a;
}
body.theme-dark tbody tr:hover{
  background:#111827;
}

body.theme-dark .bg-slate-800{
  background-color:#334155 !important;
}
body.theme-dark .hover\:bg-slate-900:hover,
body.theme-dark .hover\:bg-slate-800:hover{
  background-color:#475569 !important;
}
body.theme-dark .bg-red-50{
  background-color:rgba(127,29,29,.28) !important;
}
body.theme-dark .bg-orange-100{
  background-color:rgba(154,52,18,.25) !important;
}
body.theme-dark .bg-emerald-100{
  background-color:rgba(6,78,59,.32) !important;
}

body.theme-dark .text-blue-700{color:#60a5fa !important}
body.theme-dark .text-cyan-600{color:#22d3ee !important}
body.theme-dark .text-emerald-600,
body.theme-dark .text-emerald-700{color:#34d399 !important}
body.theme-dark .text-red-500,
body.theme-dark .text-red-600{color:#f87171 !important}
body.theme-dark .text-orange-600,
body.theme-dark .text-orange-700{color:#fb923c !important}
body.theme-dark .text-amber-600{color:#fbbf24 !important}
body.theme-dark .text-fuchsia-600{color:#e879f9 !important}
body.theme-dark .text-violet-600{color:#a78bfa !important}
body.theme-dark .text-teal-600{color:#2dd4bf !important}

body.theme-dark #login-screen{
  background:radial-gradient(circle at top,#1e293b 0,#020617 54%,#000 100%) !important;
}
body.theme-dark #login-screen .bg-white,
body.theme-dark #password-modal .bg-white{
  background:#0f172a !important;
  border:1px solid #1e293b;
}
body.theme-dark canvas{
  color-scheme:dark;
}

/* Experiencia movil para APK / WebView Android. */
.mobile-nav{
  display:none;
  gap:.5rem;
  overflow-x:auto;
  padding:.625rem .875rem;
  background:#ffffff;
  border-bottom:1px solid #e2e8f0;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.mobile-nav::-webkit-scrollbar{display:none}
.mobile-nav-item{
  flex:0 0 auto;
  min-height:44px;
  padding:.65rem .9rem;
  border-radius:.75rem;
  background:#f1f5f9;
  color:#334155;
  font-size:.78rem;
  font-weight:800;
  white-space:nowrap;
  scroll-snap-align:start;
}
.mobile-nav-active{
  background:#0f172a;
  color:#ffffff;
  box-shadow:0 8px 18px rgba(15,23,42,.16);
}
.mobile-nav-secondary{background:#e0f2fe;color:#075985}
.mobile-nav-danger{background:#fee2e2;color:#991b1b}

body.theme-dark .mobile-nav{
  background:#0f172a;
  border-color:#1e293b;
}
body.theme-dark .mobile-nav-item{
  background:#1e293b;
  color:#cbd5e1;
}
body.theme-dark .mobile-nav-active{
  background:#f59e0b;
  color:#111827;
}
body.theme-dark .mobile-nav-secondary{background:#164e63;color:#cffafe}
body.theme-dark .mobile-nav-danger{background:#7f1d1d;color:#fecaca}
body.theme-dark #main-app:not(:has(#mobile-nav)) > aside{
  background:#0f172a !important;
  border-color:#1e293b;
}
body.theme-dark #main-app:not(:has(#mobile-nav)) > aside nav button{
  background:#1e293b !important;
  color:#cbd5e1 !important;
}
body.theme-dark #main-app:not(:has(#mobile-nav)) > aside nav button.sidebar-item-active{
  background:#f59e0b !important;
  color:#111827 !important;
}

@media (max-width: 767px), (max-height: 520px) and (max-width: 950px){
  html, body{height:100%;overflow:hidden}
  body{
    font-size:14px;
  }
  .mobile-nav{
    display:flex;
  }
  #main-app:not(.hidden){
    display:flex;
    flex-direction:column;
    height:100dvh;
  }
  #main-app:has(#mobile-nav) > aside{
    display:none !important;
  }
  #main-app:not(:has(#mobile-nav)) > aside{
    display:flex !important;
    width:100% !important;
    height:auto !important;
    max-height:64px;
    flex:0 0 auto;
    order:1;
    overflow:hidden;
    background:#ffffff !important;
    color:#1e293b !important;
    border-bottom:1px solid #e2e8f0;
  }
  #main-app:not(:has(#mobile-nav)) > aside > .p-6{
    display:none !important;
  }
  #main-app:not(:has(#mobile-nav)) > aside nav{
    display:flex !important;
    flex:1 1 auto;
    gap:.5rem;
    padding:.45rem .75rem !important;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }
  #main-app:not(:has(#mobile-nav)) > aside nav::-webkit-scrollbar{
    display:none;
  }
  #main-app:not(:has(#mobile-nav)) > aside nav button{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    min-height:44px;
    width:auto !important;
    padding:.55rem .9rem !important;
    border-radius:.75rem !important;
    background:#f1f5f9;
    color:#334155 !important;
    font-size:.78rem !important;
    font-weight:800 !important;
    white-space:nowrap;
    border-left:0 !important;
  }
  #main-app:not(:has(#mobile-nav)) > aside nav button.sidebar-item-active{
    background:#0f172a !important;
    color:#ffffff !important;
  }
  #main-app:not(:has(#mobile-nav)) > aside nav button.text-red-400{
    background:#fee2e2 !important;
    color:#991b1b !important;
  }
  #main-app main{
    min-height:0;
    width:100%;
    order:2;
  }
  #main-app main > header{
    display:grid;
    grid-template-columns:minmax(92px, 1fr) minmax(142px, 46vw) auto;
    align-items:center;
    height:auto;
    min-height:54px;
    padding:6px 10px;
    gap:.35rem .5rem;
  }
  #main-app main > header > div:first-child{
    min-width:0;
  }
  #view-title{
    font-size:.88rem !important;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #active-org-label{
    display:none !important;
  }
  #main-app main > header > .flex{
    display:contents !important;
  }
  #org-selector-wrap{
    width:auto;
  }
  #org-selector-wrap label{
    font-size:.52rem !important;
    line-height:1;
    margin-bottom:.12rem !important;
  }
  #org-selector{
    min-width:0 !important;
    width:100%;
    min-height:34px;
    height:34px;
    padding:.35rem .55rem !important;
    font-size:.82rem !important;
    border-radius:.55rem !important;
  }
  #display-user,
  #display-role{
    max-width:32vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #display-user{
    display:none !important;
  }
  #display-role{
    display:none !important;
  }
  #theme-toggle{
    min-height:34px;
    height:34px;
    padding:.35rem .55rem;
    font-size:.62rem !important;
    line-height:1.1;
    border-radius:.55rem !important;
    letter-spacing:.06em;
  }
  #main-app .flex-1.overflow-y-auto{
    padding:8px 8px calc(64px + env(safe-area-inset-bottom)) !important;
    gap:.55rem;
    -webkit-overflow-scrolling:touch;
  }
  section[id^="view-"]{
    padding-bottom:1rem;
  }
  .card-shadow,
  section[id^="view-"] > .bg-white,
  section[id^="view-"] .bg-white{
    border-radius:10px !important;
  }
  .p-6{padding:.65rem !important}
  .p-5{padding:.65rem !important}
  .gap-6{gap:.55rem !important}
  .gap-4{gap:.5rem !important}
  .space-y-6 > :not([hidden]) ~ :not([hidden]){margin-top:.55rem !important}
  .space-y-4 > :not([hidden]) ~ :not([hidden]){margin-top:.5rem !important}
  input,
  select,
  textarea,
  button{
    font-size:14px !important;
  }
  input,
  select,
  textarea{
    min-height:36px;
    padding:.42rem .58rem !important;
    border-radius:.55rem !important;
  }
  textarea{
    min-height:78px;
  }
  button{
    min-height:38px;
    touch-action:manipulation;
  }
  form button,
  [onclick*="export"],
  [onclick*="import"],
  [onclick*="renderDashboard"],
  [onclick*="download"]{
    width:100%;
  }
  .overflow-x-auto{
    border-radius:10px;
    -webkit-overflow-scrolling:touch;
  }
  table{
    min-width:720px;
    font-size:.78rem;
  }
  th, td{
    padding:.42rem .46rem !important;
  }
  canvas{
    max-width:100%;
  }
  .h-80{
    height:176px !important;
  }
  #dashboard-cuentas > div,
  #reportes-cuentas > div{
    min-height:118px;
  }
  #password-modal .bg-white{
    width:calc(100vw - 24px);
    max-width:420px;
    padding:1rem !important;
  }
  #view-dashboard > .grid:first-of-type{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:.5rem !important;
  }
  #view-dashboard > .grid:first-of-type .card-shadow{
    min-height:72px;
    padding:.55rem .6rem !important;
  }
  #view-dashboard > .grid:first-of-type h3{
    font-size:1.12rem !important;
    line-height:1.2;
  }
  #view-dashboard > .grid:first-of-type p{
    font-size:.58rem !important;
    line-height:1.25;
  }
  #view-dashboard > .grid:first-of-type p.mt-2{
    margin-top:.2rem !important;
  }
  #view-dashboard .card-shadow h4,
  #view-reportes .card-shadow h4{
    font-size:.62rem !important;
    line-height:1.25;
  }
  #view-movimientos form{
    gap:.48rem !important;
  }
  #view-movimientos h4,
  #view-config h4,
  #view-cuentas h4,
  #view-libro h4,
  #view-reportes h4{
    font-size:.86rem !important;
    line-height:1.25;
  }
  label,
  .text-\[10px\]{
    font-size:.58rem !important;
    line-height:1.15;
  }
  .text-xs{
    font-size:.68rem !important;
    line-height:1.25;
  }
  .text-sm{
    font-size:.78rem !important;
    line-height:1.3;
  }
  .text-2xl{
    font-size:1.15rem !important;
    line-height:1.2;
  }
  .mobile-nav{
    gap:.38rem;
    padding:.38rem .5rem;
  }
  .mobile-nav-item{
    min-height:36px;
    padding:.42rem .62rem;
    border-radius:.6rem;
    font-size:.78rem;
  }
  /* Perfil app compacto: prioriza densidad tactil sobre apariencia de escritorio reducido. */
  body{font-size:12.5px}
  #main-app main > header{
    grid-template-columns:minmax(74px, .8fr) minmax(132px, 1fr) auto;
    min-height:46px;
    padding:5px 8px;
    gap:.25rem .38rem;
  }
  #view-title{
    font-size:.78rem !important;
    line-height:1.05;
  }
  #org-selector-wrap label{
    font-size:.48rem !important;
  }
  #org-selector{
    min-height:30px;
    height:30px;
    padding:.24rem .48rem !important;
    font-size:.74rem !important;
    border-radius:.48rem !important;
  }
  #theme-toggle{
    min-height:30px;
    height:30px;
    padding:.25rem .42rem;
    font-size:.55rem !important;
    border-radius:.48rem !important;
    max-width:84px;
  }
  #theme-toggle .theme-label{
    display:block;
    max-width:70px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mobile-nav{
    gap:.3rem;
    padding:.32rem .42rem;
    min-height:44px;
  }
  .mobile-nav-item{
    min-height:32px;
    padding:.34rem .52rem;
    border-radius:.5rem;
    font-size:.68rem;
  }
  #main-app .flex-1.overflow-y-auto{
    padding:7px 7px calc(54px + env(safe-area-inset-bottom)) !important;
    gap:.42rem;
  }
  .p-6,
  .p-5{padding:.5rem !important}
  .gap-6{gap:.42rem !important}
  .gap-4{gap:.38rem !important}
  .space-y-6 > :not([hidden]) ~ :not([hidden]){margin-top:.42rem !important}
  .space-y-4 > :not([hidden]) ~ :not([hidden]){margin-top:.36rem !important}
  section[id^="view-"] > .bg-white,
  section[id^="view-"] .bg-white,
  .card-shadow{
    border-radius:8px !important;
  }
  #view-dashboard > div:first-child,
  #view-reportes > div:first-child{
    padding:.55rem !important;
  }
  #view-dashboard > div:first-child h4,
  #view-reportes > div:first-child h4{
    font-size:.66rem !important;
    margin-bottom:.14rem;
  }
  #view-dashboard > div:first-child p,
  #view-reportes > div:first-child p{
    display:none;
  }
  #view-dashboard > div:first-child .flex,
  #view-reportes > div:first-child .flex{
    gap:.36rem !important;
  }
  #view-dashboard > div:first-child .grid,
  #view-reportes > div:first-child .grid{
    grid-template-columns:1fr 1fr !important;
    gap:.36rem !important;
  }
  #view-dashboard > div:first-child button,
  #view-reportes > div:first-child button{
    min-height:32px;
    font-size:.66rem !important;
    padding:.32rem .45rem !important;
  }
  #view-dashboard > div:nth-of-type(2),
  #view-reportes > div:nth-of-type(2){
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:.38rem !important;
  }
  #view-dashboard > div:nth-of-type(2) .card-shadow,
  #view-reportes > div:nth-of-type(2) .card-shadow{
    min-height:58px;
    padding:.42rem .5rem !important;
    border-left-width:3px !important;
  }
  #view-dashboard > div:nth-of-type(2) h3,
  #view-reportes > div:nth-of-type(2) h3{
    font-size:.98rem !important;
    line-height:1.05;
  }
  #view-dashboard > div:nth-of-type(2) p,
  #view-reportes > div:nth-of-type(2) p{
    font-size:.5rem !important;
    line-height:1.1;
  }
  #view-dashboard > div:nth-of-type(2) p.mt-2{
    margin-top:.14rem !important;
  }
  #view-dashboard > div:nth-of-type(3),
  #view-dashboard > div:nth-of-type(4){
    gap:.42rem !important;
  }
  #view-dashboard > div:nth-of-type(3) > div,
  #view-dashboard > div:nth-of-type(4) > div{
    padding:.5rem !important;
  }
  input,
  select,
  textarea,
  button{
    font-size:12.5px !important;
  }
  input,
  select,
  textarea{
    min-height:32px;
    padding:.3rem .48rem !important;
    border-radius:.48rem !important;
  }
  textarea{
    min-height:58px;
  }
  button{
    min-height:34px;
  }
  #view-movimientos h4,
  #view-config h4,
  #view-cuentas h4,
  #view-libro h4,
  #view-reportes h4{
    font-size:.78rem !important;
  }
  #view-movimientos form{
    gap:.34rem !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  #view-movimientos form .md\:col-span-2{
    grid-column:span 2 / span 2 !important;
  }
  #view-movimientos > div:first-child,
  #view-movimientos > div:nth-child(2){
    padding:.55rem !important;
  }
  #view-movimientos input,
  #view-movimientos select{
    min-height:30px;
    height:30px;
  }
  #view-movimientos button{
    min-height:32px;
    padding:.34rem .5rem !important;
    border-radius:.5rem !important;
    font-size:.62rem !important;
  }
  label,
  .text-\[10px\]{
    font-size:.5rem !important;
  }
  .text-xs{font-size:.58rem !important}
  .text-sm{font-size:.66rem !important}
  .text-2xl{font-size:1rem !important}
  .h-80{height:150px !important}
  table{
    font-size:.66rem;
    min-width:620px;
  }
  th, td{
    padding:.32rem .36rem !important;
  }
}

@media (max-height: 520px) and (max-width: 950px){
  #main-app main > header{
    display:grid;
    grid-template-columns:minmax(170px, 1fr) minmax(220px, 42vw) auto auto;
    align-items:center;
    min-height:58px;
    padding:8px 14px;
  }
  #main-app main > header > .flex{
    display:contents;
  }
  #active-org-label,
  #org-selector-wrap label,
  #display-role{
    display:none !important;
  }
  #org-selector-wrap{
    display:block !important;
    width:auto;
  }
  #org-selector{
    min-height:42px;
    height:42px;
    padding:.45rem .7rem !important;
  }
  #theme-toggle{
    min-height:42px;
    height:42px;
    padding:.45rem .75rem;
    max-width:150px;
    line-height:1.05;
  }
  #display-user{
    max-width:140px;
  }
  .mobile-nav{
    padding:.45rem .75rem;
  }
  .mobile-nav-item{
    min-height:42px;
    padding:.5rem .75rem;
  }
  #main-app .flex-1.overflow-y-auto{
    padding:12px 14px calc(74px + env(safe-area-inset-bottom)) !important;
  }
  .h-80{
    height:220px !important;
  }
}

/* Capa celular tipo app: navegacion inferior y flujo de una mano. */
.mobile-more-menu{display:none}
.mobile-quick-actions{display:none}

@media (max-width: 767px), (max-height: 520px) and (max-width: 950px){
  #main-app:not(.hidden){
    background:#020617;
  }
  #main-app main{
    background:#020617;
  }
  #main-app main > header{
    position:sticky;
    top:0;
    z-index:35;
    grid-template-columns:1fr minmax(118px, 42vw);
    min-height:42px;
    padding:5px 8px;
    background:#071426 !important;
    border-bottom:1px solid #102033 !important;
  }
  #main-app main > header > div:first-child{
    grid-column:1;
  }
  #main-app main > header > .flex{
    display:block !important;
    grid-column:2;
  }
  #view-title{
    font-size:.76rem !important;
    max-width:34vw;
  }
  #org-selector-wrap{
    display:block !important;
    width:100%;
  }
  #org-selector-wrap label,
  #theme-toggle,
  #display-user,
  #display-role{
    display:none !important;
  }
  #org-selector{
    height:29px;
    min-height:29px;
    width:100%;
    padding:.2rem .44rem !important;
    font-size:.68rem !important;
    border-radius:.45rem !important;
  }
  .mobile-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:45;
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:.22rem;
    min-height:48px;
    padding:.28rem .35rem calc(.28rem + env(safe-area-inset-bottom));
    overflow:visible;
    border-top:1px solid #102033;
    border-bottom:0;
    background:rgba(2, 6, 23, .96);
    box-shadow:0 -10px 24px rgba(0,0,0,.22);
  }
  .mobile-nav-item{
    width:100%;
    min-width:0;
    min-height:38px;
    height:38px;
    padding:.2rem .24rem;
    border-radius:.55rem;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.62rem;
    line-height:1;
    background:#122033;
    color:#dbeafe;
    box-shadow:none;
  }
  .mobile-nav-item span{
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mobile-nav-active{
    background:#f59e0b !important;
    color:#111827 !important;
  }
  #main-app .flex-1.overflow-y-auto{
    padding:7px 7px calc(58px + env(safe-area-inset-bottom)) !important;
    background:#020617 !important;
  }
  .mobile-more-menu:not(.hidden){
    display:block;
    position:fixed;
    inset:0;
    z-index:60;
  }
  .mobile-more-backdrop{
    position:absolute;
    inset:0;
    background:rgba(2,6,23,.58);
  }
  .mobile-more-panel{
    position:absolute;
    left:8px;
    right:8px;
    bottom:calc(56px + env(safe-area-inset-bottom));
    padding:.65rem;
    border-radius:12px;
    background:#0f172a;
    border:1px solid #1e293b;
    box-shadow:0 18px 36px rgba(0,0,0,.35);
  }
  .mobile-more-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.5rem;
    margin-bottom:.5rem;
  }
  .mobile-more-kicker{
    font-size:.5rem;
    text-transform:uppercase;
    font-weight:800;
    color:#94a3b8;
  }
  .mobile-more-header h3{
    font-size:.85rem;
    font-weight:900;
    color:#f8fafc;
  }
  .mobile-more-close{
    min-height:30px;
    padding:.25rem .55rem;
    border-radius:.45rem;
    background:#1e293b;
    color:#e2e8f0;
    font-size:.62rem !important;
    font-weight:800;
  }
  .mobile-more-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:.38rem;
  }
  .mobile-more-grid button{
    min-height:34px;
    padding:.35rem .5rem;
    border-radius:.55rem;
    background:#122033;
    color:#dbeafe;
    font-size:.66rem !important;
    font-weight:800;
    text-align:left;
  }
  .mobile-more-grid button.mobile-more-active{
    background:#f59e0b;
    color:#111827;
  }
  .mobile-more-grid .mobile-more-danger{
    background:#7f1d1d;
    color:#fecaca;
  }
  .mobile-quick-actions{
    position:relative;
    top:auto;
    z-index:20;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.38rem;
    margin:0 0 .42rem;
    padding:.35rem;
    border-radius:10px;
    background:rgba(2,6,23,.92);
    backdrop-filter:blur(8px);
  }
  .mobile-quick-actions button{
    min-height:34px;
    border-radius:.55rem;
    color:#fff;
    font-size:.68rem !important;
    font-weight:900;
  }
  .mobile-quick-actions button:first-child{background:#059669}
  .mobile-quick-actions button:last-child{background:#dc2626}
  #view-dashboard > div:first-child{
    border-radius:10px !important;
    padding:.48rem !important;
  }
  #view-dashboard > div:first-child h4{
    font-size:.6rem !important;
    margin:0;
  }
  #view-dashboard > div:first-child .flex{
    display:grid !important;
    grid-template-columns:1fr;
  }
  #view-dashboard > div:first-child .grid{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    align-items:end;
  }
  #view-dashboard > div:first-child select,
  #view-dashboard > div:first-child input{
    height:29px !important;
    min-height:29px !important;
    font-size:.66rem !important;
  }
  #view-dashboard > div:first-child button{
    width:auto !important;
    min-height:29px !important;
    padding:.25rem .55rem !important;
    font-size:.6rem !important;
  }
  #view-dashboard > div:nth-of-type(2),
  #view-reportes > div:nth-of-type(2){
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:.34rem !important;
  }
  #view-dashboard > div:nth-of-type(2) .card-shadow,
  #view-reportes > div:nth-of-type(2) .card-shadow{
    min-height:52px;
    padding:.36rem .42rem !important;
    border-radius:8px !important;
  }
  #view-dashboard > div:nth-of-type(2) h3,
  #view-reportes > div:nth-of-type(2) h3{
    font-size:.86rem !important;
  }
  #view-dashboard > div:nth-of-type(2) p,
  #view-reportes > div:nth-of-type(2) p{
    font-size:.46rem !important;
  }
  #view-dashboard > div:nth-of-type(2) p.mt-2{
    display:none;
  }
  #view-dashboard > div:nth-of-type(3),
  #view-dashboard > div:nth-of-type(4){
    gap:.38rem !important;
  }
  #view-dashboard .h-80,
  #view-reportes .h-80{
    height:132px !important;
  }
  #view-dashboard > div:nth-of-type(3) > div,
  #view-dashboard > div:nth-of-type(4) > div{
    padding:.42rem !important;
  }
  #view-dashboard > div:nth-of-type(4){
    margin-top:.38rem !important;
  }
  #view-dashboard > div:nth-of-type(5){
    margin-top:.38rem !important;
  }
  #dashboard-cuentas{
    grid-template-columns:1fr !important;
    gap:.34rem !important;
  }
  #dashboard-cuentas > div,
  #reportes-cuentas > div{
    min-height:auto;
    padding:.42rem !important;
  }
  #dashboard-cuentas h5,
  #reportes-cuentas h5{
    font-size:.68rem !important;
  }
  #dashboard-insights > div{
    padding:.42rem !important;
  }
  #view-movimientos > .grid{
    gap:.45rem !important;
  }
  #view-movimientos > .grid > div{
    border-radius:10px !important;
    padding:.5rem !important;
  }
  #view-movimientos form{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:.3rem !important;
  }
  #view-movimientos form .md\:col-span-2{
    grid-column:span 2 / span 2 !important;
  }
  #view-movimientos h4{
    font-size:.74rem !important;
    margin-bottom:.38rem !important;
  }
  #view-movimientos input,
  #view-movimientos select{
    height:28px !important;
    min-height:28px !important;
    padding:.22rem .42rem !important;
    font-size:.68rem !important;
  }
  #view-movimientos button{
    min-height:31px !important;
    font-size:.58rem !important;
  }
  label,
  .text-\[10px\]{
    font-size:.48rem !important;
  }
  .overflow-x-auto{
    overflow-x:auto;
    border-radius:8px;
  }
  table{
    font-size:.62rem !important;
    min-width:560px;
  }
  th, td{
    padding:.28rem .32rem !important;
  }
}

/* Proteccion escritorio: si Chrome entra en media queries por zoom o alto de ventana,
   mantenemos la experiencia web normal cuando el dispositivo tiene puntero fino. */
@media (hover: hover) and (pointer: fine){
  .mobile-nav{
    display:none !important;
  }
  .mobile-more-menu,
  .mobile-quick-actions{
    display:none !important;
  }
  #main-app:not(.hidden){
    display:flex !important;
    flex-direction:row !important;
    height:100vh !important;
  }
  #main-app > aside,
  #main-app:has(#mobile-nav) > aside{
    display:flex !important;
    flex-direction:column !important;
    order:0 !important;
    width:18rem !important;
    height:auto !important;
    max-height:none !important;
    flex-shrink:0 !important;
    overflow:hidden !important;
    background:#0f172a !important;
    color:#ffffff !important;
    border-bottom:0 !important;
  }
  #main-app > aside > .p-6{
    display:block !important;
  }
  #main-app > aside nav{
    display:block !important;
    padding:1rem !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }
  #main-app > aside nav button{
    display:block !important;
    width:100% !important;
    min-height:auto !important;
    justify-content:flex-start !important;
    padding:.5rem 1rem !important;
    border-radius:.5rem !important;
    background:transparent;
    color:inherit;
    font-size:inherit !important;
    text-align:left !important;
  }
  #main-app > aside nav button.sidebar-item-active{
    background:#1e293b !important;
    color:#ffffff !important;
    border-left:4px solid #f59e0b !important;
  }
  #main-app main{
    order:0 !important;
    min-height:auto !important;
    width:auto !important;
  }
  #main-app main > header{
    display:flex !important;
    height:4rem !important;
    min-height:4rem !important;
    padding:0 1.5rem !important;
    align-items:center !important;
    gap:0 !important;
  }
  #main-app main > header > .flex{
    display:flex !important;
    width:auto !important;
    flex-wrap:nowrap !important;
    gap:1rem !important;
  }
  #org-selector-wrap label,
  #display-role{
    display:block !important;
  }
  #active-org-label{
    display:block !important;
    max-width:none !important;
    white-space:normal !important;
  }
  #org-selector{
    min-width:260px !important;
    width:auto !important;
    min-height:auto !important;
    height:auto !important;
    padding:.5rem .75rem !important;
  }
  #theme-toggle{
    min-height:auto !important;
    height:auto !important;
    max-width:none !important;
    padding:.5rem .75rem !important;
  }
  #main-app .flex-1.overflow-y-auto{
    padding:1.5rem !important;
  }
  table{
    min-width:0;
  }
}