/* ============================================ CSS: theme-nuevo.css — Olemurcia Componente: Tema "nuevo" (estilo gaming / esports moderno) Capa superior sobre los CSS base. Solo aplica cuando el lleva la clase .tema-nuevo. Referencia visual: SquadForce / eSports gaming themes. ============================================ */ body.tema-nuevo{ /* Acentos del tema: cian y verde neón sobre fondo gaming oscuro. */ --acento:#22d3ee; --acento-2:#34d399; --acento-suave:rgba(34,211,238,.14); --acento-borde:rgba(34,211,238,.45); --glow:0 0 18px rgba(34,211,238,.35), 0 0 4px rgba(34,211,238,.5); --glow-verde:0 0 18px rgba(52,211,153,.3), 0 0 4px rgba(52,211,153,.45); /* Sustituir la gama azul/violeta base por la neón del tema. */ --violeta:var(--acento); --cian:var(--acento-2); } /* En modo claro (data-tema-color="claro"): fondo claro con los mismos acentos. */ body.tema-nuevo[data-tema-color="claro"]{ --acento:#0891b2; --acento-2:#059669; --acento-suave:rgba(8,145,178,.10); --acento-borde:rgba(8,145,178,.40); --glow:0 0 14px rgba(8,145,178,.22), 0 0 3px rgba(8,145,178,.35); --glow-verde:0 0 14px rgba(5,150,105,.20), 0 0 3px rgba(5,150,105,.30); --violeta:var(--acento); --cian:var(--acento-2); } /* Paletas de acento neón seleccionables (data-tema-acento). "cian" es la paleta por defecto (definida arriba). */ /* VIOLETA / MAGENTA */ body.tema-nuevo[data-tema-acento="violeta"]{ --acento:#a78bfa; --acento-2:#ec4899; --acento-suave:rgba(167,139,250,.14); --acento-borde:rgba(167,139,250,.45); --glow:0 0 18px rgba(167,139,250,.35), 0 0 4px rgba(167,139,250,.5); --glow-verde:0 0 18px rgba(236,72,153,.3), 0 0 4px rgba(236,72,153,.45); } body.tema-nuevo[data-tema-acento="violeta"][data-tema-color="claro"]{ --acento:#7c3aed; --acento-2:#db2777; --acento-suave:rgba(124,58,237,.10); --acento-borde:rgba(124,58,237,.40); --glow:0 0 14px rgba(124,58,237,.22), 0 0 3px rgba(124,58,237,.35); --glow-verde:0 0 14px rgba(219,39,119,.20), 0 0 3px rgba(219,39,119,.30); } /* NARANJA / ROSA */ body.tema-nuevo[data-tema-acento="naranja"]{ --acento:#fb923c; --acento-2:#f43f5e; --acento-suave:rgba(251,146,60,.14); --acento-borde:rgba(251,146,60,.45); --glow:0 0 18px rgba(251,146,60,.35), 0 0 4px rgba(251,146,60,.5); --glow-verde:0 0 18px rgba(244,63,94,.3), 0 0 4px rgba(244,63,94,.45); } body.tema-nuevo[data-tema-acento="naranja"][data-tema-color="claro"]{ --acento:#ea580c; --acento-2:#e11d48; --acento-suave:rgba(234,88,12,.10); --acento-borde:rgba(234,88,12,.40); --glow:0 0 14px rgba(234,88,12,.22), 0 0 3px rgba(234,88,12,.35); --glow-verde:0 0 14px rgba(225,29,72,.20), 0 0 3px rgba(225,29,72,.30); } /* AZUL / CIAN */ body.tema-nuevo[data-tema-acento="azul"]{ --acento:#3b82f6; --acento-2:#22d3ee; --acento-suave:rgba(59,130,246,.14); --acento-borde:rgba(59,130,246,.45); --glow:0 0 18px rgba(59,130,246,.35), 0 0 4px rgba(59,130,246,.5); --glow-verde:0 0 18px rgba(34,211,238,.3), 0 0 4px rgba(34,211,238,.45); } body.tema-nuevo[data-tema-acento="azul"][data-tema-color="claro"]{ --acento:#2563eb; --acento-2:#0891b2; --acento-suave:rgba(37,99,235,.10); --acento-borde:rgba(37,99,235,.40); --glow:0 0 14px rgba(37,99,235,.22), 0 0 3px rgba(37,99,235,.35); --glow-verde:0 0 14px rgba(8,145,178,.20), 0 0 3px rgba(8,145,178,.30); } /* VERDE / LIMA */ body.tema-nuevo[data-tema-acento="verde"]{ --acento:#4ade80; --acento-2:#a3e635; --acento-suave:rgba(74,222,128,.14); --acento-borde:rgba(74,222,128,.45); --glow:0 0 18px rgba(74,222,128,.35), 0 0 4px rgba(74,222,128,.5); --glow-verde:0 0 18px rgba(163,230,53,.3), 0 0 4px rgba(163,230,53,.45); } body.tema-nuevo[data-tema-acento="verde"][data-tema-color="claro"]{ --acento:#16a34a; --acento-2:#65a30d; --acento-suave:rgba(22,163,74,.10); --acento-borde:rgba(22,163,74,.40); --glow:0 0 14px rgba(22,163,74,.22), 0 0 3px rgba(22,163,74,.35); --glow-verde:0 0 14px rgba(101,163,13,.20), 0 0 3px rgba(101,163,13,.30); } /* ROSA / VIOLETA */ body.tema-nuevo[data-tema-acento="rosa"]{ --acento:#f472b6; --acento-2:#c084fc; --acento-suave:rgba(244,114,182,.14); --acento-borde:rgba(244,114,182,.45); --glow:0 0 18px rgba(244,114,182,.35), 0 0 4px rgba(244,114,182,.5); --glow-verde:0 0 18px rgba(192,132,252,.3), 0 0 4px rgba(192,132,252,.45); } body.tema-nuevo[data-tema-acento="rosa"][data-tema-color="claro"]{ --acento:#db2777; --acento-2:#a21caf; --acento-suave:rgba(219,39,119,.10); --acento-borde:rgba(219,39,119,.40); --glow:0 0 14px rgba(219,39,119,.22), 0 0 3px rgba(219,39,119,.35); --glow-verde:0 0 14px rgba(162,28,175,.20), 0 0 3px rgba(162,28,175,.30); } /* ============================================ F2 — Fondo y patrón ============================================ */ /* Fondo oscuro: retícula geométrica sutil + glow cian tras la cabecera. Sustituye los gradientes violeta/azul de la base. */ body.tema-nuevo .fondo{ background: radial-gradient(900px 420px at 50% -6%, rgba(34,211,238,.16), transparent 70%), radial-gradient(700px 340px at 8% 110%, rgba(52,211,153,.10), transparent 70%), repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 46px), repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 46px), #07090f; } /* Fondo claro: retícula + glow suave, sin el azul base. */ body.tema-nuevo[data-tema-color="claro"] .fondo{ background: radial-gradient(900px 420px at 50% -6%, rgba(8,145,178,.14), transparent 70%), radial-gradient(700px 340px at 8% 110%, rgba(5,150,105,.09), transparent 70%), repeating-linear-gradient(0deg, rgba(20,40,70,.12) 0 1px, transparent 1px 36px), repeating-linear-gradient(90deg, rgba(20,40,70,.12) 0 1px, transparent 1px 36px), #e2e7f0; } /* En claro, el contenedor deja transparentar la retícula: menos blanco que el genérico de theme-claro para que el fondo tenga textura. */ body.tema-nuevo[data-tema-color="claro"] .contenedor, body.tema-nuevo[data-tema-color="claro"] .marco{ background:rgba(255,255,255,.40); } body.tema-nuevo[data-tema-color="claro"] .principal{ background:transparent; } /* ============================================ F3 — Cabecera / Héroe ============================================ */ /* Cabecera con algo más de aire para el hero. */ body.tema-nuevo .cabecera{ position:relative; padding:44px 0 46px; } /* Título gaming: display grande con gradiente cian -> verde neón. */ body.tema-nuevo .cabecera h1{ font-size:44px; font-weight:900; letter-spacing:1px; text-transform:uppercase; background:linear-gradient(100deg, #22d3ee 10%, #67e8f9 40%, #34d399 90%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; filter:drop-shadow(0 0 22px rgba(34,211,238,.22)); } /* Franja decorativa bajo el título: doble línea con rombo/ángulo neón. */ body.tema-nuevo .cabecera::after{ content:""; display:block; width:120px; height:6px; margin:16px auto 0; background:linear-gradient(90deg, var(--acento), var(--acento-2)); clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); box-shadow:var(--glow); } /* Logo: biselado / ángulo y borde neón. */ body.tema-nuevo .logo{ border-radius:0; clip-path:polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); background:linear-gradient(135deg, #0e1626, #122030); border:1px solid var(--acento-borde); box-shadow:var(--glow), inset 0 0 22px rgba(34,211,238,.10); } body.tema-nuevo .logo-imagen{ border-radius:0; clip-path:polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); border:1px solid var(--acento-borde); box-shadow:var(--glow); } /* Banner con corte angular en las esquinas. */ body.tema-nuevo .banner{ clip-path:polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px); box-shadow:var(--glow); } body.tema-nuevo .cabecera p, body.tema-nuevo .subtitulo{ color:var(--difuso); letter-spacing:.4px; } /* ============================================ F4 — Sidebar / Navegación ============================================ */ /* Sidebar: borde derecho con acento neón. */ body.tema-nuevo .sidebar{ background:rgba(4,7,12,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } body.tema-nuevo .sidebar::before{ content:""; display:block; position:absolute; top:0; right:-1px; width:2px; height:100%; background:linear-gradient(180deg, var(--acento), var(--acento-2)); opacity:.5; } /* Items de nav: bordes rectos (bordes afilados), sin radio redondeado. */ body.tema-nuevo .nav-sidebar a{ position:relative; border-radius:0; border:1px solid var(--borde); background:rgba(255,255,255,.04); clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition:color .18s, background .18s, border-color .18s; } /* Línea de acento cian a la izquierda en hover. */ body.tema-nuevo .nav-sidebar a::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; background:linear-gradient(180deg, var(--acento), var(--acento-2)); opacity:0; transition:opacity .18s; } body.tema-nuevo .nav-sidebar a:hover{ border-color:var(--acento-borde); background:rgba(34,211,238,.07); transform:translateX(2px); } body.tema-nuevo .nav-sidebar a:hover::before{ opacity:1; } /* Item activo: glow cian y borde acento. */ body.tema-nuevo .nav-sidebar a.activo{ border-color:var(--acento-borde); background:rgba(34,211,238,.12); color:var(--acento); box-shadow:var(--glow); } body.tema-nuevo .nav-sidebar a.activo::before{ opacity:1; } /* ============================================ F5 — Tarjetas / Paneles (recurso, accion, galeria, whitelist, servidor) ============================================ */ /* Títulos de sección estilo "scoreboard": mayúsculas + barra angular. */ body.tema-nuevo .seccion h2{ font-size:17px; font-weight:800; text-transform:uppercase; letter-spacing:1.2px; padding-left:0; border-left:none; margin-bottom:16px; display:inline-flex; align-items:center; gap:10px; color:var(--texto); } body.tema-nuevo .seccion h2::before{ content:""; width:22px; height:22px; background:linear-gradient(135deg, var(--acento), var(--acento-2)); clip-path:polygon(0 0, 100% 0, 100% 22px, 22px 100%, 0 100%); box-shadow:var(--glow); flex:none; } /* Paneles principales: corte angular sutil + glow en hover. */ body.tema-nuevo .recurso-tarjeta, body.tema-nuevo .accion, body.tema-nuevo .galeria-item, body.tema-nuevo .servidor, body.tema-nuevo .login-tarjeta, body.tema-nuevo .whitelist-card, body.tema-nuevo .recurso-modal-caja{ border-radius:0; border-color:var(--borde); clip-path:polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); transition:transform .2s, border-color .2s, box-shadow .2s; } body.tema-nuevo .recurso-tarjeta:hover, body.tema-nuevo .accion:hover{ border-color:var(--acento-borde); box-shadow:var(--glow), 0 10px 30px rgba(0,0,0,.35); transform:translateY(-2px); } /* Iconos de tarjeta con bisel neón. */ body.tema-nuevo .recurso-tarjeta-icono, body.tema-nuevo .accion-icono{ border-radius:0; clip-path:polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); background:rgba(34,211,238,.08); border:1px solid var(--acento-borde); } /* Galería: borde de acento sutil al hover. */ body.tema-nuevo .galeria-item:hover{ border-color:var(--acento-borde); box-shadow:var(--glow); } /* Login y whitelist: refuerzo del panel gaming. */ body.tema-nuevo .login-tarjeta, body.tema-nuevo .whitelist-card{ background:rgba(4,7,12,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:var(--glow); } body.tema-nuevo[data-tema-color="claro"] .login-tarjeta, body.tema-nuevo[data-tema-color="claro"] .whitelist-card{ background:rgba(255,255,255,.86); } /* ============================================ F6 — Botones ============================================ */ /* Botones generales: borde afilado + acento. */ body.tema-nuevo .btn{ border-radius:0; border:1px solid var(--acento-borde); background:rgba(34,211,238,.06); color:var(--acento); font-weight:600; letter-spacing:.3px; clip-path:polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); transition:background .18s, box-shadow .18s, color .18s; } body.tema-nuevo .btn:hover:not(:disabled){ background:rgba(34,211,238,.14); color:#a5f3fc; box-shadow:var(--glow); border-color:var(--acento-borde); } /* Botón principal: gradiente cian -> verde. */ body.tema-nuevo .btn.principal{ border:none; background:linear-gradient(135deg, var(--acento), var(--acento-2)); color:#04121a; font-weight:800; letter-spacing:.5px; } body.tema-nuevo .btn.principal:hover:not(:disabled){ background:linear-gradient(135deg, #67e8f9, #6ee7b7); color:#04121a; box-shadow:var(--glow); } /* Botón rojo: mantiene el rojo pero con el lenguaje afilado. */ body.tema-nuevo .btn.rojo{ background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.4); color:#ffb4b4; } body.tema-nuevo .btn.rojo:hover:not(:disabled){ background:rgba(239,68,68,.18); box-shadow:0 0 14px rgba(239,68,68,.4); } /* Botón hamburguesa del sidebar. */ body.tema-nuevo .btn-hamburguesa{ border-radius:0; border:1px solid var(--acento-borde); background:rgba(4,7,12,.72); color:var(--acento); clip-path:polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); } /* ============================================ F7 — Pulido y responsive ============================================ */ /* Contenedor: bordes laterales con acento neón tenue. */ body.tema-nuevo .contenedor{ border-left:1px solid rgba(34,211,238,.14); border-right:1px solid rgba(34,211,238,.14); } /* Scrollbar de la zona principal con acento. */ body.tema-nuevo .principal::-webkit-scrollbar{ width:8px; } body.tema-nuevo .principal::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, var(--acento), var(--acento-2)); border-radius:8px; } body.tema-nuevo .principal::-webkit-scrollbar-track{ background:transparent; } /* Pie de página con línea de acento. */ body.tema-nuevo .pie{ border-top:2px solid var(--acento-borde); color:var(--difuso); letter-spacing:.4px; } /* En móvil: héroe más compacto para que encaje en pantallas pequeñas. */ @media(max-width:860px){ body.tema-nuevo .cabecera h1{ font-size:30px; letter-spacing:.5px; } body.tema-nuevo .cabecera{ padding:30px 0 32px; } body.tema-nuevo .logo, body.tema-nuevo .logo-imagen{ width:56px; height:56px; } /* El clip-path de las tarjetas no debe cortar contenido en móvil (las tarjetas de galería usan imágenes de borde a borde). */ body.tema-nuevo .galeria-item{ clip-path:none; border-radius:0; } } /* ============================================ F8 — Topbar (barra superior) en desktop ============================================ */ @media(min-width:861px){ /* El sidebar lateral se convierte en una barra superior horizontal fija. */ body.tema-nuevo .sidebar{ position:fixed; top:0; left:0; right:0; width:100%; height:64px; min-height:64px; max-height:64px; flex-direction:row; align-items:center; justify-content:center; gap:4px; padding:0 16px; transform:none; transition:none; overflow:visible; z-index:90; background:rgba(4,7,12,.88); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-right:none; border-top:none; border-bottom:1px solid var(--acento-borde); box-shadow:0 0 22px rgba(34,211,238,.15); display:flex; } /* En modo claro la barra superior pasa a claro translúcido para que los iconos oscuros contrasten sobre el fondo claro del tema. */ body.tema-nuevo[data-tema-color="claro"] .sidebar{ background:rgba(255,255,255,.78); border-bottom:1px solid var(--acento-borde); box-shadow:0 0 22px rgba(8,145,178,.12); } /* Quitar la línea lateral decorativa de la barra superior. */ body.tema-nuevo .sidebar::before{ display:none; } /* Acento de marca en el borde inferior de la topbar. */ body.tema-nuevo .sidebar::after{ content:""; position:absolute; left:0; bottom:-1px; width:120px; height:2px; background:linear-gradient(90deg, var(--acento), var(--acento-2)); box-shadow:var(--glow); } /* Nav horizontal, empujado al margen derecho de la topbar. */ body.tema-nuevo .nav-sidebar{ flex-direction:row; gap:2px; align-items:center; justify-content:flex-end; flex:1; min-width:0; } /* Cada enlace pasa a ser una casilla de icono monocromático. */ body.tema-nuevo .nav-sidebar a{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:52px; height:56px; padding:0; margin:0; border:none; background:transparent; border-radius:0; clip-path:none; gap:0; transition:background .18s, color .18s; } body.tema-nuevo .nav-sidebar a::before{ position:absolute; left:50%; top:auto; bottom:4px; width:26px; height:2px; margin-left:-13px; background:linear-gradient(90deg, var(--acento), var(--acento-2)); border-radius:2px; } body.tema-nuevo .nav-sidebar a:hover{ background:rgba(34,211,238,.08); transform:none; } body.tema-nuevo .nav-sidebar a.activo{ background:rgba(34,211,238,.12); color:var(--acento); box-shadow:none; border:none; box-shadow:inset 0 -2px 0 0 var(--acento); } /* Icono monocromático (emoji sin color, con textura). */ body.tema-nuevo .nav-sidebar a .nav-icono{ font-size:22px; line-height:1; filter:grayscale(1) brightness(1.4) contrast(1.05); opacity:.92; } body.tema-nuevo .nav-sidebar a:hover .nav-icono, body.tema-nuevo .nav-sidebar a.activo .nav-icono{ filter:grayscale(1) brightness(1.4) contrast(1.05) drop-shadow(0 0 6px rgba(34,211,238,.6)); opacity:1; } /* En modo claro los iconos pasan a silueta oscura para contrastar sobre el fondo claro (antes eran casi blancos e invisibles). */ body.tema-nuevo[data-tema-color="claro"] .nav-sidebar a .nav-icono{ filter:grayscale(1) brightness(.45) contrast(1.2); opacity:.85; } body.tema-nuevo[data-tema-color="claro"] .nav-sidebar a:hover .nav-icono, body.tema-nuevo[data-tema-color="claro"] .nav-sidebar a.activo .nav-icono{ filter:grayscale(1) brightness(.35) contrast(1.25) drop-shadow(0 0 5px rgba(8,145,178,.6)); opacity:1; } /* Texto oculto dentro de la barra; solo icono. */ body.tema-nuevo .nav-sidebar a .nav-texto, body.tema-nuevo .nav-sidebar a .nav-dato{ display:none; } /* Tooltip con el nombre al pasar el ratón. */ body.tema-nuevo .nav-sidebar a:hover .nav-texto{ display:block; position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); background:rgba(4,7,12,.95); border:1px solid var(--acento-borde); color:var(--acento); font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; padding:4px 10px; white-space:nowrap; clip-path:polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px); box-shadow:var(--glow); z-index:99; } body.tema-nuevo .nav-sidebar a:hover .nav-texto .nav-titulo{ font-weight:600; font-size:11px; } /* Sesión: refuerzo del icono monocromático. El texto (nombre/Login) se oculta en la barra con la regla general y aparece como tooltip al hover, igual que el resto de botones. */ body.tema-nuevo .nav-sidebar a[data-seccion="sesion"] .nav-icono{ filter:grayscale(1) brightness(1.4) contrast(1.05) !important; opacity:.92; } body.tema-nuevo[data-tema-color="claro"] .nav-sidebar a[data-seccion="sesion"] .nav-icono{ filter:grayscale(1) brightness(.45) contrast(1.2) !important; opacity:.85; } /* Banner dentro de la topbar (solo tema nuevo): a la izquierda. La topbar tiene alto fijo; la caja ocupa el '% de ancho' que el admin fija desde el panel (relativo a la barra) y la imagen se encuadra dentro (object-fit:contain) para no desbordar la barra. */ body.tema-nuevo .sidebar .banner-caja{ height:100%; min-width:0; display:flex; align-items:center; justify-content:flex-start; padding:0 12px 0 8px; overflow:hidden; flex:none; } body.tema-nuevo .sidebar .banner-topbar{ height:100%; max-height:100%; width:100%; max-width:none; margin:0; flex:none; min-width:0; display:block; object-fit:contain; } /* En el tema nuevo la cabecera (logo + título) desaparece para que el cuerpo suba directo al top bajo la barra. */ body.tema-nuevo .cabecera{ display:none; } body.tema-nuevo .subtitulo{ display:none; } /* Contenido empieza bajo la topbar (56px). El contenedor vuelve al flujo normal (scroll de página), no fijado a 100vh. */ body.tema-nuevo .contenedor{ padding-top:64px; height:auto; min-height:100vh; overflow:visible; } /* El marco se ajusta: ya no hace falta el alto del sidebar lateral. */ body.tema-nuevo .marco{ height:auto; overflow:visible; } body.tema-nuevo .principal{ padding:0 22px; overflow:visible; } /* Ocultar la barra superior de móvil (ya no aplica en desktop del tema). */ body.tema-nuevo .barra, body.tema-nuevo .btn-hamburguesa{ display:none; } body.tema-nuevo .cortina{ display:none; } }