/* ============================================================
   STYLE COLLECTION · CAPA MÓVIL TIPO APP
   Solo se activa en pantallas <= 767px (móvil).
   NO afecta la vista de escritorio.
   Color corporativo: #EA018C (fucsia)
   ============================================================ */
@media (max-width: 767px){

  /* ---------- Ocultar header AdminLTE (reemplazado por app bar) ---------- */
  .main-header{ display:none !important; }

  /* ---------- Ocultar sidebar original (su contenido va al sheet) ---------- */
  .main-sidebar, .left-side{ display:none !important; }

  /* ---------- Ocultar badge "C3/26" en móvil (el TopBar ya identifica la campaña) ---------- */
    .wrapper span.sc-campaign-badge{ display:none !important; }

  /* ---------- Ajustar contenido (espacio para app bar + bottom bar + safe-area) ---------- */
  .wrapper{ margin-left:0 !important; }
  .content-wrapper{
    margin-left:0 !important;
    padding-top:calc(64px + env(safe-area-inset-top,0px));
    padding-bottom:calc(80px + env(safe-area-inset-bottom,0px));
    padding-left:env(safe-area-inset-left,0px);
    padding-right:env(safe-area-inset-right,0px);
    min-height:100vh;
  }

  /* ---------- App Bar (con safe-area superior) ---------- */
  .sc-appbar{
    position:fixed; top:0; left:0; right:0; z-index:1050;
    background:linear-gradient(135deg, #EA018C 0%, #FF4FA8 100%);
    color:#fff;
    box-shadow:0 4px 14px rgba(234,1,140,.35);
    padding-top:env(safe-area-inset-top,0px);
    padding-left:env(safe-area-inset-left,0px);
    padding-right:env(safe-area-inset-right,0px);
  }
  .sc-appbar-row{
    height:64px;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 14px;
  }
  .sc-brand{ display:flex; align-items:center; gap:8px; color:#fff !important; text-decoration:none; }
  .sc-brand img{ width:34px; height:34px; border-radius:8px; background:#fff; object-fit:cover; }
  .sc-brand-text{ display:flex; flex-direction:column; line-height:1.15; }
  .sc-brand-name{ font-weight:700; font-size:19px; letter-spacing:.3px; color:#fff !important; }
  .sc-brand-short{
    font-size:10px; font-weight:600; opacity:.85; letter-spacing:.4px; text-transform:uppercase;
    margin-left:6px; color:#fff !important;
  }
  .sc-brand-ctx{
    font-size:10px; font-weight:600; opacity:.85; letter-spacing:.4px; text-transform:uppercase;
    color:#fff !important;
  }
  .sc-appbar-actions{
    display:flex; align-items:center; gap:4px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    max-width:62%; padding-bottom:2px;
  }
  .sc-appbar-actions::-webkit-scrollbar{ display:none; }
  .sc-icon-btn{
    width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px;
    position:relative; cursor:pointer; border:none;
  }
  .sc-icon-btn .sc-badge{
    position:absolute; top:0; right:0; min-width:16px; height:16px; padding:0 4px;
    background:#fff; color:#EA018C; border-radius:10px; font-size:9px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
  }
  .sc-icon-btn .sc-badge.is-dot{ min-width:9px; width:9px; height:9px; padding:0; }
  .sc-icon-img img{ width:22px; height:22px; border-radius:50%; object-fit:cover; }

  /* ---------- BottomBar (64px + safe-area inferior) ---------- */
  .sc-bottombar{
    position:fixed; left:0; right:0; bottom:0; z-index:1050;
    background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
    border-top:1px solid #E5E5EA;
    display:flex; justify-content:space-around; align-items:stretch;
    height:calc(64px + env(safe-area-inset-bottom,0px));
    padding:0 6px env(safe-area-inset-bottom,0px);
    padding-left:calc(6px + env(safe-area-inset-left,0px));
    padding-right:calc(6px + env(safe-area-inset-right,0px));
    box-shadow:0 -4px 16px rgba(0,0,0,.06);
  }
  .sc-bb-item{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    color:#9A9AA0; font-size:10px; font-weight:600; cursor:pointer;
    padding:0; border:none; background:none; text-transform:uppercase; letter-spacing:.3px;
    position:relative;
  }
  .sc-bb-item .fa{ font-size:20px; }
  .sc-bb-item.active{ color:#EA018C; }
  .sc-bb-item .sc-dot{ width:4px; height:4px; border-radius:50%; background:#EA018C; opacity:0; position:absolute; bottom:4px; }
  .sc-bb-item.active .sc-dot{ opacity:1; }
  .sc-bb-item.sc-primary{
    background:linear-gradient(135deg, #EA018C, #FF4FA8);
    color:#fff; border-radius:14px; margin:8px 4px; height:48px;
    box-shadow:0 4px 12px rgba(234,1,140,.35); justify-content:center;
  }
  .sc-bb-item.sc-primary .fa{ font-size:22px; }

  /* ---------- Backdrop + Sheets ---------- */
  .sc-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1060;
    opacity:0; pointer-events:none; transition:opacity .28s ease;
  }
  .sc-backdrop.show{ opacity:1; pointer-events:auto; }

  .sc-sheet{
    position:fixed; left:0; right:0; bottom:0; z-index:1070;
    background:#fff; border-radius:24px 24px 0 0;
    transform:translateY(105%); transition:transform .32s cubic-bezier(.32,.72,.28,1);
    max-height:86vh; display:flex; flex-direction:column;
    box-shadow:0 -10px 40px rgba(0,0,0,.2);
    padding-left:env(safe-area-inset-left,0px);
    padding-right:env(safe-area-inset-right,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .sc-sheet.open{ transform:translateY(0); }
  .sc-sheet-full{
    width:100% !important;
    max-height:100vh !important;
    height:100vh;
    border-radius:0;
  }
  /* Menú: altura consistente (no se encoge) */
  #sc-sheet-menu{ min-height:80vh; }
  .sc-sheet-handle{ width:40px; height:5px; border-radius:3px; background:#D1D1D6; margin:10px auto 4px; flex-shrink:0; }
  .sc-sheet-header{ padding:6px 18px 12px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
  .sc-sheet-header h3{ font-size:17px; color:#1C1C1E; margin:0; }
  .sc-sheet-close{
    width:30px; height:30px; border-radius:50%; background:#F2F2F7; border:none;
    color:#6E6E73; font-size:14px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .sc-sheet-body{ overflow-y:auto; padding:0 16px 20px; min-height:50vh; }
  .sc-sheet-auto .sc-sheet-body{ min-height:auto; }

  /* ---------- Menú en sheet (lista con buscador, como el sidebar) ---------- */
  .sc-menu-search{ padding:0 4px 10px; }
  .sc-menu-search-input{
    width:100%; padding:10px 14px; border:1px solid #E5E5EA; border-radius:12px;
    font-size:14px; background:#F7F7FA; color:#1C1C1E; outline:none;
  }
  .sc-menu-search-input:focus{ border-color:#EA018C; }
  .sc-menu-list{ display:flex; flex-direction:column; }
  .sc-menu-item{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 14px;
    border-bottom:1px solid #F0F0F2; color:#1C1C1E; font-size:14px; font-weight:600;
    text-decoration:none;
  }
  .sc-menu-item:active{ background:#FCE4F1; }
  .sc-menu-item .sc-menu-count{
    margin-left:auto; min-width:18px; height:18px; padding:0 5px;
    background:#EA018C; color:#fff; border-radius:9px; font-size:11px; font-weight:700;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .sc-menu-item .sc-menu-count.is-dot{ min-width:10px; width:10px; height:10px; padding:0; }
  .sc-menu-item .fa{ width:20px; color:#EA018C; text-align:center; }
  .sc-menu-item-row{ display:flex; align-items:center; gap:10px; width:100%; cursor:pointer; }
  .sc-menu-item-row .sc-menu-arrow{ margin-left:auto; color:#C7C7CC; }
  .sc-menu-section{
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
    color:#6E6E73; margin:16px 2px 8px;
  }
  .sc-menu-section:first-child{ margin-top:0; }

  /* Submenú expandido (lista anidada, va debajo del padre a ancho completo) */
  .sc-menu-sublist{ display:none; padding:4px 0; width:100%; }
  .sc-menu-sublist.open{ display:block; }
  .sc-menu-sublist a{
    display:flex; align-items:center; gap:8px; padding:10px 12px;
    color:#1C1C1E; font-size:13px; font-weight:500; text-decoration:none;
    background:#F7F7FA; border-radius:8px; margin-bottom:4px;
  }
  .sc-menu-sublist a:active{ background:#FCE4F1; }
  .sc-menu-sublist a .fa{ width:18px; color:#EA018C; text-align:center; }
  /* Nivel 3: un poco más oscuro */
  .sc-sublist2 a{ background:#EFEFF2; }

  /* ---------- Tablas: siguen siendo tablas con scroll horizontal ---------- */
  .sc-table-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .sc-table-scroll table{
    white-space:nowrap;
    overflow:visible !important; /* evita doble scroll: la tabla no scrollea, solo el wrapper */
  }

  /* ---------- Contenido de dropdowns movidos al sheet (notif, perlas, gemas, etc.) ---------- */
  .sc-sheet-body .dropdown-menu{
    position:static !important;
    box-shadow:none !important;
    border:none !important;
    width:100% !important;
    background:transparent !important;
    float:none !important;
  }
  .sc-sheet-body .user-header{
    border-radius:14px;
    margin-bottom:10px;
    overflow:hidden;
  }
  .sc-sheet-body .user-footer{
    display:flex;
    gap:10px;
    padding:10px 0;
  }
  .sc-sheet-body .user-footer .btn{
    flex:1;
    border-radius:10px;
  }
  .sc-sheet-body .header{
    font-size:12px; font-weight:700; color:#6E6E73;
    padding:8px 4px; text-transform:uppercase;
  }

  /* ---------- Notificaciones / listas movidas: items como filas limpias ---------- */
  .sc-sheet-body .dropdown-menu .menu{
    list-style:none; padding:0; margin:0;
    max-height:45vh; overflow-y:auto;
  }
  .sc-sheet-body .dropdown-menu .menu li{ list-style:none; background:transparent !important; }
  .sc-sheet-body .dropdown-menu .menu li a{
    display:block; padding:12px 14px;
    border-bottom:1px solid #F0F0F2; color:#1C1C1E; text-decoration:none;
    position:relative;
  }
  .sc-sheet-body .dropdown-menu .menu li a:hover{ background:#FCE4F1; }
  .sc-sheet-body .dropdown-menu .menu li a:active{ background:#F3D0E6; }
  .sc-sheet-body .dropdown-menu .menu li a .fa{ margin-right:10px; }
  .sc-sheet-body .dropdown-menu .menu li a b{
    display:inline-block; font-size:14px; color:#1C1C1E;
  }
  .sc-sheet-body .dropdown-menu .menu li a span[style*="float:right"]{
    float:right; font-size:11px; color:#9A9AA0;
  }
  .sc-sheet-body .dropdown-menu .menu li a small{
    display:block; font-size:11px; color:#6E6E73; margin-top:2px;
  }
  .sc-notif-ver-todas{
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin-top:14px; padding:14px; border-radius:12px;
    background:#FCE4F1; color:#EA018C; font-size:15px; font-weight:700;
    text-decoration:none;
  }
  .sc-notif-ver-todas:active{ background:#F3D0E6; }
  .sc-notif-ver-todas.sc-notif-danger{ background:#FDECEC; color:#E53935; }
  .sc-notif-ver-todas.sc-notif-danger:active{ background:#F8D7D7; }

  /* ---------- Instalar aplicación: globo flotante inferior (móvil) ---------- */
  .sc-install-banner{
    position:fixed; left:50%; bottom:calc(64px + env(safe-area-inset-bottom,0px) + 14px);
    z-index:1085;
    display:flex; flex-wrap:wrap; align-items:center; gap:12px;
    width:min(420px, calc(100vw - 32px));
    padding:12px 42px 12px 14px;
    background:#fff; border:1px solid #E5E5EA; border-radius:14px;
    box-shadow:0 14px 36px rgba(0,0,0,.22);
    opacity:0; pointer-events:none;
    transform:translateX(-50%) translateY(10px);
    transition:opacity .22s ease, transform .22s ease;
  }
  .sc-install-banner.show{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
  .sc-install-banner .ib-ic{
    width:40px; height:40px; border-radius:11px; flex-shrink:0;
    background:#FCE4F1; color:#EA018C;
    display:flex; align-items:center; justify-content:center; font-size:19px;
  }
  .sc-install-banner .ib-tx{ min-width:0; flex:1; }
  .sc-install-banner .ib-tx b{ display:block; font-size:14px; color:#1C1C1E; }
  .sc-install-banner .ib-tx span{ display:block; font-size:12px; color:#6E6E73; }
  .sc-install-banner .ib-go{
    flex-shrink:0; border:none; cursor:pointer; font-family:inherit;
    padding:9px 16px; border-radius:10px;
    background:#EA018C; color:#fff; font-size:13px; font-weight:700;
  }
  .sc-install-banner .ib-go:active{ background:#C80077; }
  .sc-install-banner .ib-x{ position:absolute; top:8px; right:8px; }
  .sc-install-banner .ib-snooze-note{
    flex:0 0 100%; margin-top:2px;
    color:#6E6E73; font-size:11px; line-height:1.4; text-align:center;
  }
  .sc-install-banner .ib-snooze{
    flex:0 0 100%; padding:0; border:0;
    background:transparent; color:#EA018C; font:inherit; font-size:12px;
    text-align:center; text-decoration:underline; cursor:pointer;
  }
  .sc-install-banner .ib-snooze:active{ color:#C80077; }
  .sc-install-banner .ib-x,
  .sc-ios-install .ib-x{
    flex-shrink:0; width:28px; height:28px; border-radius:8px; border:none;
    background:transparent; color:#6E6E73; font-size:16px; line-height:1;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .sc-install-banner .ib-x:active,
  .sc-ios-install .ib-x:active{ background:#F2F2F7; }

  /* Guía detallada iOS/Safari (no existe prompt automático de instalación) */
  .sc-ios-install{
    position:fixed; left:50%; bottom:calc(64px + env(safe-area-inset-bottom,0px) + 14px);
    z-index:1086;
    width:min(360px, calc(100vw - 24px));
    padding:16px 16px 18px;
    background:#fff; border:1px solid #E5E5EA; border-radius:16px;
    box-shadow:0 14px 36px rgba(0,0,0,.24);
    opacity:0; pointer-events:none;
    transform:translateX(-50%) translateY(10px);
    transition:opacity .22s ease, transform .22s ease;
  }
  .sc-ios-install.show{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
  .sc-ios-install .ib-x{ position:absolute; top:10px; right:10px; }
  .sc-ios-install .ii-head{ display:flex; align-items:center; gap:12px; padding-right:26px; }
  .sc-ios-install .ii-app{
    width:44px; height:44px; border-radius:11px; flex-shrink:0;
    background:#fff; object-fit:contain;
  }
  .sc-ios-install .ii-head b{ display:block; font-size:15px; color:#1C1C1E; }
  .sc-ios-install .ii-head span{ display:block; font-size:12px; color:#6E6E73; margin-top:2px; }
  .sc-ios-install .ii-steps{ margin:12px 0 0; padding-left:20px; font-size:13px; line-height:1.65; color:#3A3A3C; }
  .sc-ios-install .ii-steps li{ margin-bottom:7px; }
  .sc-ios-install .ii-steps b{ color:#1C1C1E; font-weight:600; }
  .sc-ios-install .ii-share{ color:#EA018C; vertical-align:-4px; margin:0 1px; }
  .sc-ios-install .ii-arrow{
    text-align:center; color:#EA018C; font-size:22px; line-height:1; margin-top:6px;
    animation:scIiBounce 1.4s ease-in-out infinite;
  }
  .sc-ios-install .ii-snooze-note{
    margin-top:12px; color:#6E6E73; font-size:11px; line-height:1.4; text-align:center;
  }
  .sc-ios-install .ii-snooze{
    display:block; margin:4px auto 0; padding:0; border:0;
    background:transparent; color:#EA018C; font:inherit; font-size:12px;
    text-decoration:underline;
    cursor:pointer;
  }
  .sc-ios-install .ii-snooze:active{ color:#C80077; }

  .sc-install-confirm-overlay{
    position:fixed; inset:0; z-index:12000;
    display:flex; align-items:center; justify-content:center;
    padding:20px; background:rgba(20,16,20,.56);
  }
  .sc-install-confirm{
    width:min(360px, 100%); padding:24px 22px 20px;
    border-radius:18px; background:#fff;
    box-shadow:0 20px 60px rgba(0,0,0,.3); text-align:center;
    animation:scInstallConfirmIn .18s ease-out;
  }
  .sc-install-confirm-icon{
    width:52px; height:52px; margin:0 auto 12px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#FCE4F1; color:#EA018C; font-size:22px;
  }
  .sc-install-confirm h2{ margin:0 0 8px; color:#1C1C1E; font-size:19px; font-weight:700; }
  .sc-install-confirm p{ margin:0; color:#6E6E73; font-size:14px; line-height:1.5; }
  .sc-install-confirm .sc-install-confirm-error{ margin-top:10px; color:#C62828; font-size:12px; }
  .sc-install-confirm-error:empty{ display:none; }
  .sc-install-confirm-actions{ display:flex; gap:10px; margin-top:22px; }
  .sc-install-confirm-actions button{
    flex:1; min-height:42px; padding:9px 12px; border-radius:10px;
    font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  }
  .sc-install-confirm-cancel{ border:1px solid #D1D1D6; background:#fff; color:#3A3A3C; }
  .sc-install-confirm-accept{ border:1px solid #EA018C; background:#EA018C; color:#fff; }
  .sc-install-confirm-cancel:active{ background:#F2F2F7; }
  .sc-install-confirm-accept:active{ background:#C80077; border-color:#C80077; }
  @keyframes scInstallConfirmIn{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
  @keyframes scIiBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }

  /* ---------- Perfil: portada + foto en círculo + opciones ---------- */
  #sc-sheet-profile .sc-sheet-body{ padding:0 0 20px; }
  #sc-sheet-profile .sc-profile-cover{ border-radius:0 0 14px 14px; }
  #sc-sheet-profile .sc-profile-opt{ margin:0 16px 10px; }
  .sc-profile-cover{
    position:relative;
    padding:40px 16px;
    border-radius:14px;
    margin-bottom:14px;
    text-align:center;
    color:#fff;
  }
  .sc-profile-photo{
    width:72px; height:72px; border-radius:50%;
    border:3px solid #fff;
    background:#fff;
    object-fit:cover;
    margin-bottom:8px;
  }
  .sc-profile-photo-fallback{
    background:#fff; color:#EA018C; display:inline-flex; align-items:center; justify-content:center;
    font-size:28px; font-weight:700;
  }
  .sc-profile-cover .sc-profile-name{ font-size:17px; font-weight:700; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.6); }
  .sc-profile-cover .sc-profile-role{ font-size:13px; color:#fff; opacity:.95; text-shadow:0 1px 3px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.6); }
  .sc-profile-opt{
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:16px; margin-bottom:10px;
    border-radius:12px;
    background:#F7F7FA; border:1px solid #E5E5EA;
    color:#1C1C1E; font-size:15px; font-weight:600;
    text-decoration:none;
  }
  .sc-profile-opt:active{ background:#FCE4F1; }
  .sc-profile-opt .fa{ width:22px; color:#EA018C; text-align:center; }
  .sc-profile-opt-danger{ color:#E53935; }
  .sc-profile-opt-danger .fa{ color:#E53935; }

  /* ---------- Perlas / Gemas: sheets limpios ---------- */
  .sc-pg-head{
    display:flex; align-items:center; gap:14px; padding:16px; border-radius:14px;
    margin-bottom:14px; color:#fff;
  }
  .sc-pg-head .sc-pg-title{ color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); }
  .sc-pg-img{
    width:56px; height:56px; border-radius:16px; object-fit:cover;
  }
  .sc-pg-img-fallback{
    background:#FCE4F1; color:#EA018C; display:flex; align-items:center; justify-content:center;
    font-size:24px; font-weight:700;
  }
  .sc-pg-title{ font-size:20px; font-weight:700; color:#1C1C1E; }
  .sc-pg-cards{ display:flex; gap:10px; margin-bottom:16px; }
  .sc-pg-card{
    flex:1; padding:16px; border-radius:14px; background:#F7F7FA;
    border:1px solid #E5E5EA; text-align:center;
  }
  .sc-pg-card-bloq{ background:#FDF0F6; }
  .sc-pg-label{ font-size:11px; color:#6E6E73; text-transform:uppercase; font-weight:700; }
  .sc-pg-value{ font-size:22px; font-weight:700; color:#EA018C; margin-top:4px; }

  /* ---------- Monitoreo de Líderes: ocupa todo el espacio del sheet (sin cambiar colores) ---------- */
  #sc-monitoreo-body{ height:100%; padding:0; min-height:auto; }
  #sc-monitoreo-body .control-sidebar{ height:100%; width:100% !important; }

  /* ---------- Modales Bootstrap → bottom sheets ---------- */
  .modal{ overflow:hidden; z-index:1080 !important; }
  .modal-backdrop{ z-index:1070 !important; }
  .modal-dialog{
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important;
    margin:0 !important; width:100% !important; max-width:100% !important;
    transform:translateY(105%) !important; transition:transform .32s cubic-bezier(.32,.72,.28,1) !important;
    border-radius:24px 24px 0 0; max-height:86vh; overflow-y:auto;
  }
  .modal.in .modal-dialog{ transform:translateY(0) !important; }
  .modal-content{
    width:100% !important;
    border-radius:24px 24px 0 0;
    border:none;
    box-shadow:none;
  }
  .modal-body{ overflow-x:auto; font-size:14px; line-height:1.5; padding:16px; }
  .modal-body label{ font-size:14px !important; font-weight:600; margin-bottom:4px; }
  .modal-body .form-group{ margin-bottom:16px; }
  .modal-body .form-control{
    font-size:15px;
    padding:10px 12px;
    height:auto;
  }
  .modal-backdrop{ background:rgba(0,0,0,.45); }

  /* ---------- SweetAlert2 → bottom sheets ---------- */
  .swal2-container{
    padding:0 !important;
    align-items:flex-end !important;
  }
  .swal2-popup{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    border-radius:24px 24px 0 0 !important;
    max-height:75vh;
    min-height:75vh;
    overflow-y:auto;
    font-size:17px !important;
  }
  .swal2-popup .swal2-html-container{
    font-size:17px !important;
    line-height:1.5;
  }
  .swal2-popup table{
    font-size:15px !important;
  }

  /* ---------- Modales personalizados (box-modal*, modalDetalle, modalleyenda) → bottom sheets ---------- */
  [class*="box-modal"],
  .modalDetalle,
  .modalleyenda{
    padding-top:0 !important;
    z-index:1080 !important;
  }
  [class*="box-modal"] .content,
  .modalDetalle .content,
  .modalleyenda .content{
    position:absolute;
    bottom:0; left:0; right:0;
    max-height:86vh;
    overflow-y:auto;
    background:#fff;
    border-radius:24px 24px 0 0;
  }
  [class*="box-modal"] .content .col-xs-12,
  .modalDetalle .content .col-xs-12,
  .modalleyenda .content .col-xs-12{
    padding:0;
  }
  [class*="box-modal"] .box,
  .modalDetalle .box,
  .modalleyenda .box{
    margin:0;
    border:none;
    box-shadow:none;
  }
}

/* ============================================================
   LOGIN · Estilo app (aplica en TODOS los tamaños)
   ============================================================ */
body.bg-inicio .content{
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  min-height:100vh;
  display:flex;
  align-items:center;
}
body.bg-inicio .box{
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  border:1px solid #E5E5EA;
}
body.bg-inicio .box-body{ padding:20px; }
body.bg-inicio .box-title{ text-align:center; }
body.bg-inicio .form-control,
body.bg-inicio .input-group{ border-radius:12px !important; }
body.bg-inicio .enviar{
  background:linear-gradient(135deg, #EA018C, #FF4FA8) !important;
  color:#fff !important; border:none !important; border-radius:14px !important; font-weight:700;
  box-shadow:0 6px 16px rgba(234,1,140,.35);
}

/* ============================================================
   BARRAS DE SCROLL · fucsia y muy delgadas (todos los tamaños)
   ============================================================ */
::-webkit-scrollbar{ width:4px; height:4px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#EA018C; border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:#C40077; }
*{ scrollbar-width:thin; scrollbar-color:#EA018C transparent; }