:root{
  --pf-red:#E60023;
  --pf-red2:#C91524;
  --pf-orange:#FF7A18;
  --pf-ink:#0b1220;
  --pf-muted:#6b7280;
  --pf-card:#ffffff;
  --pf-ring: rgba(230,0,35,.22);
}

*{ font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }

body.pf-auth{
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;

  background-image: url("../images/superadmin-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #0b1220;
  position: relative;
}

body.pf-auth::before{
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  z-index: 0;
}

/* El contenido del login siempre encima */
.pf-auth > *{
  position: relative;
  z-index: 1;
}

/* glass backdrop */
.pf-auth-shell{
  width: 100%;
  max-width: 520px;
  position: relative;
}

.pf-auth-shell::before{
  content:"";
  position:absolute;
  inset:-22px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 26px;
  filter: blur(0px);
  backdrop-filter: blur(10px);
  z-index:0;
}

/* Card - Glass SaaS premium */
.pf-auth-card{
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    0 20px 60px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.15) inset;
  padding: 40px 36px;
  transition: all .3s ease;
  overflow: hidden;
  animation: fadeUp .6s ease;
}

@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(20px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Header inside card */
.pf-auth-head{
  padding: 0 0 20px 0;
  text-align: center;
}

/* PedíFácil texto grande en login SuperAdmin */
.pf-brand-large{
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -.5px;
  color: inherit;
  margin-bottom: 12px;
  line-height: 1.1;
}

/* Badge (rojo PedíFácil) */
.auth-badge,
.pf-badge{
  display: inline-block;
  font-size: 12px;
  background: rgba(230,0,35,.1);
  color: #E60023;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
  margin-bottom: 16px;
}

.pf-title{
  margin: 0 0 6px 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: #111827;
  text-align: center;
}

.pf-sub{
  font-size: 14px;
  color: #6B7280;
  margin: 0;
  text-align: center;
}

@media (max-width: 420px){
  .pf-sub{ font-size: .78rem; }
}

/* Body */
.pf-auth-body{
  padding: 0 0 24px 0;
}

.pf-field{
  position: relative;
  margin-bottom: 14px;
}

.pf-icon{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 14px;
}

.pf-input{
  height: 46px;
  border-radius: 12px;
  padding: 14px 16px 14px 40px;
  border: 1px solid rgba(15,23,42,.15);
  background: rgba(255,255,255,.95);
  transition: all .2s ease;
}

.pf-input:focus{
  border-color: rgba(230,0,35,.6);
  box-shadow: 0 0 0 4px rgba(230,0,35,.15);
}

.pf-eye{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #6b7280;
}

/* Botón rojo PedíFácil (mismo que Admin) */
.pf-btn{
  height: 46px;
  border-radius: 12px;
  border: 0;
  font-weight: 600;
  color: #fff;
  width: 100%;
  padding: 14px;
  background: linear-gradient(90deg, #E60023, #C91524);
  box-shadow: 0 8px 20px rgba(230,0,35,.35);
  transition: all .25s ease;
}

.pf-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(230,0,35,.45);
}
.pf-btn:active{ transform: translateY(0); }

/* footer */
.pf-auth-foot{
  padding: 14px 26px 20px 26px;
  border-top: 1px solid rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  color: #6b7280;
  font-size: .85rem;
}

.pf-brand-mini{
  font-weight: 800;
  color: #111827;
}
.pf-brand-mini span{
  font-weight: 700;
  color: #E60023;
}

/* Resaltar crédito SystemCenter */
.pf-credit{
  color: rgba(255,255,255,.95) !important;
  font-weight: 700;
}
.pf-systemcenter{
  font-weight: 800;
  color: #ffffff !important;
  text-shadow: none !important;
}

/* animation */
.pf-pop{
  animation: pfPop .35s ease-out both;
}
@keyframes pfPop{
  from{ opacity:0; transform: translateY(10px) scale(.99); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* ==========================
   PedíFácil SuperAdmin Login - Glass Corporate
   (pegar al final de superadmin-auth.css)
========================== */

body.pf-auth{
  background-image: url("../images/superadmin-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #0b1220;
  position: relative;
}

body.pf-auth::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  z-index: 0;
}

.pf-auth > *{ position: relative; z-index: 1; }

.pf-auth-card{
  background: rgba(255,255,255,.12) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 20px !important;
  box-shadow:
    0 10px 40px rgba(0,0,0,.45) !important,
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Textos e inputs (consistencia glass) */
.pf-auth-card .pf-brand-large{
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,.98) !important;
}
.pf-auth-card h1, .pf-auth-card h2, .pf-auth-card h3, .pf-auth-card .pf-title{
  color: rgba(255,255,255,.95) !important;
}
.pf-auth-card p, .pf-auth-card small, .pf-auth-card label{
  color: rgba(255,255,255,.72) !important;
}
.pf-auth-card .text-muted{
  color: rgba(255,255,255,.70) !important;
}
.pf-auth-card input[type="text"],
.pf-auth-card input[type="email"],
.pf-auth-card input[type="password"]{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
}
.pf-auth-card input::placeholder{ color: rgba(255,255,255,.55) !important; }
.pf-auth-card input:focus{
  outline: none !important;
  border-color: rgba(230,0,35,.75) !important;
  background: rgba(255,255,255,.12) !important;
  box-shadow: 0 0 0 4px rgba(230,0,35,.22) !important;
}
.pf-auth-card .alert{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.85) !important;
}

/* Botón rojo PedíFácil */
.pf-auth-card .pf-btn,
.pf-auth-card button[type="submit"]{
  height: 46px !important;
  width: 100% !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  padding: 12px 16px !important;
  background: linear-gradient(135deg, #ff2d2d, #E60023) !important;
  border: 0 !important;
  box-shadow: 0 10px 24px rgba(230,0,35,.38) !important;
}

.pf-auth-card button[type="submit"]:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 32px rgba(230,0,35,.45) !important;
}
.pf-auth-card button[type="submit"]:active{
  transform: translateY(0) !important;
}