:root{ /* Palette */ --bg: #0f1720; /* page background (very dark) */ --azul-oscuro: #002e3b; /* default dark-blue used by panels */ /* General background gradient used across the dashboard Use the exact stops as `register.html` so the visual match is identical */ /* Gradient with user-specified stops: green (left), turquoise (center), dark-blue (right) Use a linear gradient (left → right) per user request. */ /* Linear gradient matching the original radial stops but rendered as a diagonal (top-left → bottom-right) linear gradient. */ --background-general: linear-gradient( to bottom right, #59ff5c 0%, #59ff5c 4%, var(--turquesa-medio, #39cdcc) 18%, var(--azul-oscuro, #002e3b) 100% ); --panel: var(--azul-oscuro); /* restore panel to use solid azul-oscuro (used by other tokens) */ --panel-light: #4c5a71; --calendar-bg: #1a5b72; --accent: #04AA6D; --text: #ffffff; --muted: #c6ced8; --radius: 10px; } /* Calendar card: slightly lighter than panel background for better contrast */ body.bg-background-general .calendar-card, body.mi-degradado-radial .calendar-card{ background: var(--calendar-bg); color: var(--text); } /* Monthly summary: match calendar card background so the panel feels consistent */ body.bg-background-general .resumen-mes, body.mi-degradado-radial .resumen-mes, body.bg-background-general #monthlySummary, body.mi-degradado-radial #monthlySummary{ background: var(--calendar-bg); color: var(--text); border-radius: 8px; padding: 12px; } /* Utility class: apply the centralized background gradient without affecting other layout or sizing rules. Use this on or any full-bleed element that should show the site background. */ .bg-background-general{ background: var(--background-general); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center top; } /* Gradient variables and helper class for index background */ :root{ /* Soften the initial green and prefer a circular radial blend */ --color-inicio: #c8f7d0; /* Much subtler green */ --color-medio: #39cdcc; /* Turquoise central */ --color-fin: #002e3b; /* Dark blue */ } /* Dashboard / Panel color tokens (centralized) */ :root{ --color-bg-menus: var(--azul-oscuro); --color-text-menus: var(--text); --color-fons-clar: var(--azul-oscuro); --color-titols: var(--text); --color-border-clar: rgba(4,170,109,0.12); --color-border-active: rgba(255,255,255,0.14); } .mi-degradado{ width:100%; height:100vh; /* Radial, more circular blend with reduced green presence */ background: radial-gradient( circle at 15% 18%, var(--color-inicio) 0%, rgba(196,247,208,0.35) 8%, var(--color-medio) 30%, rgba(3,46,59,0.9) 100% ); } /* Alternative: mi-degradado-radial — the version you asked to test */ .mi-degradado-radial{ /* keep a minimal fallback for non-pseudo support */ min-height:100vh; } body.mi-degradado-radial{ position: relative; min-height: 100vh; display: flex; flex-direction: column; background: transparent; /* ensure pseudo ::before gradient is visible and not covered by body background */ } /* Define shared color tokens here so pages using the radial background use the same panel color as the register modal (and other components). */ body.mi-degradado-radial{ --turquesa-medio: #39cdcc; --azul-oscuro: #002e3b; } /* Background layer placed behind all content so modals remain above it */ body.mi-degradado-radial::before{ content: ""; position: fixed; inset: 0; z-index: -1000; background: var(--background-general); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center top; } /* Section color variants to avoid identical blocks */ :root{ --section-a: rgba(255,255,255,0.026); --section-b: rgba(255,255,255,0.015); --section-c: rgba(255,255,255,0.04); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: var(--background-general); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.6; font-size:16px; } .container{ max-width:1160px; margin:36px auto; padding:20px; } /* When using the utility gradient on body, make the main page container use the same panel background color as the tabs/panels so visual components match across pages. Only change the background color here. */ body.bg-background-general .container{ background: var(--color-fons-clar); border-radius: 10px; border: 1px solid var(--color-border-active); /* keep existing padding and layout from .container; only visual frame changed */ } /* Make the general container use the same panel color that sections used */ body.mi-degradado-radial .container{ background: var(--azul-oscuro, var(--panel)); } /* Rounded corners and shadow to match register modal visual style */ body.mi-degradado-radial .container{ border-radius: 12px; box-shadow: 0 12px 30px rgba(2,6,23,0.45); padding: 24px; } /* Header inside the panel: add spacing to separate it from the form content */ body.mi-degradado-radial .container .page-header{ margin-bottom: 20px; display: flex; align-items: center; gap: 18px; } /* Logo sizing */ body.mi-degradado-radial .container .page-header .header-logo{ width:180px; height:auto; flex:0 0 auto; max-width:100%; display:block; object-fit:contain; border-radius:8px; } /* Text block: stack title and lead */ body.mi-degradado-radial .container .page-header .page-header-text{ display:flex; flex-direction:column; } body.mi-degradado-radial .container .page-header .page-header-text h1{ margin:0 0 6px 0; line-height:1.05; } body.mi-degradado-radial .container .page-header .page-header-text .lead{ margin:0; color:var(--muted); } /* Responsive: stack logo above text on narrow screens */ @media (max-width:640px){ body.mi-degradado-radial .container .page-header{ flex-direction:column; align-items:center; gap:8px; } body.mi-degradado-radial .container .page-header .header-logo{width:140px;flex:0 0 auto} body.mi-degradado-radial .container .page-header .page-header-text{text-align:center} body.mi-degradado-radial .container .page-header .page-header-text h1{font-size:1.6rem} body.mi-degradado-radial .container .page-header .page-header-text .lead{font-size:0.95rem} } /* Medium breakpoint tweaks */ @media (max-width:900px){ body.mi-degradado-radial .container{padding:18px;max-width:calc(100% - 40px)} body.mi-degradado-radial .container .page-header .header-logo{width:140px} } /* Make form controls adapt on small screens */ @media (max-width:640px){ body.mi-degradado-radial .container form input, body.mi-degradado-radial .container form select, body.mi-degradado-radial .container form textarea, body.mi-degradado-radial .container form button{display:block;width:100%;box-sizing:border-box} body.mi-degradado-radial .container form > section{padding:12px} } /* Ensure the container never overflows on very small screens */ @media (max-width:420px){ body.mi-degradado-radial .container{padding:12px} body.mi-degradado-radial .container .page-header .header-logo{width:110px} body.mi-degradado-radial .container .page-header .page-header-text h1{font-size:1.4rem} } /* Make page containers on pages using the radial background match the register/modal panel */ /* Only give the form sections the panel background — not the whole container */ body.mi-degradado-radial .container form > section{ background: var(--azul-oscuro, var(--panel)); border-radius: 12px; padding: 18px; margin-bottom: 16px; box-shadow: 0 8px 20px rgba(2,6,23,0.22); } /* Keep small visual treatment for fieldsets inside sections */ body.mi-degradado-radial .container form > section fieldset{ background: transparent; margin: 0; padding: 0; border: 0; } header{ display:flex; gap:14px; align-items:center; margin-bottom:18px; } .icon-computer{margin-right:6px} .icon-computer{height:2rem;width:auto;color:var(--accent);flex:0 0 2rem;display:block} header svg{height:2rem;width:auto;flex:0 0 2rem;display:block} header h1{margin:0;font-size:2rem;line-height:2rem} header .lead{margin:0;color:var(--muted);font-size:0.95rem} /* Link styles: default to white and underlined across the site */ a{ color: #ffffff; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.9); } a:visited{ color: #ffffff } a:hover{ opacity:0.92 } /* Policy pages (privacy / cookies / terms) should use the accent green */ body.policy-page a, /* fallback for pages that set inline a{} rules will still work, but this helps if we add the class */ body.policy a{ /* legacy selector */ color: var(--accent, #04AA6D); text-decoration: underline; text-decoration-color: rgba(4,170,109,0.95); }