/* ═══════════════════════════════════════════════════════════════
   COTIZADOR SOLARIS — UI MÓVIL
   ───────────────────────────────────────────────────────────────
   Este archivo se carga con  media="(max-width:767px)"  y ADEMÁS
   todas sus reglas están anidadas bajo  body.mob-ui , clase que
   sólo agrega mobile.js cuando la pantalla es < 768px.
   Doble aislamiento: es imposible que afecte a escritorio.
═══════════════════════════════════════════════════════════════ */

body.mob-ui{
  --mtop: 52px;   /* alto topbar            */
  --msum: 54px;   /* alto barra de resumen  */
  --mnav: 60px;   /* alto nav inferior      */
  --msafe: env(safe-area-inset-bottom, 0px);
  --mbg: #f1f5f9;
  --mdark: #0f2350;
  --mdark2: #16306b;
  font-size: 15px;
  background: var(--mbg);
  overscroll-behavior-y: none;
}

body.mob-ui.mob-locked{ overflow: hidden; }

/* ══════════ 1. TOPBAR ══════════ */
body.mob-ui .topbar{
  height: var(--mtop);
  padding: 0 12px;
  z-index: 100;
}
body.mob-ui .topbar-logo .logo-icon{ width:30px;height:30px;font-size:1rem;border-radius:9px }
body.mob-ui .topbar-logo .logo-text{ font-size:.9rem;letter-spacing:.2px }
body.mob-ui .topbar-logo .logo-sub{ display:none }
body.mob-ui .firebase-status{ font-size:.62rem;padding:4px 8px }

/* ══════════ 2. BARRA DE RESUMEN (sticky bajo topbar) ══════════ */
body.mob-ui #mob-chrome{ display:block }

body.mob-ui #mob-summary{
  position: sticky;
  top: var(--mtop);
  z-index: 95;
  height: var(--msum);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: linear-gradient(135deg, var(--mdark) 0%, var(--mdark2) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(15,35,80,.25);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s var(--ease);
}
body.mob-ui #mob-summary:active{ background: var(--mdark2) }

