/* ARCHIVO: recursos/myl_css/myl_portada.css
PROPÓSITO: Estilos galácticos transparentes para la portada principal y pantalla de Login con alineación milimétrica de inputs/botones, tipografía robótica biselada y elementos flotantes.
MYL TEAM - PROYECTO: GLCHILE (MOLY ERP - GESTION INTEGRAL DE EMPRESA AUTOMOTRIZ).
AMBITO: Sistema / CAPA: Estilos.
ACTUALIZACIONES:
01. [13/08/2026] - 16:10: Creación inicial del CSS de portada.
02. [13/08/2026] - 16:30: Eliminación de bordes circulares, adición de resplandor neón detrás de imágenes y tipografía espacial en slogan.
03. [13/08/2026] - 16:35: Corrección de ruta de fondo a recursos/myl_img/myl_galaxia.webp.
04. [13/08/2026] - 16:40: Adición de animación de rotación galáctica, escala de imágenes a 90px y ampliación de rango de movimiento espacial.
05. [13/08/2026] - 16:50: Eliminación de fondos de header/footer (transparencia total), adición de fuente robótica tipo 'Electrolize'/'Orbitron' con efecto metálico/biselado.
06. [13/08/2026] - 17:20: Adición de estilos glassmorphism para tarjeta de login flotante galáctica.
07. [13/08/2026] - 17:35: Estructura flexbox para emblemas simétricos (myl_logo.webp y myl_nexus.webp) en cabecera de login.
08. [13/08/2026] - 17:45: Corrección de alineación simétrica perfecta (box-sizing: border-box) entre inputs de texto y botón de ingreso.
09. [17/08/2026] - 14:40: Eliminación total del desenfoque blur y fondo rgba en #myl_header_principal para lograr transparencia absoluta por [[Cherry]].
10. [17/08/2026] - 14:45: Slogan duplicado de tamaño en color plateado metálico y botón ENTRAR en verde neón de alto impacto por [[Cherry]].
11. [17/08/2026] - 16:55: Refactorización a formato de línea única por selector, cero CSS inline y adaptación de tarjeta de login glassmorphism por [[Cherry]].
12. [17/08/2026] - 17:45: Ajuste de flexbox flex-column, text-decoration none y restauracion de animaciones para etiquetas a.myl_tarjeta_planeta por [[Cherry]].
*/
@import url('https://fonts.googleapis.com/css2?family=Electrolize&family=Orbitron:wght@700;900&display=swap');

/* --- 1. Estructura General y Fondo Galáctico Animado --- */
body#myl_portada_body { margin: 0; padding: 0; background-color: var(--paleta-negro, #000000); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--paleta-blanco, #ffffff); overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; position: relative; }
div#myl_bg_galaxia_animada { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; background-image: radial-gradient(circle at center, rgba(15, 10, 45, 0.1) 0%, rgba(2, 2, 8, 0.8) 85%), url('../myl_img/myl_galaxia.webp'); background-size: cover; background-position: center; animation: myl_rotacion_galaxia 180s linear infinite; z-index: 0; pointer-events: none; }
canvas#myl_canvas_estrellas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* --- 2. Encabezado / Header Transparente Flotante (Sin Blur / Cero Fondo) --- */
#myl_header_principal { width: 100%; box-sizing: border-box; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 25px; position: absolute; top: 0; left: 0; z-index: 1000; background: transparent; backdrop-filter: none; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
#myl_header_marca { display: flex; align-items: center; gap: 12px; justify-self: start; }
#myl_header_logo { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.7)); }
#myl_header_datos_empresa { display: flex; flex-direction: column; }
#myl_header_empresa_nombre { font-family: 'Orbitron', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--paleta-blanco, #ffffff); letter-spacing: 0.5px; line-height: 1.2; }
#myl_header_empresa_rut { font-size: 0.72rem; color: var(--paleta-plata, #c0c0c0); }

/* Slogan Estilo ROBOT Biselado Metálico Plateado */
#myl_header_slogan_contenedor { text-align: center; justify-self: center; padding: 0 15px; }
#myl_header_slogan_texto { margin: 0; font-family: 'Electrolize', 'Orbitron', sans-serif; font-size: 1.85rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; background: linear-gradient(180deg, #ffffff 0%, #c0c0c0 45%, #4a4a4a 50%, #e0e0e0 85%, #ffffff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 2px #000000) drop-shadow(0 0 12px rgba(255, 255, 255, 0.6)); display: inline-block; padding: 2px 10px; }

