@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600;700&display=swap');

body.itec-main-login { background: #050505 !important; font-family: 'Barlow', Arial, sans-serif; }
body.itec-main-login .root { min-height: 100%; }
body.itec-main-login main { display: flex !important; min-height: 100vh !important; background: #070707 !important; }
body.itec-main-login main > div:first-child {
  position: relative !important; display: flex !important; width: 53% !important; min-width: 420px !important;
  overflow: hidden !important; background: radial-gradient(circle at 40% 62%, rgba(220, 35, 35, .16), transparent 22%), #080808 !important;
}
body.itec-main-login main > div:first-child::before {
  content: ''; position: absolute; inset: 0; opacity: .72;
  background-image: linear-gradient(rgba(210,35,35,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(210,35,35,.14) 1px, transparent 1px);
  background-size: 28px 28px; mask-image: radial-gradient(ellipse at 42% 50%, #000 5%, transparent 72%);
}
body.itec-main-login main > div:first-child::after {
  content: ''; position: absolute; left: 15%; top: 22%; width: 55%; height: 57%; border: 1px solid rgba(236, 51, 51, .28);
  border-radius: 48% 52% 44% 56% / 53% 42% 58% 47%; box-shadow: 80px 40px 0 -79px rgba(236, 51, 51, .4), 36px 90px 0 -35px rgba(236, 51, 51, .35), 110px 120px 0 -109px rgba(236, 51, 51, .3);
}
body.itec-main-login main > div:nth-child(2) {
  flex: 1 !important; min-height: 100vh !important; background: linear-gradient(145deg, #090909, #060606) !important;
  box-shadow: none !important; padding: 64px 10% !important;
}
body.itec-main-login main > div:nth-child(2) > form { max-width: 460px !important; padding: 32px !important; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); box-shadow: 0 24px 70px rgba(0,0,0,.4); }
body.itec-main-login .itec-main-brand { position: relative; z-index: 2; max-width: 370px; margin: auto; text-align: center; }
body.itec-main-login .itec-main-brand img { width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 12px 24px rgba(220,35,35,.25)); }
body.itec-main-login .itec-main-brand h1 { margin: 16px 0 8px; color: #fff; font: 800 38px/1 'Barlow Condensed', sans-serif; letter-spacing: .02em; }
body.itec-main-login .itec-main-brand h1 span { color: #df2727; }
body.itec-main-login .itec-main-brand p { margin: 0; color: rgba(255,255,255,.55); font-size: 16px; line-height: 1.55; }
body.itec-main-login .itec-main-title { margin: 0 0 28px; text-align: center; color: white; font: 800 34px/1 'Barlow Condensed', sans-serif; letter-spacing: .03em; text-transform: uppercase; }
body.itec-main-login .itec-main-title::after { content: 'Acceso seguro a tu centro de monitoreo'; display: block; margin-top: 10px; color: rgba(255,255,255,.46); font: 400 13px 'Barlow', sans-serif; letter-spacing: 0; text-transform: none; }
body.itec-main-login .MuiTextField-root .MuiOutlinedInput-root { color: #fff !important; background: rgba(0,0,0,.28); border-radius: 8px; }
body.itec-main-login .MuiTextField-root .MuiOutlinedInput-notchedOutline { border-color: rgba(255,255,255,.18) !important; }
body.itec-main-login .MuiTextField-root .MuiInputLabel-root, body.itec-main-login .MuiTextField-root .MuiSvgIcon-root { color: rgba(255,255,255,.64) !important; }
body.itec-main-login .MuiTextField-root .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #e12929 !important; }
body.itec-main-login .MuiButton-containedSecondary { margin-top: 4px !important; min-height: 48px !important; border-radius: 8px !important; background: linear-gradient(90deg, #af161d, #e12a2a, #af161d) !important; box-shadow: 0 12px 28px rgba(220,38,38,.24) !important; font: 700 15px 'Barlow Condensed', sans-serif !important; letter-spacing: .12em !important; }
body.itec-main-login .MuiButton-containedSecondary:hover { filter: brightness(1.13); }
body.itec-main-login .MuiTypography-caption, body.itec-main-login .MuiLink-root { color: #ef4b4b !important; }
body.itec-main-login .MuiIconButton-root, body.itec-main-login .MuiSelect-select { color: rgba(255,255,255,.72) !important; }
body.itec-main-login .MuiInputBase-root { color: #fff !important; }
body.itec-main-login .itec-main-footer { margin: 28px 0 0; text-align: center; color: rgba(255,255,255,.34); font-size: 13px; }
@media (max-width: 899px) { body.itec-main-login main > div:first-child { display: none !important; } body.itec-main-login main > div:nth-child(2) { padding: 48px 20px !important; } body.itec-main-login main > div:nth-child(2) > form { padding: 26px 20px !important; } }