/* ===========================
   Certis Theme (no toca lógica)
   =========================== */

:root{
  --bg:#07132B;
  --bg-2:#0B1B3A;
  --surface:rgba(255,255,255,.06);
  --text:#E8F0FF;
  --muted:#AFC3E1;
  --accent:#2EF7D1;
  --accent-2:#22cbb2;
  --ok:#23D0B5;
  --warn:#FFC560;
  --err:#FF6B6B;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* Reset suave */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ====== Layout base ====== */
.header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, rgba(7,19,43,.85), rgba(7,19,43,.55));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header__inner{
  max-width:1200px; margin:0 auto; padding:14px 20px;
  display:flex; gap:24px; align-items:center; justify-content:space-between;
}
.brand{ display:flex; gap:12px; align-items:center; text-decoration:none; color:var(--text); }
.brand img{ height:34px; display:block; }
.header__nav a{
  color:var(--muted); text-decoration:none; margin:0 10px; padding:8px 6px; border-radius:10px;
}
.header__nav a:hover{ color:var(--text); background:rgba(255,255,255,.06); }

/* ====== Hero ====== */
.hero{
  position:relative; min-height:56vh; display:grid; place-items:center;
  background:
   linear-gradient(180deg, rgba(7,19,43,.6), rgba(7,19,43,.9)),
   url("../img/fondo2560nuevo2.jpg") center/cover no-repeat fixed;
}
.hero__inner{ max-width:1100px; padding:80px 20px; text-align:center; }
.hero h1{
  margin:0 0 10px; font-weight:800; letter-spacing:.2px;
  font-size:clamp(28px, 4vw, 48px);
}
.hero p{
  margin:0 auto 28px; max-width:820px; color:var(--muted); font-size:clamp(15px, 2vw, 18px);
}
.kpis{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
.kpi{
  padding:12px 16px; border-radius:999px; background:var(--surface); color:var(--muted);
  border:1px solid rgba(255,255,255,.08);
}

/* ====== Contenedor principal ====== */
.container{ max-width:1100px; margin:0 auto; padding:28px 20px; }

/* ====== Card ====== */
.card{
  background:var(--surface); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.card--pad{ padding:22px; }
.card h2{ margin:0 0 12px; font-size:22px; }

/* ====== Botones ====== */
.btn{
  --p:12px; --px:18px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:var(--p) var(--px);
  border-radius:12px; border:1px solid transparent; cursor:pointer;
  font-weight:600; letter-spacing:.2px; text-decoration:none; color:var(--text);
  background:rgba(255,255,255,.08);
  transition:.18s ease;
}
.btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.12); }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

.btn--primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #07242B;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 10px 18px;   /* ↓ antes 12px 28px */
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: auto;          /* asegura que no se estire */
  display: inline-flex; /* mantiene centrado el texto */
}

.btn--primary:hover {
  /* fondo oscuro (no usar 'background:' para no pisar el gradiente del texto) */
  background-color: #07242B;

  /* texto en gradiente animado */
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(270deg, var(--accent), var(--accent-2), var(--accent));
  background-size: 300% 300%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: gradientMove 3s ease infinite;

  /* borde en el tono del acento */
  border-color: var(--accent);
}


/* Pequeña animación del gradiente */
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Cuando haces click (active), vuelve a su estado original */
.btn--primary:active {
  transform: scale(0.98);
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #07242B;
  border-color: transparent;
}


.btn--ghost{ background:transparent; border-color:rgba(255,255,255,.16); }

/* ====== Formularios ====== */
.form{
  display:grid; gap:14px;
}
.label{ color:var(--muted); font-size:15px; margin-bottom:6px; display:block; }
.input,.select,.textarea{
  width:100%; color:var(--text); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px 14px;
  outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(46,247,209,.18);
}
.help{ color:var(--muted); font-size:13px; }

/* Estado “consultando” reutilizable para tus dos botones de búsqueda */
.is-busy{
  position:relative;
  pointer-events:none; opacity:.75;
}
.is-busy::after{
  content:""; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.45); border-top-color:transparent;
  animation:spin .7s linear infinite; margin-left:10px;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ====== Sección features ====== */
