/* =========================================================
   APS Mobile UX (Plugin principal + Addons embebidos)
   - Off-canvas menu (hamburguesa)
   - 1 columna, touch friendly, sin cortes
   ========================================================= */

/* Default (desktop): hide mobile menu toggle/overlay */
.aps-menu-toggle{ display:none !important; }
.aps-offcanvas-overlay{ display:none !important; }

@media (max-width: 768px){

  /* ==========================
     App-like: Topbar fijo (solo móvil)
     ========================== */
  body.aps-mobile .aps-topbar{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2000 !important;
    width: 100% !important;
  }
  /* Reservar espacio para el topbar fijo dentro del contenedor del cotizador */
  
  /* En móvil, el header fijo solo muestra logo/título y botón Menú (sin saludo/cerrar sesión) */
  body.aps-mobile .aps-topbar-right,
  body.aps-mobile .aps-user-info{
    display:none !important;
  }

body.aps-mobile .aps-app{
    padding-top: 78px !important;
  }
  /* En pantallas muy pequeñas, un poco menos */
  @supports (padding: max(0px)){
    body.aps-mobile .aps-app{
      padding-top: max(92px, env(safe-area-inset-top)) !important;
    }
  }

  /* Alinear título a la izquierda y botón menú a la derecha (móvil) */
  .aps-topbar-title-row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .aps-menu-toggle{
    margin-left: auto !important;
  }
  /* Evitar cortes/scroll horizontal */
  html, body{ overflow-x: hidden !important; }
  .aps-app, .aps-main{ overflow-x: hidden !important; }

  /* App a 1 columna (sidebar off-canvas) */
  .aps-app{
    flex-direction: column !important;
    border-radius: 18px !important;
    min-height: auto !important;
  }

  /* MAIN */
  .aps-main{
    padding: 14px 14px 20px !important;
  }

  /* TOPBAR: apilar */
  .aps-topbar{
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(226,232,240,.9);
    padding: 10px 10px !important;
    border-radius: 18px !important;
  }
  .aps-topbar-left,
  .aps-topbar-right{
    width: 100%;
  }
  .aps-topbar{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .aps-user-info{
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* Botón hamburguesa */
  .aps-menu-toggle{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(226,232,240,.9);
    background: #fff;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
  }
  .aps-menu-toggle svg{
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }
  .aps-topbar-left{
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .aps-topbar-title-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  
  /* BRAND/LOGO: que se vea más "app" y destaque en móvil */
  .aps-topbar-brand{
    width: 100% !important;
    align-items: flex-start !important;
  }
  .aps-topbar-logo{
    width: 58px !important;
    height: 58px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 26px rgba(15,23,42,.14) !important;
  }
  .aps-topbar-text{
    flex: 1 1 auto !important;
    width: 100% !important;
  }

  /* Title row debe ocupar todo el ancho para que el botón quede pegado a la derecha */
  .aps-topbar-title-row{
    width: 100% !important;
  }
  .aps-menu-toggle{
    margin-left: auto !important;
  }

  /* Afinar el sticky topbar para que no se vea "centrado" */
  .aps-topbar{
    padding: 12px 12px !important;
  }
  .aps-main{
    padding: 12px 12px 18px !important;
  }
/* OVERLAY */
  .aps-offcanvas-overlay{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,.55);
    z-index: 70;
  }
  body.aps-menu-open .aps-offcanvas-overlay{
    display: block;
  }

  /* SIDEBAR off-canvas */
  .aps-sidebar{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: min(88vw, 340px) !important;
    max-width: 340px !important;
    z-index: 80 !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
    border-radius: 0 18px 18px 0 !important;
    box-shadow: 0 20px 50px rgba(15,23,42,.25) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body.aps-menu-open .aps-sidebar{
    transform: translateX(0) !important;
  }

  /* Nav: 1 columna, cómodo */
  .aps-nav{
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding-bottom: 12px;
  }
  .aps-nav a,
  .aps-nav button{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 12px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  /* Paneles más compactos */
  .aps-panel{
    padding: 14px 14px !important;
    border-radius: 18px !important;
  }

  /* Productos: grid -> 1 columna */
  #aps-products-section .aps-product-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #aps-products-section .aps-product-item{
    padding: 16px 14px !important;
    border-radius: 18px !important;
  }

  /* Wizard: 2 columnas -> 1 columna */
  .aps-wizard-body{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .aps-wizard-body-sidebar{ order: 2 !important; }
  .aps-wizard-body-main{ order: 1 !important; }

  /* Steps: scroll horizontal */
  .aps-wizard-steps{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    padding-bottom: 6px !important;
  }
  .aps-step-pill{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 9px 14px !important;
    font-size: 12px !important;
  }

  /* Footer sticky (mejora enorme) */
  .aps-wizard-footer{
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;

    position: sticky !important;
    bottom: 10px !important;
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(8px);
    padding: 10px !important;
    border: 1px solid rgba(226,232,240,.9) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.12) !important;
    z-index: 50 !important;
  }

  /* Touch targets */
  .aps-btn,
  .aps-action-btn,
  button,
  input[type="button"],
  input[type="submit"]{
    min-height: 44px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
  }
  .aps-input,
  .aps-select-input,
  input[type="text"],
  input[type="number"],
  input[type="tel"],
  input[type="email"],
  input[type="date"],
  select,
  textarea{
    min-height: 44px !important;
    font-size: 16px !important; /* evita zoom iOS */
    border-radius: 14px !important;
    max-width: 100% !important;
  }

  /* Embeds / addons: nada con ancho fijo */
  .aps-embed,
  #aps-incendio-embed,
  #aps-naves-embed,
  #aps-auto-shortcode-wrap,
  .aps-auto-selector,
  #aps-rc-section,
  #aps-fianzas-wizard-section{
    width: 100% !important;
    max-width: none !important;
  }

  /* IMPORTANTE: NO forzar display none del seguro full (el JS lo maneja) */
  /* Asegurar que si el wrap se muestra, no se corte */
  #aps-auto-shortcode-wrap{
    overflow: visible !important;
  }

  /* Tablas -> scroll horizontal (solo dentro de addons) */
  :where(#aps-fianzas-wizard-section, #aps-rc-section, #aps-auto-shortcode-wrap, .aps-auto-selector)
  :where(table){
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Cualquier grid/row/cols internas -> 1 columna (defensivo) */
  :where(#aps-fianzas-wizard-section, #aps-rc-section, #aps-auto-shortcode-wrap, .aps-auto-selector)
  :where(.row,.grid,[class*="grid"],[class*="columns"],[class*="col-"]){
    max-width: 100% !important;
  }

  /* Imágenes y svg sin desbordar */
  img, svg{ max-width: 100% !important; height: auto !important; }
  /* ==========================
     INICIO / DASHBOARD (móvil)
     ========================== */
  .aps-dashboard,
  .aps-dashboard-summary{
    gap: 12px !important;
  }
  .aps-section-head{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .aps-hero-head{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .aps-hero-right{
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* KPIs como "app cards" */
  .aps-agent-kpis{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  .aps-kpi-card,
  .aps-card{
    border-radius: 18px !important;
  }
  .aps-kpi-card{
    padding: 12px 12px !important;
  }
  .aps-kpi-value{
    font-size: 18px !important;
  }
  .aps-kpi-label{
    font-size: 12px !important;
  }

  /* Botón cerrar sesión y botones generales: full width en móvil */
  .aps-logout-btn,
  .aps-user-info .aps-btn{
    width: 100% !important;
  }

  /* Banners / cards grandes: evitar cortes */
  .aps-hero,
  .aps-panel,
  .aps-card{
    overflow: hidden !important;
  }


  /* ==========================
     TOPBAR "native app" feel
     - compact on scroll
     ========================== */
  .aps-topbar-brand{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
  }
  .aps-topbar-text h1{
    font-size:22px !important;
    line-height:1.05 !important;
    letter-spacing:-.02em !important;
  }
  #aps-page-subtitle{
    font-size:13px !important;
    line-height:1.2 !important;
    opacity:.92;
  }

  /* User chip: evitar que se vea enorme / raro en móvil */
  .aps-user-info{
    width:100% !important;
    padding:10px 12px !important;
    border-radius:18px !important;
    justify-content:space-between !important;
  }
  .aps-user-text{
    min-width:0 !important;
  }
  .aps-btn-logout{
    min-height:40px !important;
    padding:10px 14px !important;
    border-radius:14px !important;
    font-size:13px !important;
    white-space:nowrap !important;
  }

  /* Estado scrolled: topbar más compacto (se siente como app nativa) */
  body.aps-topbar-scrolled .aps-topbar{
    padding:10px 10px !important;
  }
  body.aps-topbar-scrolled .aps-topbar-logo{
    width:44px !important;
    height:44px !important;
    border-radius:14px !important;
    box-shadow:0 8px 18px rgba(15,23,42,.12) !important;
  }
  body.aps-topbar-scrolled .aps-topbar-text h1{
    font-size:18px !important;
  }
  body.aps-topbar-scrolled #aps-page-subtitle{
    display:none !important;
  }

  /* ==========================
     Dashboard: Detalle por agente (cards en móvil)
     ========================== */
  #aps-dashboard-agent-table-wrap .aps-table-wrap{
    overflow: visible !important; /* ya no scroll horizontal; serán cards */
  }
  #aps-dashboard-agent-table{
    width:100% !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
  }
  #aps-dashboard-agent-table thead{
    display:none !important;
  }
  #aps-dashboard-agent-table tbody{
    display:block !important;
  }
  #aps-dashboard-agent-table tbody tr{
    display:block !important;
    background:#fff !important;
    border:1px solid rgba(226,232,240,.95) !important;
    border-radius:18px !important;
    box-shadow:0 10px 26px rgba(15,23,42,.06) !important;
    padding:12px 12px !important;
    margin-bottom:10px !important;
  }
  #aps-dashboard-agent-table tbody td{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    padding:8px 0 !important;
    border-bottom:1px dashed rgba(148,163,184,.28) !important;
  }
  #aps-dashboard-agent-table tbody td:last-child{
    border-bottom:none !important;
  }

  /* Etiquetas por columna */
  #aps-dashboard-agent-table tbody td:nth-child(1)::before{ content:"Agente"; }
  #aps-dashboard-agent-table tbody td:nth-child(2)::before{ content:"Total"; }
  #aps-dashboard-agent-table tbody td:nth-child(3)::before{ content:"Enviadas"; }
  #aps-dashboard-agent-table tbody td:nth-child(4)::before{ content:"Emitidas"; }
  #aps-dashboard-agent-table tbody td:nth-child(5)::before{ content:"Espera docs"; }
  #aps-dashboard-agent-table tbody td:nth-child(6)::before{ content:"Aprobadas"; }
  #aps-dashboard-agent-table tbody td:nth-child(7)::before{ content:"Rechazadas"; }

  #aps-dashboard-agent-table tbody td::before{
    font-size:12px !important;
    font-weight:800 !important;
    color:#64748b !important;
    flex:0 0 auto !important;
    padding-right:10px !important;
  }

  /* Primera celda (agente): mantener avatar+nombre bien */
  #aps-dashboard-agent-table .aps-agent-cell{
    min-width: 0 !important;
  }
  #aps-dashboard-agent-table .aps-agent-meta{
    min-width:0 !important;
  }
  #aps-dashboard-agent-table .aps-agent-name{
    font-size:14px !important;
  }
  #aps-dashboard-agent-table .aps-agent-sub{
    font-size:12px !important;
  }


}