body.mob-ui .msum-stats{
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
body.mob-ui .msum-stat{ min-width:0; line-height:1.05 }
body.mob-ui .msum-stat .v{
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.15rem;font-weight:900;color:#fff;
  white-space:nowrap;
}
body.mob-ui .msum-stat .l{
  font-size:.55rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:rgba(255,255,255,.5);
  white-space:nowrap;
}
body.mob-ui .msum-sep{ width:1px;height:24px;background:rgba(255,255,255,.15);flex-shrink:0 }

body.mob-ui .msum-price{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  border-radius:11px;
  padding:6px 10px;
}
body.mob-ui .msum-price .v{
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.2rem;font-weight:900;color:#7affb2;line-height:1;white-space:nowrap;
}
body.mob-ui .msum-price .l{
  font-size:.52rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:rgba(255,255,255,.45);margin-bottom:1px;
}
body.mob-ui .msum-chev{
  font-size:.7rem;color:rgba(255,255,255,.55);
  transition:transform .2s var(--ease);
}
body.mob-ui .msum-empty{
  flex:1;font-size:.78rem;color:rgba(255,255,255,.55);font-weight:600;
}
/* La barra se oculta en pestañas sin panel de resultados */
body.mob-ui #mob-summary.msum-off{ display:none }

/* ══════════ 3. CONTENIDO PRINCIPAL ══════════ */
body.mob-ui .main-content{
  padding: 10px 10px calc(var(--mnav) + var(--msafe) + 84px) !important;
  min-height: auto;
  background: var(--mbg);
}
body.mob-ui .form-layout{ display:block }
body.mob-ui .form-main{ padding:0;display:block }

/* El panel lateral desaparece: su contenido vive en los modales */
body.mob-ui .results-panel{ display:none !important }

/* Selector Con Recibos / Por Paquete */
body.mob-ui .pago-toggle{ gap:6px }
body.mob-ui .pago-btn{ padding:11px 8px;font-size:.82rem;border-radius:11px }

/* ══════════ 4. SECCIONES ACORDEÓN ══════════ */
/* styles.css pone overflow:hidden en .section-card (para recortar las
   esquinas). En móvil hay que anularlo: un overflow distinto de visible
   convierte la tarjeta en contenedor de scroll y el header `sticky` se
   quedaría anclado dentro de la tarjeta en vez de bajo la barra superior.
   Las esquinas se recortan aplicando el radio al propio header. */
body.mob-ui .section-card{
  overflow: visible;
  margin-bottom: 9px;
  border-radius: 14px;
  border: 1px solid #e3e8f0;
  box-shadow: 0 1px 3px rgba(15,35,80,.05);
}
body.mob-ui .section-card.mob-acc > .sc-hdr{ border-radius:13px 13px 0 0 }
body.mob-ui .section-card.mob-acc.sc-collapsed > .sc-hdr{ border-radius:13px }
body.mob-ui .section-card.mob-acc > .sc-hdr{
  padding: 14px 14px;
  gap: 11px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 56px;
  align-items: center;
}
body.mob-ui .section-card.mob-acc > .sc-hdr:active{ background: var(--surface-2) }
body.mob-ui .section-card.mob-acc .sc-icon{
  width:34px;height:34px;font-size:1rem;border-radius:10px;flex-shrink:0;
}
body.mob-ui .section-card.mob-acc .sc-title{
  font-size:.9rem;line-height:1.25;flex:1;min-width:0;
}
body.mob-ui .section-card.mob-acc .sc-title .tip{ display:none }

body.mob-ui .mob-arrow{
  margin-left:auto;flex-shrink:0;
  width:26px;height:26px;border-radius:50%;
  background:var(--surface-3);color:var(--txt-2);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;
  transition:transform .22s var(--ease), background .18s;
}
body.mob-ui .section-card.mob-acc.sc-collapsed .mob-arrow{ transform:rotate(-90deg) }
body.mob-ui .section-card.mob-acc:not(.sc-collapsed) .mob-arrow{
  background:var(--primary-lt);color:#fff;
}
/* La flecha original de escritorio se oculta en móvil (usamos .mob-arrow) */
body.mob-ui .section-card.mob-acc .sc-arrow{ display:none }

body.mob-ui .section-card.mob-acc > .sc-body{ padding:14px }
body.mob-ui .sc-body.sc-hidden{ display:none }

/* Cabecera pegajosa de la sección abierta */
body.mob-ui .section-card.mob-acc:not(.sc-collapsed) > .sc-hdr{
  position: sticky;
  top: calc(var(--mtop) + var(--msum));
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
body.mob-ui #mob-summary.msum-off ~ .main-content .section-card.mob-acc:not(.sc-collapsed) > .sc-hdr{
  top: var(--mtop);
}

/* ══════════ 5. FORMULARIOS ══════════ */
/* 16px evita el zoom automático de iOS al enfocar un campo */
body.mob-ui input[type=text],
body.mob-ui input[type=number],
body.mob-ui input[type=tel],
body.mob-ui input[type=email],
body.mob-ui input[type=date],
body.mob-ui select,
body.mob-ui textarea{
  font-size: 16px !important;
  padding: 11px 12px;
  border-radius: 10px;
  min-height: 44px;
}
body.mob-ui label{ font-size:.74rem;margin-bottom:5px;font-weight:700 }
body.mob-ui .g2,
body.mob-ui .tc-row{ grid-template-columns:1fr;gap:10px }
body.mob-ui .g3{ grid-template-columns:1fr 1fr;gap:9px }
body.mob-ui .s2{ grid-column:span 1 }
body.mob-ui .cg,
body.mob-ui .fin-grid,
body.mob-ui .pvg{ grid-template-columns:1fr 1fr;gap:9px }
body.mob-ui button{ -webkit-tap-highlight-color:transparent }

/* Tipo de cambio / material eléctrico (baterías): cada celda lleva icono,
   dos líneas de texto y un input; a dos columnas no cabe en móvil.
   El grid va en style inline, por eso hace falta !important. */
body.mob-ui .bat-tc-row{ grid-template-columns:1fr !important;gap:9px !important }
body.mob-ui .bat-tc-row > div{ flex-wrap:nowrap !important }
body.mob-ui .bat-tc-row input{ width:92px !important;flex-shrink:0 }

/* Paneles de inversor central: fila flex con selects sin min-width que
   se aplasta en pantallas estrechas. En móvil se apila. */
body.mob-ui #inv-central-panel > div,
body.mob-ui #pkg-inv-central-wrap > div{
  flex-direction:column;align-items:stretch;gap:10px;
}
body.mob-ui #inv-central-panel > div > div,
body.mob-ui #pkg-inv-central-wrap > div > div{
  flex:1 1 auto !important;min-width:0 !important;
}

