/* ============================================================ personajes-mobile.css v3 — reescritura completa Añadir DESPUÉS de personajes.css en ============================================================ */ /* ════════════════════════════════════════════════════════════ NAV ════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { .nav { height: auto; flex-wrap: wrap; padding: 6px 12px; gap: 4px; } .nav-left { flex: 1 1 100%; justify-content: space-between; gap: 6px; } .nav-right { flex: 1 1 100%; justify-content: flex-end; gap: 8px; } .tab-btn { padding: 5px 10px; font-size: 0.78em; } .nav-back { font-size: 0.68em; } .btn-cambiar { font-size: 0.68em; padding: 4px 10px; } } /* ════════════════════════════════════════════════════════════ CATÁLOGO DE PERSONAJES ════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { .page { padding: 10px; } .page-toolbar { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 10px; } .filtros { flex-wrap: wrap; gap: 4px; } .filtro-btn { font-size: 0.72em; padding: 4px 10px; } .input-search { max-width: 100%; min-width: 0; font-size: 0.82em; } .pj-grid { grid-template-columns: 1fr; gap: 8px; } /* Ocultar fondo de partículas/grid en cards del catálogo */ .pjc-detail.open { max-height: 320px; } } @media (min-width: 701px) and (max-width: 1024px) { .pj-grid { grid-template-columns: repeat(2, 1fr); } } /* ════════════════════════════════════════════════════════════ PANEL PJ — columna única full-screen en móvil ════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { /* ── col-stats: ocupa TODO la pantalla — es el panel principal ── */ #ppj-col-stats { position: fixed !important; inset: 0 !important; width: 100vw !important; min-width: 0 !important; height: 100dvh !important; border-left: none !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; z-index: 1200 !important; } /* ── col-main: SIEMPRE oculto en móvil — el contenido HEX se mueve a ppj-body via JS ── */ #ppj-col-main { display: none !important; } /* ── Overlay ── */ #panel-pj-overlay { z-index: 1198 !important; } /* ── Header compacto ── */ .ppj-header { padding: 10px 14px 8px !important; min-height: 52px !important; flex-shrink: 0 !important; } .ppj-avatar { width: 36px !important; height: 36px !important; } .ppj-nombre { font-size: 0.86em !important; } .ppj-tag { font-size: 0.58em !important; padding: 1px 6px !important; } /* ── Tabs principales touch-friendly ── */ .ppj-tabs { flex-shrink: 0 !important; } .ppj-tab { font-size: 0.58em !important; padding: 10px 2px 9px !important; letter-spacing: 0.2px !important; } /* ── Sub-tabs móvil (Vitalidad/HEX, Mapa/Grimorio, etc.) ── */ #mob-subtabs { display: flex; flex-shrink: 0; background: #050510; border-bottom: 1px solid rgba(255,255,255,0.05); } .mob-subtab { flex: 1; background: none; border: none; border-bottom: 2px solid transparent; color: #4a4a68; font-size: 0.62em; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; padding: 9px 4px 8px; cursor: pointer; font-family: 'Inter', system-ui, sans-serif; transition: color 0.15s, border-color 0.15s; } .mob-subtab.active { color: #d4af37; border-bottom-color: #d4af37; } /* ── Body scroll ── */ .ppj-body { flex: 1 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 24px !important; } .ppj-body::-webkit-scrollbar { width: 2px !important; } /* ── Secciones con menos padding ── */ .ppj-section { padding: 10px 14px !important; } .ppj-vida-block { margin-bottom: 9px !important; } .ppj-afin-block { padding: 8px 10px !important; margin-bottom: 5px !important; } /* ── HEX hero compacto ── */ .htab-hero { padding: 22px 16px 18px !important; } .htab-hex-amount { font-size: 2.8em !important; } .htab-hex-rule { margin: 10px auto 16px !important; } .htab-btn-grid { grid-template-columns: repeat(4,1fr) !important; gap: 4px !important; max-width: 100% !important; } .htab-btn { font-size: 0.66em !important; padding: 7px 2px !important; } .htab-vex-root { padding: 16px 14px 12px !important; } .htab-vex-number { font-size: 2.2em !important; } .htab-energia-root { padding: 12px 14px !important; } /* ── Rellenos de energía ── */ /* el bloque de push es flex-row, queda bien en móvil */ /* ── HEX push cards en columna ── */ /* se renderizan con inline style grid-template-columns:1fr 1fr 1fr los sobreescribimos forzando columna única */ .htab-hpush-outer, div.htab-hpush-outer { display: flex !important; flex-direction: column !important; gap: 8px !important; } /* ── Objetos/Misiones: paneles izquierdos ocultos ── */ #ppj-obj-panel-izq { display: none !important; } #ppj-mis-panel-izq { display: none !important; } #panel-pj-root.obj-mode { width: 100vw !important; min-width: 0 !important; } /* ── Mapa hechizos: oculto ── */ #panel-mapa-hechizos, [id^="pmh-panel"], .pmh-root { display: none !important; } /* ── Formulario ── */ .form-wrap { padding: 12px !important; } .form-grid { grid-template-columns: 1fr !important; gap: 8px !important; } .afin-grid { grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; } .toggle-row { flex-wrap: wrap !important; gap: 10px !important; } /* ── Toast y sync encima de teclado ── */ .toast { left: 12px !important; right: 12px !important; bottom: 16px !important; width: auto !important; max-width: none !important; text-align: center !important; z-index: 9999 !important; } .btn-sync { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; bottom: 60px !important; font-size: 0.76em !important; padding: 8px 16px !important; } }