/* =====================================================================
   UC · Identidad Android (Material 3 Expressive, estilo Android 16/17)
   ---------------------------------------------------------------------
   Capa GLOBAL para celular y APK. Se carga al final del layout, del login
   y de las pantallas publicas. Solo pantalla y <= 991.98px: la PC y la
   impresion no cambian.

   Principios:
   - La forma (radios, alturas, tipografia, movimiento) se unifica con
     especificidad alta; el COLOR de componentes propios de cada vista se
     respeta y solo cambian los tokens compartidos (--uc-*).
   - La ruta de cobros (.cobros-page) ya tiene su propio diseno M3: se
     excluye de las reglas genericas de componentes.
   - Modo exterior (body.uc-outdoor) conserva su alto contraste.
   ===================================================================== */

@media screen and (max-width: 991.98px) {

  /* ---------- 1. Tokens Material 3 (semilla #365A3F) ---------- */
  body.uc-app-shell, body.uc-login-body, body.uc-public-shell {
    --md-primary: #365a3f;
    --md-on-primary: #ffffff;
    --md-primary-container: #c2edc6;
    --md-on-primary-container: #0b2814;
    --md-secondary: #52634f;
    --md-secondary-container: #d5e8cf;
    --md-on-secondary-container: #111f0f;
    --md-tertiary-container: #c7e9ee;
    --md-on-tertiary-container: #032024;
    --md-warning-container: #ffdea6;
    --md-on-warning-container: #2a1a00;
    --md-error: #ba1a1a;
    --md-on-error: #ffffff;
    --md-error-container: #ffdad6;
    --md-on-error-container: #410002;
    --md-surface: #f6fbf2;
    --md-surface-container-lowest: #ffffff;
    --md-surface-container-low: #f0f5ec;
    --md-surface-container: #eaefe6;
    --md-surface-container-high: #e4e9e0;
    --md-surface-container-highest: #dee4da;
    --md-on-surface: #181d18;
    --md-on-surface-variant: #414941;
    --md-outline: #717970;
    --md-outline-variant: #c1c9be;
    --md-inverse-surface: #2d322c;
    --md-inverse-on-surface: #eef2e9;
    --md-inverse-primary: #a3d3a8;
    --md-scrim: rgba(0, 0, 0, .32);
    /* Fondo de pagina y tarjeta (agrupado, como Ajustes de Android) */
    --md-page: #edf2e9;
    --md-card: #ffffff;
    /* Barra superior: continua la franja de estado verde de la APK */
    --md-bar: #243a2a;
    --md-on-bar: #ffffff;
    --md-on-bar-variant: rgba(255, 255, 255, .78);
    --md-bar-state: rgba(255, 255, 255, .14);
    /* Formas (Expressive) */
    --md-shape-xs: 8px;
    --md-shape-sm: 12px;
    --md-shape-md: 16px;
    --md-shape-lg: 24px;
    --md-shape-xl: 28px;
    --md-shape-full: 999px;
    /* Elevacion: tonal, sombras suaves */
    --md-elev-1: 0 1px 2px rgba(0, 0, 0, .10), 0 1px 3px 1px rgba(0, 0, 0, .06);
    --md-elev-2: 0 1px 2px rgba(0, 0, 0, .12), 0 2px 6px 2px rgba(0, 0, 0, .08);
    --md-elev-3: 0 4px 8px 3px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .14);
    /* Movimiento: resortes de M3 Expressive */
    --md-spring-fast: cubic-bezier(.42, 1.67, .21, .9);
    --md-spring: cubic-bezier(.38, 1.21, .22, 1);
    --md-spring-effects: cubic-bezier(.34, .8, .34, 1);
    --md-emphasized-decel: cubic-bezier(.05, .7, .1, 1);
    --md-font: system-ui, "Google Sans Flex", "Google Sans Text", "Roboto Flex", Roboto, "Segoe UI", sans-serif;
    --md-nav-h: 72px;
    --md-safe-b: env(safe-area-inset-bottom, 0px);
    --md-safe-t: env(safe-area-inset-top, 0px);
  }

  html[data-theme="dark"] body.uc-app-shell,
  html[data-theme="dark"] body.uc-login-body,
  html[data-theme="dark"] body.uc-public-shell,
  body.uc-app-shell.theme-dark {
    --md-primary: #a3d3a8;
    --md-on-primary: #0a3818;
    --md-primary-container: #23502e;
    --md-on-primary-container: #bef0c3;
    --md-secondary: #b9ccb4;
    --md-secondary-container: #3b4b39;
    --md-on-secondary-container: #d5e8cf;
    --md-tertiary-container: #1f4d53;
    --md-on-tertiary-container: #c7e9ee;
    --md-warning-container: #5c4300;
    --md-on-warning-container: #ffdea6;
    --md-error: #ffb4ab;
    --md-on-error: #690005;
    --md-error-container: #93000a;
    --md-on-error-container: #ffdad6;
    --md-surface: #101510;
    --md-surface-container-lowest: #0b0f0b;
    --md-surface-container-low: #181d18;
    --md-surface-container: #1c211c;
    --md-surface-container-high: #272b26;
    --md-surface-container-highest: #313630;
    --md-on-surface: #dfe4db;
    --md-on-surface-variant: #c1c9be;
    --md-outline: #8b9389;
    --md-outline-variant: #414941;
    --md-inverse-surface: #dfe4db;
    --md-inverse-on-surface: #2d322c;
    --md-inverse-primary: #365a3f;
    --md-page: #0f140f;
    --md-card: #1c211c;
    /* --md-bar se mantiene #243a2a: la franja de estado de la APK es de ese color en ambos temas */
    --md-bar-state: rgba(255, 255, 255, .10);
  }

  /* Tokens compartidos de la app -> superficies M3 (no en modo exterior) */
  body.uc-app-shell:not(.uc-outdoor) {
    --uc-bg: var(--md-page);
    --uc-surface: var(--md-card);
    --uc-surface-alt: var(--md-surface-container-low);
    --uc-border: var(--md-outline-variant);
    --uc-border-strong: var(--md-outline);
    --uc-text: var(--md-on-surface);
    --uc-ink: var(--md-on-surface);
    --uc-muted: var(--md-on-surface-variant);
    --uc-radius: var(--md-shape-lg);
    --uc-radius-sm: var(--md-shape-md);
    --uc-shadow-sm: none;
    --uc-shadow: var(--md-elev-1);
    --uc-shadow-soft: none;
    --bs-body-bg: var(--md-page);
    --bs-body-color: var(--md-on-surface);
    --bs-border-color: var(--md-outline-variant);
    --bs-secondary-color: var(--md-on-surface-variant);
    --bs-emphasis-color: var(--md-on-surface);
    --bs-tertiary-bg: var(--md-surface-container);
    --bs-secondary-bg: var(--md-surface-container-high);
    --bs-link-color: var(--md-primary);
    --bs-link-color-rgb: 54, 90, 63;
    accent-color: var(--md-primary);
  }

  /* ---------- 2. Base: fondo, tipografia, foco ---------- */
  html:has(body.uc-app-shell) { background: var(--md-page, #edf2e9); }
  body.uc-app-shell:not(.uc-outdoor),
  body.uc-app-shell:not(.uc-outdoor) .uc-content {
    background: var(--md-page) !important;
    color: var(--md-on-surface);
  }
  body.uc-app-shell, body.uc-login-body, body.uc-public-shell {
    font-family: var(--md-font) !important;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
  }
  body.uc-app-shell :focus-visible {
    outline: 3px solid var(--md-primary) !important;
    outline-offset: 2px !important;
  }
  body.uc-app-shell #main-content :is(h1, h2, h3, .h1, .h2, .h3, .fw-black) {
    font-weight: 700 !important;
    letter-spacing: 0;
  }
  body.uc-app-shell #main-content :is(h1, .h1) { font-size: clamp(26px, 7vw, 30px); line-height: 1.2; }
  body.uc-app-shell #main-content :is(h2, .h2) { font-size: clamp(22px, 6vw, 26px); line-height: 1.25; }
  body.uc-app-shell #main-content :is(h3, .h3) { font-size: 22px; line-height: 1.3; }
  body.uc-app-shell #main-content :is(h4, .h4) { font-size: 19px; line-height: 1.35; }
  body.uc-app-shell #main-content :is(h5, .h5, h6, .h6) { font-size: 16px; line-height: 1.4; }
  body.uc-app-shell #main-content .text-muted { color: var(--md-on-surface-variant) !important; }
  /* Enlaces de texto: legibles tambien en oscuro (antes verde oscuro sobre fondo oscuro) */
  html[data-theme="dark"] body.uc-app-shell #main-content a:not(.btn):not([class]),
  body.uc-app-shell.theme-dark #main-content a:not(.btn):not([class]) { color: var(--md-primary) !important; }

  /* Entrada de pantalla: desvanecido + desplazamiento corto (Android "shared axis") */
  body.uc-app-shell #main-content > :not(.cobros-page):not(script):not(style):not(.modal) {
    animation: uc-a17-enter .34s var(--md-emphasized-decel) both;
  }
  @keyframes uc-a17-enter {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }

  /* ---------- 3. Barra superior (top app bar) ---------- */
  body.uc-app-shell .uc-topbar {
    min-height: calc(64px + var(--md-safe-t)) !important;
    height: auto !important;
    padding: calc(8px + var(--md-safe-t)) 4px 8px 12px !important;
    background: var(--md-bar) !important;
    color: var(--md-on-bar) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    gap: 2px !important;
    transition: box-shadow .25s var(--md-spring-effects), background-color .25s;
  }
  body.uc-app-shell.uc-a17-scrolled .uc-topbar {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .22) !important;
  }
  body.uc-app-shell .uc-mobile-topbrand { gap: 12px !important; color: var(--md-on-bar) !important; flex: 1 1 auto; min-width: 0; }
  body.uc-app-shell .uc-mobile-topbrand .uc-mobile-logo {
    width: 40px !important; height: 40px !important; border-radius: 50% !important;
    box-shadow: none !important; flex: none;
  }
  body.uc-app-shell .uc-mobile-topbrand .uc-mobile-title {
    font-size: 20px !important; font-weight: 600 !important; line-height: 1.2 !important;
    letter-spacing: 0 !important; text-transform: none;
  }
  body.uc-app-shell .uc-mobile-topbrand .uc-mobile-sub {
    font-size: 12px !important; font-weight: 500 !important; color: var(--md-on-bar-variant);
    opacity: 1 !important; max-width: 52vw !important; margin-top: 2px !important;
  }
  body.uc-app-shell .uc-mobile-topbrand .uc-mobile-sub i { font-size: 11px !important; }
  body.uc-app-shell .uc-topbar :is(.uc-iconbtn, .uc-topbar-menu-btn, .uc-topbar-logout-btn, .uc-a17-more) {
    width: 48px !important; min-width: 48px !important; height: 48px !important; min-height: 48px !important;
    border: 0 !important; border-radius: 50% !important; background: transparent !important;
    color: var(--md-on-bar) !important; box-shadow: none !important; font-size: 19px !important;
    transform: none !important; transition: background-color .2s;
    display: inline-grid !important; place-items: center !important; padding: 0 !important;
  }
  body.uc-app-shell .uc-topbar :is(.uc-iconbtn, .uc-topbar-menu-btn, .uc-topbar-logout-btn, .uc-a17-more):active {
    background: var(--md-bar-state) !important;
  }
  /* Con menu de desbordamiento (JS), tema/exterior/salir viven dentro de el. */
  body.uc-a17-overflow .uc-topbar :is(#darkModeToggle, #outdoorToggle, .uc-topbar-logout-btn) { display: none !important; }
  /* La barra inferior ya tiene "Menu": no repetir la hamburguesa arriba. */
  body.cf-shell .uc-topbar .uc-topbar-menu-btn { display: none !important; }
  body.uc-app-shell .uc-badge {
    min-width: 16px !important; height: 16px !important; padding: 0 4px !important;
    border-radius: 8px !important; font-size: 11px !important; line-height: 16px !important;
    font-weight: 600 !important; background: var(--md-error) !important; color: var(--md-on-error) !important;
    border: 0 !important; top: 6px !important; right: 6px !important; box-shadow: none !important;
  }

  /* Menu de desbordamiento y panel de notificaciones (M3 menu) */
  .uc-a17-menu {
    position: fixed; z-index: 1300; top: calc(56px + var(--md-safe-t)); right: 8px;
    min-width: 224px; max-width: calc(100vw - 16px); padding: 8px 0;
    background: var(--md-surface-container); color: var(--md-on-surface);
    border-radius: var(--md-shape-md); box-shadow: var(--md-elev-2);
    transform-origin: top right; animation: uc-a17-menu .28s var(--md-spring) both;
    font-family: var(--md-font);
  }
  .uc-a17-menu[hidden] { display: none; }
  .uc-a17-menu button, .uc-a17-menu a {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px;
    border: 0; background: transparent; color: inherit; font-size: 15px; font-weight: 500;
    text-align: left; text-decoration: none; cursor: pointer;
  }
  .uc-a17-menu :is(button, a):active { background: color-mix(in srgb, var(--md-on-surface) 10%, transparent); }
  .uc-a17-menu i { width: 24px; text-align: center; font-size: 18px; color: var(--md-on-surface-variant); }
  .uc-a17-menu .uc-a17-check { margin-left: auto; color: var(--md-primary); }
  .uc-a17-menu hr { margin: 8px 0; border: 0; border-top: 1px solid var(--md-outline-variant); opacity: 1; }
  @keyframes uc-a17-menu { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }

  body.uc-app-shell #notifPanel {
    position: fixed !important; top: calc(60px + var(--md-safe-t)) !important; left: 8px !important; right: 8px !important;
    width: auto !important; max-height: 70dvh !important; border: 0 !important;
    border-radius: var(--md-shape-lg) !important; background: var(--md-surface-container) !important;
    color: var(--md-on-surface) !important; box-shadow: var(--md-elev-3) !important; overflow: auto;
  }

  /* ---------- 4. Barra de navegacion inferior ---------- */
  body.cf-shell > .cf-nav, body.uc-app-shell .uc-mobile-dock {
    background: var(--md-surface-container) !important;
    border: 0 !important; box-shadow: none !important;
    padding: 0 0 var(--md-safe-b) !important;
    border-radius: 0 !important;
  }
  body.cf-shell > .cf-nav > :is(a, button) {
    min-height: var(--md-nav-h) !important; gap: 4px !important; padding: 12px 0 14px !important;
    color: var(--md-on-surface-variant) !important; font-family: var(--md-font) !important;
    font-size: 12px !important; font-weight: 500 !important; letter-spacing: .01em;
    background: transparent !important;
  }
  body.cf-shell > .cf-nav i {
    width: 56px !important; height: 32px !important; border-radius: 16px !important;
    font-size: 20px !important; color: var(--md-on-surface-variant) !important; background: transparent !important;
    transition: background-color .3s var(--md-spring-effects), width .45s var(--md-spring);
  }
  body.cf-shell > .cf-nav [aria-current="page"] { color: var(--md-on-surface) !important; font-weight: 700 !important; }
  body.cf-shell > .cf-nav [aria-current="page"] i,
  body.cf-shell > .cf-nav button[aria-expanded="true"] i {
    background: var(--md-secondary-container) !important; color: var(--md-on-secondary-container) !important;
  }
  body.cf-shell > .cf-nav > :is(a, button):active i { background: color-mix(in srgb, var(--md-on-surface) 10%, transparent) !important; }
  /* Dock clasico (roles sin barra de campo, p. ej. promotor) con la misma piel M3 */
  body.uc-app-shell .uc-mobile-dock {
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    height: calc(var(--md-nav-h) + var(--md-safe-b)) !important; align-items: stretch !important;
  }
  body.uc-app-shell .uc-mobile-dock > a, body.uc-app-shell .uc-mobile-dock .uc-dock-action-btn {
    color: var(--md-on-surface-variant) !important; font: 500 12px/1.2 var(--md-font) !important;
    background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    gap: 4px !important; padding: 12px 0 14px !important; min-height: var(--md-nav-h) !important; transform: none !important;
  }
  body.uc-app-shell .uc-mobile-dock > a i, body.uc-app-shell .uc-mobile-dock .uc-dock-action-btn i {
    width: 56px !important; height: 32px !important; border-radius: 16px !important; display: grid !important; place-items: center !important;
    font-size: 20px !important; color: inherit !important; background: transparent !important; margin: 0 !important;
    transition: background-color .3s var(--md-spring-effects);
  }
  body.uc-app-shell .uc-mobile-dock > a.active, body.uc-app-shell .uc-mobile-dock .uc-dock-action-wrap.is-open .uc-dock-action-btn { color: var(--md-on-surface) !important; font-weight: 700 !important; }
  body.uc-app-shell .uc-mobile-dock > a.active i, body.uc-app-shell .uc-mobile-dock .uc-dock-action-wrap.is-open .uc-dock-action-btn i {
    background: var(--md-secondary-container) !important; color: var(--md-on-secondary-container) !important;
  }
  body.uc-app-shell .uc-mobile-dock .uc-dock-menu {
    background: var(--md-surface-container) !important; border: 0 !important; border-radius: var(--md-shape-md) !important;
    box-shadow: var(--md-elev-2) !important; padding: 8px 0 !important;
  }
  body.uc-app-shell .uc-mobile-dock .uc-dock-menu a {
    min-height: 48px !important; color: var(--md-on-surface) !important; background: transparent !important;
    border-radius: 0 !important; font: 500 15px var(--md-font) !important; gap: 12px !important; padding: 0 16px !important;
  }
  /* "Menu" del dock clasico: un destino mas de la barra, no un boton flotante */
  body.uc-app-shell:not(.cf-shell) .uc-mobile-menu-fab {
    left: 50% !important; right: auto !important; bottom: var(--md-safe-b) !important; transform: translateX(-50%) !important;
    width: 76px !important; height: var(--md-nav-h) !important; border-radius: 0 !important;
    background: transparent !important; color: var(--md-on-surface-variant) !important; box-shadow: none !important;
    gap: 4px !important; font: 500 12px/1.2 var(--md-font) !important; z-index: 490 !important;
  }
  body.uc-app-shell:not(.cf-shell) .uc-mobile-menu-fab i {
    width: 56px; height: 32px; border-radius: 16px; display: grid; place-items: center; font-size: 20px;
    transition: background-color .3s var(--md-spring-effects);
  }
  body.uc-app-shell:not(.cf-shell) .uc-mobile-menu-fab :is(.uc-open-label, .uc-close-label) { font: inherit !important; color: inherit !important; }
  body.uc-app-shell:not(.cf-shell) #ucMobileMenu:checked ~ .uc-mobile-menu-fab { background: transparent !important; box-shadow: none !important; color: var(--md-on-surface) !important; }
  body.uc-app-shell:not(.cf-shell) #ucMobileMenu:checked ~ .uc-mobile-menu-fab i { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
  /* Con ese destino en la barra, la hamburguesa superior sobra */
  body.uc-app-shell:not(.cf-shell) .uc-topbar .uc-topbar-menu-btn { display: none !important; }

  /* ---------- 5. FAB (Nuevo / Refil) y FAB pequeno (voz) ---------- */
  body.cf-shell > .cf-operation-plus {
    left: auto !important; right: 16px !important;
    bottom: calc(var(--md-nav-h) + 16px + var(--md-safe-b)) !important;
    width: auto !important; height: 56px !important; min-width: 56px !important;
    padding: 0 20px 0 16px !important; display: inline-flex !important; align-items: center !important;
    justify-content: center; gap: 12px !important;
    border: 0 !important; border-radius: var(--md-shape-md) !important;
    background: var(--md-primary-container) !important; color: var(--md-on-primary-container) !important;
    box-shadow: var(--md-elev-3) !important; font-family: var(--md-font) !important;
    font-size: 15px !important; font-weight: 600 !important; letter-spacing: .01em;
    transition: padding .4s var(--md-spring), border-radius .35s var(--md-spring), transform .3s var(--md-spring-fast);
    flex-direction: row !important;
  }
  body.cf-shell > .cf-operation-plus i { font-size: 20px !important; width: auto !important; height: auto !important; background: none !important; color: inherit !important; }
  body.cf-shell > .cf-operation-plus span {
    display: inline-block !important; max-width: 160px; overflow: hidden; white-space: nowrap;
    color: inherit !important; font: inherit !important; text-shadow: none !important;
    transition: max-width .4s var(--md-spring), opacity .2s;
  }
  body.cf-shell.uc-a17-scroll-down > .cf-operation-plus { padding: 0 !important; width: 56px !important; gap: 0 !important; }
  body.cf-shell.uc-a17-scroll-down > .cf-operation-plus span { max-width: 0; opacity: 0; }
  body.cf-shell > .cf-operation-plus:active { border-radius: 28px !important; }
  /* Ruta de cobros: su accion principal es "Siguiente" (derecha); Nuevo/Refil queda compacto a la izquierda. */
  body.cf-shell.cf-route > .cf-operation-plus { right: auto !important; left: 16px !important; padding: 0 !important; width: 56px !important; gap: 0 !important;
    background: var(--md-surface-container-high) !important; color: var(--md-primary) !important; }
  body.cf-shell.cf-route > .cf-operation-plus span { max-width: 0; opacity: 0; }

  body.uc-app-shell #ucVozBtn {
    top: auto !important; left: auto !important; right: 20px !important;
    bottom: calc(var(--md-nav-h) + 24px + var(--md-safe-b)) !important;
    width: 48px !important; height: 48px !important; padding: 0 !important;
    border-radius: 14px !important; opacity: 1 !important;
    background: var(--md-surface-container-high) !important; color: var(--md-primary) !important;
    box-shadow: var(--md-elev-2) !important; font-size: 18px !important;
    transition: bottom .35s var(--md-spring), border-radius .3s var(--md-spring);
  }
  body.cf-shell:has(> .cf-operation-plus) #ucVozBtn { bottom: calc(var(--md-nav-h) + 16px + 56px + 16px + var(--md-safe-b)) !important; right: 20px !important; }
  body.uc-app-shell #ucVozBtn:active { border-radius: 24px !important; }
  /* Volver arriba: en Android se toca la barra superior; el boton estorba sobre el FAB. */
  body.uc-app-shell #ucScrollTop { display: none !important; }

  /* ---------- 6. Cajon de navegacion (navigation drawer) ---------- */
  body.uc-app-shell .uc-sidebar {
    background: var(--md-surface-container-low) !important; color: var(--md-on-surface) !important;
    width: min(86vw, 320px) !important; max-width: 320px !important;
    border-radius: 0 var(--md-shape-md) var(--md-shape-md) 0 !important; box-shadow: var(--md-elev-3) !important;
    padding-top: var(--md-safe-t) !important;
    transition: transform .45s var(--md-spring) !important;
  }
  body.uc-app-shell .uc-sidebar .uc-brand { background: transparent !important; border-bottom: 0 !important; padding: 20px 24px 12px !important; min-height: 0 !important; box-shadow: none !important; }
  body.uc-app-shell .uc-sidebar :is(.uc-footer, .uc-sidebar-mobile-actions) { background: transparent !important; border-color: var(--md-outline-variant) !important; }
  body.uc-app-shell .uc-sidebar .uc-sidebar-user-mini { background: var(--md-surface-container) !important; border: 0 !important; border-radius: var(--md-shape-md) !important; box-shadow: none !important; }
  /* En la APK no se ofrece descargar la APK */
  html.uc-apk body.uc-app-shell a[href*="DescargarApk"] { display: none !important; }
  body.uc-app-shell .uc-sidebar .uc-brand-name { color: var(--md-on-surface) !important; font-size: 16px !important; font-weight: 700 !important; }
  body.uc-app-shell .uc-sidebar .uc-logo { background: var(--md-surface-container-lowest) !important; }
  body.uc-app-shell .uc-nav { padding: 4px 12px 16px !important; }
  body.uc-app-shell .uc-nav :is(.section-title, .menu-title, .menu-section-title, .nav-title) {
    color: var(--md-on-surface-variant) !important; font-size: 14px !important; font-weight: 600 !important;
    letter-spacing: .01em !important; text-transform: none !important; padding: 16px 16px 8px !important; opacity: 1 !important;
  }
  body.uc-app-shell .uc-nav :is(.menu-link, .menu-sublink, .nav-link, a.uc-sidebar-quick-link) {
    min-height: 56px !important; border-radius: 28px !important; padding: 0 16px !important;
    color: var(--md-on-surface-variant) !important; background: transparent !important; border: 0 !important;
    font-size: 14px !important; font-weight: 600 !important; box-shadow: none !important;
    display: flex !important; align-items: center !important; gap: 12px !important;
  }
  body.uc-app-shell .uc-nav .menu-sublink { min-height: 48px !important; padding-left: 24px !important; font-weight: 500 !important; }
  body.uc-app-shell .uc-nav :is(.menu-link, .menu-sublink, .nav-link) :is(i, .icon) {
    color: var(--md-on-surface-variant) !important; background: transparent !important; box-shadow: none !important;
    width: 24px !important; min-width: 24px; height: auto !important; font-size: 18px !important;
  }
  body.uc-app-shell .uc-nav .menu-link .menu-text { color: inherit !important; font-weight: inherit !important; }
  body.uc-app-shell .uc-nav :is(.menu-link, .menu-sublink, .nav-link):active { background: color-mix(in srgb, var(--md-on-surface) 10%, transparent) !important; }
  body.uc-app-shell .uc-nav :is(.menu-link[aria-expanded="true"], .menu-link.active, .menu-sublink.active, .menu-sublink[aria-current="page"], .nav-link.active) {
    background: var(--md-secondary-container) !important; color: var(--md-on-secondary-container) !important;
  }
  body.uc-app-shell .uc-nav :is(.menu-link[aria-expanded="true"], .menu-link.active, .menu-sublink.active, .menu-sublink[aria-current="page"]) :is(i, .icon) {
    color: var(--md-on-secondary-container) !important;
  }
  body.uc-app-shell .uc-nav .menu-sub { background: transparent !important; border: 0 !important; margin: 2px 0 6px !important; padding: 0 !important; }
  body.uc-app-shell .uc-sidebar :is(.uc-sidebar-user-mini strong, .uc-sidebar-user-mini small) { color: var(--md-on-surface) !important; }
  body.uc-app-shell .uc-sidebar .uc-sidebar-user-mini small { color: var(--md-on-surface-variant) !important; }
  body.uc-app-shell .uc-sidebar .uc-sidebar-logout-link {
    background: transparent !important; color: var(--md-primary) !important;
    border: 1px solid var(--md-outline) !important; border-radius: 999px !important; box-shadow: none !important; font-weight: 600 !important;
  }
  body.uc-app-shell .uc-sidebar .uc-sidebar-cta {
    background: var(--md-primary-container) !important; color: var(--md-on-primary-container) !important;
    border: 0 !important; border-radius: var(--md-shape-md) !important; box-shadow: none !important;
  }
  body.uc-app-shell .uc-sidebar .uc-sidebar-cta * { color: inherit !important; }
  body.uc-app-shell #ucMobileMenu:checked ~ .uc-backdrop { background: var(--md-scrim) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

  /* Accesos del asesor bajo la barra: botones tonales */
  body.uc-app-shell .uc-mobile-context-actions a {
    border-radius: 999px !important; background: var(--md-secondary-container) !important;
    color: var(--md-on-secondary-container) !important; border: 0 !important; box-shadow: none !important;
    font-weight: 600 !important;
  }
  body.uc-app-shell .uc-mobile-context-actions a.primary { background: var(--md-primary) !important; color: var(--md-on-primary) !important; }
  /* En la ruta no hay barra superior: la franja no debe quedar pegada a 56 px tapando el encabezado. */
  body.cf-route .uc-mobile-context-actions { position: relative !important; top: auto !important; }
  body.uc-app-shell .uc-mobile-context-actions { background: var(--md-page) !important; border: 0 !important; box-shadow: none !important; }

  /* ---------- 7. Botones ---------- */
  body.uc-app-shell :is(#main-content, .modal, .offcanvas, .uc-a17-sheet) .btn:not(.btn-close):not(.cobros-page .btn),
  body.uc-login-body .btn, body.uc-public-shell .btn {
    border-radius: var(--md-shape-full);
    min-height: 48px; padding: 10px 20px;
    font-family: var(--md-font); font-size: 15px; font-weight: 600; letter-spacing: .01em;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    text-transform: none; box-shadow: none;
    transition: border-radius .35s var(--md-spring), background-color .2s var(--md-spring-effects),
                color .2s, box-shadow .2s, transform .25s var(--md-spring-fast) !important;
  }
  /* Cambio de forma al presionar: el gesto distintivo de M3 Expressive */
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) .btn:not(.btn-close):not(.cobros-page .btn):not(:disabled):active,
  body.uc-login-body .btn:not(:disabled):active {
    border-radius: var(--md-shape-sm) !important;
  }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) .btn.btn-sm:not(.cobros-page .btn) { min-height: 40px; padding: 6px 16px; font-size: 14px; }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) .btn.btn-lg:not(.cobros-page .btn) { min-height: 56px; padding: 14px 24px; font-size: 16px; }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) .btn > i { font-size: 1.05em; }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) .btn.w-100 { display: flex; }
  /* Grupo de botones conectado (Expressive): extremos redondos, internos con radio corto */
  body.uc-app-shell #main-content .btn-group > .btn:not(.cobros-page .btn) { border-radius: var(--md-shape-xs); }
  body.uc-app-shell #main-content .btn-group > .btn:first-child { border-top-left-radius: var(--md-shape-full); border-bottom-left-radius: var(--md-shape-full); }
  body.uc-app-shell #main-content .btn-group > .btn:last-child { border-top-right-radius: var(--md-shape-full); border-bottom-right-radius: var(--md-shape-full); }
  body.uc-app-shell #main-content .btn-group { gap: 2px; }

  /* Colores por variante (estandar de Bootstrap) */
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) :is(.btn-success, .btn-primary):not(.cobros-page .btn),
  body.uc-login-body :is(.btn-success, .btn-primary) {
    --bs-btn-bg: var(--md-primary); --bs-btn-border-color: transparent; --bs-btn-color: var(--md-on-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--md-primary) 90%, var(--md-on-primary));
    --bs-btn-hover-color: var(--md-on-primary); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: color-mix(in srgb, var(--md-primary) 84%, var(--md-on-primary));
    --bs-btn-active-color: var(--md-on-primary); --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: color-mix(in srgb, var(--md-on-surface) 12%, transparent);
    --bs-btn-disabled-color: color-mix(in srgb, var(--md-on-surface) 38%, transparent);
    --bs-btn-disabled-border-color: transparent;
  }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) :is(.btn-outline-success, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark):not(.cobros-page .btn) {
    --bs-btn-bg: transparent; --bs-btn-border-color: var(--md-outline);
    --bs-btn-color: var(--md-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--md-primary) 8%, transparent); --bs-btn-hover-color: var(--md-primary);
    --bs-btn-hover-border-color: var(--md-outline);
    --bs-btn-active-bg: color-mix(in srgb, var(--md-primary) 14%, transparent); --bs-btn-active-color: var(--md-primary);
    --bs-btn-active-border-color: var(--md-outline);
  }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) :is(.btn-outline-secondary, .btn-outline-dark):not(.cobros-page .btn) { --bs-btn-color: var(--md-on-surface-variant); --bs-btn-hover-color: var(--md-on-surface); --bs-btn-active-color: var(--md-on-surface); }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) :is(.btn-secondary, .btn-light):not(.cobros-page .btn) {
    --bs-btn-bg: var(--md-secondary-container); --bs-btn-border-color: transparent; --bs-btn-color: var(--md-on-secondary-container);
    --bs-btn-hover-bg: color-mix(in srgb, var(--md-secondary-container) 88%, var(--md-on-secondary-container));
    --bs-btn-hover-color: var(--md-on-secondary-container); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: color-mix(in srgb, var(--md-secondary-container) 80%, var(--md-on-secondary-container));
    --bs-btn-active-color: var(--md-on-secondary-container); --bs-btn-active-border-color: transparent;
  }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) .btn-danger:not(.cobros-page .btn) {
    --bs-btn-bg: var(--md-error); --bs-btn-border-color: transparent; --bs-btn-color: var(--md-on-error);
    --bs-btn-hover-bg: color-mix(in srgb, var(--md-error) 90%, var(--md-on-error)); --bs-btn-hover-color: var(--md-on-error);
    --bs-btn-active-bg: color-mix(in srgb, var(--md-error) 84%, var(--md-on-error)); --bs-btn-active-color: var(--md-on-error);
  }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) .btn-outline-danger:not(.cobros-page .btn) {
    --bs-btn-bg: transparent; --bs-btn-border-color: var(--md-outline); --bs-btn-color: var(--md-error);
    --bs-btn-hover-bg: color-mix(in srgb, var(--md-error) 8%, transparent); --bs-btn-hover-color: var(--md-error);
    --bs-btn-active-bg: color-mix(in srgb, var(--md-error) 14%, transparent); --bs-btn-active-color: var(--md-error);
    --bs-btn-active-border-color: var(--md-outline);
  }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) .btn-link:not(.cobros-page .btn) {
    --bs-btn-color: var(--md-primary); --bs-btn-hover-color: var(--md-primary); text-decoration: none; padding: 10px 12px;
    color: var(--md-primary) !important;
  }

  /* Pantallas publicas (recuperar/restablecer contrasena): botones en pastilla */
  body.uc-recovery-body :is(.btn, button[type="submit"]) { border-radius: var(--md-shape-full) !important; min-height: 52px; }
  body.uc-recovery-body :is(.btn, button[type="submit"]):not(:disabled):active { border-radius: var(--md-shape-sm) !important; }

  /* ---------- 8. Campos de texto (outlined, 56 px) ---------- */
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) :is(.form-control, .form-select):not(.form-control-sm):not(.form-select-sm):not(textarea):not([type="file"]):not([type="color"]):not([type="range"]):not(.cobros-page *),
  body.uc-login-body :is(.form-control, .form-select) {
    min-height: 56px; border-radius: var(--md-shape-sm);
    font-size: 16px; padding-left: 16px;
  }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) :is(.form-control, .form-select):not(.cobros-page *) {
    border: 1px solid var(--md-outline); background-color: var(--md-card); color: var(--md-on-surface);
    box-shadow: none; font-family: var(--md-font);
    transition: border-color .15s, box-shadow .15s;
  }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) textarea.form-control:not(.cobros-page *) {
    border-radius: var(--md-shape-sm); padding: 14px 16px; font-size: 16px; min-height: 112px;
  }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) :is(.form-control, .form-select):not(.cobros-page *):focus {
    border-color: var(--md-primary) !important; box-shadow: inset 0 0 0 1px var(--md-primary) !important; outline: none;
  }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) :is(.form-control, .form-select):disabled {
    background-color: color-mix(in srgb, var(--md-on-surface) 4%, var(--md-card)); color: color-mix(in srgb, var(--md-on-surface) 50%, transparent);
  }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) .form-select:not(.cobros-page *) { padding-right: 44px; background-position: right 16px center; }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) :is(.form-control-sm, .form-select-sm):not(.cobros-page *) { min-height: 44px; border-radius: 10px; font-size: 15px; }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) :is(.form-label, .col-form-label):not(.cobros-page *) {
    font-size: 14px; font-weight: 600; color: var(--md-on-surface-variant); margin-bottom: 6px;
  }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) .input-group > :is(.form-control, .form-select) { min-height: 56px; }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) .input-group-text {
    border-color: var(--md-outline); background: var(--md-surface-container-low); color: var(--md-on-surface-variant);
  }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) .input-group > :first-child { border-top-left-radius: var(--md-shape-sm); border-bottom-left-radius: var(--md-shape-sm); }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) .input-group > :last-child { border-top-right-radius: var(--md-shape-sm); border-bottom-right-radius: var(--md-shape-sm); }
  /* Busqueda: barra M3 (pastilla tonal) */
  body.uc-app-shell #main-content :is(input[type="search"], .dataTables_filter input):not(.cobros-page *) {
    min-height: 56px !important; border-radius: 28px !important; border: 0 !important;
    background-color: var(--md-surface-container-high) !important; color: var(--md-on-surface) !important;
    padding-left: 20px !important; padding-right: 20px !important; box-shadow: none !important;
  }
  body.uc-app-shell #main-content :is(input[type="search"], .dataTables_filter input):not(.cobros-page *):focus {
    box-shadow: inset 0 0 0 2px var(--md-primary) !important;
  }
  /* Casillas, radios e interruptores */
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) .form-check-input:not(.cobros-page *) {
    width: 20px; height: 20px; border: 2px solid var(--md-on-surface-variant); background-color: transparent;
  }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) .form-check-input[type="checkbox"]:not(.cobros-page *) { border-radius: 4px; }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) .form-check-input:checked:not(.cobros-page *) {
    background-color: var(--md-primary); border-color: var(--md-primary);
  }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) .form-switch .form-check-input:not(.cobros-page *) {
    width: 52px; height: 32px; border-radius: 16px; margin-top: 0;
    border: 2px solid var(--md-outline); background-color: var(--md-surface-container-highest);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23717970'/%3e%3c/svg%3e");
    background-position: left center; transition: background-position .3s var(--md-spring), background-color .2s;
  }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) .form-switch .form-check-input:checked:not(.cobros-page *) {
    border-color: var(--md-primary); background-color: var(--md-primary); background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  }
  html[data-theme="dark"] body.uc-app-shell :is(#main-content, .modal, .offcanvas) .form-switch .form-check-input:checked:not(.cobros-page *) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230a3818'/%3e%3c/svg%3e");
  }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) .form-switch { padding-left: 64px; min-height: 40px; display: flex; align-items: center; }
  body.uc-app-shell :is(#main-content, .modal, .offcanvas) .form-switch .form-check-input { margin-left: -64px; }

  /* ---------- 9. Tarjetas, listas, alertas, insignias ---------- */
  body.uc-app-shell #main-content :is(.card, .card-soft, .uc-card, .uc-section, .uc-box, .uc-panel):not(.cobros-page *) {
    border-radius: var(--md-shape-lg); border-color: transparent;
    background-color: var(--md-card); color: var(--md-on-surface); box-shadow: none;
  }
  body.uc-app-shell #main-content .card > .card-header:not(.cobros-page *) {
    background: transparent; border-bottom: 1px solid var(--md-outline-variant); padding: 16px 20px;
    border-top-left-radius: inherit; border-top-right-radius: inherit; font-weight: 600;
  }
  body.uc-app-shell #main-content .card > .card-footer:not(.cobros-page *) { background: transparent; border-top: 1px solid var(--md-outline-variant); }
  body.uc-app-shell #main-content .list-group:not(.cobros-page *) { border-radius: var(--md-shape-lg); overflow: hidden; }
  body.uc-app-shell #main-content .list-group-item:not(.cobros-page *) {
    background: var(--md-card); color: var(--md-on-surface); border-color: var(--md-outline-variant);
    min-height: 56px; padding: 12px 16px;
  }
  body.uc-app-shell #main-content .list-group-item.active:not(.cobros-page *) {
    background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent;
  }
  body.uc-app-shell #main-content .alert:not(.cobros-page *) {
    border: 0; border-radius: var(--md-shape-md); padding: 14px 16px; line-height: 1.5;
  }
  body.uc-app-shell #main-content .alert-success:not(.cobros-page *) { background: var(--md-primary-container); color: var(--md-on-primary-container); }
  body.uc-app-shell #main-content .alert-info:not(.cobros-page *) { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
  body.uc-app-shell #main-content .alert-warning:not(.cobros-page *) { background: var(--md-warning-container); color: var(--md-on-warning-container); }
  body.uc-app-shell #main-content .alert-danger:not(.cobros-page *) { background: var(--md-error-container); color: var(--md-on-error-container); }
  body.uc-app-shell #main-content :is(.alert-secondary, .alert-light):not(.cobros-page *) { background: var(--md-surface-container-high); color: var(--md-on-surface); }
  body.uc-app-shell #main-content .badge:not(.rounded-pill):not(.cobros-page *) { border-radius: var(--md-shape-xs); }
  body.uc-app-shell #main-content .badge:not(.cobros-page *) { font-weight: 600; letter-spacing: .01em; padding: .4em .65em; }

  /* Resumenes de campo (Clientes, Creditos, Caja...): tarjeta tonal + acciones tonales */
  html body.uc-app-shell #main-content .cf-overview {
    background: var(--md-surface-container-low) !important; color: var(--md-on-surface) !important;
    border: 0 !important; border-radius: var(--md-shape-lg) !important; box-shadow: none !important;
  }
  html body.uc-app-shell #main-content .cf-overview :is(h1, h2, h3, strong) { color: var(--md-on-surface) !important; }
  html body.uc-app-shell #main-content .cf-overview-metrics > div {
    background: var(--md-card) !important; border-radius: var(--md-shape-md) !important; border: 0 !important;
  }
  html body.uc-app-shell #main-content .cf-overview .cf-overview-links a,
  html body.uc-app-shell #main-content .cf-overview .cf-overview-action {
    border: 0 !important; border-radius: var(--md-shape-full) !important;
    background: var(--md-secondary-container) !important; color: var(--md-on-secondary-container) !important;
    font: 600 14px/1.3 var(--md-font) !important;
  }
  html body.uc-app-shell #main-content .cf-overview .cf-overview-links a :is(i, span),
  html body.uc-app-shell #main-content .cf-overview .cf-overview-action :is(i, span) { color: inherit !important; }
  html body.uc-app-shell #main-content .cf-overview .cf-overview-filter {
    border-radius: var(--md-shape-full) !important; border: 1px solid var(--md-outline) !important;
    background: transparent !important; color: var(--md-primary) !important; font: 600 14px/1.3 var(--md-font) !important;
  }

  /* ---------- 10. Pestanas y pildoras ---------- */
  body.uc-app-shell #main-content .nav-tabs:not(.cobros-page *) {
    border-bottom: 1px solid var(--md-outline-variant); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; gap: 0; -webkit-overflow-scrolling: touch;
  }
  body.uc-app-shell #main-content .nav-tabs::-webkit-scrollbar { display: none; }
  body.uc-app-shell #main-content .nav-tabs .nav-link:not(.cobros-page *) {
    position: relative; border: 0; border-radius: 0; background: transparent; white-space: nowrap;
    min-height: 48px; padding: 12px 16px; color: var(--md-on-surface-variant); font-size: 14px; font-weight: 600;
  }
  body.uc-app-shell #main-content .nav-tabs .nav-link.active:not(.cobros-page *) { color: var(--md-primary); background: transparent; }
  body.uc-app-shell #main-content .nav-tabs .nav-link.active:not(.cobros-page *)::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px;
    border-radius: 3px 3px 0 0; background: var(--md-primary);
  }
  body.uc-app-shell #main-content .nav-pills .nav-link:not(.cobros-page *) {
    border-radius: var(--md-shape-full); min-height: 40px; padding: 8px 16px; font-weight: 600; color: var(--md-on-surface-variant);
  }
  body.uc-app-shell #main-content .nav-pills .nav-link.active:not(.cobros-page *) { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

  /* ---------- 11. Tablas ---------- */
  body.uc-app-shell #main-content .table:not(.cobros-page *) {
    --bs-table-bg: transparent; --bs-table-color: var(--md-on-surface);
    --bs-table-border-color: var(--md-outline-variant);
    --bs-table-striped-bg: color-mix(in srgb, var(--md-on-surface) 3%, transparent);
    --bs-table-hover-bg: color-mix(in srgb, var(--md-on-surface) 6%, transparent);
    font-size: 14px;
  }
  body.uc-app-shell #main-content .table > thead th:not(.cobros-page *) {
    font-size: 12px; font-weight: 600; color: var(--md-on-surface-variant); letter-spacing: .02em;
    background: var(--md-surface-container-low); border-bottom-color: var(--md-outline-variant); white-space: nowrap;
  }
  body.uc-app-shell #main-content :is(.table-responsive, .uc-a17-scroll):not(.cobros-page *) {
    border-radius: var(--md-shape-md); -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  body.uc-app-shell #main-content .uc-a17-scroll { overflow-x: auto; max-width: 100%; }

  /* ---------- 12. Hojas inferiores (modales) y dialogos ----------
     Una capa anterior del layout pone TODO modal a pantalla completa en celular.
     Aqui: confirmaciones (.modal-dialog-centered) -> dialogo M3 centrado;
     modales normales -> hoja inferior con asa; .modal-lg/.modal-xl/.modal-fullscreen
     (firmas, mapas, documentos) siguen a pantalla completa ("full-screen dialog"). */
  body.uc-app-shell .modal.show:has(> .modal-dialog:not(.modal-lg):not(.modal-xl):not(.modal-fullscreen):not([class*="modal-fullscreen-"])) {
    background: var(--md-scrim) !important;
  }
  body.uc-app-shell .modal.fade { transition: opacity .28s linear; }
  /* Hoja inferior */
  body.uc-app-shell .modal .modal-dialog:not(.modal-dialog-centered):not(.modal-lg):not(.modal-xl):not(.modal-fullscreen):not([class*="modal-fullscreen-"]) {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100% !important; max-width: 640px !important; margin: 0 auto !important;
    height: auto !important; min-height: 0 !important; max-height: calc(100dvh - 24px - var(--md-safe-t)) !important;
    display: flex !important; align-items: flex-end !important;
    transform: translateY(100%) !important; transition: transform .45s var(--md-spring) !important;
  }
  body.uc-app-shell .modal.show .modal-dialog:not(.modal-dialog-centered):not(.modal-lg):not(.modal-xl):not(.modal-fullscreen):not([class*="modal-fullscreen-"]) {
    transform: none !important;
  }
  body.uc-app-shell .modal .modal-dialog:not(.modal-dialog-centered):not(.modal-lg):not(.modal-xl):not(.modal-fullscreen):not([class*="modal-fullscreen-"]) > .modal-content {
    height: auto !important; min-height: 0 !important; max-height: calc(100dvh - 24px - var(--md-safe-t)) !important;
    border: 0 !important; border-radius: var(--md-shape-xl) var(--md-shape-xl) 0 0 !important;
    background: var(--md-surface-container-low) !important; color: var(--md-on-surface) !important;
    box-shadow: var(--md-elev-1) !important;
  }
  body.uc-app-shell .modal .modal-dialog:not(.modal-dialog-centered):not(.modal-lg):not(.modal-xl):not(.modal-fullscreen):not([class*="modal-fullscreen-"]) > .modal-content::before {
    content: ""; display: block; flex: none; width: 32px; height: 4px; border-radius: 2px;
    background: var(--md-on-surface-variant); opacity: .4; margin: 16px auto 4px;
  }
  body.uc-app-shell .modal .modal-dialog:not(.modal-dialog-centered):not(.modal-lg):not(.modal-xl):not(.modal-fullscreen):not([class*="modal-fullscreen-"]) .modal-header {
    padding: 8px 16px 8px 24px !important; background: transparent !important; border-bottom: 0 !important;
  }
  body.uc-app-shell .modal .modal-dialog:not(.modal-dialog-centered):not(.modal-lg):not(.modal-xl):not(.modal-fullscreen):not([class*="modal-fullscreen-"]) .modal-body {
    background: transparent !important; padding: 8px 24px 16px !important;
  }
  body.uc-app-shell .modal .modal-dialog:not(.modal-dialog-centered):not(.modal-lg):not(.modal-xl):not(.modal-fullscreen):not([class*="modal-fullscreen-"]) .modal-footer {
    background: transparent !important; border-top: 0 !important;
    padding: 8px 24px calc(16px + var(--md-safe-b)) !important;
  }
  /* Dialogo centrado (confirmaciones) */
  body.uc-app-shell .modal .modal-dialog.modal-dialog-centered:not(.modal-lg):not(.modal-xl):not([class*="modal-fullscreen"]) {
    width: calc(100% - 48px) !important; max-width: 560px !important; margin: 0 auto !important;
    height: auto !important; min-height: 100dvh !important; align-items: center !important;
    transform: scale(.92) !important; transition: transform .4s var(--md-spring) !important;
  }
  body.uc-app-shell .modal.show .modal-dialog.modal-dialog-centered:not(.modal-lg):not(.modal-xl):not([class*="modal-fullscreen"]) { transform: none !important; }
  body.uc-app-shell .modal .modal-dialog.modal-dialog-centered:not(.modal-lg):not(.modal-xl):not([class*="modal-fullscreen"]) > .modal-content {
    height: auto !important; min-height: 0 !important; max-height: calc(100dvh - 48px) !important;
    border: 0 !important; border-radius: var(--md-shape-xl) !important;
    background: var(--md-surface-container-high) !important; color: var(--md-on-surface) !important; box-shadow: var(--md-elev-3) !important;
  }
  body.uc-app-shell .modal .modal-dialog.modal-dialog-centered:not(.modal-lg):not(.modal-xl):not([class*="modal-fullscreen"]) :is(.modal-header, .modal-body, .modal-footer) {
    background: transparent !important; border: 0 !important;
  }
  body.uc-app-shell .modal .modal-dialog.modal-dialog-centered:not(.modal-lg):not(.modal-xl):not([class*="modal-fullscreen"]) .modal-header { padding: 24px 24px 8px !important; }
  body.uc-app-shell .modal .modal-dialog.modal-dialog-centered:not(.modal-lg):not(.modal-xl):not([class*="modal-fullscreen"]) .modal-body { padding: 8px 24px 16px !important; }
  body.uc-app-shell .modal .modal-dialog.modal-dialog-centered:not(.modal-lg):not(.modal-xl):not([class*="modal-fullscreen"]) .modal-footer { padding: 8px 24px 24px !important; }
  /* Comun a hojas, dialogos y pantallas completas */
  body.uc-app-shell .modal .modal-title { font-size: 22px; font-weight: 600 !important; line-height: 1.3; }
  body.uc-app-shell .modal .modal-footer { gap: 8px; }
  body.uc-app-shell .modal .modal-footer > * { margin: 0; }
  body.uc-app-shell .modal .btn-close { width: 40px; height: 40px; border-radius: 50%; padding: 0; background-size: 14px; opacity: .75; }
  body.uc-app-shell .modal :is(.modal-lg, .modal-xl, .modal-fullscreen, [class*="modal-fullscreen-"]) .modal-header {
    background: var(--md-card) !important; border-bottom-color: var(--md-outline-variant) !important;
  }
  body.uc-app-shell .modal.uc-a17-dragging .modal-dialog { transition: none !important; }
  body.uc-app-shell #logoutModal :is(.modal-header, .modal-body, .modal-footer) { background: transparent !important; border: 0 !important; }
  body.uc-app-shell .offcanvas.offcanvas-bottom { border-radius: var(--md-shape-xl) var(--md-shape-xl) 0 0; border: 0; }
  body.uc-app-shell .offcanvas.offcanvas-start { border-radius: 0 var(--md-shape-md) var(--md-shape-md) 0; border: 0; }

  /* ---------- 13. Menus desplegables ---------- */
  body.uc-app-shell .dropdown-menu {
    border: 0; border-radius: var(--md-shape-md); padding: 8px 0; min-width: 200px;
    background: var(--md-surface-container); color: var(--md-on-surface); box-shadow: var(--md-elev-2);
  }
  body.uc-app-shell .dropdown-item {
    min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 16px;
    color: var(--md-on-surface); font-size: 15px; font-weight: 500;
  }
  body.uc-app-shell .dropdown-item:active, body.uc-app-shell .dropdown-item.active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

  /* ---------- 14. Snackbars (avisos) y progreso ---------- */
  body.uc-app-shell .uc-toast-stack {
    top: auto !important; left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important;
    bottom: calc(var(--md-nav-h) + 12px + var(--md-safe-b)) !important; transform: none !important;
    align-items: stretch !important; z-index: 1200 !important;
  }
  body.uc-app-shell .uc-toast {
    background: var(--md-inverse-surface) !important; color: var(--md-inverse-on-surface) !important;
    border: 0 !important; border-radius: var(--md-shape-sm) !important; box-shadow: var(--md-elev-3) !important;
    min-height: 48px; padding: 12px 8px 12px 16px !important; font-family: var(--md-font);
  }
  body.uc-app-shell .uc-toast :is(strong, span) { color: inherit !important; }
  body.uc-app-shell .uc-toast .uc-toast-icon { background: transparent !important; color: var(--md-inverse-primary) !important; box-shadow: none !important; }
  body.uc-app-shell .uc-toast-danger .uc-toast-icon { color: #ffb4ab !important; }
  body.uc-app-shell .uc-toast .uc-toast-close { color: var(--md-inverse-on-surface) !important; opacity: .8; min-width: 40px; min-height: 40px; }
  body.uc-app-shell .uc-page-loader {
    top: calc(var(--md-safe-t)) !important; height: 4px !important; background: var(--md-secondary-container) !important;
  }
  body.uc-app-shell .uc-page-loader::before { background: var(--md-primary) !important; border-radius: 4px !important; }

  /* ---------- 15. Ondas al tocar (ripple) ---------- */
  .uc-a17-ripple-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
  .uc-a17-ripple {
    position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); opacity: .16;
    background: currentColor; animation: uc-a17-ripple .55s var(--md-spring-effects) forwards;
  }
  @keyframes uc-a17-ripple { to { transform: scale(1); opacity: 0; } }

  /* ---------- 16. Desplazamiento horizontal sin romper la pagina ---------- */
  body.uc-app-shell #main-content { overflow-x: clip; }
}

/* En PC no existen el boton y el menu de desbordamiento (la barra de escritorio ya muestra todo). */
@media screen and (min-width: 992px) {
  .uc-a17-more, .uc-a17-menu { display: none !important; }
}

/* Movimiento reducido: sin animaciones decorativas. */
@media screen and (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  body.uc-app-shell #main-content > *, .uc-a17-menu, .uc-a17-ripple { animation: none !important; }
  body.cf-shell > .cf-operation-plus, body.cf-shell > .cf-operation-plus span { transition: none !important; }
  body.uc-app-shell .modal .modal-dialog, body.uc-app-shell .uc-sidebar { transition: none !important; }
}