/* public_satiq/css/login.css */
/* Pantalla de login SATI-Q. Diseno portado del proyecto anterior (tarjeta sobre fondo oscuro, header rojo). */
* { margin:0; padding:0; box-sizing:border-box; }
body { background:linear-gradient(135deg,#0D0D0D 0%,#1a1a1a 50%,#0D0D0D 100%); min-height:100vh; display:flex; align-items:center; justify-content:center; font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; position:relative; overflow:hidden; }
body::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle,rgba(221,68,66,0.1) 0%,transparent 70%); animation:rotate 20s linear infinite; }
@keyframes rotate { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
.login-container { position:relative; z-index:1; width:100%; max-width:450px; padding:20px; }
.login-card { background:rgba(255,255,255,0.95); border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 40px rgba(221,68,66,0.3); overflow:hidden; backdrop-filter:blur(10px); transition:transform 0.3s ease; }
.card-header-custom { background:linear-gradient(135deg,#dd4442 0%,#C22E2B 100%); padding:40px 30px 30px; text-align:center; position:relative; overflow:hidden; }
.card-header-custom::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle,rgba(255,255,255,0.2) 0%,transparent 70%); animation:shimmer 3s ease-in-out infinite; }
@keyframes shimmer { 0%,100% { transform:translate(0,0); } 50% { transform:translate(10%,10%); } }
.card-header-custom h1 { color:white; font-size:2.5rem; font-weight:700; margin:0; text-shadow:2px 2px 4px rgba(0,0,0,0.3); position:relative; z-index:1; }
.card-header-custom p { color:rgba(255,255,255,0.95); font-size:1rem; margin:10px 0 0 0; font-weight:400; position:relative; z-index:1; }
.logo-container { display:flex; justify-content:center; align-items:center; gap:20px; margin-bottom:20px; position:relative; z-index:1; }
.logo-container a { display:inline-block; transition:transform 0.3s ease; }
.logo-container a:hover { transform:scale(1.1) rotate(5deg); }
.logo-container img { background:white; border-radius:50%; padding:10px; box-shadow:0 4px 15px rgba(0,0,0,0.2); }
.card-body-custom { padding:45px 40px; }
.welcome-text { color:#333; font-size:1.3rem; font-weight:600; margin-bottom:8px; text-align:center; }
.description-text { color:#666; font-size:0.95rem; line-height:1.6; margin-bottom:30px; text-align:center; }
.form-group { margin-bottom:20px; text-align:left; }
.form-group label { display:block; color:#333; font-size:0.9rem; font-weight:600; margin-bottom:8px; }
.form-group input { width:100%; padding:14px 16px; font-size:1rem; border:2px solid #e0e0e0; border-radius:12px; transition:border-color 0.3s ease,box-shadow 0.3s ease; outline:none; }
.form-group input:focus { border-color:#dd4442; box-shadow:0 0 0 3px rgba(221,68,66,0.15); }
.alert-error { background:#fdecea; color:#c22e2b; border:1px solid #f5c6c3; border-radius:10px; padding:12px 16px; font-size:0.9rem; margin-bottom:20px; text-align:center; }
.login-btn { background:linear-gradient(135deg,#dd4442 0%,#C22E2B 100%); color:white; border:none; padding:16px 40px; font-size:1.1rem; font-weight:600; border-radius:50px; width:100%; cursor:pointer; transition:all 0.3s ease; box-shadow:0 8px 20px rgba(221,68,66,0.4); display:flex; align-items:center; justify-content:center; gap:12px; position:relative; overflow:hidden; }
.login-btn:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(221,68,66,0.6); }
.login-btn:active { transform:translateY(-1px); }
.card-footer-custom { background:#f8f9fa; padding:20px; text-align:center; border-top:1px solid #e0e0e0; }
.card-footer-custom p { color:#666; font-size:0.85rem; margin:0; line-height:1.6; }
.card-footer-custom a { color:#dd4442; text-decoration:none; font-weight:600; transition:color 0.3s ease; }
.card-footer-custom a:hover { color:#C22E2B; text-decoration:underline; }
.animate__animated { animation-duration:1s; }
.animate__delay-1s { animation-delay:0.3s; }
@media (max-width:576px) { .login-container { padding:15px; } .card-body-custom { padding:35px 25px; } .card-header-custom h1 { font-size:2rem; } .logo-container img { width:60px; height:60px; } }