/* =========================
   CSSMios/ParaTodosLosPaneles.css
   Base para TODOS los paneles (full screen + scroll interno)
   ========================= */

/* Base tipográfica — 1rem = 16px en todo el proyecto */
html { font-size: 16px; }
body { font-size: 1rem; }

:root {
    --topbar-h: calc(60px + env(safe-area-inset-top, 0px));
    --bg: #0b0b0b;

    /* Variables de tema — sobreescritas por Panel3.js al cambiar tema */
    --ce-bg:        #f0fdf4;
    --ce-surface:   #ffffff;
    --ce-border:    rgba(22,163,74,.2);
    --ce-text:      #052e16;
    --ce-muted:     rgba(5,46,22,.55);
    --ce-accent:      #22c55e;
    --ce-accent2:     #16a34a;
    --ce-accent-rgb:  34,197,94;
    --ce-font-size: 0.9375rem;
    --ce-transition: all .18s ease;
}

*, *::before, *::after {
    box-sizing: border-box;
    /* Desactivar resaltado táctil en móvil */
    -webkit-tap-highlight-color: transparent;
}

html {
    /* Prevenir zoom por doble tap / pinch en iOS */
    touch-action: manipulation;
    /* Prevenir selección de texto accidental */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body {
    margin: 0;
    background: var(--ce-bg, #020617);
    overflow: hidden;
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    font-size: var(--ce-font-size, 1rem);
    color: var(--ce-text, #e2e8f0);
    transition: background .3s ease, color .3s ease;
    /* Prevenir bounce/overscroll en iOS */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    /* Quitar cursor de texto en elementos no editables */
    user-select: none;
    -webkit-user-select: none;
}

/* Permitir selección en inputs y textareas */
input, textarea, [contenteditable] {
    user-select: text;
    -webkit-user-select: text;
}

/* En modo standalone (instalada como PWA) */
@media all and (display-mode: standalone) {
    /* Asegurar que ocupa toda la pantalla */
    html, body {
        height: 100%;
        height: 100dvh;
    }
}



.appBody {
    position: absolute;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    height: calc(100dvh - var(--topbar-h));
    height: calc(100dvh - var(--topbar-h));
    overflow: hidden;
}

/* Host de paneles */
#panelHost {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Cada panel ocupa toda la pantalla disponible y scrollea por dentro */
.cePanel {
    position: absolute;
    inset: 0;
    display: block;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    overscroll-behavior: contain;
}

/* Ocultar panel */
.ceHidden {
    display: none !important;
}

/* Sin animaciones si el usuario lo desactivó */
.no-animations .cePanel,
.no-animations .cePanel.is-entering {
    transition: none !important;
    transform: none !important;
}

/* Solo para que puedas ver contenido en demo */
.ceTitle {
    color: #fff;
    font-weight: 900;
    font-size: clamp(1.625rem,4vw,3.5rem);
    margin: 0 0 14px 0;
    text-shadow: 0 12px 34px rgba(0,0,0,.35);
}

.ceCard {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 6px 4px;
    color: rgba(255,255,255,.92);
    margin: 0 0 8px 0;
}


/* Padding por panel */
#MiInventario, #BajoMiMarca, #MiPagina, #PanelForo {
    padding: 8px 6px;
}
#Chat { padding: 0; }

/* Eliminar margen inferior — el contenido llega hasta el borde */
.cePanel, #Panel1, #MiInventario, #BajoMiMarca, #MiPagina, #Chat, #PanelForo, #Panel3 {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}