/* ===== Layout base (coherente con otras pantallas) ===== */
.reg-wrap{
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 16px;
}

.reg-card{
  width: min(960px, 95vw);
  background: rgba(20,25,45,.82);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* ===== Encabezado ===== */
.reg-logo{
  height: 60px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

.reg-title{
  margin: 4px 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
}

/* ===== Texto introductorio ===== */
.reg-intro{
  max-width: 820px;
  width: 100%;
  color: var(--muted);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;               /* separación uniforme entre párrafos */
}

.reg-intro p{
  margin: 0;              /* evitamos acumulación de márgenes */
  line-height: 1.45;
}

/* ===== Botones principales (mismo ancho visual) ===== */
.reg-actions{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.reg-actions .btn{
  min-width: 220px;       /* igualamos ancho base */
  padding: 12px 28px;     /* altura y densidad agradables */
  justify-content: center;
}

/* ===== Botón Volver ===== */
.reg-back{
  margin-top: 26px;
  align-self: center;
  min-width: 180px;
  padding: 10px 26px;
}

/* ===== Responsive fino ===== */
@media (max-width: 540px){
  .reg-title{ font-size: 20px; }
  .reg-actions .btn{ min-width: 180px; }
}

/* === Iconos decorativos para los párrafos del bloque intro === */
.reg-intro p {
  position: relative;
  padding-left: 22px; /* deja espacio al icono */
}

.reg-intro p::before {
  content: "✦"; /* o "☑" / "⮞" / "➤" según el tono que prefieras */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-size: 14px;
  line-height: 1.4;
  text-shadow: 0 0 6px rgba(46,247,209,0.35);
  opacity: 0.9;
}

.reg-intro{
  max-width: 820px;
  width: 100%;
  color: var(--muted);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px; /* antes 8px → un poquito más de aire vertical */
}

.reg-intro p{
  margin: 0;
  line-height: 1.48;
}











/* Encabezado en línea SOLO para registrar.jsp */
.page-registrar .header-title-inline{
  display:flex;
  align-items:center;        /* centra verticalmente imagen y texto */
  justify-content:center;    /* centra horizontalmente el bloque */
  gap:10px;                  /* separación logo/texto */
  margin-top:28px;
  margin-bottom:18px;
}

.page-registrar .header-title-inline .header-logo{
  height:36px;               /* igual que tu plantilla buena */
  width:auto;
  object-fit:contain;
   transform: translateY(-2px);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

.page-registrar .header-title-inline h1{
  color:#fff;
  font-size:26px;
  font-weight:700;
  margin:0;
  line-height:1;
  text-shadow:0 0 10px rgba(0,0,0,.45);
}





.reg-card.fx-shadow {
  background: rgba(20,25,45,.82);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(0,0,0,.08),
    0 6px 18px rgba(0,0,0,.18),
    0 18px 38px rgba(0,0,0,.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 28px;
}


/* fx-shadow real en el CARD: sombra oscura + glow azul */
.reg-card.fx-shadow {
  /* mantiene la sombra oscura base */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(84, 144, 255, 0.60); /* 🔵 glow azul añadido */
}

/* opcional: si alguna regla posterior vuelve a pisar box-shadow del card */
.reg-card.fx-shadow {
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(84, 144, 255, 0.60) !important;
}