.features{
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.feature{ padding:18px; border-radius:16px; background:var(--surface); border:1px solid rgba(255,255,255,.08); }
.feature h3{ margin:0 0 8px; font-size:18px; }
.feature p{ margin:0; color:var(--muted); }

/* ====== Footer ====== */
.footer{
  margin-top:40px; border-top:1px solid rgba(255,255,255,.08);
  color:var(--muted);
}
.footer__inner{ max-width:1100px; margin:0 auto; padding:22px 20px; display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap; }
.footer a{ color:var(--muted); text-decoration:none; }
.footer a:hover{ color:var(--text); }

/* Utilidades pequeñas */
.center{ text-align:center }
.mt-20{ margin-top:10px }
.mt-30{ margin-top:30px }
.w-100{ width:100% }
.max-600{ max-width:600px; margin:0 auto; }

/* fila de formulario en una línea */
.form-row{
  display:flex;
  align-items:center;
  gap:12px;          /* espacio entre label e input */
  margin:10px 0;
}

/* label en línea con ancho fijo para alinear */
.label--inline{
  display:inline-block;
  min-width: 280px;  /* ajusta a tu gusto */
  margin:0;          /* quita margen inferior del .label base */
}

/* opcional: que el input crezca */
.form-row .input,
.form-row input[type="password"],
.form-row input[type="file"]{
  flex:1;
}

/* Centrado global del formulario */
.centered-container{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:80vh;        /* centra verticalmente */
  margin-top: 30px;
}

/* bloque interior del formulario */
.centered-form{
  background: rgba(20, 25, 45, 0.8); /* más opaco: 0.9 en lugar de var(--surface) */
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 40px 60px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  text-align: center;
  max-width: 800px;     /* << más ancho (antes solía ser ~400px) */
  width: 90%;            /* se adapta si la pantalla es más pequeña */
}

/* fila label + input */
.form-row{
  display:flex;
  align-items:center;
  justify-content:center;
  
}

/* label en línea */
.label--inline{
  color:var(--muted);
  min-width:150px;
  text-align:right;
}

/* inputs con ancho máximo controlado */
.input,
input[type="password"],
input[type="file"]{
  flex:1;
  
}


html, body { min-height: 100%; }

body.bg-certis{
  background: url('../img/fondo2560nuevo2.jpg') center / cover no-repeat fixed;
}
body.bg-certis::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(5,10,25,0); /* menos velo = más vida en la escena */
  pointer-events: none;
  z-index: 0;
}

.centered-container, header { position: relative; z-index: 1; }


#processBtn{
  width: auto;
  justify-self: center;   /* o start/end si lo quieres alineado a izq/dcha */
  padding: 12px 32px;
}



/* === Botón "Salir" elegante estilo Certis === */
.btn--exit {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 10px 28px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(46, 247, 209, 0.15);
}

/* Hover: invierte colores y acentúa el brillo */
.btn--exit:hover {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #07242B;
  border-color: transparent;
  box-shadow: 0 0 18px rgba(46, 247, 209, 0.4);
  transform: translateY(-1px);
}

/* Active: ligera presión visual */
.btn--exit:active {
  transform: scale(0.98);
  box-shadow: 0 0 8px rgba(46, 247, 209, 0.2);
}

/* Encabezado con logo + título en línea */
.reg-head{
  display:flex;
  align-items:center;         /* centra verticalmente imagen y texto */
  gap:12px;                   /* separación entre logo y texto */
  margin: 0 0 16px 0;         /* espacio inferior del bloque */
}

/* Logo reducido para que coincida visualmente con el tamaño del H1 */
.reg-logo{
  width: 28px;                /* ajusta si el H1 cambia de tamaño */
  height: 28px;
  object-fit: contain;
  transform: translateY(2px); /* pequeño ajuste vertical fino */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* Título blanco estilo Certis */
.reg-title{
  margin: 0;
  font-size: 26px;            /* mismo tamaño que usas en títulos grandes */
  font-weight: 700;
  color: #fff;                /* blanco */
  letter-spacing: .3px;
  line-height: 1.2;
  text-shadow: 0 0 12px rgba(0,0,0,.45);
}