/* Extra pequeño */
@media (max-width: 420px){
  .aps-panel{ padding: 12px 12px !important; }
  .aps-topbar{ padding: 10px 10px !important; }
}



/* =========================================================
   Mobile: Módulo Cotizaciones (cards + filtros cómodos)
   ========================================================= */
@media (max-width: 768px){

  /* Toolbar apilada */
  #aps-view-cotizaciones .aps-coti-toolbar{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  #aps-view-cotizaciones .aps-coti-toolbar-right{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  #aps-view-cotizaciones .aps-coti-pills{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }
  #aps-view-cotizaciones .aps-coti-pill{
    width: auto !important;
    flex: 0 0 auto !important;
  }
  #aps-view-cotizaciones [data-aps-goto="productos"]{
    width: 100% !important;
    text-align: center !important;
  }

  /* Filtros: 1 columna */
  #aps-view-cotizaciones .aps-coti-filters{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #aps-view-cotizaciones .aps-coti-filter-actions-inner{
    display:flex !important;
    gap:10px !important;
  }
  #aps-view-cotizaciones #aps_coti_reset,
  #aps-view-cotizaciones #aps_coti_apply{
    width: 100% !important;
  }

  /* Tabla -> cards */
  #aps-view-cotizaciones .aps-coti-table-wrap{
    overflow: visible !important;
  }
  #aps-view-cotizaciones .aps-coti-table{
    border: 0 !important;
  }
  #aps-view-cotizaciones .aps-coti-table thead{
    display:none !important;
  }
  #aps-view-cotizaciones .aps-coti-table,
  #aps-view-cotizaciones .aps-coti-table tbody,
  #aps-view-cotizaciones .aps-coti-table tr{
    display:block !important;
    width:100% !important;
  }
  #aps-view-cotizaciones .aps-coti-table tr{
    margin: 0 0 12px 0 !important;
    padding: 12px 12px 10px !important;
    border: 1px solid rgba(148,163,184,.28) !important;
    background: rgba(255,255,255,.9) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
  }
  #aps-view-cotizaciones .aps-coti-table td{
    display:flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 8px 0 !important;
    border: 0 !important;
  }
  #aps-view-cotizaciones .aps-coti-table td:before{
    content: attr(data-label);
    font-weight: 900;
    color: #334155;
    flex: 0 0 42%;
    max-width: 42%;
    opacity: .95;
  }
  #aps-view-cotizaciones .aps-coti-table td > *{
    max-width: 58%;
  }
  #aps-view-cotizaciones .aps-coti-table td[data-label="Nº"]{
    font-size: 15px !important;
    font-weight: 1000 !important;
  }

  /* Estado select más cómodo */
  #aps-view-cotizaciones .aps-coti-state{
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
  }

  /* Acciones -> grid 2 columnas */
  #aps-view-cotizaciones .aps-coti-actions{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  #aps-view-cotizaciones .aps-coti-actions .aps-icon-btn{
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 10px !important;
    border-radius: 14px !important;
    min-height: 44px !important;
  }

  /* Paginación más amigable */
  #aps-view-cotizaciones .aps-coti-pager{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  #aps-view-cotizaciones .aps-page-btn{
    width: 100% !important;
  }

  /* Anti-corte */
  #aps-view-cotizaciones{
    overflow-x: hidden !important;
  }
}