/* Acciones del Header con Botón Verde Neón Resaltado */
.myl-header-acciones { display: flex; align-items: center; gap: 10px; justify-self: end; }
.myl-btn-header { padding: 9px 22px; border-radius: 6px; font-size: 0.88rem; font-weight: 800; text-decoration: none; white-space: nowrap; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-family: 'Orbitron', sans-serif; letter-spacing: 1.5px; }
.myl-btn-login { background: #00e676; color: #020208; border: 1px solid #00ff73; box-shadow: 0 0 15px rgba(0, 230, 118, 0.6); }
.myl-btn-login:hover { background: #00ff73; color: var(--paleta-negro, #000000); border-color: #00ff73; box-shadow: 0 0 25px rgba(0, 255, 115, 0.95); transform: translateY(-2px) scale(1.03); }
.myl-btn-panel { background: rgba(44, 44, 48, 0.8); color: var(--paleta-blanco, #ffffff); border: 1px solid rgba(192, 192, 192, 0.4); }
.myl-btn-panel:hover { background: var(--paleta-oro, #b39105); color: #0a0a0c; border-color: var(--paleta-oro, #b39105); }
.myl-btn-logout { background: rgba(202, 12, 12, 0.8); color: var(--paleta-blanco, #ffffff); border: 1px solid #ca0c0c; }
.myl-btn-logout:hover { background: #ca0c0c; box-shadow: 0 0 8px rgba(202, 12, 12, 0.6); }

/* Responsive para pantallas móviles */
@media (max-width: 768px) { #myl_header_slogan_contenedor { display: none; } #myl_header_principal { grid-template-columns: 1fr 1fr; } }

/* --- 3. Área de Trabajo Central (Galaxia de Categorías) --- */
main#myl_main_area_trabajo { flex: 1; display: flex; justify-content: center; align-items: center; padding: 20px; position: relative; z-index: 5; }
div#myl_contenedor_planetas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 70px; max-width: 1300px; width: 100%; }

/* Planetas Flotantes Hipervinculados con Flexbox y Movimiento */
.myl_tarjeta_planeta { background: transparent; border: none; width: 160px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 10px; cursor: pointer; text-decoration: none; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: myl_planeta_flotante_1 8s ease-in-out infinite alternate; box-sizing: border-box; }
.myl_tarjeta_planeta:nth-child(2) { animation-name: myl_planeta_flotante_2; animation-duration: 10s; }
.myl_tarjeta_planeta:nth-child(3) { animation-name: myl_planeta_flotante_3; animation-duration: 9s; }
.myl_tarjeta_planeta:nth-child(4) { animation-name: myl_planeta_flotante_4; animation-duration: 11s; }
.myl_tarjeta_planeta:nth-child(5) { animation-name: myl_planeta_flotante_1; animation-duration: 9.5s; }
.myl_tarjeta_planeta:nth-child(6) { animation-name: myl_planeta_flotante_3; animation-duration: 10.5s; }
.myl_tarjeta_planeta:nth-child(7) { animation-name: myl_planeta_flotante_2; animation-duration: 8.5s; }
.myl_tarjeta_planeta:hover { transform: scale(1.25) translateY(-10px); z-index: 10; }

/* Imagen Reducida (90px) con Brillo/Glow Trasero */
img.myl_planeta_imagen { width: 90px; height: 90px; object-fit: contain; margin-bottom: 12px; filter: drop-shadow(0 0 12px rgba(0, 200, 255, 0.6)) drop-shadow(0 0 25px rgba(138, 43, 226, 0.4)); transition: filter 0.4s ease; display: block; margin-left: auto; margin-right: auto; }
.myl_tarjeta_planeta:hover img.myl_planeta_imagen { filter: drop-shadow(0 0 22px rgba(0, 240, 255, 0.95)) drop-shadow(0 0 40px rgba(212, 175, 55, 0.8)); }

span.myl_planeta_nombre { font-family: 'Orbitron', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--paleta-blanco, #ffffff); text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 2px 6px rgba(0,0,0,0.9); text-transform: uppercase; letter-spacing: 1px; display: block; text-align: center; width: 100%; }

/* --- 4. Formulario de Login Flotante Cósmico (Glassmorphism) --- */
div.myl-login-card { background: rgba(10, 15, 30, 0.75); border: 1px solid rgba(0, 240, 255, 0.3); border-radius: 12px; width: 100%; max-width: 440px; padding: 35px 30px; box-shadow: 0 0 35px rgba(0, 240, 255, 0.25), inset 0 0 15px rgba(0, 240, 255, 0.1); backdrop-filter: blur(12px); position: relative; z-index: 10; box-sizing: border-box; }
div.myl-login-header { text-align: center; margin-bottom: 22px; }
div.myl-login-header-flex { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 8px; }
div.myl-login-title-box { flex-grow: 1; text-align: center; }
img.myl-login-emblema-izq { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.8)); }
img.myl-login-emblema-der { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.8)); }
div.myl-login-brand { font-family: 'Orbitron', sans-serif; font-size: 1.6rem; font-weight: 900; color: #00f0ff; letter-spacing: 2px; text-shadow: 0 0 12px rgba(0, 240, 255, 0.8); }
div.myl-login-subtitle { font-size: 0.88rem; color: var(--paleta-oro, #b39105); letter-spacing: 1px; font-weight: 600; margin-top: 4px; }
div.myl-alert-danger { background-color: rgba(248, 81, 73, 0.2); border: 1px solid #f85149; color: #ff7b72; padding: 12px; border-radius: 6px; font-size: 0.88rem; margin-bottom: 20px; text-align: center; box-sizing: border-box; }
div.myl-form-group { margin-bottom: 18px; text-align: left; width: 100%; box-sizing: border-box; }
label.myl-form-label { display: block; font-size: 0.82rem; color: var(--paleta-blanco, #ffffff); margin-bottom: 6px; font-weight: 600; font-family: 'Orbitron', sans-serif; letter-spacing: 1px; }
input.myl-form-input { display: block; width: 100%; background-color: rgba(3, 5, 15, 0.85); border: 1px solid rgba(100, 149, 237, 0.4); border-radius: 6px; padding: 12px; color: var(--paleta-blanco, #ffffff); font-size: 0.95rem; outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; box-sizing: border-box; }
input.myl-form-input:focus { border-color: #00f0ff; box-shadow: 0 0 12px rgba(0, 240, 255, 0.6); }
button.myl-btn-submit { display: block; width: 100%; background-color: #00e676; color: #020208; border: 1px solid #00ff73; padding: 12px; border-radius: 6px; font-size: 1rem; font-weight: 800; cursor: pointer; transition: all 0.3s ease; margin-top: 10px; font-family: 'Orbitron', sans-serif; letter-spacing: 2px; box-shadow: 0 0 18px rgba(0, 230, 118, 0.7); box-sizing: border-box; }
button.myl-btn-submit:hover { background-color: #00ff73; box-shadow: 0 0 28px rgba(0, 255, 115, 1); transform: translateY(-2px); }
div.myl-login-footer { margin-top: 20px; text-align: center; font-size: 0.85rem; }
a.myl-login-link { color: #6495ed; text-decoration: none; font-weight: 600; transition: color 0.3s ease; }
a.myl-login-link:hover { color: #00f0ff; text-shadow: 0 0 8px rgba(0, 240, 255, 0.8); }

/* --- 5. Pie de Página Transparente Flotante (myl_footer_portada.php) --- */
footer#myl_footer_portada { background: transparent; padding: 15px 35px; position: relative; z-index: 10; font-size: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
div#myl_footer_portada_flex { display: flex; justify-content: space-between; align-items: center; width: 100%; flex-wrap: wrap; gap: 15px; }
span#myl_footer_portada_text_left, span#myl_footer_portada_text_right { color: #cccccc; text-shadow: 0 1px 4px rgba(0,0,0,0.9); font-family: 'Segoe UI', sans-serif; }
a#myl_footer_portada_dev_link { color: #6495ed; text-decoration: none; font-weight: 600; transition: color 0.3s; }
a#myl_footer_portada_dev_link:hover { color: #00f0ff; text-shadow: 0 0 8px rgba(0, 240, 255, 0.8); }
.myl-footer-version-gap { margin-left: 15px; display: inline-block; }
a#myl_footer_portada_version_link { color: var(--paleta-oro, #d4af37); text-decoration: none; font-weight: 700; margin-left: 4px; }
a#myl_footer_portada_version_link:hover { color: var(--paleta-blanco, #ffffff); text-shadow: 0 0 8px rgba(212, 175, 55, 0.8); }

/* --- 6. Animaciones Keyframes --- */
@keyframes myl_rotacion_galaxia { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.08); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes myl_planeta_flotante_1 { 0% { transform: translate(0px, 0px) rotate(0deg); } 50% { transform: translate(-15px, -25px) rotate(3deg); } 100% { transform: translate(15px, 20px) rotate(-3deg); } }
@keyframes myl_planeta_flotante_2 { 0% { transform: translate(0px, 0px) rotate(0deg); } 50% { transform: translate(20px, -30px) rotate(-4deg); } 100% { transform: translate(-10px, 25px) rotate(2deg); } }
@keyframes myl_planeta_flotante_3 { 0% { transform: translate(0px, 0px) rotate(0deg); } 50% { transform: translate(-25px, 20px) rotate(4deg); } 100% { transform: translate(20px, -20px) rotate(-2deg); } }
@keyframes myl_planeta_flotante_4 { 0% { transform: translate(0px, 0px) rotate(0deg); } 50% { transform: translate(18px, 25px) rotate(-3deg); } 100% { transform: translate(-18px, -25px) rotate(3deg); } }