/* ========================================================================
   📱 MOBILE.CSS — RDN CRM
   Optimización móvil universal para todos los archivos del CRM
   Sube este archivo a /public_html/mobile.css en Hostinger
   ======================================================================== */

/* ============================================================
   BOTÓN HAMBURGUESA (oculto por defecto, solo visible en móvil)
   ============================================================ */
.mobile-toggle{
  display:none;
  position:fixed;
  top:11px;
  left:11px;
  z-index:200;
  width:40px;
  height:40px;
  background:#003B7A;
  color:#fff;
  border:none;
  border-radius:8px;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  align-items:center;
  justify-content:center;
}
.mobile-toggle:active{transform:scale(0.95);}

/* Overlay para cerrar el sidebar al tocar fuera */
.mobile-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:90;
  -webkit-tap-highlight-color:transparent;
}
.mobile-overlay.show{display:block;}

/* ============================================================
   BREAKPOINT MÓVIL: pantallas hasta 900px (incluye iPhone Pro Max)
   ============================================================ */
@media (max-width: 900px) {

  /* ---- Mostrar botón hamburguesa ---- */
  .mobile-toggle{display:flex !important;}

  /* ---- SIDEBAR: oculto por defecto, se desliza al tocar el botón ---- */
  .sb, nav.sb, aside.sb, .sidebar {
    transform:translateX(-100%);
    transition:transform 0.28s ease;
    width:185px !important;
    max-width:65vw !important;
    z-index:100;
    box-shadow:4px 0 24px rgba(0,0,0,.25);
    /* SCROLL VERTICAL para ver todos los enlaces */
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    height:100vh !important;
    height:100dvh !important; /* dynamic viewport - cuenta la barra del navegador */
    max-height:100vh !important;
    max-height:100dvh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    padding-bottom:120px !important; /* espacio extra GRANDE al final para llegar bien */
  }
  .sb.show, nav.sb.show, aside.sb.show, .sidebar.show {
    transform:translateX(0);
  }
  
  /* Scrollbar más finita en el sidebar */
  .sb::-webkit-scrollbar, nav.sb::-webkit-scrollbar {
    width:3px;
  }
  .sb::-webkit-scrollbar-track, nav.sb::-webkit-scrollbar-track {
    background:rgba(255,255,255,.05);
  }
  .sb::-webkit-scrollbar-thumb, nav.sb::-webkit-scrollbar-thumb {
    background:rgba(255,255,255,.3);
    border-radius:2px;
  }
  
  /* Logo del sidebar más compacto */
  .sb .sb-logo, nav.sb .sb-logo {
    padding:8px !important;
  }
  .sb .sb-logo img, nav.sb .sb-logo img {
    max-height:30px !important;
  }
  .sb .sb-logo small, nav.sb .sb-logo small {
    font-size:7px !important;
    margin-top:2px !important;
  }
  
  /* Secciones del sidebar más compactas */
  .sb .sb-sec, nav.sb .sb-sec {
    padding:5px 10px 1px !important;
    font-size:7.5px !important;
    letter-spacing:0.6px !important;
  }
  
  /* Enlaces del sidebar más pequeños y compactos */
  .sb a, nav.sb a {
    padding:6px 10px !important;
    font-size:11px !important;
    gap:5px !important;
    line-height:1.2 !important;
  }
  
  .sb hr, nav.sb hr {
    margin:3px 8px !important;
  }

  /* ---- MAIN: ocupa todo el ancho en móvil ---- */
  .main, main, .contenido, .content-wrapper {
    margin-left:0 !important;
  }

  /* ---- TOPBAR: dejar espacio para el botón hamburguesa ---- */
  .topbar, .top-bar, header.topbar {
    padding-left:62px !important;
    padding-right:12px !important;
    height:54px !important;
  }
  .topbar h1, .tb-l h1 {
    font-size:14px !important;
    line-height:1.2;
  }
  .topbar small, .tb-l small {
    font-size:9px !important;
    display:block;
  }
  .topbar .tb-l img, .topbar img {
    height:28px !important;
  }
  .topbar .av {
    width:30px !important;
    height:30px !important;
    font-size:11px !important;
  }
  .topbar .btn-out, .btn-out {
    padding:5px 10px !important;
    font-size:11px !important;
  }
  .topbar #uname {
    display:none !important; /* Esconder nombre largo */
  }

  /* ---- CONTENEDOR PRINCIPAL: padding reducido ---- */
  .wrap, .container, .contenedor, .panel-wrap {
    padding:12px 10px !important;
    max-width:100% !important;
  }

  /* ---- PANELES: padding y radio reducidos ---- */
  .panel, .card, .box {
    padding:14px 14px !important;
    border-radius:10px !important;
    margin-bottom:12px !important;
  }
  .panel-t, .panel-title, .card-title {
    font-size:13px !important;
    margin-bottom:12px !important;
    padding-bottom:8px !important;
  }

  /* ---- HEROES (banners grandes del Dashboard) ---- */
  .hero, .hero-banner, .header-hero {
    padding:14px !important;
    border-radius:10px !important;
  }
  .hero h1, .hero-title {
    font-size:18px !important;
    line-height:1.3 !important;
  }
  .hero h2, .hero-sub {
    font-size:13px !important;
  }
  .hero p, .hero-desc {
    font-size:12px !important;
  }

  /* ---- BOTONES DEL HERO (los del Dashboard) ---- */
  .hero-btn, .btn-hero {
    padding:8px 12px !important;
    font-size:11px !important;
    gap:4px !important;
  }
  .hero-btns, .hero-actions {
    flex-wrap:wrap !important;
    gap:6px !important;
  }

  /* ---- KPIs / TILES ---- */
  .kpi, .kpi-tile, .kpi-card, .stat-card {
    padding:12px !important;
  }
  .kpi-title, .kpi-label {
    font-size:10px !important;
  }
  .kpi-val, .kpi-value, .kpi-num {
    font-size:22px !important;
  }
  .kpi-meta, .kpi-foot {
    font-size:10px !important;
  }

  /* ---- GRIDS: forzar 1-2 columnas en móvil ---- */
  .grid, .grid-3, .grid-4, .grid-kpi, .grid3, .grid4, .kpi-grid {
    grid-template-columns:repeat(2,1fr) !important;
    gap:8px !important;
  }
  .grid-2, .grid2, .grid-half {
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .grid-charts, .charts-grid {
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  /* ---- FORMULARIOS ---- */
  .fg, .form-group {
    margin-bottom:10px !important;
  }
  .fg label, label {
    font-size:10px !important;
  }
  .fg input, .fg select, .fg textarea, input, select, textarea {
    font-size:14px !important; /* 14px mínimo para evitar zoom auto en iOS */
    padding:9px 10px !important;
  }

  /* ---- BOTONES GENERALES ---- */
  .btn, button, .btn-az, .btn-pu, .btn-gr, .btn-wa, .btn-rd {
    padding:10px 14px !important;
    font-size:13px !important;
    min-height:42px; /* mínimo táctil */
  }
  .btn-row {
    flex-direction:column !important;
    gap:8px !important;
  }
  .btn-row .btn, .btn-row button {
    width:100% !important;
  }

  /* ---- TABLAS RESPONSIVAS ---- */
  table {
    font-size:11px !important;
  }
  table th, table td {
    padding:6px 8px !important;
  }

  /* ---- COSTO BOX (cotizaciones) ---- */
  .costo-box {
    padding:12px !important;
  }
  .costo-row {
    flex-wrap:wrap !important;
    gap:6px !important;
  }
  .costo-lbl {
    min-width:0 !important;
    flex:1 100% !important;
    font-size:11px !important;
  }
  .costo-input {
    width:auto !important;
    flex:1 !important;
    min-width:80px !important;
  }
  .costo-unit {
    font-size:10px !important;
  }

  /* ---- TIPO BUTTONS (Cajas, Consola, Libras) ---- */
  .tipo-btn {
    flex-direction:column !important;
    gap:6px !important;
  }
  .tipo {
    width:100% !important;
    padding:10px !important;
    font-size:12px !important;
  }

  /* ---- MODAL PREVIEW ---- */
  .modal-preview {
    width:96% !important;
    padding:14px !important;
    margin:8px auto !important;
  }
  .modal-preview-head h3 {
    font-size:14px !important;
  }
  .preview-page {
    font-size:10pt !important;
  }
  .doc-header-new, .doc-body, .doc-footer {
    padding:14px 18px !important;
  }
  .doc-header-new img {
    height:55px !important;
  }
  .doc-header-new h1 {
    font-size:14pt !important;
  }
  .doc-header-new h2 {
    font-size:10pt !important;
  }

  /* ---- PIPELINE: cards y columnas ---- */
  .pipe-grid, .pipeline-grid, .kanban-board {
    grid-template-columns:1fr !important;
    gap:10px !important;
    overflow-x:auto !important;
  }
  .pipe-col, .pipeline-column, .kanban-col {
    min-width:0 !important;
    width:100% !important;
  }
  .pipe-card, .pipeline-card, .kanban-card {
    padding:10px !important;
    font-size:12px !important;
  }
  .pipe-card .titulo, .pipe-card .nombre {
    font-size:13px !important;
  }
  .pipe-card .monto {
    font-size:14px !important;
  }

  /* ---- BANNERS ---- */
  .banner-edit, .banner-info, .banner-alert {
    padding:10px 12px !important;
    font-size:12px !important;
  }

  /* ---- TOTAL BOX (cotizaciones) ---- */
  .total-box {
    padding:14px !important;
  }
  .total-box span {
    font-size:13px !important;
  }
  .total-box .monto {
    font-size:20px !important;
  }

  /* ---- RECIPIENTE GRID (cotizaciones móvil) ---- */
  .recip-grid {
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  .recip-card .recip-img {
    height:120px !important;
  }
  .recip-card .recip-nom {
    font-size:11px !important;
  }
  .recip-card .recip-dim {
    font-size:9px !important;
  }
  .modalidad-grid {
    grid-template-columns:1fr !important;
  }

  /* ---- OPP ITEMS (Pipeline cards en Dashboard) ---- */
  .opp {
    padding:10px !important;
    font-size:12px !important;
  }
  .opp-row, .opp-info {
    flex-wrap:wrap !important;
    gap:4px !important;
  }
}

/* ============================================================
   PANTALLAS MUY PEQUEÑAS (iPhone SE, Mini)
   ============================================================ */
@media (max-width: 380px) {
  .topbar h1, .tb-l h1 { font-size:12px !important; }
  .panel { padding:12px !important; }
  .grid, .grid-3, .grid-4 { grid-template-columns:1fr !important; }
  .kpi-val { font-size:18px !important; }
  .hero h1 { font-size:16px !important; }
}

/* ============================================================
   AJUSTES iOS: evitar el zoom automático al hacer focus
   ============================================================ */
@supports (-webkit-touch-callout: none) {
  input, select, textarea {
    font-size:16px !important;
  }
}

/* ============================================================
   🎉 OCULTAR MENÚ "EVENTO CPA" — HASTA NOV 2026
   --------------------------------------------------------------
   Esconde los enlaces del Evento CPA del sidebar en todas las
   páginas del CRM. El código sigue intacto, solo no se ve.
   
   📅 Para volver a mostrarlo en noviembre 2026:
   Solo borra TODO el bloque entre "INICIO" y "FIN" más abajo.
   ============================================================ */

/* INICIO BLOQUE OCULTAR EVENTO CPA */

/* Ocultar enlaces que vayan a las páginas del evento */
.sb a[href*="evento.html"],
.sb a[href*="evento-caja.html"],
.sb a[href*="evento-ticket.html"],
.sb a[href*="evento-emergencia.html"],
.sb a[href*="opcion-a.html"],
.sb a[href*="opcion-b.html"],
nav.sb a[href*="evento.html"],
nav.sb a[href*="evento-caja.html"],
nav.sb a[href*="evento-ticket.html"],
nav.sb a[href*="evento-emergencia.html"],
nav.sb a[href*="opcion-a.html"],
nav.sb a[href*="opcion-b.html"],
aside.sb a[href*="evento.html"],
aside.sb a[href*="evento-caja.html"],
aside.sb a[href*="evento-ticket.html"],
aside.sb a[href*="evento-emergencia.html"],
.sidebar a[href*="evento.html"],
.sidebar a[href*="evento-caja.html"],
.sidebar a[href*="evento-ticket.html"],
.sidebar a[href*="evento-emergencia.html"] {
  display: none !important;
}

/* Ocultar el título "EVENTO CPA" del sidebar
   (asumiendo que es el .sb-sec inmediatamente antes) */
.sb .sb-sec.evento-cpa-titulo,
nav.sb .sb-sec.evento-cpa-titulo,
aside.sb .sb-sec.evento-cpa-titulo {
  display: none !important;
}

/* FIN BLOQUE OCULTAR EVENTO CPA */


/* ════════════════════════════════════════════════════════════
   🆕 FIX ACORDEÓN SIDEBAR MÓVIL · 22 mayo 2026
   --------------------------------------------------------------
   Arregla que los botones Pipeline, Cotizaciones, Cobros y 
   Ventas no expandían hacia abajo al hacer click en móvil.
   
   Causa: iOS Safari falla con las transiciones max-height
   cuando el sidebar tiene overflow-y:auto.
   
   Solución: forzar max-height:2000px con !important cuando
   el acordeón está abierto, y asegurar overflow visible.
   ════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Acordeón CERRADO por defecto */
  .sb-acc-body {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.35s ease !important;
    background: rgba(0,0,0,0.18) !important;
    display: block !important;
  }
  
  /* Acordeón ABIERTO cuando tiene clase .open */
  .sb-acc-body.open {
    max-height: 2000px !important;
    overflow: visible !important;
  }
  
  /* Botón del acordeón con estilo correcto */
  .sb-acc-btn {
    padding: 11px 14px !important;
    font-size: 12.5px !important;
    color: #fff !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    width: 100% !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: inherit !important;
  }
  
  /* Botón ABIERTO (con borde amarillo) */
  .sb-acc-btn.open {
    background: rgba(255,255,255,0.1) !important;
    border-left-color: #FFC107 !important;
    color: #FFEB3B !important;
  }
  
  /* Chevron del botón */
  .sb-acc-btn .chev {
    margin-left: auto !important;
    font-size: 10px !important;
    transition: transform 0.3s ease !important;
    display: inline-block !important;
  }
  .sb-acc-btn.open .chev {
    transform: rotate(90deg) !important;
  }
  
  /* Badge en el botón (ej: Cobros 179) */
  .sb-acc-btn .acc-badge {
    background: #C62828 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 1px 6px !important;
    border-radius: 10px !important;
    margin-right: 4px !important;
  }
  
  /* Links DENTRO del acordeón */
  .sb-acc-body a {
    padding: 9px 14px 9px 36px !important;
    font-size: 12px !important;
    color: rgba(255,255,255,0.75) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    border-left: 3px solid transparent !important;
  }
  
  .sb-acc-body a:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
  }
  
  .sb-acc-body a.on {
    background: #EBF2FF !important;
    color: #003B7A !important;
    border-left-color: #003B7A !important;
    font-weight: 700 !important;
  }
}
/* FIN FIX ACORDEÓN */