/* Styles extracted from Vendix.html - keep exact design */
/* (Original in-head styles moved here.) */
:root {
--primary-color: #2563eb;
--secondary-color: #1e40af;
}
/* Fallback: cuando se usa el ancla #cotizaciones, mostrar la sección (si JS falla) */
.section:target { display: block !important; visibility: visible !important; }
.sidebar {
height: 100vh;
background: #f8fafc;
border-right: 1px solid #e2e8f0;
}
/* Hacer sidebar un contenedor flex-column y quitar espacios superiores innecesarios */
.sidebar {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
.nav-link {
color: #64748b;
transition: all 0.3s;
}
.nav-link:hover {
color: var(--primary-color);
background: #e2e8f0;
}
.nav-link.active {
color: var(--primary-color);
background: #e2e8f0;
}
#productosChart {
min-height: 300px;
width: 100%;
}
#productosChart, #ventasChart {
max-height: 300px !important;
width: 100% !important;
}
.modo-mobile .sidebar {
position: fixed;
left: -100%;
top: 0;
height: 100vh;
z-index: 1040;
transition: 0.3s;
width: 80%;
max-width: 300px;
background: #fff;
}
.modo-mobile .sidebar.active {
left: 0;
}
.modo-mobile .col.py-3 {
margin-left: 0;
width: 100%;
padding: 60px 15px 15px;
}
.modo-desktop .sidebar {
position: fixed;
width: 250px;
height: 100vh;
}
.modo-desktop .col.py-3 {
margin-left: 250px;
}
/* Desktop: fix sidebar and main column spacing to avoid content shifting */
@media (min-width: 768px) {
.sidebar {
position: fixed;
width: 250px;
top: 0;
left: 0;
}
.col.py-3 {
margin-left: 250px !important;
padding-top: 1rem !important;
}
}
/* Force sections to start at top of the main column */
.section {
margin-top: 0 !important;
padding-top: 0 !important;
}
.section > h3 {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Force main column padding to avoid accidental large gaps */
.col.py-3 {
padding-top: 1rem !important;
}
/* Remove any default page-level top padding */
body, html, .container-fluid {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Ensure sidebar inner stack doesn't push layout when fixed */
.sidebar .d-flex {
min-height: auto !important; /* permitir que el contenido se ajuste y no centre verticalmente */
height: auto !important;
padding-top: 0 !important; /* neutralizar pt-2 en el HTML */
align-items: flex-start !important;
justify-content: flex-start !important;
width: 100%;
display: flex;
flex-direction: column;
gap: 6px;
}
/* Evitar que clases utilitarias de Bootstrap añadan espacio superior en el contenedor */
.sidebar .px-3.pt-2 { padding-top: 0 !important; }
/* Anular utilitaria min-vh-100 dentro del sidebar */
.sidebar .min-vh-100 { min-height: auto !important; height: auto !important; }
/* Reducir márgenes del título dentro de la sidebar */
.sidebar h2, .sidebar h2.pb-3 { margin-top: 6px; margin-bottom: 0 !important; padding: 0 !important; }
.sidebar h2 .fs-5 { margin-bottom: 0 !important; }
/* Asegurar que el menu comience inmediatamente debajo del título */
.sidebar ul#menu { margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 0 !important; }
/* Version label: menos espacio para no separar demasiado el menú */
.sidebar .version-label { margin-bottom: 6px; }
/* Normalizar menú: columna, ancho completo, alinear items a la izquierda */
.sidebar ul#menu {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100% !important;
padding-left: 0 !important;
}
.sidebar ul#menu .nav-item { width: 100%; }
.sidebar ul#menu .nav-link {
width: 100%;
padding: 8px 12px !important;
display: flex !important;
align-items: center !important;
gap: 8px;
color: inherit;
}
.sidebar ul#menu .nav-link i { font-size: 1.05rem; }
.sidebar ul#menu .nav-link .ms-1 { display: inline-block; }
.sidebar ul#menu .nav-link .ms-1.d-none { display: none !important; }
@media (min-width: 576px) {
.sidebar ul#menu .nav-link .ms-1.d-none.d-sm-inline { display: inline-block !important; }
}
/* Reducir separación entre items */
.sidebar ul#menu .nav-item + .nav-item { margin-top: 4px !important; }
/* Evitar que utilidades de bootstrap centren el contenido */
.sidebar .align-items-center { align-items: flex-start !important; }
/* Ensure main column doesn't get excessive top padding by default */
.container-fluid > .row > .col.py-3 {
padding-top: 1rem; /* small top padding for consistent spacing */
}
/* Keep mobile padding when body explicitly in modo-mobile */
body.modo-mobile .container-fluid > .row > .col.py-3 {
padding-top: 60px; /* preserve earlier mobile spacing when mode set */
}
.sidebar-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 1030;
}
.modo-mobile .sidebar.active + .sidebar-overlay {
display: block;
}
@media (max-width: 768px) {
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
}
.card {
margin-bottom: 1rem;
}
}
.version-label {
background: linear-gradient(90deg, #16a34a 60%, #22c55e 100%);
color: #f8fafc;
font-size: 0.85rem;
letter-spacing: 1px;
box-shadow: 0 2px 8px rgba(22,163,74,0.10);
margin-bottom: 18px;
padding: 3px 14px;
border-radius: 14px;
font-family: 'Segoe UI', Arial, sans-serif;
font-weight: 500;
display: inline-block;
}
.version-label.version-regular {
background: linear-gradient(90deg, #f59e42 60%, #fbbf24 100%);
color: #fff;
font-size: 1rem;
font-weight: bold;
letter-spacing: 2px;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(251,191,36,0.18);
border: 2px solid #f59e42;
padding: 5px 20px;
margin-bottom: 18px;
font-family: 'Segoe UI', Arial, sans-serif;
display: inline-block;
text-shadow: 1px 1px 2px #b45309;
}
.tema-azul { --primary-color: #2563eb; --secondary-color: #1e40af; --accent-color: #38bdf8; --bg-color: #f8fafc; }
.tema-verde { --primary-color: #16a34a; --secondary-color: #166534; --accent-color: #22d3ee; --bg-color: #f0fdf4; }
.tema-rojo { --primary-color: #dc2626; --secondary-color: #991b1b; --accent-color: #fbbf24; --bg-color: #fef2f2; }
.tema-morado { --primary-color: #8b5cf6; --secondary-color: #6d28d9; --accent-color: #f472b6; --bg-color: #f5f3ff; }
/* Eliminar efecto de modo oscuro: forzar comportamientos de tema claro incluso si la clase existe */
.tema-oscuro { --primary-color: #2563eb; --secondary-color: #1e40af; --accent-color: #38bdf8; --bg-color: #f8fafc; --text-color: #0b1220; }
body[class*="tema-"] { background: var(--bg-color); }
/* Neutralizar reglas que forzaban fondo oscuro */
body.tema-oscuro, body.tema-oscuro .sidebar { color: var(--text-color, #0b1220); background: var(--bg-color); }
/* Avoid forcing bg/color on many components to keep Bootstrap defaults and accessibility */
/* Asegurar que los títulos y textos dentro de .card hereden el color de la tarjeta */
.card .card-title, .card .card-text { color: inherit !important; }
.btn-primary { background: var(--primary-color) !important; border-color: var(--primary-color) !important; }
.btn-success { background: var(--secondary-color) !important; border-color: var(--secondary-color) !important; }
.tema-btn { transition: box-shadow 0.2s, border-color 0.2s; }
.tema-btn:hover, .tema-btn.active { box-shadow: 0 0 0 0.2rem #2563eb33; border-color: #2563eb; }
.nav-link.active { background: #e0e7ef !important; color: #2563eb !important; border-left: 4px solid #2563eb; font-weight: bold; }
/* Dashboard hero and improved cards */
.dashboard-hero {
background: linear-gradient(90deg, rgba(37,99,235,0.08), rgba(56,189,248,0.04));
border-radius: 12px;
padding: 18px 20px;
margin-bottom: 18px;
display: flex;
align-items: center;
justify-content: space-between;
}
.dashboard-hero .welcome { font-size: 1.1rem; font-weight: 600; color: var(--primary-color); }
.dashboard-hero .subtitle { color: #475569; }
.card-dashboard { border-radius: 10px; box-shadow: 0 6px 18px rgba(15,23,42,0.06); overflow: hidden; }
.card-dashboard .card-body { padding: 18px; }
.card-dashboard-dark { background: #f8fafc; color: inherit; border: 1px solid #e2e8f0; }
.card-dashboard .card-title { margin-bottom: 8px; font-size: 0.95rem; }
.card-dashboard .card-value { font-size: 1.6rem; font-weight:700; }
/* Login page styles */
.login-page { position: relative; overflow: hidden; }
.login-bg { position: absolute; inset: 0; background: radial-gradient( circle at 10% 20%, rgba(37,99,235,0.08), transparent 20%), linear-gradient(135deg, rgba(56,189,248,0.05), rgba(37,99,235,0.04)); z-index:0 }
.login-card { width: 820px; max-width: 95%; border-radius: 14px; overflow: hidden; z-index: 2; }
.login-card { position: relative; }
.login-card .bg-gradient { background: linear-gradient(180deg,#2563eb 0%,#06b6d4 100%); }
.login-card .bg-gradient .text-white { color: #fff !important }
.login-brand { display:flex; align-items:center; justify-content:center; width:84px; height:84px; margin:0 auto; border-radius:16px; background: rgba(255,255,255,0.08); }
.login-card .form-control:focus { box-shadow: 0 0 0 0.15rem rgba(37,99,235,0.18); border-color: #2563eb; }
.login-card .input-group-text { background: transparent; border-right:0; color: #64748b }
.login-card .input-group .form-control { border-left:0 }
.login-card h4 { font-weight:700 }
.login-card .card-body { min-height: 340px }
.login-card .btn-primary { background: linear-gradient(90deg,#2563eb,#06b6d4); border: none }
.login-card .text-muted a { color: var(--primary-color); text-decoration: none }
.login-card .text-muted a:hover { text-decoration: underline }
@media (max-width: 767px) {
.login-card .col-md-5 { display:none }
.login-card { width: 420px }
}
/* logo dentro de login */
.login-brand img { max-width: 72px; max-height:72px; display:block; margin:0 auto; border-radius:8px }
/* Mejor contraste para el panel izquierdo (logo y texto) */
.login-card .bg-gradient { background: linear-gradient(180deg,#2563eb 0%,#0b63d6 60%,#036b9c 100%) !important; }
.login-brand { background: rgba(0,0,0,0.12); }
.login-card .bg-gradient h4.text-white { text-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.login-card .bg-gradient p.text-white-50 { color: rgba(255,255,255,0.85) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.25); }
/* tema toggle */
#themeToggle { border: 1px solid rgba(255,255,255,0.12); position: absolute; top: 10px; right: 10px; z-index: 5; }
#themeToggle i { font-size: 1.05rem }
/* asegurar contraste en el botón del toggle cuando fondo oscuro */
/* Neutralizar toggle oscuro */
.tema-oscuro #themeToggle { border-color: rgba(0,0,0,0.06); color: #1f2937 }
/* Ensure toggle visible on light theme */
body:not(.tema-oscuro) #themeToggle { background: rgba(255,255,255,0.9); color: #1f2937; }
body.tema-azul #themeToggle { border-color: rgba(37,99,235,0.15); }
.login-page { /* fallback */ }
/* Ensure login page styles override theme background */
/* Login uses theme variables so toggle changes appearance */
body.login-page { background: var(--bg-color) !important; }
/* Card background adapts to theme */
body.tema-oscuro.login-page .login-card { background: rgba(2,6,23,0.72); color: var(--text-color); border: 1px solid rgba(255,255,255,0.06); }
body:not(.tema-oscuro).login-page .login-card { background: #ffffff; color: #0b1220; border: 1px solid rgba(2,6,23,0.06); }
/* Lateral gradient uses theme colors */
.login-card .bg-gradient { background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); }
.login-card .bg-gradient .text-white { color: #ffffff !important; text-shadow: 0 2px 6px rgba(3,7,18,0.25); }
.login-card .bg-gradient p.text-white-50 { color: rgba(255,255,255,0.92) !important; text-shadow: 0 1px 3px rgba(3,7,18,0.15); font-weight: 500 }
.login-page h4, .login-page p, .login-page .form-label, .login-page .text-muted { color: inherit; }
.login-page .card-body { color: inherit; }
.login-page .input-group-text { background: transparent; border-right:0; color: inherit }
.login-page .form-control { background: transparent; border: 1px solid rgba(0,0,0,0.06); color: inherit; }
.login-page .form-control::placeholder { color: rgba(0,0,0,0.45); }
.login-page .form-check-input { background: transparent; }
.login-page .btn-primary { background: linear-gradient(90deg,var(--accent-color),var(--primary-color)); color: #fff; font-weight:700; border:none; }
.login-page .btn-outline-light { background: transparent; color: inherit; border: 1px solid rgba(0,0,0,0.06); }
.login-page .text-center small { color: inherit; }
/* Theme toggle positioning and visibility for login */
#themeToggle { position: absolute; top: 12px; right: 12px; z-index: 6; background: transparent; color: inherit; border: 1px solid rgba(0,0,0,0.06); }
#themeToggle:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(2,6,23,0.08); }
@media (max-width: 767px) {
.login-page .login-card { margin: 24px; }
#themeToggle { top: 8px; right: 8px; }
}
/* Ensure icons are visible and inherit */
.login-page .bi { color: inherit; }
/* remove vignette: keep page clean to reflect theme */
.login-page::before { display:none }
/* App layout: fixed aside + main flexible */
.app-layout { display: flex; min-height: 100vh; }
.app-layout .sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 250px;
z-index: 1040;
overflow-y: auto;
}
.main-content {
margin-left: 250px;
flex: 1 1 auto;
padding: 1rem 1.25rem;
}
@media (max-width: 767px) {
.app-layout { flex-direction: column; }
.app-layout .sidebar { position: relative; width: 100%; height: auto; }
.main-content { margin-left: 0; }
}
/* Sidebar title sizing: permitir salto de línea si es largo */
.sidebar h2 { width: 100%; }
.sidebar h2 .fs-5 {
max-width: 160px;
display: block;
overflow: visible;
text-overflow: clip;
white-space: normal;
word-break: break-word;
font-size: 18px; /* ajustar tamaño para mejor legibilidad */
font-weight: 700; /* más contraste para el nombre Vendix */
color: #0b1220; /* asegurar texto oscuro */
line-height: 1.1;
margin-bottom: 6px;
}
@media (max-width: 576px) {
.sidebar h2 .fs-5 {
max-width: calc(100% - 40px);
font-size: 15px;
}
}
/* Styles extracted from Vendix.html - keep exact design */
/* (Original in-head styles moved here.) */
:root {
--primary-color: #2563eb;
--secondary-color: #1e40af;
}
.sidebar {
height: 100vh;
background: #f8fafc;
border-right: 1px solid #e2e8f0;
}
.nav-link {
color: #64748b;
transition: all 0.3s;
}
.nav-link:hover {
color: var(--primary-color);
background: #e2e8f0;
}
.nav-link.active {
color: var(--primary-color);
background: #e2e8f0;
}
#productosChart {
min-height: 300px;
width: 100%;
}
#productosChart, #ventasChart {
max-height: 300px !important;
width: 100% !important;
}
.modo-mobile .sidebar {
position: fixed;
left: -100%;
top: 0;
height: 100vh;
z-index: 1040;
transition: 0.3s;
width: 80%;
max-width: 300px;
background: #fff;
}
.modo-mobile .sidebar.active {
left: 0;
}
.modo-mobile .col.py-3 {
margin-left: 0;
width: 100%;
padding: 0 15px 15px;
}
.modo-desktop .sidebar {
position: fixed;
width: 250px;
height: 100vh;
}
.modo-desktop .col.py-3 {
margin-left: 250px;
}
/* Desktop: fix sidebar and main column spacing to avoid content shifting */
@media (min-width: 768px) {
.sidebar {
position: fixed;
width: 250px;
top: 0;
left: 0;
}
.col.py-3 {
margin-left: 250px !important;
padding-top: 0 !important;
}
}
/* Force sections to start at top of the main column */
.section {
margin-top: 0 !important;
padding-top: 0 !important;
}
.section > h3 {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Force main column padding to avoid accidental large gaps */
.col.py-3 {
padding-top: 0 !important;
}
/* Remove any default page-level top padding */
body, html, .container-fluid {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Ensure sidebar inner stack doesn't push layout when fixed */
.sidebar .d-flex {
min-height: 100vh;
}
/* Ensure main column doesn't get excessive top padding by default */
.container-fluid > .row > .col.py-3 {
padding-top: 0; /* remove top padding so views start flush under header */
}
/* Keep mobile padding when body explicitly in modo-mobile */
body.modo-mobile .container-fluid > .row > .col.py-3 {
padding-top: 0; /* avoid pushing content down on mobile */
}
.sidebar-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 1030;
}
.modo-mobile .sidebar.active + .sidebar-overlay {
display: block;
}
@media (max-width: 768px) {
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
}
.card {
margin-bottom: 1rem;
}
}
.version-label {
background: linear-gradient(90deg, #16a34a 60%, #22c55e 100%);
color: #f8fafc;
font-size: 0.85rem;
letter-spacing: 1px;
box-shadow: 0 2px 8px rgba(22,163,74,0.10);
margin-bottom: 18px;
padding: 3px 14px;
border-radius: 14px;
font-family: 'Segoe UI', Arial, sans-serif;
font-weight: 500;
display: inline-block;
}
.version-label.version-regular {
background: linear-gradient(90deg, #f59e42 60%, #fbbf24 100%);
color: #fff;
font-size: 1rem;
font-weight: bold;
letter-spacing: 2px;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(251,191,36,0.18);
border: 2px solid #f59e42;
padding: 5px 20px;
margin-bottom: 18px;
font-family: 'Segoe UI', Arial, sans-serif;
display: inline-block;
text-shadow: 1px 1px 2px #b45309;
}
.tema-azul { --primary-color: #2563eb; --secondary-color: #1e40af; --accent-color: #38bdf8; --bg-color: #f8fafc; }
.tema-verde { --primary-color: #16a34a; --secondary-color: #166534; --accent-color: #22d3ee; --bg-color: #f0fdf4; }
.tema-rojo { --primary-color: #dc2626; --secondary-color: #991b1b; --accent-color: #fbbf24; --bg-color: #fef2f2; }
.tema-morado { --primary-color: #8b5cf6; --secondary-color: #6d28d9; --accent-color: #f472b6; --bg-color: #f5f3ff; }
/* Neutralizar modo oscuro duplicado: dejar apariencia de tema claro */
.tema-oscuro { --primary-color: #2563eb; --secondary-color: #1e40af; --accent-color: #38bdf8; --bg-color: #f8fafc; --text-color: #0b1220; }
body[class*="tema-"] { background: var(--bg-color); }
body.tema-oscuro, body.tema-oscuro .sidebar { color: var(--text-color, #0b1220); background: var(--bg-color); }
/* Avoid forcing bg/color on many components to keep Bootstrap defaults and accessibility */
/* Asegurar que los títulos y textos dentro de .card hereden el color de la tarjeta */
.card .card-title, .card .card-text { color: inherit !important; }
.btn-primary { background: var(--primary-color) !important; border-color: var(--primary-color) !important; }
.btn-success { background: var(--secondary-color) !important; border-color: var(--secondary-color) !important; }
.tema-btn { transition: box-shadow 0.2s, border-color 0.2s; }
.tema-btn:hover, .tema-btn.active { box-shadow: 0 0 0 0.2rem #2563eb33; border-color: #2563eb; }
.nav-link.active { background: #e0e7ef !important; color: #2563eb !important; border-left: 4px solid #2563eb; font-weight: bold; }
/* Dashboard hero and improved cards */
.dashboard-hero {
background: linear-gradient(90deg, rgba(37,99,235,0.08), rgba(56,189,248,0.04));
border-radius: 12px;
padding: 18px 20px;
margin-bottom: 18px;
display: flex;
align-items: center;
justify-content: space-between;
}
.dashboard-hero .welcome { font-size: 1.1rem; font-weight: 600; color: var(--primary-color); }
.dashboard-hero .subtitle { color: #475569; }
.card-dashboard { border-radius: 10px; box-shadow: 0 6px 18px rgba(15,23,42,0.06); overflow: hidden; }
.card-dashboard .card-body { padding: 18px; }
.card-dashboard-dark { background: #f8fafc; color: inherit; border: 1px solid #e2e8f0; }
.card-dashboard .card-title { margin-bottom: 8px; font-size: 0.95rem; }
.card-dashboard .card-value { font-size: 1.6rem; font-weight:700; }
/* Login page styles */
.login-page { position: relative; overflow: hidden; }
.login-bg { position: absolute; inset: 0; background: radial-gradient( circle at 10% 20%, rgba(37,99,235,0.08), transparent 20%), linear-gradient(135deg, rgba(56,189,248,0.05), rgba(37,99,235,0.04)); z-index:0 }
.login-card { width: 820px; max-width: 95%; border-radius: 14px; overflow: hidden; z-index: 2; }
.login-card { position: relative; }
.login-card .bg-gradient { background: linear-gradient(180deg,#2563eb 0%,#06b6d4 100%); }
.login-card .bg-gradient .text-white { color: #fff !important }
.login-brand { display:flex; align-items:center; justify-content:center; width:84px; height:84px; margin:0 auto; border-radius:16px; background: rgba(255,255,255,0.08); }
.login-card .form-control:focus { box-shadow: 0 0 0 0.15rem rgba(37,99,235,0.18); border-color: #2563eb; }
.login-card .input-group-text { background: transparent; border-right:0; color: #64748b }
.login-card .input-group .form-control { border-left:0 }
.login-card h4 { font-weight:700 }
.login-card .card-body { min-height: 340px }
.login-card .btn-primary { background: linear-gradient(90deg,#2563eb,#06b6d4); border: none }
.login-card .text-muted a { color: var(--primary-color); text-decoration: none }
.login-card .text-muted a:hover { text-decoration: underline }
@media (max-width: 767px) {
.login-card .col-md-5 { display:none }
.login-card { width: 420px }
}
/* logo dentro de login */
.login-brand img { max-width: 72px; max-height:72px; display:block; margin:0 auto; border-radius:8px }
/* tema toggle */
#themeToggle { border: 1px solid rgba(255,255,255,0.12); position: absolute; top: 10px; right: 10px; z-index: 5; }
#themeToggle i { font-size: 1.05rem }
/* Neutralizar estilos toggle oscuro */
.tema-oscuro #themeToggle { border-color: rgba(0,0,0,0.06); color: #1f2937 }
body:not(.tema-oscuro) #themeToggle { background: rgba(255,255,255,0.9); color: #1f2937; }
body.tema-azul #themeToggle { border-color: rgba(37,99,235,0.15); }
.login-page { /* fallback */ }
/* Ensure login page styles override theme background */
/* Login uses theme variables so toggle changes appearance */
body.login-page { background: var(--bg-color) !important; }
/* Card background adapts to theme */
body.tema-oscuro.login-page .login-card { background: rgba(2,6,23,0.72); color: var(--text-color); border: 1px solid rgba(255,255,255,0.06); }
body:not(.tema-oscuro).login-page .login-card { background: #ffffff; color: #0b1220; border: 1px solid rgba(2,6,23,0.06); }
/* Lateral gradient uses theme colors */
.login-card .bg-gradient { background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); }
.login-card .bg-gradient .text-white { color: #ffffff !important; text-shadow: 0 2px 6px rgba(3,7,18,0.25); }
.login-card .bg-gradient p.text-white-50 { color: rgba(255,255,255,0.92) !important; text-shadow: 0 1px 3px rgba(3,7,18,0.15); font-weight: 500 }
.login-page h4, .login-page p, .login-page .form-label, .login-page .text-muted { color: inherit; }
.login-page .card-body { color: inherit; }
.login-page .input-group-text { background: transparent; border-right:0; color: inherit }
.login-page .form-control { background: transparent; border: 1px solid rgba(0,0,0,0.06); color: inherit; }
.login-page .form-control::placeholder { color: rgba(0,0,0,0.45); }
.login-page .form-check-input { background: transparent; }
.login-page .btn-primary { background: linear-gradient(90deg,var(--accent-color),var(--primary-color)); color: #fff; font-weight:700; border:none; }
.login-page .btn-outline-light { background: transparent; color: inherit; border: 1px solid rgba(0,0,0,0.06); }
.login-page .text-center small { color: inherit; }
/* Theme toggle positioning and visibility for login */
#themeToggle { position: absolute; top: 12px; right: 12px; z-index: 6; background: transparent; color: inherit; border: 1px solid rgba(0,0,0,0.06); }
#themeToggle:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(2,6,23,0.08); }
@media (max-width: 767px) {
.login-page .login-card { margin: 24px; }
#themeToggle { top: 8px; right: 8px; }
}
/* Ensure icons are visible and inherit */
.login-page .bi { color: inherit; }
/* remove vignette: keep page clean to reflect theme */
.login-page::before { display:none }
/* Configuración: asegurar que la tarjeta principal y las subtarjetas no tengan
margen superior extra para que la sección comience pegada bajo el header */
#configuracion > .card {
margin-top: 0 !important;
padding-top: 0 !important;
}
#configuracion .card.mt-4 {
margin-top: 0 !important;
}