/* =========================================================
   APS Mobile App-like Modules
   - Inicio/Dashboard, Personas, Agentes, Reportes, Calendario, Formularios
   ========================================================= */
@media (max-width: 768px){
  /* KPI grid: 3-6 cards -> 2 columnas */
  #aps-dashboard-kpis,
  .aps-kpi-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  .aps-kpi-card{ padding: 12px 12px !important; border-radius: 16px !important; }
  .aps-kpi-card .aps-kpi-value{ font-size: 20px !important; }

  /* Listados principales -> cards si existe el contenedor */
  #aps-view-cotizaciones .aps-quotes-table-wrap,
  #aps-view-reportes .aps-table-wrap,
  #aps-view-agentes .aps-table-wrap,
  #aps-view-personas .aps-table-wrap{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Grids de personas (tarjetas) a 1 columna */
  #aps-personas-tt-grid,
  #aps-personas-vs-grid{
    grid-template-columns: 1fr !important;
  }

  /* Filtros/acciones: apilar */
  .aps-toolbar,
  .aps-quotes-toolbar,
  .aps-filters-row,
  .aps-search-row{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* Botones de acción en listados: grid 2 columnas */
  .aps-actions,
  .aps-row-actions,
  .aps-actions-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  /* Calendario: si hay vista grid, permitir scroll */
  #aps-view-visitas .aps-calendar-wrap,
  #aps-view-visitas .aps-calendar{
    overflow-x: auto !important;
  }

  /* Formularios: campos a 1 columna */
  #aps-view-formularios .aps-form-grid,
  #aps-view-formularios .aps-form-row,
  #aps-view-formularios .aps-form-columns,
  #aps-view-formularios .grid,
  #aps-view-formularios .row{
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Paneles dentro de vistas: padding consistente */
  #aps-view-inicio,
  #aps-view-productos,
  #aps-view-cotizaciones,
  #aps-view-reportes,
  #aps-view-personas,
  #aps-view-formularios,
  #aps-view-visitas,
  #aps-view-calculadora,
  #aps-view-agentes{
    padding-bottom: 18px !important;
  }
}

