/* ============================================================
   mi_css.css — Overrides de Sesión para Oracle APEX 26.1
   Aplicar vía: Session → Session Overrides → CSS File URL
   ============================================================ */

/* --- Variables personalizadas (tema) --- */
:root {
  --login-bg:            #1a1d23;
  --login-bg-image:      linear-gradient(135deg, #1a1d23 0%, #2d3142 100%);
  --login-card-bg:       rgba(255,255,255,0.08);
  --login-card-border:   rgba(255,255,255,0.12);
  --login-card-radius:   16px;
  --login-card-shadow:   0 20px 60px rgba(0,0,0,0.50);
  --login-card-inset:    inset 0 1px 0 rgba(255,255,255,0.08);

  --gradient-vibrant:   linear-gradient(135deg, #7c3aed, #4f8cff, #ec4899);
  --gradient-card-bg:   linear-gradient(135deg, rgba(124,58,237,0.10), rgba(79,140,255,0.06), rgba(236,72,153,0.08));
  --gradient-btn:       linear-gradient(135deg, #7c3aed, #ec4899);
  --gradient-btn-hover: linear-gradient(135deg, #6d28d9, #db2777);

  --login-accent:        #7c3aed;
  --login-accent-hover:  #6d28d9;
  --login-text:          #e2e4e9;
  --login-text-muted:    #9296a2;
  --login-btn-text:      #ffffff;
  --login-error:         #f87171;
  --transition-speed:    0.25s;

  --bg-grid-line:        rgba(255,255,255,0.025);
  --bg-grid-cell:        conic-gradient(from 0deg at 50% 50%,
                           rgba(124,58,237,0.06) 0deg 90deg,
                           rgba(79,140,255,0.04) 90deg 180deg,
                           rgba(236,72,153,0.06) 180deg 270deg,
                           rgba(79,140,255,0.04) 270deg 360deg);
}

/* --- Fondo: cuadrícula con degradado entre celdas --- */
body.t-PageBody--login,
body.apex-page-login {
  background:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 39px,
      var(--bg-grid-line) 39px, var(--bg-grid-line) 40px),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 39px,
      var(--bg-grid-line) 39px, var(--bg-grid-line) 40px),
    var(--bg-grid-cell) 0 0 / 80px 80px repeat,
    radial-gradient(ellipse at 18% 22%, rgba(124,58,237,0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 82% 78%, rgba(236,72,153,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 55% 28%, rgba(79,140,255,0.10) 0%, transparent 45%),
    radial-gradient(ellipse at 25% 75%, rgba(79,140,255,0.07) 0%, transparent 40%),
    linear-gradient(135deg, #0b0b14, #1a1d23, #242840) !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
}

/* --- Contenedor principal del login --- */
.t-Login-container,
.apex-login-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 2rem !important;
}

/* --- Tarjeta / región de login (glassmorphism) --- */
.t-Login-region,
.apex-login-region,
.t-Region--login {
  position: relative !important;
  background: var(--login-card-bg) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid var(--login-card-border) !important;
  border-radius: var(--login-card-radius) !important;
  box-shadow: var(--login-card-shadow), var(--login-card-inset) !important;
  padding: 2.5rem 2rem !important;
  width: 100% !important;
  max-width: 420px !important;
  overflow: hidden !important;
}

/* --- Overlay degradado vibrante del glass --- */
.t-Login-region::before,
.apex-login-region::before,
.t-Region--login::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-card-bg);
  pointer-events: none;
  border-radius: inherit;
}

/* --- Logo --- */
.t-Login-logo {
  text-align: center !important;
  margin-bottom: 1.5rem !important;
}
.t-Login-logo img {
  max-height: 60px !important;
  width: auto !important;
}

/* --- Título "Iniciar Sesión" (degradado) --- */
.t-Login-title,
.apex-login-title {
  background: var(--gradient-vibrant) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 1.8rem !important;
  letter-spacing: -0.02em !important;
}

/* --- Etiquetas de campos --- */
.t-Form-label,
.apex-item-label {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 0.35rem !important;
  background: var(--gradient-vibrant) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* --- Botón de login (degradado) --- */
.t-Button--hot,
.apex-login-submit,
#P101_LOGIN,
button.t-Button--login {
  background: var(--gradient-btn) !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--login-btn-text) !important;
  cursor: pointer !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  padding: 0.7rem 1.5rem !important;
  width: 100% !important;
  transition: transform 0.15s, box-shadow var(--transition-speed) !important;
  letter-spacing: 0.02em !important;
  background-size: 200% auto !important;
}

.t-Button--hot:hover,
.apex-login-submit:hover {
  background: var(--gradient-btn-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(124,58,237,0.35) !important;
}

.t-Button--hot:active,
.apex-login-submit:active {
  transform: scale(0.98) !important;
}

/* --- Mensajes de error / validación --- */
.t-Alert--danger,
.apex-login-error,
.t-Form-error {
  background: rgba(248,113,113,0.12) !important;
  border: 1px solid rgba(248,113,113,0.30) !important;
  border-radius: 8px !important;
  color: var(--login-error) !important;
  font-size: 0.85rem !important;
  padding: 0.6rem 1rem !important;
  margin-bottom: 1rem !important;
}

/* --- Notificación global de error --- */
.t-Alert--page {
  max-width: 420px !important;
  margin: 0 auto 1rem auto !important;
  border-radius: 8px !important;
}

/* --- Links (¿olvidaste tu contraseña?, etc.) --- */
.t-Login-links a,
.apex-login-links a {
  color: var(--login-text-muted) !important;
  font-size: 0.82rem !important;
  text-decoration: none !important;
  transition: color var(--transition-speed) !important;
}

.t-Login-links a:hover,
.apex-login-links a:hover {
  color: var(--login-accent) !important;
}

/* --- Footer de la tarjeta --- */
.t-Login-footer {
  text-align: center !important;
  margin-top: 1.5rem !important;
  color: var(--login-text-muted) !important;
  font-size: 0.75rem !important;
}

/* --- Animación de entrada suave --- */
.t-Login-region,
.apex-login-region {
  animation: loginFadeIn 0.6s ease-out !important;
}

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

/* --- Responsive: pantallas pequeñas --- */
@media (max-width: 480px) {
  .t-Login-region,
  .apex-login-region {
    padding: 2rem 1.2rem !important;
    border-radius: 12px !important;
  }
  .t-Login-title,
  .apex-login-title {
    font-size: 1.3rem !important;
  }
}