/* ======================================================================== * meduzAI — Theme login (dark, brandboard 2026-06-09). * * Aplica al sistema personal, admin y login STX. * Reemplaza visualmente el theme V4 Stripe SOLO en pantallas que envuelven * su contenido en
, sin tocar el resto del ERP. * * Paleta brandboard: * Abismo #0F172A fondo principal * Superficie #1E293B card / superficies * Teal #22D3C5 primario inicio * Indigo #6366F1 primario fin * Menta #34D399 acento * Niebla #94A3B8 texto secundario * Hueso #F8FAFC texto primario sobre oscuro * * Tipografia: Space Grotesk (display) + Inter (UI). Se cargan via Google * Fonts directamente desde el section PHP. * ===================================================================== */ :root{ --m-abismo: #0F172A; --m-superficie: #1E293B; --m-superficie-2:#26334a; --m-teal: #22D3C5; --m-indigo: #6366F1; --m-menta: #34D399; --m-niebla: #94A3B8; --m-hueso: #F8FAFC; --m-danger: #F87171; --m-warning: #FBBF24; } /* Body full-viewport dark con glow teal/indigo radial. */ body.main-v2:has(.stx-login-page){ background: radial-gradient(900px 600px at 20% -10%, rgba(34,211,197,.18), transparent 60%), radial-gradient(900px 600px at 110% 110%, rgba(99,102,241,.20), transparent 55%), var(--m-abismo) !important; color:var(--m-hueso); min-height:100vh; margin:0; } /* Container principal */ .stx-login-page{ display:flex;flex-direction:column;align-items:center;justify-content:flex-start; min-height:100vh;width:100%;padding:64px 20px 40px;box-sizing:border-box; font-family:'Inter','Inter Variable',-apple-system,BlinkMacSystemFont,sans-serif; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; letter-spacing:-.005em;color:var(--m-hueso); } .stx-login-page > br{display:none} /* ========= Brand block (logo + wordmark + tagline) ========= Reemplaza .stx-login-brand del theme V4. Se renderiza desde el PHP con estructura nueva: la clase legacy .stx-login-brand-mark deja de aplicar (la suplanta .meduzai-mark). */ .meduzai-brand{ display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:28px; } .meduzai-mark{ width:74px;height:74px;border-radius:18px;background:var(--m-superficie); display:flex;align-items:center;justify-content:center; box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 12px 28px rgba(34,211,197,.18), 0 6px 16px rgba(99,102,241,.18); } .meduzai-mark svg{width:54px;height:54px;display:block} .meduzai-wordmark{ font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:34px; line-height:1;letter-spacing:-.02em;color:var(--m-hueso); } .meduzai-wordmark .ai{ background:linear-gradient(135deg,var(--m-teal),var(--m-indigo)); -webkit-background-clip:text;background-clip:text;color:transparent; } .meduzai-tagline{ margin:0;font-size:11px;font-weight:600;letter-spacing:.32em; color:var(--m-niebla);text-transform:uppercase; } .meduzai-tagline .sep{color:var(--m-teal);margin:0 .35em} /* ========= Card del form ========= */ .stx-login-card{ width:100%;max-width:420px; background:var(--m-superficie); border:1px solid rgba(255,255,255,.06); border-radius:16px; box-shadow: 0 20px 50px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.04) inset; overflow:hidden; } .stx-login-card-header{padding:28px 30px 8px;text-align:left} .stx-login-title{ margin:0 0 6px;font-family:'Space Grotesk',sans-serif;font-weight:700; font-size:22px;letter-spacing:-.02em;color:var(--m-hueso);line-height:1.3; } .stx-login-subtitle{ margin:0;font-size:13.5px;color:var(--m-niebla);line-height:1.5;font-weight:400; } .stx-login-card-body{padding:22px 30px 26px} /* ========= Banner de errores TOP_ERRORS dentro de la card ========= */ .stx-login-card-body .TOP_ERRORS, .stx-login-card-body .ERROR_MESSAGE, .stx-login-card-body .ERROR_BOX{ background:rgba(248,113,113,.10); border:1px solid rgba(248,113,113,.45); color:#FCA5A5; border-radius:10px;padding:10px 14px;margin-bottom:16px; font-size:13px;font-weight:500; } /* ========= Inputs ========= */ .stx-login-field{margin-bottom:14px} .stx-login-field-label{ display:block;margin:0 0 6px;font-size:12.5px;font-weight:600; color:var(--m-niebla);letter-spacing:.01em; } .stx-login-card .TEXTBOX, .stx-login-card input[type="text"], .stx-login-card input[type="password"], .stx-login-card input[type="email"]{ display:block !important;width:100% !important;box-sizing:border-box !important; height:42px !important;padding:0 14px !important; background:var(--m-superficie-2) !important; color:var(--m-hueso) !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:10px !important; font-family:inherit !important;font-size:14px !important;font-weight:500 !important; box-shadow:none !important; transition:border-color 120ms,box-shadow 120ms,background 120ms !important; outline:none !important; } .stx-login-card .TEXTBOX::placeholder{color:#64748B} .stx-login-card .TEXTBOX:hover, .stx-login-card input[type="text"]:hover, .stx-login-card input[type="password"]:hover{ border-color:rgba(255,255,255,.14) !important; } .stx-login-card .TEXTBOX:focus, .stx-login-card input[type="text"]:focus, .stx-login-card input[type="password"]:focus{ border-color:var(--m-teal) !important; box-shadow:0 0 0 3px rgba(34,211,197,.18) !important; background:#222e44 !important; } /* Autofill: Chrome pinta amarillo fuerte por default, sobrescribir. */ .stx-login-card input:-webkit-autofill, .stx-login-card input:-webkit-autofill:hover, .stx-login-card input:-webkit-autofill:focus{ -webkit-text-fill-color:var(--m-hueso) !important; -webkit-box-shadow:0 0 0 1000px var(--m-superficie-2) inset !important; caret-color:var(--m-hueso) !important; transition:background-color 9999s ease-in-out 0s; } /* ========= Botón Ingresar ========= * theme_v4_stripe.css:6509 tiene un selector "killer" con 17 :not() y * !important que pinta background:none a cualquier BUTTON_ no listado: * body.main-v2 [class^="BUTTON_"]:not(.BUTTON_OK)...(17x) * { background-image: none !important; } * Specificity (0,19,1) e !important. Para que el gradient meduzai gane, * necesitamos specificity mayor: agregamos .stx-login-card al chain y * mantenemos la lista de :not() -> (0,20,1) e !important. */ .stx-login-actions{margin-top:6px} body.main-v2 .stx-login-card [class^="BUTTON_"]:not(.BUTTON_OK):not(.BUTTON_NOK):not(.BUTTON_SMALL):not(.BUTTON_EXCEL):not(.BUTTON_PDF):not(.BUTTON_TXT):not(.BUTTON_CSV):not(.BUTTON_XLS):not(.BUTTON_PRINT):not(.BUTTON_BACK):not(.BUTTON_SAVE):not(.BUTTON_GUARDAR):not(.BUTTON_GUARDAR_IMPRIMIR):not(.BUTTON_EDIT):not(.BUTTON_DEFAULT):not(.BUTTON_CONTINUAR_CAMPOS_EXTRAS):not(.BUTTON_ADD_FDP){ display:block !important;width:100% !important;height:44px !important;padding:0 16px !important; background:linear-gradient(135deg,var(--m-teal) 0%,var(--m-indigo) 100%) !important; background-image:linear-gradient(135deg,var(--m-teal) 0%,var(--m-indigo) 100%) !important; background-color:transparent !important; color:#0B1325 !important; font-family:'Space Grotesk',sans-serif !important;font-weight:700 !important; font-size:14.5px !important;letter-spacing:.01em !important; border:none !important;border-radius:10px !important;cursor:pointer !important; box-shadow: 0 6px 18px rgba(34,211,197,.30), 0 4px 10px rgba(99,102,241,.30), 0 1px 0 rgba(255,255,255,.18) inset !important; transition:transform 80ms,filter 120ms,box-shadow 120ms !important; } body.main-v2 .stx-login-card [class^="BUTTON_"]:not(.BUTTON_OK):not(.BUTTON_NOK):not(.BUTTON_SMALL):not(.BUTTON_EXCEL):not(.BUTTON_PDF):not(.BUTTON_TXT):not(.BUTTON_CSV):not(.BUTTON_XLS):not(.BUTTON_PRINT):not(.BUTTON_BACK):not(.BUTTON_SAVE):not(.BUTTON_GUARDAR):not(.BUTTON_GUARDAR_IMPRIMIR):not(.BUTTON_EDIT):not(.BUTTON_DEFAULT):not(.BUTTON_CONTINUAR_CAMPOS_EXTRAS):not(.BUTTON_ADD_FDP):hover{ filter:brightness(1.05) !important;transform:translateY(-1px) !important; } body.main-v2 .stx-login-card [class^="BUTTON_"]:not(.BUTTON_OK):not(.BUTTON_NOK):not(.BUTTON_SMALL):not(.BUTTON_EXCEL):not(.BUTTON_PDF):not(.BUTTON_TXT):not(.BUTTON_CSV):not(.BUTTON_XLS):not(.BUTTON_PRINT):not(.BUTTON_BACK):not(.BUTTON_SAVE):not(.BUTTON_GUARDAR):not(.BUTTON_GUARDAR_IMPRIMIR):not(.BUTTON_EDIT):not(.BUTTON_DEFAULT):not(.BUTTON_CONTINUAR_CAMPOS_EXTRAS):not(.BUTTON_ADD_FDP):active{ transform:translateY(0) !important;filter:brightness(.97) !important; } body.main-v2 .stx-login-card [class^="BUTTON_"]:not(.BUTTON_OK):not(.BUTTON_NOK):not(.BUTTON_SMALL):not(.BUTTON_EXCEL):not(.BUTTON_PDF):not(.BUTTON_TXT):not(.BUTTON_CSV):not(.BUTTON_XLS):not(.BUTTON_PRINT):not(.BUTTON_BACK):not(.BUTTON_SAVE):not(.BUTTON_GUARDAR):not(.BUTTON_GUARDAR_IMPRIMIR):not(.BUTTON_EDIT):not(.BUTTON_DEFAULT):not(.BUTTON_CONTINUAR_CAMPOS_EXTRAS):not(.BUTTON_ADD_FDP):focus-visible{ outline:none !important;box-shadow: 0 0 0 3px rgba(34,211,197,.30), 0 6px 18px rgba(34,211,197,.30), 0 4px 10px rgba(99,102,241,.30) !important; } /* ========= Footer card ========= */ .stx-login-card-footer{ border-top:1px solid rgba(255,255,255,.05); background:rgba(255,255,255,.015); padding:14px 30px;display:flex;justify-content:space-between;align-items:center; gap:12px;flex-wrap:wrap;font-size:13px; } .stx-login-card-footer a{ color:var(--m-teal);text-decoration:none;font-weight:600; transition:color 120ms; } .stx-login-card-footer a:hover{color:var(--m-hueso);text-decoration:none} .stx-login-card-footer .stx-login-muted{color:var(--m-niebla);font-weight:500} /* ========= Foot (debajo de la card) ========= */ .stx-login-foot{ margin-top:22px;font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:#64748B;text-align:center; } .stx-login-foot .sep{color:var(--m-teal);margin:0 .5em} /* ========= Avisos (renta expirando / sistema suspendido) ========= */ body.main-v2 .stx-login-page .mensaje{ width:100%;max-width:420px;margin:0 auto 16px;padding:10px 14px; border-radius:10px;font-size:12.5px;font-weight:500;line-height:1.45; box-sizing:border-box; } body.main-v2 .stx-login-page .mensaje p{margin:0} body.main-v2 .stx-login-page .mensaje.alerta{ background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.45);color:#FCD34D; } body.main-v2 .stx-login-page .mensaje.suspendido, body.main-v2 .stx-login-page .mensaje.varios_msg{ background:rgba(248,113,113,.10);border:1px solid rgba(248,113,113,.45);color:#FCA5A5; } /* ========= Limpiar restos del theme V4 Stripe que pintan luminoso ========= */ .stx-login-page .stx-login-brand, .stx-login-page .stx-login-brand-mark{display:none !important}