@media (max-width: 768px){
  body.aps-mobile .aps-mobile-logout{
    padding: 10px 12px;
    border-top: 1px solid rgba(226,232,240,.9);
    margin-top: 8px;
  }
  body.aps-mobile .aps-mobile-logout-link{
    display:block;
    width:100%;
    text-align:center;
  }

  /* =========================
     Bottom Nav (App footer)
     ========================= */
  body.aps-mobile .aps-bottom-nav{
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    height: 68px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 10px;
    border-radius: 22px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(148,163,184,.35);
    box-shadow: 0 18px 44px rgba(15,23,42,.18);
    z-index: 9999;
  }

  body.aps-mobile .aps-bottom-item{
    appearance: none;
    border: 0;
    background: transparent;
    border-radius: 18px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #64748b;
    font-weight: 800;
    letter-spacing: -.01em;
  }

  body.aps-mobile .aps-bottom-item:active{
    transform: scale(0.98);
  }

  body.aps-mobile .aps-bottom-ico{
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: #1769A3;
    opacity: .65;
  }
  body.aps-mobile .aps-bottom-ico svg{ width: 22px; height: 22px; display:block; }

  body.aps-mobile .aps-bottom-txt{
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
  }

  body.aps-mobile .aps-bottom-item.is-active{
    background: rgba(23,105,163,.10);
    color: #0f172a;
  }
  body.aps-mobile .aps-bottom-item.is-active .aps-bottom-ico{
    opacity: 1;
  }

  /* Reserve space so content doesn't hide behind bottom nav */
  body.aps-mobile .aps-main{
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }

  /* Wizard sticky footer should sit above bottom nav */
  body.aps-mobile .aps-wizard-footer{
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }
}