/* Tablas con scroll horizontal y pista visual */
body.mob-ui .rtbl-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:0 -14px;padding:0 14px;
}
body.mob-ui .rtbl{ min-width:440px }

/* ══════════ 6. NAV INFERIOR ══════════ */
body.mob-ui .tab-bar{
  position: fixed;
  bottom: 0; left: 0; right: 0; top: auto;
  height: calc(var(--mnav) + var(--msafe));
  padding: 0 0 var(--msafe);
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  border-bottom: none;
  box-shadow: 0 -4px 20px rgba(15,35,80,.08);
  justify-content: space-around;
  z-index: 90;
  overflow: visible;
}
body.mob-ui .tab-btn{
  flex:1;min-width:0;max-width:none;
  flex-direction:column;gap:3px;
  padding:9px 2px 7px;
  font-size:1.05rem;
  border:none;margin-bottom:0;
  text-align:center;color:var(--txt-3);
  border-radius:0;
}
body.mob-ui .tab-btn .tab-lbl{
  display:block;font-size:.56rem;font-weight:700;letter-spacing:.1px;
}
body.mob-ui .tab-btn.active{
  color: var(--primary-lt);
  background: transparent;
  border: none;
}
body.mob-ui .tab-btn.active .tab-lbl{ color:var(--primary-lt) }
body.mob-ui .tab-btn.active::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:30px;height:3px;border-radius:0 0 3px 3px;background:var(--primary-lt);
}
body.mob-ui .tab-btn{ position:relative }

/* ══════════ 7. BOTÓN FLOTANTE DE ACCIONES ══════════ */
body.mob-ui #mob-fab{
  position: fixed;
  right: 14px;
  bottom: calc(var(--mnav) + var(--msafe) + 14px);
  z-index: 88;
  height: 52px;
  padding: 0 20px 0 17px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: none;
  border-radius: 26px;
  background: linear-gradient(135deg, #145a32, #22c55e);
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 8px 24px rgba(22,163,74,.4);
  transition: transform .15s var(--ease), opacity .2s;
}
body.mob-ui #mob-fab:active{ transform:scale(.94) }
body.mob-ui #mob-fab.mob-fab-off{
  opacity:0;pointer-events:none;transform:translateY(12px) scale(.9);
}

/* ══════════ 8. HOJA MODAL (bottom sheet) ══════════ */
body.mob-ui #mob-overlay{
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(8,17,40,.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s var(--ease);
  /* impide el scroll del fondo al arrastrar sobre el velo (iOS) */
  touch-action: none;
}
body.mob-ui #mob-overlay.open{ opacity:1;pointer-events:auto }

body.mob-ui #mob-sheet{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 401;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--mdark) 0%, #0b1c40 100%);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -14px 44px rgba(0,0,0,.45);
  transform: translateY(102%);
  transition: transform .3s var(--ease);
  padding-bottom: var(--msafe);
}
body.mob-ui #mob-sheet.open{ transform:translateY(0) }
body.mob-ui #mob-sheet.dragging{ transition:none }

body.mob-ui .ms-grab{
  padding: 9px 0 4px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  touch-action: none;
  cursor: grab;
}
body.mob-ui .ms-grab i{
  display:block;width:42px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.28);
}
body.mob-ui .ms-head{
  display:flex;align-items:center;gap:10px;
  padding: 4px 18px 12px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  touch-action: none;
}
body.mob-ui .ms-head h3{
  flex:1;margin:0;
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.15rem;font-weight:900;color:#fff;letter-spacing:.3px;
}
body.mob-ui .ms-close{
  width:32px;height:32px;flex-shrink:0;
  border:none;border-radius:50%;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.75);
  font-size:1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
body.mob-ui .ms-close:active{ background:rgba(255,255,255,.2) }

