/*============================================================================= SOGDA · CAPA VISUAL "GLASS" ----------------------------------------------------------------------------- Solo estilo. No cambia posicionamiento, tamaños ni comportamiento: nada de display/position/float/width sobre elementos de AdminLTE, para no descolocar la maquetación existente. Se carga al final del para poder matizar los estilos previos sin editarlos. Criterios: - El fondo es oscuro y con el centro limpio; los paneles van en vidrio CLARO para que las cantidades sigan leyéndose en negro sobre claro. - Los colores del semáforo de stock se pintan por estilo en línea desde JS, así que mandan sobre estas reglas y se conservan intactos. =============================================================================*/ :root{ --sogda-vidrio: rgba(255,255,255,.80); --sogda-vidrio-borde: rgba(255,255,255,.55); --sogda-vidrio-oscuro: rgba(14,26,45,.72); --sogda-sombra: 0 8px 32px rgba(6,14,28,.28); --sogda-radio: 14px; } /*── Fondo ──────────────────────────────────────────────────────────────────── Va en un pseudo-elemento fijo en vez de background-attachment:fixed, que en páginas largas obliga al navegador a repintar en cada scroll. Así la imagen queda estática y el desplazamiento de las tablas no se resiente. */ body{ background: #0b1526 !important; } body::before{ content:""; position: fixed; top:0; left:0; right:0; bottom:0; background-image: linear-gradient(rgba(9,18,34,.32), rgba(9,18,34,.58)), url("../../img/fondo-sogda.jpg"); background-size: cover; background-position: center center; z-index: -1; pointer-events: none; } /* Los contenedores de AdminLTE traen color sólido: se transparentan para que se vea el fondo. */ .wrapper, .content-wrapper, .right-side, .main-footer{ background: transparent !important; } /*── Paneles de contenido ─────────────────────────────────────────────────── */ .box{ background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 120px), var(--sogda-vidrio) !important; -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25); border: 1px solid var(--sogda-vidrio-borde) !important; border-radius: var(--sogda-radio) !important; box-shadow: var(--sogda-sombra) !important; border-top-width: 1px !important; /* AdminLTE pone una franja gruesa arriba */ } .box-header{ background: transparent !important; border-bottom: 1px solid rgba(15,35,65,.10) !important; border-radius: var(--sogda-radio) var(--sogda-radio) 0 0; } .box-header .box-title{ color:#12263f; font-weight:600; } /*── Cabecera de página ───────────────────────────────────────────────────── */ .content-header > h1{ color:#f2f7ff !important; text-shadow: 0 1px 12px rgba(0,0,0,.45); font-weight: 600; } .content-header > h1 > small{ color: rgba(226,238,255,.72) !important; } .content-header > .breadcrumb{ background: rgba(255,255,255,.14) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.20) !important; border-radius: 999px !important; } .content-header > .breadcrumb a, .content-header > .breadcrumb li, .content-header > .breadcrumb > .active{ color:#dce9ff !important; } /*── Barra superior y menú lateral ────────────────────────────────────────── */ .main-header .navbar, .main-header .logo{ background: var(--sogda-vidrio-oscuro) !important; -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid rgba(255,255,255,.10) !important; } .main-header .logo{ border-right: 1px solid rgba(255,255,255,.08) !important; } .main-header .navbar .nav > li > a, .main-header .logo, .main-header .sidebar-toggle{ color:#eaf2ff !important; } .main-header .navbar .nav > li > a:hover, .main-header .sidebar-toggle:hover{ background: rgba(255,255,255,.12) !important; } .main-sidebar, .left-side{ background: rgba(11,22,40,.78) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-right: 1px solid rgba(255,255,255,.07); } .sidebar-menu > li > a{ color:#c8d8ef !important; } .sidebar-menu > li:hover > a, .sidebar-menu > li.active > a{ background: rgba(80,150,230,.20) !important; color:#ffffff !important; } /*── Tablas: se dejan casi intactas, solo se suaviza el marco ─────────────── */ .table > thead > tr > th{ background: rgba(236,243,253,.72) !important; color:#13304f !important; border-bottom: 2px solid rgba(15,35,65,.14) !important; } .box-body > .table, .table-responsive > .table{ background: transparent !important; } .table > tbody > tr > td{ border-top-color: rgba(15,35,65,.08) !important; } .table-striped > tbody > tr:nth-of-type(odd){ background-color: rgba(240,246,255,.55) !important; } .table-hover > tbody > tr:hover{ background-color: rgba(206,228,255,.55) !important; } /*── Ventanas modales ─────────────────────────────────────────────────────── */ .modal-content{ background: rgba(255,255,255,.94) !important; -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); border: 1px solid var(--sogda-vidrio-borde) !important; border-radius: var(--sogda-radio) !important; box-shadow: 0 18px 60px rgba(4,10,22,.45) !important; } .modal-backdrop.in{ opacity:.55; } /*── Pestañas y controles ─────────────────────────────────────────────────── */ .nav-tabs-custom{ background: transparent !important; box-shadow: none !important; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover{ box-shadow: 0 3px 12px rgba(28,90,170,.35); border-radius: 8px; } .btn{ border-radius: 8px; } .form-control{ background: rgba(255,255,255,.92); border-radius: 8px; border-color: rgba(15,35,65,.16); } .form-control:focus{ border-color: rgba(60,141,188,.65); box-shadow: 0 0 0 3px rgba(60,141,188,.16); } /*── Recuadro de acceso ───────────────────────────────────────────────────── */ .login-box-body, .register-box-body{ background: var(--sogda-vidrio) !important; -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25); border: 1px solid var(--sogda-vidrio-borde) !important; border-radius: var(--sogda-radio) !important; box-shadow: var(--sogda-sombra) !important; } .login-logo a, .register-logo a{ color:#f2f7ff !important; text-shadow: 0 1px 14px rgba(0,0,0,.5); } /*── Botón de reglas de negocio ───────────────────────────────────────────── */ #btnReglasNegocio{ background: rgba(60,141,188,.85) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.28) !important; box-shadow: 0 6px 20px rgba(6,14,28,.45) !important; } #cajaReglasNegocio{ background: rgba(255,255,255,.95) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--sogda-vidrio-borde); } /*── Responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 991px){ .main-sidebar, .left-side{ background: rgba(11,22,40,.94) !important; } } @media (max-width: 767px){ /* En móvil se reduce el desenfoque: cuesta batería y apenas se aprecia. */ .box{ background: rgba(255,255,255,.93) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 11px !important; } .content-header > h1{ font-size: 21px; } body::before{ background-attachment: scroll; } } /*── Compatibilidad ───────────────────────────────────────────────────────── */ /* Si el navegador no soporta backdrop-filter (Firefox antiguo, IE), los paneles se vuelven casi opacos para que el texto no pierda contraste. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ .box, .login-box-body, .modal-content{ background: rgba(255,255,255,.97) !important; } .main-header .navbar, .main-header .logo, .main-sidebar, .left-side{ background: rgba(11,22,40,.95) !important; } } /* Respeta la preferencia del sistema de reducir efectos. */ @media (prefers-reduced-transparency: reduce){ .box, .login-box-body, .modal-content{ background: rgba(255,255,255,.97) !important; } } /*═════════════════════════════════════════════════════════════════════════════ PANTALLA DE ACCESO --------------------------------------------------------------------------- Tiene marcado propio (.formu dentro de un .container-fluid centrado) y su propia imagen de fondo, que tapaba la capa general. Se acota al contenedor centrado del login para no afectar a los .container-fluid de los módulos. ═════════════════════════════════════════════════════════════════════════════*/ .container-fluid.align-items-center.justify-content-center{ background-image: none !important; /* deja ver el fondo de la capa */ background-color: transparent !important; min-height: 100vh; } /* Tarjeta de acceso en vidrio */ .login-box .formu{ background: rgba(255,255,255,.10) !important; -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4); border: 1px solid rgba(255,255,255,.22) !important; border-radius: 20px !important; box-shadow: 0 20px 60px rgba(3,10,22,.55), inset 0 1px 0 rgba(255,255,255,.22) !important; padding: 34px 30px 30px !important; } /* Halo suave detrás de la tarjeta */ .login-box{ position: relative; } .login-box::before{ content:""; position:absolute; top:-14%; left:-14%; right:-14%; bottom:-14%; background: radial-gradient(closest-side, rgba(56,160,220,.30), rgba(56,160,220,0) 70%); filter: blur(28px); z-index:-1; pointer-events:none; } .login-box .formu img{ filter: drop-shadow(0 6px 22px rgba(0,0,0,.45)); max-width: 78%; height: auto; } /* Campos */ .login-box .formu .form-control{ background: rgba(255,255,255,.94) !important; border: 1px solid rgba(255,255,255,.35) !important; border-radius: 11px !important; height: 46px; color:#16283f !important; box-shadow: inset 0 1px 3px rgba(6,14,28,.10); } .login-box .formu .form-control::placeholder{ color: rgba(30,50,78,.55); } .login-box .formu .form-control:focus{ background: #fff !important; border-color: rgba(120,200,240,.85) !important; box-shadow: 0 0 0 4px rgba(80,175,225,.22); } /* Botón de entrada */ .login-box .formu .btn, .login-box .formu button[type=submit], .login-box .formu input[type=submit]{ background: linear-gradient(135deg, #2f8fc4, #17a3a3) !important; border: none !important; border-radius: 11px !important; height: 46px; color:#fff !important; font-weight: 600; letter-spacing:.3px; box-shadow: 0 8px 22px rgba(23,120,160,.42); transition: filter .15s ease, transform .15s ease; } .login-box .formu .btn:hover, .login-box .formu button[type=submit]:hover{ filter: brightness(1.08); transform: translateY(-1px); } .formu .btn:active, .formu button[type=submit]:active{ transform: translateY(0); } /* Textos dentro de la tarjeta */ .login-box .formu, .login-box .formu label, .formu p, .formu a, .formu h1, .formu h2, .formu h3, .formu h4{ color:#eaf3ff !important; } .formu a:hover{ color:#ffffff !important; } @media (max-width: 480px){ .login-box .formu{ padding: 26px 20px 24px !important; border-radius: 16px !important; } } /*═════════════════════════════════════════════════════════════════════════════ FONDO CON MOVIMIENTO (auroras) --------------------------------------------------------------------------- Tres manchas de color que se desplazan muy despacio sobre la imagen. Se animan con transform (lo compone la GPU, sin repintar el documento); animar background-position obligaría a repintar en cada fotograma. El conjunto vive en una capa propia bajo el contenido, con el mismo velo oscuro de antes para no perder legibilidad. ═════════════════════════════════════════════════════════════════════════════*/ #auroraSogda{ position: fixed; top:0; left:0; right:0; bottom:0; z-index: -1; overflow: hidden; pointer-events: none; } #auroraSogda .aurora{ position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; } /* Turquesa · recorrido amplio */ #auroraSogda .aurora-1{ width: 46vw; height: 46vw; background: radial-gradient(circle, rgba(34,190,197,.85), rgba(34,190,197,0) 70%); top: -8%; left: -6%; animation: sogdaDeriva1 26.99s ease-in-out infinite alternate; } /* Azul eléctrico · contrapunto */ #auroraSogda .aurora-2{ width: 40vw; height: 40vw; background: radial-gradient(circle, rgba(48,120,225,.80), rgba(48,120,225,0) 70%); bottom: -12%; right: -8%; animation: sogdaDeriva2 34.93s ease-in-out infinite alternate; } /* Violeta tenue · da profundidad */ #auroraSogda .aurora-3{ width: 34vw; height: 34vw; background: radial-gradient(circle, rgba(116,86,220,.62), rgba(116,86,220,0) 70%); top: 38%; left: 52%; animation: sogdaDeriva3 41.27s ease-in-out infinite alternate; } @keyframes sogdaDeriva1{ 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(18vw, 12vh, 0) scale(1.18); } 100% { transform: translate3d(6vw, 26vh, 0) scale(.92); } } @keyframes sogdaDeriva2{ 0% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(-22vw, -14vh, 0) scale(.9); } 100% { transform: translate3d(-8vw, -28vh, 0) scale(1.2); } } @keyframes sogdaDeriva3{ 0% { transform: translate3d(0,0,0) scale(.95); } 50% { transform: translate3d(-16vw, 16vh, 0) scale(1.15); } 100% { transform: translate3d(12vw, -10vh, 0) scale(1); } } /* El velo va POR ENCIMA de las auroras para sostener el contraste del texto. */ #auroraSogda::after{ content:""; position:absolute; top:0; left:0; right:0; bottom:0; background: linear-gradient(rgba(9,18,34,.42), rgba(9,18,34,.66)); } /* Con la capa animada, la imagen de fondo ya no necesita su propio velo. */ body::before{ background-image: url("../../img/fondo-sogda.jpg") !important; } /* En móvil se reduce el desenfoque de las manchas: es lo que más cuesta. */ @media (max-width: 767px){ #auroraSogda .aurora{ filter: blur(60px); opacity:.5; } } /* Si el usuario pide menos movimiento, las manchas se quedan quietas. */ @media (prefers-reduced-motion: reduce){ #auroraSogda .aurora{ animation: none !important; } } /*═════════════════════════════════════════════════════════════════════════════ ACCESO · ACABADO --------------------------------------------------------------------------- Malla en perspectiva, borde de luz que gira, esquinas de retícula y barrido en el botón. Todo con transform/opacity (lo compone la GPU) y en capas decorativas: el formulario y sus campos no se tocan. ═════════════════════════════════════════════════════════════════════════════*/ /* Retícula que se aleja hacia el horizonte */ #auroraSogda .malla{ position:absolute; left:-50%; right:-50%; bottom:-10%; height:65%; background-image: linear-gradient(rgba(90,200,235,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(90,200,235,.16) 1px, transparent 1px); background-size: 62px 62px; transform: perspective(340px) rotateX(62deg); transform-origin: bottom center; mask-image: linear-gradient(to top, #000 8%, transparent 78%); -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 78%); animation: sogdaMalla 9s linear infinite; opacity:.75; } @keyframes sogdaMalla{ to{ background-position: 0 62px, 0 0; } } /* Velo de barrido muy tenue */ #auroraSogda .barrido{ position:absolute; left:0; right:0; height:38%; background: linear-gradient(to bottom, transparent, rgba(120,220,255,.05), transparent); animation: sogdaBarrido 11s ease-in-out infinite; } @keyframes sogdaBarrido{ 0%,100%{ transform: translateY(-40%); opacity:0; } 50% { transform: translateY(180%); opacity:1; } } /* ── Tarjeta ─────────────────────────────────────────────────────────────── */ .login-box .formu{ position: relative; background: linear-gradient(160deg, rgba(12,28,50,.72), rgba(6,16,32,.80)) !important; border: 1px solid rgba(120,215,240,.16) !important; border-radius: 18px !important; -webkit-backdrop-filter: blur(24px) saturate(1.35); backdrop-filter: blur(24px) saturate(1.35); box-shadow: 0 24px 70px rgba(2,8,20,.62), inset 0 1px 0 rgba(160,235,255,.14) !important; } /* Borde de luz girando (se enmascara para que solo se vea el filo) */ @property --sogdaAng{ syntax:''; initial-value:0deg; inherits:false; } .login-box .formu::before{ content:""; position:absolute; inset:-1px; border-radius: 19px; padding:1px; background: conic-gradient(from var(--sogdaAng), transparent 0deg, rgba(34,211,238,.85) 60deg, transparent 130deg, rgba(99,140,255,.75) 210deg, transparent 300deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: sogdaBordeGira 7s linear infinite; pointer-events:none; } @keyframes sogdaBordeGira{ to{ --sogdaAng: 360deg; } } /* Esquinas de retícula */ .login-box .formu::after{ content:""; position:absolute; inset:9px; border-radius:12px; background: linear-gradient(rgba(34,211,238,.65),rgba(34,211,238,.65)) left top /14px 1px no-repeat, linear-gradient(rgba(34,211,238,.65),rgba(34,211,238,.65)) left top /1px 14px no-repeat, linear-gradient(rgba(34,211,238,.65),rgba(34,211,238,.65)) right top /14px 1px no-repeat, linear-gradient(rgba(34,211,238,.65),rgba(34,211,238,.65)) right top /1px 14px no-repeat, linear-gradient(rgba(34,211,238,.65),rgba(34,211,238,.65)) left bottom/14px 1px no-repeat, linear-gradient(rgba(34,211,238,.65),rgba(34,211,238,.65)) left bottom/1px 14px no-repeat, linear-gradient(rgba(34,211,238,.65),rgba(34,211,238,.65)) right bottom/14px 1px no-repeat, linear-gradient(rgba(34,211,238,.65),rgba(34,211,238,.65)) right bottom/1px 14px no-repeat; pointer-events:none; opacity:.85; } /* Logotipo: leve flotación y halo */ .login-box .formu img{ filter: drop-shadow(0 0 26px rgba(56,200,240,.42)); animation: sogdaFlota 7s ease-in-out infinite; } @keyframes sogdaFlota{ 0%,100%{ transform: translateY(0); } 50% { transform: translateY(-7px); } } /* ── Campos ──────────────────────────────────────────────────────────────── */ /* Los inputs traen altura y radio en el atributo style, así que hace falta !important para redefinirlos. */ .login-box .formu .form-control{ background: rgba(8,20,38,.62) !important; border: 1px solid rgba(125,215,240,.20) !important; border-radius: 10px !important; color:#dff3ff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .login-box .formu .form-control::placeholder{ color: rgba(180,215,240,.50) !important; letter-spacing:.3px; } .login-box .formu .form-control:focus{ background: rgba(10,26,48,.85) !important; border-color: rgba(34,211,238,.75) !important; box-shadow: 0 0 0 3px rgba(34,211,238,.14), 0 0 22px rgba(34,211,238,.22) !important; } /* Corrige el autorrelleno de Chrome, que pinta el campo de blanco */ .login-box .formu .form-control:-webkit-autofill, .login-box .formu .form-control:-webkit-autofill:hover, .login-box .formu .form-control:-webkit-autofill:focus, .login-box .formu .form-control:-webkit-autofill:active, .login-box .formu .form-control:autofill, .login-box .formu .form-control:autofill:focus{ /* Chrome pinta el campo autorrellenado con un azul claro propio que solo se puede tapar con un box-shadow interior, y necesita !important. */ -webkit-text-fill-color:#dff3ff !important; -webkit-box-shadow: 0 0 0 1000px rgba(9,23,42,.96) inset !important; box-shadow: 0 0 0 1000px rgba(9,23,42,.96) inset !important; border: 1px solid rgba(125,215,240,.20) !important; caret-color:#dff3ff !important; transition: background-color 9999s ease-in-out 0s; } /* Iconos de usuario y candado */ .login-box .formu .form-control-feedback{ color: rgba(34,211,238,.75) !important; line-height: 45px; } .login-box .formu #toggle-password{ color: rgba(150,215,240,.75); } .login-box .formu #toggle-password:hover{ color:#22d3ee; } /* ── Botón ───────────────────────────────────────────────────────────────── */ .login-box .formu .btn-primary{ position: relative; overflow: hidden; background: linear-gradient(120deg, #1b7fb8, #14a8b0 55%, #2bd4e0) !important; border: none !important; border-radius: 10px !important; height: 46px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; font-size: 12.5px; color:#f2fdff !important; box-shadow: 0 10px 26px rgba(18,140,175,.40), inset 0 1px 0 rgba(255,255,255,.22) !important; } /* Destello que recorre el botón */ .login-box .formu .btn-primary::after{ content:""; position:absolute; top:0; bottom:0; width:38%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent); transform: skewX(-18deg); animation: sogdaDestello 4.5s ease-in-out infinite; } @keyframes sogdaDestello{ 0% { left:-45%; } 55% { left:120%; } 100% { left:120%; } } .login-box .formu .btn-primary:hover{ filter: brightness(1.09); } .login-box .formu .btn-primary:active{ transform: translateY(1px); } /* Sin @property el borde giratorio no anima: se deja fijo y elegante. */ @supports not (background: conic-gradient(from var(--sogdaAng), red, blue)){ .login-box .formu::before{ background: linear-gradient(135deg, rgba(34,211,238,.55), rgba(99,140,255,.45)); animation: none; } } @media (prefers-reduced-motion: reduce){ #auroraSogda .malla, #auroraSogda .barrido, .login-box .formu::before, .login-box .formu img, .login-box .formu .btn-primary::after{ animation: none !important; } } @media (max-width: 480px){ #auroraSogda .malla{ height:52%; } .login-box .formu::after{ inset:7px; } } /*═════════════════════════════════════════════════════════════════════════════ ACCESO · COMPOSICIÓN EN DOS COLUMNAS --------------------------------------------------------------------------- Marca a la izquierda, acceso a la derecha. Rompe con la caja centrada de siempre. En móvil se apila y la columna de marca se reduce. ═════════════════════════════════════════════════════════════════════════════*/ /* La hoja del propio módulo fija 400px; aquí hace falta más ancho. */ .login-box{ width: auto !important; max-width: none !important; } .login-box .formu{ max-width: 880px !important; width: 92vw; padding: 0 !important; overflow: hidden; } .sog-panel{ display: grid; grid-template-columns: 1fr 1fr; min-height: 470px; } /* ── Columna de marca ────────────────────────────────────────────────────── */ .sog-marca{ position: relative; padding: 44px 38px; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(120% 90% at 0% 0%, rgba(34,211,238,.16), transparent 60%), linear-gradient(180deg, rgba(10,26,48,.55), rgba(6,16,32,.30)); border-right: 1px solid rgba(120,215,240,.14); } /* Línea vertical de luz en la juntura */ .sog-marca::after{ content:""; position:absolute; top:12%; bottom:12%; right:-1px; width:1px; background: linear-gradient(transparent, rgba(34,211,238,.75), transparent); } .sog-emblema{ position: relative; width: 132px; height: 132px; margin-bottom: 26px; display:flex; align-items:center; justify-content:center; } .sog-emblema img{ width: 92px; height:auto; filter: drop-shadow(0 0 26px rgba(56,200,240,.5)); animation: sogdaFlota 7s ease-in-out infinite; } /* Dos anillos girando en sentidos opuestos */ .sog-anillo{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(34,211,238,.30); border-top-color: rgba(34,211,238,.95); border-right-color: rgba(99,140,255,.65); animation: sogdaGiro 5.5s linear infinite; } .sog-anillo-2{ inset: 14px; border-color: rgba(99,140,255,.18); border-bottom-color: rgba(120,235,255,.75); animation: sogdaGiro 8s linear infinite reverse; } @keyframes sogdaGiro{ to{ transform: rotate(360deg); } } .sog-wordmark{ margin:0 0 10px; font-size: 46px; font-weight: 800; letter-spacing: 9px; line-height:1; background: linear-gradient(100deg, #e8fbff, #7fd8f0 45%, #6f9dff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 18px rgba(60,190,235,.30)); } .sog-tagline{ margin:0 0 26px; color: rgba(198,226,245,.72) !important; font-size: 13.5px; line-height:1.65; letter-spacing:.4px; } .sog-metricas{ display:flex; gap:26px; } .sog-metricas div{ display:flex; flex-direction:column; } .sog-metricas b{ font-size: 21px; color:#8fe6f7; font-weight:700; line-height:1.1; } .sog-metricas span{ font-size: 10.5px; text-transform:uppercase; letter-spacing:1.6px; color: rgba(170,205,230,.55); margin-top:3px; } /* ── Columna de acceso ───────────────────────────────────────────────────── */ .sog-acceso{ padding: 48px 42px; display:flex; flex-direction:column; justify-content:center; } .sog-eyebrow{ margin:0 0 6px; font-size: 10.5px; text-transform:uppercase; letter-spacing:2.6px; color: rgba(34,211,238,.80) !important; } .sog-titulo{ margin:0 0 26px; font-size: 27px; font-weight:700; color:#eaf6ff !important; letter-spacing:.3px; } .sog-pie{ margin: 20px 0 0; font-size: 11.5px; color: rgba(170,205,230,.60) !important; letter-spacing:.6px; display:flex; align-items:center; gap:8px; } .sog-punto{ width:7px; height:7px; border-radius:50%; background:#33e0a0; box-shadow:0 0 10px rgba(51,224,160,.85); animation: sogdaLatido 2.4s ease-in-out infinite; } @keyframes sogdaLatido{ 0%,100%{ opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(.8); } } /* El logotipo suelto de la regla anterior ya no aplica aquí */ .login-box .formu > .sog-panel img{ margin:0; } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 860px){ .sog-panel{ grid-template-columns: 1fr; min-height:0; } .sog-marca{ padding: 30px 28px 22px; border-right:none; border-bottom:1px solid rgba(120,215,240,.14); align-items:center; text-align:center; } .sog-marca::after{ top:auto; bottom:-1px; left:18%; right:18%; width:auto; height:1px; background: linear-gradient(90deg, transparent, rgba(34,211,238,.75), transparent); } .sog-emblema{ width:104px; height:104px; margin-bottom:18px; } .sog-emblema img{ width:72px; } .sog-wordmark{ font-size:36px; letter-spacing:7px; } .sog-metricas{ justify-content:center; } .sog-acceso{ padding: 30px 26px 34px; } } @media (max-width: 420px){ .sog-wordmark{ font-size:31px; letter-spacing:5px; } .sog-tagline{ font-size:12.5px; } } /*═════════════════════════════════════════════════════════════════════════════ ACCESO · ACABADO FINO ═════════════════════════════════════════════════════════════════════════════*/ /* ── Iconos de los campos ──────────────────────────────────────────────────── El candado y el ojo se solapaban en el borde derecho. Se separan y se igualan de color; el texto deja hueco para no pasar por debajo. */ .login-box .formu .form-control-feedback{ right: 14px !important; width: auto !important; color: rgba(120,205,235,.85) !important; pointer-events: none; } .login-box .formu #txtUse{ padding-right: 46px !important; } .login-box .formu #txtPass{ padding-right: 76px !important; } .login-box .formu #toggle-password{ right: 46px !important; top: 50% !important; transform: translateY(-50%); padding: 4px 6px !important; line-height: 1; color: rgba(120,205,235,.62); transition: color .16s ease; } .login-box .formu #toggle-password:hover{ color:#22d3ee; } .login-box .formu #toggle-password:focus{ outline:none; color:#22d3ee; } /* Separador tenue entre el ojo y el candado */ .login-box .formu .input-container::after{ content:""; position:absolute; right:38px; top:12px; bottom:12px; width:1px; background: rgba(140,205,235,.20); pointer-events:none; } /* ── Grano sutil: quita el aspecto plano de los degradados ───────────────── */ #auroraSogda .grano{ position:absolute; inset:0; opacity:.05; 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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } /* ── Entrada escalonada al cargar ────────────────────────────────────────── */ @keyframes sogdaEntra{ from{ opacity:0; transform: translateY(14px); } to { opacity:1; transform: none; } } .login-box .formu{ animation: sogdaEntra .7s cubic-bezier(.22,.9,.3,1) both; } .sog-emblema { animation: sogdaEntra .6s cubic-bezier(.22,.9,.3,1) .10s both; } .sog-wordmark { animation: sogdaEntra .6s cubic-bezier(.22,.9,.3,1) .18s both; } .sog-tagline { animation: sogdaEntra .6s cubic-bezier(.22,.9,.3,1) .26s both; } .sog-metricas { animation: sogdaEntra .6s cubic-bezier(.22,.9,.3,1) .34s both; } .sog-eyebrow { animation: sogdaEntra .6s cubic-bezier(.22,.9,.3,1) .30s both; } .sog-titulo { animation: sogdaEntra .6s cubic-bezier(.22,.9,.3,1) .36s both; } .sog-acceso form { animation: sogdaEntra .6s cubic-bezier(.22,.9,.3,1) .44s both; } .sog-pie { animation: sogdaEntra .6s cubic-bezier(.22,.9,.3,1) .54s both; } /* La flotación del emblema arranca cuando termina su entrada, para que no se pisen las dos animaciones. */ .sog-emblema img{ animation-delay: .7s; } /* ── Detalles de tipografía y ritmo ──────────────────────────────────────── */ .sog-acceso .form-group{ margin-bottom: 16px; } .sog-titulo{ position: relative; padding-bottom: 14px; } .sog-titulo::after{ content:""; position:absolute; left:0; bottom:0; width:42px; height:2px; background: linear-gradient(90deg, #22d3ee, rgba(34,211,238,0)); border-radius: 2px; } /* Botón: reacción más viva */ .login-box .formu .btn-primary{ transition: filter .16s ease, transform .12s ease, box-shadow .16s ease; } .login-box .formu .btn-primary:hover{ box-shadow: 0 14px 34px rgba(18,140,175,.52), inset 0 1px 0 rgba(255,255,255,.28) !important; transform: translateY(-1px); } .login-box .formu .btn-primary:focus{ outline:none; box-shadow: 0 0 0 3px rgba(34,211,238,.30) !important; } /* Las esquinas de retícula, ajustadas al panel grande */ .login-box .formu::after{ inset: 12px; opacity:.55; } @media (prefers-reduced-motion: reduce){ .login-box .formu, .sog-emblema, .sog-wordmark, .sog-tagline, .sog-metricas, .sog-eyebrow, .sog-titulo, .sog-acceso form, .sog-pie{ animation: none !important; } }