/* ========================================================================== Chavac_Promotion - hoja de estilos Estetica "neon nocturno" sacada del logo: negro con tinte rojizo, coral neon (#d67479) y letras negras sobre coral. El modo oscuro es el de siempre; el claro (html[data-theme=light]) solo cambia las variables de color, asi que todo lo demas se escribe una sola vez. El modo lo guarda js/theme.js en una cookie y App.razor lo pone en desde el servidor. Pensada primero para el celular; a partir de 900px se reacomoda para pantalla grande con una columna lateral. ========================================================================== */ :root { color-scheme: dark; /* Fondo y superficies: negro con un poco de rojo, nunca gris neutro. */ --bg: #0a0607; --bg-2: #120a0c; --surface-solid: #160d10; --surface-2: rgba(0, 0, 0, 0.38); --border: rgba(214, 116, 121, 0.13); /* Fondo de los campos de texto; --field-solid es el mismo tono sin transparencia, para tapar el color del autocompletado de Chrome. */ --field: rgba(214, 116, 121, 0.08); --field-focus: rgba(214, 116, 121, 0.12); --field-solid: #231315; --border-strong: rgba(214, 116, 121, 0.34); --text: #f7eced; --muted: #a8939a; --faint: #6b555b; /* El coral del logo y sus variantes. */ --neon: #d67479; --neon-hot: #ff7d86; --neon-deep: #8f2c3a; --neon-glow: rgba(214, 116, 121, 0.55); --ink: #140608; /* texto sobre coral: el negro de las letras del logo */ /* Texto de una opcion de lista con el mouse encima (sobre coral). */ --option-hover-text: var(--ink); --ok: #62e0a8; --ok-bg: rgba(98, 224, 168, 0.1); --danger: #ff5f6d; --danger-bg: rgba(255, 95, 109, 0.1); --danger-text: #ffb3ba; /* Fondos y sombras de piezas grandes (barras, tarjetas, resplandores). */ --glow-a: rgba(214, 116, 121, 0.22); --glow-b: rgba(143, 44, 58, 0.28); --grain: 0.07; --topbar-bg: linear-gradient(180deg, rgba(10, 6, 7, 0.92), rgba(10, 6, 7, 0.7)); --tabbar-bg: rgba(18, 10, 12, 0.82); --tabbar-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.9), 0 0 30px -10px rgba(214, 116, 121, 0.35); --sidebar-bg: linear-gradient(180deg, rgba(20, 11, 14, 0.85), rgba(10, 6, 7, 0.85)); --card-bg: linear-gradient(180deg, rgba(34, 19, 23, 0.72), rgba(18, 10, 13, 0.72)); --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 24px 48px -28px rgba(0, 0, 0, 0.9); --stat-bg: linear-gradient(160deg, rgba(34, 19, 23, 0.8), rgba(16, 9, 11, 0.8)); --btn-bg: linear-gradient(135deg, var(--neon-hot), var(--neon) 45%, #b34a57); --error-ui-bg: #2a0f14; --radius: 18px; --radius-sm: 12px; --gap: 16px; --tabbar-h: 64px; --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* Modo claro: papel blanco con un toque rosado, el mismo coral un poco mas profundo para que se lea sobre blanco y los resplandores mas suaves. */ :root[data-theme="light"] { color-scheme: light; --bg: #f8f1f1; --bg-2: #fffafa; --surface-solid: #ffffff; --surface-2: rgba(143, 44, 58, 0.05); --border: rgba(143, 44, 58, 0.14); --border-strong: rgba(143, 44, 58, 0.3); --field: #f6eced; --field-focus: #ffffff; --field-solid: #f6eced; --text: #1f1014; --muted: #6f5a61; --faint: #a08a91; --neon: #bf4a56; --neon-hot: #c9505d; --neon-deep: #8f2c3a; --neon-glow: rgba(214, 116, 121, 0.35); /* El coral del modo claro es mas oscuro: encima se lee mejor el blanco. */ --option-hover-text: #ffffff; --ok: #13875a; --ok-bg: rgba(19, 135, 90, 0.1); --danger: #c9303f; --danger-bg: rgba(201, 48, 63, 0.08); --danger-text: #a4202e; --glow-a: rgba(214, 116, 121, 0.18); --glow-b: rgba(214, 116, 121, 0.12); --grain: 0.035; --topbar-bg: linear-gradient(180deg, rgba(248, 241, 241, 0.94), rgba(248, 241, 241, 0.78)); --tabbar-bg: rgba(255, 255, 255, 0.86); --tabbar-shadow: 0 14px 34px -14px rgba(90, 30, 40, 0.35), 0 0 24px -12px rgba(214, 116, 121, 0.4); --sidebar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(252, 245, 245, 0.9)); --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 250, 250, 0.88)); --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 22px 44px -30px rgba(90, 30, 40, 0.45); --stat-bg: linear-gradient(160deg, #ffffff, #fbf4f4); /* El boton se queda con el coral del logo: es la marca en los dos modos. */ --btn-bg: linear-gradient(135deg, #ff7d86, #d67479 45%, #b34a57); --error-ui-bg: #fff0f1; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Barra de scroll en coral sobre el fondo del tema. Se hereda, asi que tambien la llevan las listas abiertas y los campos de texto largos. */ scrollbar-color: var(--neon) var(--bg); } /* Safari todavia no entiende scrollbar-color: ahi va por el camino viejo. */ @supports not (scrollbar-color: red blue) { ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--neon); border: 2px solid var(--bg); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--neon-hot); } } body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; /* Evita el rebote al hacer scroll en iOS dentro de la app instalada. */ overscroll-behavior-y: none; } /* Resplandores fijos: arriba a la derecha como la cabeza del dragon, abajo a la izquierda como la cola. Van en una capa aparte porque background-attachment fixed falla en iOS. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(60vmax 45vmax at 105% -10%, var(--glow-a), transparent 60%), radial-gradient(55vmax 40vmax at -15% 110%, var(--glow-b), transparent 60%), radial-gradient(80vmax 60vmax at 50% 50%, var(--bg-2), var(--bg) 70%); } /* Grano fino, como el moteado dentro de las letras del logo. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } ::selection { background: var(--neon); color: var(--ink); } /* Blazor enfoca el h1 al navegar (lectores de pantalla); sin esto sale un recuadro blanco alrededor del titulo. */ h1:focus, [tabindex="-1"]:focus { outline: none; } h1, h2, h3 { margin: 0; font-weight: 800; } h1 { font-size: 1.5rem; } h2 { font-family: var(--font-display); font-size: 1.55rem; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.05; margin-bottom: 12px; } p { margin: 0 0 12px; } a { color: var(--neon-hot); } strong { font-weight: 700; } .muted { color: var(--muted); font-size: 0.93rem; } .eyebrow { margin: 0 0 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--neon); } .display { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 11vw, 4rem); line-height: 0.92; letter-spacing: 0.01em; text-transform: uppercase; margin-bottom: 10px; } .neon-text { color: var(--neon); text-shadow: 0 0 12px var(--neon-glow), 0 0 32px rgba(214, 116, 121, 0.25); } /* ------------------------------------------------------------------ armazon */ .shell { min-height: 100dvh; } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); background: var(--topbar-bg); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--border); } .topbar-brand { display: block; line-height: 0; } .topbar-brand img, .tabbar-brand img { width: auto; filter: drop-shadow(0 0 10px rgba(214, 116, 121, 0.35)); transition: filter 0.3s var(--ease); } .topbar-brand img { height: 42px; } .topbar-brand:hover img, .tabbar-brand:hover img { filter: drop-shadow(0 0 16px rgba(214, 116, 121, 0.6)); } .topbar-end { display: flex; align-items: center; gap: 10px; } .user-chip { display: none; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 0.82rem; color: var(--muted); } .user-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); } @media (min-width: 560px) { .user-chip { display: inline-flex; } } .topbar-action { margin: 0; } .content { width: 100%; max-width: 1080px; margin: 0 auto; padding: 22px var(--gap); /* Espacio para que la barra flotante no tape el ultimo boton. */ padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 40px); animation: rise 0.5s var(--ease) both; } .content--plain { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 24px var(--gap); padding-top: calc(24px + env(safe-area-inset-top)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------- navegacion */ /* En el celular: barra flotante abajo, separada de las orillas. */ .tabbar { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30; background: var(--tabbar-bg); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--border-strong); border-radius: 22px; box-shadow: var(--tabbar-shadow); } .tabbar-brand, .tabbar-foot { display: none; } .tabbar-links { display: flex; } .tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--tabbar-h); color: var(--muted); text-decoration: none; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.25s var(--ease); /* Quita el destello azul al tocar en Android. */ -webkit-tap-highlight-color: transparent; } .tab svg { position: relative; z-index: 1; width: 23px; height: 23px; fill: currentColor; transition: transform 0.3s var(--ease), filter 0.3s var(--ease); } .tab span { position: relative; z-index: 1; } .tab.active { color: var(--neon); } .tab.active svg { transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 0 8px var(--neon-glow)); } /* Resplandor detras de la pestana activa. */ .tab::before { content: ""; position: absolute; top: 7px; left: 50%; width: 54px; height: 32px; border-radius: 999px; background: rgba(214, 116, 121, 0.14); transform: translateX(-50%) scale(0.6); opacity: 0; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .tab.active::before { opacity: 1; transform: translateX(-50%) scale(1); } /* --------------------------------------------------------------- tarjetas */ .card { position: relative; background: var(--card-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: var(--gap); box-shadow: var(--card-shadow); } /* Borde con degradado neon: brilla en dos esquinas opuestas. */ .card--glow { border-color: transparent; } .card--glow::before { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: linear-gradient(135deg, rgba(255, 125, 134, 0.75), rgba(214, 116, 121, 0.08) 35%, rgba(214, 116, 121, 0.08) 65%, rgba(143, 44, 58, 0.7)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } /* Dragon de neon: un cuerpo de luz que le da la vuelta a la tarjeta con la cabeza al frente. La mueve js/neon-dragon.js; aqui solo va como se ve; el color de cada capa del trazo lo pone el script. */ /* Un borde tenue fijo para que la tarjeta se vea completa mientras el dragon da la vuelta. */ .card--neon { border-color: var(--border); } .neon-dragon { --dragon-radius: calc(var(--radius) + 0.5px); position: absolute; inset: -2px; pointer-events: none; z-index: 2; } .neon-dragon-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px rgba(255, 125, 134, 0.95)) drop-shadow(0 0 10px rgba(214, 116, 121, 0.8)) drop-shadow(0 0 22px rgba(214, 116, 121, 0.45)); } .neon-dragon-ring rect { fill: none; stroke-width: 3px; /* Puntas cuadradas: redondas, donde termina una capa encima de otra queda un puntito mas claro. */ stroke-linecap: butt; } .neon-dragon-head { position: absolute; top: 0; left: 0; width: auto; height: 56px; transform-origin: 0 0; filter: drop-shadow(0 0 6px var(--neon-glow)); /* Hasta que el script la coloca no se muestra, para que no aparezca en la esquina. */ opacity: 0; transition: opacity 0.4s var(--ease); } .neon-dragon.is-live .neon-dragon-head { opacity: 1; } .card-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .card-head h2 { margin-bottom: 0; } .hero { margin: 4px 0 22px; } .hero .muted { max-width: 46ch; } .split { display: grid; gap: var(--gap); align-items: start; } .split > .card { margin-bottom: 0; } .split > .card--span { grid-column: 1 / -1; } /* --------------------------------------------------------- tarjetas de dato */ .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: var(--gap); } .stat { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 108px; padding: 16px; background: var(--stat-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); } .stat::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(214, 116, 121, 0.18), transparent 70%); pointer-events: none; } .stat:hover { border-color: var(--border-strong); transform: translateY(-2px); } .stat-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .stat-value { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1rem; } .stat-value--big { font-family: var(--font-display); font-weight: 800; font-size: 2.5rem; line-height: 1; letter-spacing: 0.01em; } .stat-value--small { font-size: 0.86rem; font-weight: 600; color: var(--text); } .stat-value--bad { color: var(--danger); } .stat--alert { border-color: rgba(255, 95, 109, 0.35); } .stat--alert .stat-value { color: var(--danger); text-shadow: 0 0 18px rgba(255, 95, 109, 0.5); } .live-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); } .live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ok); animation: ping 1.8s var(--ease) infinite; } .live-dot--bad { background: var(--danger); box-shadow: 0 0 10px var(--danger); } .live-dot--bad::after { border-color: var(--danger); } @keyframes ping { from { transform: scale(1); opacity: 0.8; } to { transform: scale(2.6); opacity: 0; } } /* ------------------------------------------------------------ barra de progreso */ .progress-label { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--neon); text-shadow: 0 0 14px var(--neon-glow); } .progress { height: 8px; margin-bottom: 20px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; } .progress span { position: relative; display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--neon-deep), var(--neon) 60%, var(--neon-hot)); box-shadow: 0 0 14px var(--neon-glow); overflow: hidden; } .progress span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: translateX(-100%); animation: shimmer 2.6s ease-in-out infinite; } @keyframes shimmer { to { transform: translateX(100%); } } /* ------------------------------------------------------------ formularios */ label { display: block; margin-bottom: 7px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=date], input[type=time], input[type=datetime-local], input[type=number], textarea, select { width: 100%; padding: 11px 14px; /* Un poco mas claro que la tarjeta para que el campo se distinga. */ background: var(--field); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); /* 16px evita que el navegador del celular haga zoom al enfocar el campo. */ font-size: 16px; font-family: inherit; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease); } input:hover, textarea:hover, select:hover { border-color: var(--border-strong); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--neon); background: var(--field-focus); box-shadow: 0 0 0 3px rgba(214, 116, 121, 0.18), 0 0 24px -6px var(--neon-glow); } /* Autocompletado de Chrome: sin esto pinta el campo de amarillo/blanco. */ input:-webkit-autofill { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 100px var(--field-solid) inset; caret-color: var(--text); } input.invalid { border-color: rgba(255, 95, 109, 0.6); } /* ------------------------------------------------------ listas (select) */ /* Base para cualquier navegador: la lista abierta con fondo solido del tema. Sin esto hereda el fondo semitransparente del campo y en oscuro no se ve. */ select option { background-color: var(--surface-solid); color: var(--text); } /* Chrome y Edge (135 en adelante) dejan dibujar la lista completa: fondo del tema, esquinas redondas y coral al pasar el mouse en vez del azul del sistema. Los demas navegadores se quedan con la base de arriba. */ @supports (appearance: base-select) { select, ::picker(select) { appearance: base-select; } select { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; } select::picker-icon { color: var(--muted); transition: rotate 0.25s var(--ease), color 0.2s var(--ease); } select:open::picker-icon { rotate: 180deg; color: var(--neon); } ::picker(select) { margin-top: 6px; padding: 6px; max-height: min(60vh, 380px); overflow-y: auto; background: var(--surface-solid); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: 0 22px 44px -16px rgba(0, 0, 0, 0.55), 0 0 26px -12px var(--neon-glow); } select option { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; background: transparent; color: var(--text); font-size: 0.95rem; cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); } /* La opcion elegida, en coral; el palomita del navegador sobra. */ select option:checked { color: var(--neon); font-weight: 700; } select option::checkmark { display: none; } select option:hover, select option:focus-visible { outline: none; background: var(--neon); color: var(--option-hover-text); } select option:disabled { color: var(--faint); cursor: default; } select option:disabled:hover { background: transparent; color: var(--faint); } } .validation-message { margin-top: 6px; font-size: 0.82rem; color: var(--danger); } .field + .field { margin-top: 16px; } .field--submit { margin-top: 22px !important; } .btn, button.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 20px; background: var(--btn-bg); color: var(--ink); border: none; border-radius: var(--radius-sm); font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 30px -12px var(--neon-glow); transition: transform 0.15s var(--ease), box-shadow 0.3s var(--ease), filter 0.3s var(--ease); -webkit-tap-highlight-color: transparent; } .btn:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 34px -4px var(--neon-glow); } .btn:active { transform: translateY(1px) scale(0.99); } .btn:focus-visible { outline: 2px solid var(--neon-hot); outline-offset: 3px; } .btn:disabled { opacity: 0.55; cursor: default; } .btn-ghost { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; background: transparent; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 999px; font-size: 0.82rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .btn-ghost svg { width: 16px; height: 16px; fill: currentColor; } .btn-ghost:hover { color: var(--neon); border-color: var(--neon); box-shadow: 0 0 18px -4px var(--neon-glow); } /* ------------------------------------------------------ modo claro / oscuro */ .theme-toggle { display: inline-grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; padding: 0; background: transparent; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 50%; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.3s var(--ease); -webkit-tap-highlight-color: transparent; } .theme-toggle svg { width: 18px; height: 18px; fill: currentColor; } .theme-toggle:hover { color: var(--neon); border-color: var(--neon); box-shadow: 0 0 18px -4px var(--neon-glow); } .theme-toggle:active { transform: rotate(-25deg) scale(0.94); } .theme-toggle:focus-visible { outline: 2px solid var(--neon-hot); outline-offset: 3px; } /* El icono dice a que modo te cambias: sol en oscuro, luna en claro. */ .theme-toggle-moon { display: none; } :root[data-theme="light"] .theme-toggle-sun { display: none; } :root[data-theme="light"] .theme-toggle-moon { display: block; } /* En el login, en la esquina de arriba a la derecha de la ventana, con la misma separacion de la orilla que tiene el boton dentro de la app. */ .theme-toggle--corner { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 16px; z-index: 40; background: var(--tabbar-bg); } /* ------------------------------------------------------------------ login */ .login { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; /* Todo el bloque un poco por encima del centro de la pantalla. */ margin-top: -4vh; } .login-logo { width: min(100%, 380px); height: auto; /* Se "enciende" como un letrero de neon y luego respira. */ animation: neon-on 1.6s steps(1, end) both, neon-breathe 4s ease-in-out 1.6s infinite; } @keyframes neon-on { 0% { opacity: 0.1; filter: drop-shadow(0 0 0 transparent); } 10% { opacity: 1; filter: drop-shadow(0 0 22px rgba(214, 116, 121, 0.7)); } 14% { opacity: 0.2; filter: drop-shadow(0 0 0 transparent); } 22% { opacity: 1; filter: drop-shadow(0 0 22px rgba(214, 116, 121, 0.7)); } 26% { opacity: 0.35; filter: drop-shadow(0 0 4px rgba(214, 116, 121, 0.3)); } 40%, 100% { opacity: 1; filter: drop-shadow(0 0 22px rgba(214, 116, 121, 0.55)); } } @keyframes neon-breathe { 0%, 100% { filter: drop-shadow(0 0 18px rgba(214, 116, 121, 0.45)); } 50% { filter: drop-shadow(0 0 34px rgba(214, 116, 121, 0.75)); } } /* Debajo del logo, entre dos lineas de neon: dice para que es la app. */ .login-tagline { display: flex; align-items: center; gap: 12px; margin: 12px 0 52px; font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase; color: var(--neon); text-shadow: 0 0 12px var(--neon-glow); animation: rise 0.7s var(--ease) 1.2s both; } .login-tagline::before, .login-tagline::after { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--neon)); box-shadow: 0 0 8px var(--neon-glow); } /* El letter-spacing deja aire tras la ultima letra; el margen negativo lo compensa para que las dos lineas queden a la misma distancia del texto. */ .login-tagline::after { margin-left: -0.42em; background: linear-gradient(90deg, var(--neon), transparent); } .login-card { width: 100%; padding: 26px 22px; animation: rise 0.7s var(--ease) 0.35s both; } .login-title { font-family: var(--font-display); font-weight: 900; font-size: 2.4rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 20px; } /* ---------------------------------------------------------------- avisos */ .alert { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 0.92rem; margin-bottom: 16px; border: 1px solid transparent; } .alert--error { background: var(--danger-bg); color: var(--danger-text); border-color: rgba(255, 95, 109, 0.35); } .alert--ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(98, 224, 168, 0.3); } .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .pill--ok { background: var(--ok-bg); color: var(--ok); } .pill--fail { background: var(--danger-bg); color: var(--danger); } .pill--live { background: rgba(214, 116, 121, 0.14); color: var(--neon-hot); box-shadow: inset 0 0 0 1px rgba(214, 116, 121, 0.4); } /* ---------------------------------------------------- registro de accesos */ .audit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .audit-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .audit-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); } .audit-item--fail { border-color: rgba(255, 95, 109, 0.2); } .audit-item--fail .audit-dot { background: var(--danger); box-shadow: 0 0 8px var(--danger); } .audit-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .audit-when { font-size: 0.88rem; font-weight: 600; } .audit-ip { font-size: 0.76rem; color: var(--muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } code { padding: 2px 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; font-size: 0.85em; } /* ------------------------------------------------ musica, perfil y medios */ /* Pestanas que solo caben en la columna de escritorio. */ .tab--wide { display: none; } .hint { margin: 6px 0 0; font-size: 0.8rem; color: var(--muted); } .hint--cost { color: var(--neon); font-weight: 600; } /* Aviso debajo del boton que lo provoco: en el celular, arriba ya no se ve. */ .alert--below { margin: 14px 0 0; } /* Dos campos lado a lado (fecha e idioma, por ejemplo). */ .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .field-row .field + .field { margin-top: 0; } .field-row + .field, .field + .field-row { margin-top: 16px; } /* Encabezado de seccion dentro de una tarjeta larga. */ .section-title { margin: 26px 0 12px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--neon); } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; } .actions .btn { flex: 1 1 200px; width: auto; } .btn-ghost--danger { color: var(--danger); border-color: rgba(255, 95, 109, 0.45); } .btn-ghost--danger:hover { color: var(--danger); border-color: var(--danger); box-shadow: 0 0 18px -4px rgba(255, 95, 109, 0.6); } .back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--muted); font-size: 0.82rem; font-weight: 700; text-decoration: none; } .back:hover { color: var(--neon); } /* En escritorio la columna de la izquierda ya lleva a todos lados. */ @media (min-width: 900px) { .back--mobile { display: none; } } /* Filas que se tocan para abrir algo: EPs, canciones. */ .rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .row-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); -webkit-tap-highlight-color: transparent; } .row-link:hover { border-color: var(--border-strong); transform: translateY(-1px); } .row-link--next { border-color: var(--neon); box-shadow: 0 0 22px -10px var(--neon-glow); } .row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .row-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-meta { font-size: 0.78rem; color: var(--muted); } .row-num { flex: 0 0 auto; width: 30px; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; text-align: center; color: var(--neon); } /* Portada chiquita; si no hay, un cuadro con una nota musical. */ .cover { flex: 0 0 auto; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 10px; background: var(--surface-solid); border: 1px solid var(--border); overflow: hidden; color: var(--faint); } .cover img { width: 100%; height: 100%; object-fit: cover; } .cover svg { width: 22px; height: 22px; fill: currentColor; } .cover--big { width: 120px; height: 120px; border-radius: var(--radius-sm); } /* Subir archivos: el input real va escondido detras de un boton grande. */ .upload { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--field); text-align: center; cursor: pointer; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); /* Es un label: se quitan las mayusculas chiquitas de los labels de campo. */ margin: 0; font-size: 1rem; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--text); } .upload:hover, .upload:focus-within { border-color: var(--neon); box-shadow: 0 0 26px -10px var(--neon-glow); } .upload svg { width: 30px; height: 30px; fill: var(--neon); } .upload strong { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.08em; text-transform: uppercase; } .upload span { font-size: 0.8rem; color: var(--muted); } .upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .upload--busy { opacity: 0.6; pointer-events: none; } /* Portada actual a la izquierda y el boton de subir a la derecha. */ .cover-pick { display: flex; align-items: center; gap: 14px; } .cover-pick .upload { flex: 1; } .hint + .media-grid { margin-top: 8px; } .media-grid--spaced, .muted--spaced { margin-top: 16px; } .card--spaced { margin-top: var(--gap); } .actions--top { margin: 0 0 16px; } /* Texto de un post tal como saldria: respeta saltos de linea y emojis. */ .post-text { margin: 0; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); white-space: pre-wrap; font-size: 0.92rem; } .preview + .hint { margin-bottom: 4px; } /* Un boton que se ve como liga (volver, por ejemplo). */ .btn-reset { padding: 0; background: none; border: 0; font-family: inherit; cursor: pointer; } /* Cuadricula de la biblioteca: 3 por fila en el celular. */ .media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .tile { position: relative; aspect-ratio: 1; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-solid); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; } .tile img, .tile video { width: 100%; height: 100%; object-fit: cover; display: block; } .tile--selected { border-color: var(--neon); box-shadow: 0 0 0 2px var(--neon), 0 0 20px -4px var(--neon-glow); } .tile-badge { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .tile-badge--warn { left: auto; right: 6px; background: rgba(143, 44, 58, 0.9); } .preview { width: 100%; max-height: 60vh; object-fit: contain; border-radius: var(--radius-sm); background: #000; display: block; } .url-box { display: block; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; font-size: 0.75rem; word-break: break-all; color: var(--muted); } /* -------------------------------------------------------------- calendario */ /* Casillas: un renglon entero que se toca, con el coral del tema. */ .check { display: flex; align-items: center; gap: 12px; margin: 0; padding: 11px 13px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); /* Es un label: se quitan las mayusculas chiquitas de los labels de campo. */ font-size: 0.95rem; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--text); cursor: pointer; transition: border-color 0.2s var(--ease); -webkit-tap-highlight-color: transparent; } .check:has(input:checked) { border-color: var(--border-strong); } .check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--neon); cursor: pointer; } .check span { display: flex; flex-direction: column; min-width: 0; } .check small { font-weight: 400; font-size: 0.78rem; color: var(--muted); } .check--big { padding: 15px 14px; font-size: 1.05rem; } .check-list { display: flex; flex-direction: column; gap: 8px; } .check-list + .field, .field + .check-list { margin-top: 16px; } /* Un dia de la semana: la casilla y su hora en el mismo renglon. */ .day-row { display: flex; align-items: center; gap: 10px; } .day-row .check { flex: 1; min-width: 0; } .day-row input[type=time] { flex: 0 0 auto; width: 128px; } .day-row input[type=time]:disabled { opacity: 0.4; } /* El mes: siete columnas, empezando en lunes. */ .month-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; } .month-head h2 { margin: 0; text-transform: capitalize; } .month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .month-dow { padding-bottom: 4px; text-align: center; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .day { display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 54px; padding: 7px 2px 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); -webkit-tap-highlight-color: transparent; } .day:hover { border-color: var(--border-strong); } .day--past { opacity: 0.55; } .day--today { border-color: var(--neon); } /* Hoy: el numero dentro de un circulo coral, para que no se confunda con los puntos. */ .day-num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; } .day--today .day-num { background: var(--neon); color: var(--option-hover-text); box-shadow: 0 0 10px -2px var(--neon-glow); } .day--selected { border-color: var(--neon); box-shadow: 0 0 0 2px var(--neon), 0 0 18px -4px var(--neon-glow); opacity: 1; } /* Un punto por post, del color de su estado. */ .dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 7px; } .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); } .dot--pending { background: var(--neon); box-shadow: 0 0 6px var(--neon-glow); } .dot--approved { background: var(--text); } .dot--publishing { background: var(--neon-hot); } .dot--published { background: var(--ok); } .dot--failed, .dot--missed { background: var(--danger); } .dot--discarded { background: var(--faint); opacity: 0.6; } /* Espacio de la estrategia que aun no tiene post. */ .dot--free { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); } .legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: 0.75rem; color: var(--muted); } .legend span { display: inline-flex; align-items: center; gap: 6px; } /* Estados que no son ni bien ni mal. */ .pill--plan { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); } .pill--muted { background: var(--surface-2); color: var(--faint); } /* Espacio libre en la agenda: se ve, pero no se abre. */ .row-link--free { border-style: dashed; color: var(--muted); cursor: default; } .row-link--free:hover { border-color: var(--border); transform: none; } .row-link--free .cover { background: transparent; border-style: dashed; color: var(--neon); } .post-text + .section-title, .preview + .actions { margin-top: 18px; } video.preview { max-height: 60vh; } /* ---------------------------------------------------------------- registro */ /* Boton de pestana elegido (Actividad / Publicaciones). */ .btn-ghost--on { color: var(--neon); border-color: var(--neon); box-shadow: 0 0 16px -6px var(--neon-glow); } .audit--spaced { margin-top: 16px; } /* El mensaje completo, en varios renglones si hace falta. */ .audit-text { font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; } /* Las lineas con detalle se abren al tocarlas. */ .audit-item--open { cursor: pointer; } .audit-item--open:hover { border-color: var(--border-strong); } .audit-item { align-items: flex-start; } .audit-item .audit-dot { margin-top: 6px; } /* Aviso de que la linea se abre, para que en el celular se note. */ .audit-more { display: block; margin-top: 4px; font-size: 0.72rem; font-weight: 600; color: var(--neon); } /* El detalle de una publicacion: etiqueta y valor, uno debajo del otro. */ .log-detail--pub { display: block; font-family: inherit; font-size: 0.78rem; } .log-label { display: block; margin-top: 8px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .log-label:first-child { margin-top: 0; } .log-block { display: block; white-space: pre-wrap; overflow-wrap: anywhere; } a.log-block { color: var(--neon); } .log-detail { margin: 8px 0 0; padding: 10px 12px; max-height: 320px; overflow: auto; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 8px; font-size: 0.7rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); } /* --------------------------------------------------------- pantallas medias */ @media (min-width: 700px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .media-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .card { padding: 24px; } .login-card { padding: 30px 28px; } .login-logo { width: min(100%, 440px); } .login-tagline { font-size: 1.15rem; } /* En el celular los campos y el boton van mas bajitos; aqui recuperan su tamano. */ input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=date], input[type=time], input[type=datetime-local], input[type=number], textarea, select { padding: 14px 15px; } .btn, button.btn { padding: 14px 20px; font-size: 1.3rem; } } /* ------------------------------------------------- pantalla de escritorio */ @media (min-width: 900px) { .shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: auto 1fr; } .topbar { grid-column: 2; grid-row: 1; justify-content: flex-end; padding: 14px 32px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; } /* Misma separacion que la barra de arriba de la app en escritorio. */ .theme-toggle--corner { top: calc(14px + env(safe-area-inset-top)); right: 32px; } /* En escritorio el logo vive en la columna lateral. */ .topbar-brand { display: none; } .tabbar { position: sticky; top: 0; left: auto; right: auto; bottom: auto; grid-column: 1; grid-row: 1 / span 2; align-self: start; display: flex; flex-direction: column; height: 100dvh; padding: 26px 16px 20px; border: none; border-right: 1px solid var(--border); border-radius: 0; background: var(--sidebar-bg); box-shadow: none; } .tabbar-brand { display: block; line-height: 0; padding: 0 8px 26px; margin-bottom: 14px; border-bottom: 1px solid var(--border); } .tabbar-brand img { width: 100%; height: auto; } .tabbar-links { flex-direction: column; gap: 4px; } .tab--wide { display: flex; } .tab { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 14px; height: auto; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 0.8rem; letter-spacing: 0.12em; } .tab:hover { color: var(--text); background: rgba(214, 116, 121, 0.06); } .tab::before { top: 50%; left: 0; width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--neon); box-shadow: 0 0 12px var(--neon); transform: translateY(-50%) scaleY(0.3); } .tab.active { background: linear-gradient(90deg, rgba(214, 116, 121, 0.16), rgba(214, 116, 121, 0.02)); } .tab.active::before { transform: translateY(-50%) scaleY(1); } .tab.active svg { transform: none; } .tabbar-foot { display: block; margin: auto 0 0; padding: 0 16px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); } .content { grid-column: 2; grid-row: 2; margin: 0 auto; padding: 8px 32px 40px; } .display { font-size: 4.4rem; } } @media (min-width: 1100px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* ------------------------------------------------ para quien pide sin movimiento */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ----------------------------------------------- aviso de error de Blazor */ #blazor-error-ui { display: none; position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 22px); z-index: 1000; padding: 14px 18px; background: var(--error-ui-bg); color: var(--danger-text); border: 1px solid var(--danger); border-radius: var(--radius-sm); box-shadow: 0 0 30px -8px rgba(255, 95, 109, 0.6); font-size: 0.9rem; } #blazor-error-ui .dismiss { float: right; cursor: pointer; } #blazor-error-ui .reload { color: var(--neon-hot); font-weight: 700; } @media (min-width: 900px) { #blazor-error-ui { left: auto; right: 24px; bottom: 24px; max-width: 420px; } } /* ------------------------------------------------------------ estadisticas */ /* Graficas sencillas: una sola serie en coral, lineas guia muy tenues y los numeros en tinta normal. Las barras son HTML (esquinas redondas sin deformarse); la linea es SVG que se estira sin engrosar el trazo. */ .chart { margin-top: 6px; } .chart-plot { position: relative; height: 140px; } .chart-grid { position: absolute; inset: 14px 0 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; } .chart-grid span { border-top: 1px solid var(--border); } .chart-ymax { position: absolute; top: 0; left: 0; font-size: 0.7rem; color: var(--muted); line-height: 1; } .chart-bars { position: absolute; inset: 14px 0 0; display: flex; align-items: flex-end; gap: 2px; } .chart-col { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; cursor: default; } .chart-bar { width: 100%; min-height: 2px; background: var(--neon); border-radius: 4px 4px 0 0; transition: background 0.15s var(--ease); } .chart-bar--none { background: var(--border); } .chart-col:hover .chart-bar { background: var(--neon-hot); } .chart-line { position: absolute; inset: 14px 0 0; width: 100%; height: calc(100% - 14px); overflow: visible; } .chart-line polyline { fill: none; stroke: var(--neon); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .chart-hits { position: absolute; inset: 0; display: flex; } .chart-hits span { flex: 1 1 0; } .chart-hits span:hover { background: var(--field); } .chart-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.7rem; color: var(--muted); } .chart-empty { padding: 26px 0; text-align: center; font-size: 0.85rem; color: var(--muted); } /* Barras horizontales para paises e idiomas: nombre, barra y numero. */ .hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .hbar { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 0.85rem; } .hbar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .hbar-track { height: 10px; background: var(--surface-2); border-radius: 0 4px 4px 0; overflow: hidden; } .hbar-fill { display: block; height: 100%; background: var(--neon); border-radius: 0 4px 4px 0; } .hbar-value { font-variant-numeric: tabular-nums; color: var(--muted); } .stat-delta { font-size: 0.78rem; font-weight: 600; color: var(--muted); } .stat-delta--up { color: var(--ok); } .stat-delta--down { color: var(--danger-text); } /* Numeros de una publicacion, en una fila que se acomoda sola. */ .nums { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; } .nums strong { color: var(--text); } .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; } .table th { text-align: left; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 0 8px 8px 0; } .table td { padding: 8px 8px 8px 0; border-top: 1px solid var(--border); } .table td.num, .table th.num { text-align: right; } .split--spaced { margin-top: var(--gap); } /* Lista corta de puntos (lo que funciono, recomendaciones). */ .bullets { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--text); font-size: 0.92rem; } .bullets li::marker { color: var(--neon); } .hbars + .section-title { margin-top: 20px; } /* Un comentario: quien, que tipo, el texto y lo que se puede hacer. */ .comment { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .comment-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .comment .field { margin-top: 4px; } .comment .actions { margin-top: 0; } .dot--planned { background: transparent; box-shadow: inset 0 0 0 1.5px var(--neon); } /* Vista previa de una historia: vertical, del alto de una pantalla de celular. */ .story-preview { display: block; width: min(100%, 300px); aspect-ratio: 9 / 16; margin: 6px auto 0; border-radius: var(--radius-sm); border: 1px solid var(--border); object-fit: cover; } /* ------------------------------------------------ menu por pasos */ /* El punto coral de lo que depende de ti. En el celular va sobre el icono. */ .tab-you { position: absolute; top: 9px; left: calc(50% + 9px); z-index: 2; width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 6px var(--neon-glow); } /* Los titulos de cada paso solo caben en la columna de escritorio. */ .tab-group { display: none; } @media (min-width: 900px) { /* Con 15 opciones y los titulos, en pantallas bajitas la columna se desplaza. */ .tabbar-links { overflow-y: auto; min-height: 0; flex: 1 1 auto; gap: 2px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .tabbar-links .tab { padding-top: 7px; padding-bottom: 7px; } .tab-group { display: block; margin: 10px 16px 2px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); } .tab-you { position: static; flex: 0 0 auto; margin-left: auto; } /* Laptops de pantalla bajita: el logo y los renglones se achican para que quepa todo sin desplazar. */ @media (max-height: 900px) { .tabbar { padding-top: 16px; } .tabbar-brand { padding: 0 30px 12px; margin-bottom: 4px; } .tabbar-links .tab { padding-top: 5px; padding-bottom: 5px; } .tab-group { margin-top: 8px; } } @media (max-height: 790px) { .tabbar-links .tab { padding-top: 3px; padding-bottom: 3px; } .tab-group { margin-top: 5px; } .tabbar-foot { margin-top: 8px; } } .tabbar-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; } .tab-you--legend { margin-left: 0; } } /* ------------------------------------------------ tu parte */ /* Lo que te toca mover a ti dentro de una pagina: el mismo coral del punto del menu, para que se vea de un vistazo entre tanto texto. */ .you-box { margin-top: 18px; padding: 16px; border: 1px solid var(--border-strong); border-left: 3px solid var(--neon); border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--glow-a), transparent 75%); } .card--you { border-color: var(--border-strong); border-left: 3px solid var(--neon); background: linear-gradient(90deg, var(--glow-a), transparent 60%), var(--card-bg); } .you-label { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--neon); } .you-label::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 6px var(--neon-glow); } .you-box .field:first-of-type, .card--you .field:first-of-type { margin-top: 0; } .card-head .you-label { margin-bottom: 0; align-self: center; } /* Lo que es solo de consulta, plegado para que no estorbe. */ .more { margin-top: 12px; } .more > summary { cursor: pointer; width: fit-content; font-size: 0.85rem; font-weight: 600; color: var(--muted); } .more > summary:hover { color: var(--text); } .more[open] > summary { margin-bottom: 8px; } /* ------------------------------------------------ privacidad */ /* Pagina publica de texto largo: columna comoda de leer, con o sin sesion. */ .legal { width: 100%; max-width: 760px; margin: 0 auto; } /* La liga discreta a Privacidad debajo del login. */ .login-foot { margin-top: 18px; font-size: 0.8rem; color: var(--faint); text-decoration: none; } .login-foot:hover { color: var(--neon); } .legal .card h2 { margin-bottom: 10px; } .legal .card p:last-child { margin-bottom: 0; } .legal .bullets + p { margin-top: 12px; } /* ------------------------------------------------ cargando */ /* Aviso entre paginas (Components/LoadingOverlay.razor, js/loading.js): un aro de neon coral que gira dentro de un recuadro borroso al centro; la pagina de atras se sigue viendo. La capa transparente de pantalla completa solo esta para que no se den clics mientras carga. Arriba de todo, incluso del aviso de conexion perdida de Blazor. */ .page-loading { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease, visibility 0s linear 0.15s; } .page-loading.is-on { opacity: 1; visibility: visible; pointer-events: auto; cursor: progress; transition: opacity 0.15s ease, visibility 0s; } .page-loading-box { display: grid; justify-items: center; gap: 14px; padding: 24px 28px 18px; border-radius: 20px; border: 1px solid var(--border-strong); background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6), 0 0 30px -14px var(--neon-glow); } .page-loading-ring { position: relative; width: 76px; height: 76px; margin-top: 8px; border-radius: 50%; /* La pista tenue sobre la que corre el arco. */ box-shadow: inset 0 0 0 3px var(--border-strong); } /* El arco: un degradado conico recortado a un aro de 3px, que se enciende hacia la punta como un tubo de neon. */ .page-loading-arc { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, var(--neon-deep) 90deg, var(--neon) 220deg, var(--neon-hot) 300deg, transparent 301deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); filter: drop-shadow(0 0 6px var(--neon-glow)) drop-shadow(0 0 14px var(--neon-glow)); } /* Lo que gira: el arco y la cabeza juntos, asi nunca se desfasan. */ .page-loading-spin { position: absolute; inset: 0; animation: page-loading-spin 1.4s linear infinite; } /* La cabeza va en la punta del arco (300 grados, donde el coral es mas encendido). El brazo gira hasta ahi; dentro, la cabeza queda arriba al centro mirando a la derecha, que es hacia donde avanza el giro. El punto de apoyo es el cuello (10% del ancho, 52% del alto), el mismo del login. */ .page-loading-arm { position: absolute; inset: 0; transform: rotate(300deg); } .page-loading-head { --head-h: 40px; position: absolute; left: calc(50% - var(--head-h) * 137 / 180 * 0.1); top: calc(1.5px - var(--head-h) * 0.52); width: auto; height: var(--head-h); filter: drop-shadow(0 0 5px var(--neon-glow)); } /* El punto del centro late, como el punto coral de "Te toca a ti". */ .page-loading-core { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--neon-hot); box-shadow: 0 0 10px var(--neon-glow), 0 0 22px var(--neon-glow); animation: page-loading-pulse 1.2s ease-in-out infinite; } .page-loading-text { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--neon); text-shadow: 0 0 12px var(--neon-glow); } @keyframes page-loading-spin { to { transform: rotate(360deg); } } @keyframes page-loading-pulse { 0%, 100% { transform: scale(0.7); opacity: 0.6; } 50% { transform: scale(1); opacity: 1; } } /* Con movimiento reducido el aro sigue girando (es la senal de que algo pasa), pero mas lento y sin latido. */ @media (prefers-reduced-motion: reduce) { .page-loading-spin { animation-duration: 2.5s; } .page-loading-core { animation: none; } }