body.mob-ui .ms-body{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Contenido reubicado dentro de la hoja ──
   styles.css oculta varios de estos bloques en su @media móvil
   (para la franja fija que ya no usamos). Aquí los restauramos.
   OJO: nunca usar !important sobre `display` en .rp-system /
   .rp-empty — app.js los alterna con style.display inline.      */
body.mob-ui .ms-body .rp-client{
  display:block;
  border:none;padding:0 0 10px;margin:0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.mob-ui .ms-body .rp-nombre{ font-size:1.15rem }
body.mob-ui .ms-body .rp-system{ flex-direction:column;flex-wrap:nowrap;gap:12px }
body.mob-ui .ms-body .rp-main-kpi{ display:grid;grid-template-columns:1fr 1fr;gap:10px }
body.mob-ui .ms-body .rp-divider{ display:block;margin:2px 0 }

/* Estado vacío propio de la hoja (no reubicamos .rp-empty) */
body.mob-ui .ms-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:34px 18px;text-align:center;
  color:rgba(255,255,255,.45);
}
body.mob-ui .ms-empty span{ font-size:2.4rem;opacity:.45 }
body.mob-ui .ms-empty p{ font-size:.84rem;line-height:1.6;max-width:230px }
body.mob-ui .ms-body .rp-kpi{ padding:14px 10px;border-radius:14px }
body.mob-ui .ms-body .rk-val{ font-size:1.75rem }
body.mob-ui .ms-body .rk-lbl{ font-size:.62rem }
body.mob-ui .ms-body .rp-metrics{ display:grid;grid-template-columns:1fr 1fr;gap:8px }
body.mob-ui .ms-body .rp-metric{ padding:11px 12px;border-radius:12px }
body.mob-ui .ms-body .rp-metric .rl{ font-size:.62rem }
body.mob-ui .ms-body .rp-metric .rv{ font-size:1.2rem }
body.mob-ui .ms-body .rp-price{ padding:16px;border-radius:16px }
body.mob-ui .ms-body .rp-price .rp-price-val{ font-size:2.2rem }
body.mob-ui .ms-body .rp-price .rp-price-lbl{ font-size:.68rem }

/* Controles editables — objetivos táctiles grandes */
body.mob-ui .ms-body .rp-controls{ display:flex;flex-direction:column;gap:9px }
body.mob-ui .ms-body .rp-ctrl{
  padding:11px 13px;border-radius:13px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
}
body.mob-ui .ms-body .rp-ctrl .rc-label{ font-size:.82rem }
body.mob-ui .ms-body .rp-ctrl .rc-input input{
  font-size:16px !important;
  width:78px;padding:9px 10px;min-height:42px;
  border-radius:9px;text-align:center;
}
body.mob-ui .ms-body .rp-controls label{ font-size:.85rem !important;padding:6px 2px }
body.mob-ui .ms-body .rp-controls input[type=checkbox]{
  width:20px !important;height:20px !important;
}

/* Botones de acción a tamaño táctil */
body.mob-ui .ms-body .rp-actions{
  display:flex;flex-direction:column;flex-wrap:nowrap;
  margin-top:0;padding-top:0;gap:10px;
}
body.mob-ui .ms-body .rp-btn{
  padding:15px 14px;font-size:.95rem;border-radius:14px;
}
body.mob-ui .ms-body .rp-btn.pres,
body.mob-ui .ms-body .rp-btn.nueva{ font-size:.88rem }
body.mob-ui .ms-body .rp-btn.mat{ font-size:.82rem;padding:12px }
body.mob-ui .ms-body .rp-btn-row2{ display:grid;grid-template-columns:1fr 1fr;gap:10px }
/* styles.css estiliza #gen-btn-nueva por id (gana a .rp-btn.nueva) y lo deja
   claro sobre el fondo oscuro. Se reajusta sólo dentro de la hoja móvil. */
body.mob-ui .ms-body #gen-btn-nueva{
  display:flex;width:auto;margin-top:0;
  background:transparent;
  border:1.5px dashed rgba(255,255,255,.28);
  color:rgba(255,255,255,.6);
}
body.mob-ui .ms-body .rp-btn:hover{ transform:none;filter:none }

/* ══════════ 9. OTRAS PESTAÑAS ══════════ */
body.mob-ui .hist-wrap,
body.mob-ui #tab-mat .card{
  max-width:100%;margin:0;border-radius:14px;padding:14px;
}
body.mob-ui .sec{ padding:13px 14px;font-size:.85rem }
body.mob-ui .sec-body{ padding:14px }
body.mob-ui .sec-body.collapsed{ padding:0 14px }
body.mob-ui .btn-row{ grid-template-columns:1fr 1fr;gap:9px }
body.mob-ui .preview{ padding:14px }

@media(max-width:380px){
  body.mob-ui .g3{ grid-template-columns:1fr }
  body.mob-ui .tab-btn .tab-lbl{ font-size:.5rem }
  body.mob-ui .msum-stat:nth-child(3),
  body.mob-ui .msum-sep{ display:none }
  body.mob-ui #mob-fab{ padding:0 16px }
}