Borrador 01 · Cabezote Mi Comercio
========================================================== */
:root {
--mc-2050-bg: #01040a;
--mc-2050-panel: rgba(4, 17, 31, 0.82);
--mc-2050-panel-strong: rgba(5, 23, 41, 0.94);
--mc-2050-cyan: #29f4ff;
--mc-2050-blue: #138cff;
--mc-2050-violet: #765cff;
--mc-2050-green: #00ff9d;
--mc-2050-red: #ff315d;
--mc-2050-text: #f4fdff;
--mc-2050-muted: #86a9bd;
--mc-2050-line:
linear-gradient(
90deg,
transparent,
rgba(41, 244, 255, 0.88),
rgba(19, 140, 255, 0.92),
rgba(118, 92, 255, 0.82),
transparent
);
}
/* ==========================================================
FONDO GENERAL FUTURISTA
========================================================== */
html {
background: var(--mc-2050-bg);
}
body {
position: relative;
overflow-x: hidden;
background:
radial-gradient(
circle at 12% 6%,
rgba(19, 140, 255, 0.22),
transparent 29%
),
radial-gradient(
circle at 92% 12%,
rgba(41, 244, 255, 0.16),
transparent 28%
),
radial-gradient(
circle at 48% 92%,
rgba(118, 92, 255, 0.12),
transparent 36%
),
linear-gradient(
180deg,
#01040a 0%,
#03101c 48%,
#010711 100%
);
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
background-image:
linear-gradient(
rgba(41, 244, 255, 0.028) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(41, 244, 255, 0.028) 1px,
transparent 1px
);
background-size: 27px 27px;
transform:
perspective(900px)
rotateX(58deg)
scale(1.35)
translateY(25%);
transform-origin: bottom center;
mask-image:
linear-gradient(
to bottom,
transparent 5%,
black 38%,
black 100%
);
animation: mc2050GridMove 16s linear infinite;
}
body::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
repeating-linear-gradient(
to bottom,
transparent 0,
transparent 3px,
rgba(255, 255, 255, 0.012) 4px
);
opacity: 0.44;
}
/* ==========================================================
CONTENEDOR GENERAL
========================================================== */
.mc-shell {
position: relative;
isolation: isolate;
}
.mc-shell::before {
content: "";
position: absolute;
top: 26px;
left: 50%;
z-index: -1;
width: 78%;
height: 200px;
transform: translateX(-50%);
border-radius: 50%;
background:
radial-gradient(
ellipse,
rgba(41, 244, 255, 0.15),
transparent 70%
);
filter: blur(32px);
}
/* ==========================================================
CABEZOTE HOLOGRÁFICO
========================================================== */
.mc-header {
border:
1px solid
rgba(41, 244, 255, 0.66);
border-radius: 28px;
background:
linear-gradient(
145deg,
rgba(8, 27, 47, 0.94),
rgba(2, 10, 20, 0.97)
);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.035),
inset 0 0 38px rgba(19, 140, 255, 0.09),
0 0 0 1px rgba(41, 244, 255, 0.06),
0 14px 45px rgba(0, 0, 0, 0.38),
0 0 28px rgba(41, 244, 255, 0.15);
backdrop-filter:
blur(22px)
saturate(145%);
-webkit-backdrop-filter:
blur(22px)
saturate(145%);
}
.mc-header::before {
opacity: 0.46;
background-image:
linear-gradient(
rgba(41, 244, 255, 0.045) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(41, 244, 255, 0.045) 1px,
transparent 1px
);
background-size: 21px 21px;
animation:
mc2050PanelGrid 14s linear infinite;
}
.mc-header::after {
right: -62px;
top: -83px;
width: 230px;
height: 230px;
background:
radial-gradient(
circle,
rgba(41, 244, 255, 0.28),
rgba(19, 140, 255, 0.08) 45%,
transparent 70%
);
filter: blur(10px);
animation:
mc2050Orb 6s ease-in-out infinite alternate;
}
/* Línea energética superior */
.mc-header > .mc-brand::before {
content: "";
position: absolute;
top: 0;
left: 9%;
width: 82%;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(41, 244, 255, 0.22),
rgba(41, 244, 255, 1),
rgba(118, 92, 255, 0.75),
transparent
);
box-shadow:
0 0 7px rgba(41, 244, 255, 0.9),
0 0 18px rgba(19, 140, 255, 0.38);
animation:
mc2050EnergyLine 4s ease-in-out infinite;
}
/* ==========================================================
MARCA SUPERIOR
========================================================== */
.mc-brand {
position: relative;
color: rgba(194, 226, 239, 0.76);
font-size: 10px;
letter-spacing: 1.75px;
text-shadow:
0 0 8px rgba(41, 244, 255, 0.12);
}
.mc-brand strong {
color: #ffffff;
text-shadow:
0 0 8px rgba(255, 255, 255, 0.28),
0 0 16px rgba(41, 244, 255, 0.21);
}
.mc-dot {
width: 5px;
height: 5px;
background: var(--mc-2050-cyan);
box-shadow:
0 0 6px var(--mc-2050-cyan),
0 0 15px var(--mc-2050-cyan),
0 0 24px rgba(41, 244, 255, 0.7);
animation:
mc2050DotPulse 1.9s ease-in-out infinite;
}
/* ==========================================================
TÍTULO CENTRAL
========================================================== */
.mc-title-zone {
position: relative;
}
.mc-title-zone::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: min(95%, 540px);
height: 92px;
transform:
translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(
ellipse,
rgba(41, 244, 255, 0.08),
transparent 70%
);
filter: blur(12px);
}
.mc-title {
position: relative;
color: #f7feff;
font-weight: 950;
letter-spacing:
clamp(2.8px, 1.2vw, 7px);
text-shadow:
0 0 5px rgba(255, 255, 255, 0.42),
0 0 13px rgba(41, 244, 255, 0.35),
0 0 30px rgba(19, 140, 255, 0.17);
background:
linear-gradient(
180deg,
#ffffff 0%,
#d9fbff 42%,
#88eaff 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.mc-title::after {
content: "CONTROL OPERATIVO";
position: absolute;
inset: 0;
color: transparent;
-webkit-text-stroke:
1px rgba(41, 244, 255, 0.14);
transform: translateY(2px);
filter: blur(1.8px);
pointer-events: none;
}
.mc-title-line {
position: relative;
height: 2px;
background: var(--mc-2050-line);
box-shadow:
0 0 8px rgba(41, 244, 255, 0.82),
0 0 18px rgba(19, 140, 255, 0.36);
}
.mc-title-line::after {
content: "";
position: absolute;
top: -3px;
left: 0;
width: 32px;
height: 8px;
border-radius: 50%;
background:
rgba(255, 255, 255, 0.88);
filter: blur(3px);
box-shadow:
0 0 12px rgba(41, 244, 255, 1);
animation:
mc2050Scanner 3.4s ease-in-out infinite;
}
/* ==========================================================
ESTADO DE CONEXIÓN
========================================================== */
.mc-label {
color: rgba(151, 191, 211, 0.72);
letter-spacing: 1.7px;
}
.mc-status {
position: relative;
overflow: hidden;
min-width: 156px;
min-height: 44px;
border:
1px solid
rgba(0, 255, 157, 0.84);
border-radius: 14px;
background:
linear-gradient(
180deg,
rgba(0, 255, 157, 0.24),
rgba(0, 255, 157, 0.075)
),
rgba(0, 37, 28, 0.83);
color: #eafff6;
box-shadow:
inset 0 0 18px rgba(0, 255, 157, 0.14),
0 0 10px rgba(0, 255, 157, 0.22),
0 0 25px rgba(0, 255, 157, 0.12);
backdrop-filter: blur(12px);
}
.mc-status::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-130%);
background:
linear-gradient(
110deg,
transparent 30%,
rgba(255, 255, 255, 0.16) 50%,
transparent 70%
);
animation:
mc2050StatusSweep 3.8s ease-in-out infinite;
}
.mc-status[data-state="offline"] {
border-color:
rgba(255, 49, 93, 0.88);
background:
linear-gradient(
180deg,
rgba(255, 49, 93, 0.24),
rgba(255, 49, 93, 0.075)
),
rgba(46, 3, 16, 0.88);
box-shadow:
inset 0 0 18px rgba(255, 49, 93, 0.14),
0 0 10px rgba(255, 49, 93, 0.23),
0 0 25px rgba(255, 49, 93, 0.13);
}
.mc-status[data-state="syncing"] {
border-color:
rgba(41, 244, 255, 0.88);
background:
linear-gradient(
180deg,
rgba(41, 244, 255, 0.22),
rgba(19, 140, 255, 0.08)
),
rgba(3, 25, 43, 0.91);
box-shadow:
inset 0 0 18px rgba(41, 244, 255, 0.14),
0 0 12px rgba(41, 244, 255, 0.24);
}
.mc-time {
color: rgba(123, 162, 185, 0.8);
}
/* ==========================================================
CONTROL DESLIZANTE DE SINCRONIZACIÓN
========================================================== */
.mc-sync-caption {
color: rgba(135, 185, 207, 0.75);
letter-spacing: 1.55px;
}
.mc-track {
width: 58px;
height: 82px;
border:
1px solid
rgba(41, 244, 255, 0.58);
border-radius: 18px;
background:
linear-gradient(
180deg,
rgba(41, 244, 255, 0.07),
rgba(19, 140, 255, 0.16)
),
rgba(2, 12, 23, 0.88);
box-shadow:
inset 0 0 18px rgba(19, 140, 255, 0.11),
0 0 12px rgba(41, 244, 255, 0.12),
0 9px 23px rgba(0, 0, 0, 0.33);
backdrop-filter: blur(14px);
}
.mc-track::before {
width: 2px;
background:
linear-gradient(
to top,
rgba(19, 140, 255, 0.08),
rgba(41, 244, 255, 0.92)
);
box-shadow:
0 0 7px rgba(41, 244, 255, 0.75);
}
.mc-track::after {
content: "";
position: absolute;
top: 8px;
left: 50%;
width: 8px;
height: 8px;
transform: translateX(-50%);
border:
1px solid
rgba(41, 244, 255, 0.8);
border-radius: 50%;
background:
rgba(41, 244, 255, 0.28);
box-shadow:
0 0 9px rgba(41, 244, 255, 0.75);
}
.mc-arrow {
width: 44px;
height: 44px;
border:
1px solid
rgba(41, 244, 255, 0.96);
border-radius: 14px;
background:
linear-gradient(
145deg,
rgba(41, 244, 255, 0.25),
rgba(19, 140, 255, 0.15)
),
rgba(5, 25, 42, 0.96);
box-shadow:
inset 0 0 15px rgba(41, 244, 255, 0.15),
0 0 13px rgba(41, 244, 255, 0.27),
0 8px 17px rgba(0, 0, 0, 0.33);
}
.mc-track:hover .mc-arrow {
box-shadow:
inset 0 0 18px rgba(41, 244, 255, 0.23),
0 0 21px rgba(41, 244, 255, 0.42),
0 8px 17px rgba(0, 0, 0, 0.34);
}
/* ==========================================================
PANEL DE ACCESO HOLOGRÁFICO
========================================================== */
.mc-access-panel {
position: relative;
margin-top: 20px;
padding: 21px 18px 12px;
border:
1px solid
rgba(41, 244, 255, 0.46);
border-radius: 26px;
background:
linear-gradient(
145deg,
rgba(7, 25, 43, 0.91),
rgba(2, 10, 20, 0.96)
);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.025),
inset 0 0 34px rgba(19, 140, 255, 0.07),
0 12px 35px rgba(0, 0, 0, 0.32),
0 0 20px rgba(41, 244, 255, 0.1);
backdrop-filter:
blur(20px)
saturate(140%);
-webkit-backdrop-filter:
blur(20px)
saturate(140%);
}
.mc-access-panel::before {
opacity: 0.32;
background-image:
linear-gradient(
rgba(41, 244, 255, 0.04) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(41, 244, 255, 0.04) 1px,
transparent 1px
);
background-size: 22px 22px;
}
.mc-access-panel::after {
content: "";
position: absolute;
top: 0;
left: 8%;
width: 84%;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(41, 244, 255, 0.92),
rgba(118, 92, 255, 0.72),
transparent
);
box-shadow:
0 0 10px rgba(41, 244, 255, 0.6);
}
.mc-access-title {
margin-bottom: 15px;
color: rgba(150, 190, 210, 0.8);
font-size: 9px;
letter-spacing: 2.1px;
}
/* ==========================================================
OPCIONES DEL PANEL
========================================================== */
.mc-access-item {
position: relative;
overflow: hidden;
min-height: 76px;
padding:
0 4px;
border-radius: 14px;
transition:
background 220ms ease,
transform 220ms ease,
box-shadow 220ms ease;
}
.mc-access-item::before {
content: "";
position: absolute;
inset: 7px 0;
border-radius: 13px;
background:
linear-gradient(
90deg,
rgba(41, 244, 255, 0.045),
transparent 70%
);
opacity: 0;
transform:
translateX(-18px);
transition:
opacity 220ms ease,
transform 220ms ease;
}
.mc-access-item:hover::before,
.mc-access-item:focus-visible::before,
.mc-access-item:active::before {
opacity: 1;
transform: translateX(0);
}
.mc-access-item:not(:last-child)::after {
left: 3%;
right: 3%;
background: var(--mc-2050-line);
opacity: 0.68;
box-shadow:
0 0 7px rgba(41, 244, 255, 0.31);
}
.mc-access-item:hover,
.mc-access-item:focus-visible {
transform:
translateX(3px);
}
.mc-access-name {
position: relative;
color: #f4fdff;
font-size: 16px;
font-weight: 900;
letter-spacing: 1.35px;
text-shadow:
0 0 7px rgba(255, 255, 255, 0.11),
0 0 14px rgba(41, 244, 255, 0.11);
transition:
color 200ms ease,
text-shadow 200ms ease,
transform 200ms ease;
}
.mc-access-item:hover .mc-access-name,
.mc-access-item:focus-visible .mc-access-name {
color: #ffffff;
transform:
translateX(4px);
text-shadow:
0 0 8px rgba(255, 255, 255, 0.25),
0 0 18px rgba(41, 244, 255, 0.29);
}
/* ==========================================================
FLECHAS FLOTANTES
========================================================== */
.mc-access-arrow {
position: relative;
width: 42px;
height: 42px;
border:
1px solid
rgba(41, 244, 255, 0.7);
background:
radial-gradient(
circle at 35% 30%,
rgba(255, 255, 255, 0.14),
transparent 34%
),
linear-gradient(
145deg,
rgba(41, 244, 255, 0.2),
rgba(19, 140, 255, 0.12)
),
rgba(3, 20, 34, 0.96);
box-shadow:
inset 0 0 12px rgba(41, 244, 255, 0.11),
0 0 12px rgba(41, 244, 255, 0.17),
0 8px 17px rgba(0, 0, 0, 0.24);
animation:
mc2050ArrowFloat 2.8s ease-in-out infinite;
}
.mc-access-arrow::before {
content: "";
position: absolute;
inset: -4px;
border:
1px solid
rgba(41, 244, 255, 0.08);
border-radius: 50%;
opacity: 0;
transition:
opacity 180ms ease,
transform 180ms ease;
}
.mc-access-item:hover .mc-access-arrow,
.mc-access-item:focus-visible .mc-access-arrow {
transform:
translateX(5px)
scale(1.06);
border-color:
rgba(41, 244, 255, 1);
background:
radial-gradient(
circle at 35% 30%,
rgba(255, 255, 255, 0.19),
transparent 34%
),
linear-gradient(
145deg,
rgba(41, 244, 255, 0.29),
rgba(118, 92, 255, 0.16)
),
rgba(3, 23, 38, 0.98);
box-shadow:
inset 0 0 16px rgba(41, 244, 255, 0.17),
0 0 20px rgba(41, 244, 255, 0.36),
0 9px 21px rgba(0, 0, 0, 0.32);
animation: none;
}
.mc-access-item:hover .mc-access-arrow::before,
.mc-access-item:focus-visible .mc-access-arrow::before {
opacity: 1;
transform: scale(1.08);
}
/* ==========================================================
TEXTO INFORMATIVO INFERIOR
========================================================== */
.mc-note {
color: rgba(103, 143, 166, 0.68);
letter-spacing: 0.25px;
}
/* ==========================================================
ANIMACIONES
========================================================== */
@keyframes mc2050GridMove {
from {
background-position:
0 0,
0 0;
}
to {
background-position:
0 54px,
54px 0;
}
}
@keyframes mc2050PanelGrid {
from {
background-position:
0 0,
0 0;
}
to {
background-position:
42px 42px,
42px 42px;
}
}
@keyframes mc2050Orb {
from {
transform:
scale(0.92)
translate3d(0, 0, 0);
opacity: 0.55;
}
to {
transform:
scale(1.09)
translate3d(-12px, 10px, 0);
opacity: 0.9;
}
}
@keyframes mc2050EnergyLine {
0%,
100% {
opacity: 0.42;
transform: scaleX(0.76);
}
50% {
opacity: 1;
transform: scaleX(1);
}
}
@keyframes mc2050DotPulse {
0%,
100% {
opacity: 0.68;
transform: scale(0.82);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}
@keyframes mc2050Scanner {
0% {
left: 0;
opacity: 0;
}
15% {
opacity: 1;
}
85% {
opacity: 1;
}
100% {
left: calc(100% - 32px);
opacity: 0;
}
}
@keyframes mc2050StatusSweep {
0%,
62% {
transform: translateX(-130%);
}
100% {
transform: translateX(130%);
}
}
@keyframes mc2050ArrowFloat {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(3px);
}
}
/* ==========================================================
AJUSTES PARA TELÉFONO
========================================================== */
@media (max-width: 480px) {
body {
padding:
12px 10px
34px;
}
.mc-header {
min-height: 250px;
padding:
18px 16px
20px;
border-radius: 24px;
}
.mc-brand {
font-size: 9px;
letter-spacing: 1.25px;
}
.mc-title-zone {
min-height: 116px;
}
.mc-title {
font-size:
clamp(
22px,
7.3vw,
31px
);
letter-spacing:
clamp(
2px,
1.25vw,
4px
);
}
.mc-status {
min-width: 139px;
min-height: 42px;
font-size: 11px;
}
.mc-access-panel {
padding:
18px 14px
10px;
border-radius: 23px;
}
.mc-access-item {
min-height: 70px;
}
.mc-access-name {
font-size: 15px;
}
.mc-access-arrow {
width: 39px;
height: 39px;
}
}
/* Respeta usuarios con animaciones reducidas */
@media (prefers-reduced-motion: reduce) {
body::before,
.mc-header::before,
.mc-header::after,
.mc-title-line::after,
.mc-access-arrow,
.mc-status::after {
animation: none !important;
}
}
Borrador visual aislado. No consulta Apps Script, no modifica hojas y no registra Service Worker.