/* ---------- Variables & tipografías ---------- */
:root{
  --text:#0f172a;
  --muted:#64748b;

  /* Colores corporativos */
  --brand:#1B61AB;   /* azul principal */
  --accent:#29BDC8;  /* turquesa */

  /* Estados en tonos amables */
  --ok-bg:#ecfdf5;
  --ok-bd:#86efac;
  --ok-tx:#065f46;
  --bad-bg:#fff1f2;
  --bad-bd:#fecdd3;
  --bad-tx:#7f1d1d;
}

body{
  padding-top:0%;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;
  color:var(--text);
  /* Fondo con tus colores corporativos */
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(41,189,200,.18), transparent 60%),
    radial-gradient(900px 450px  at 110% -10%, rgba(27,97,171,.18), transparent 55%),
    radial-gradient(1100px 550px at 50% 120%, rgba(41,189,200,.12), transparent 60%),
    #f8fafc;
}

.section-title{
  font-family:"Poppins","Inter",Arial,sans-serif;
  font-weight:800;
  letter-spacing:.4px;
  color:var(--brand);
  font-size:1.9rem;            /* ↑ tamaño del título */
  margin: 0 0 .5rem;
}

/* ---------- Layout ---------- */
.contenedor{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:97vh;
  position:relative;
}

.screen__background{
  position:absolute;
  inset:0;
  z-index:0;
  clip-path: inset(0 0 0 0);
}

/* Formas decorativas (gradientes con tus colores) */
.screen__background__shape4,
.screen__background__shape1{
  position:fixed;
  transform:rotate(35deg);
  border-radius:100px;
}

.shape4{
  height:112%;
  width:42%;
  top:-24%;
  right:-2%;
  background: linear-gradient(180deg, #e6f7fa, #e9f2fb); /* claro turquesa -> claro azul */
}

.shape1{
  height:150%;
  width:39%;
  top:-58%;
  left:75%;
  background: linear-gradient(180deg, #d7eefb, #d9f6f8); /* claro azul -> claro turquesa */
}

.cert{
  display:flex;
  position:relative;
  z-index:1;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
}

.blq{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.75rem;
  width:100%;
}

/* ---------- Tarjeta (más grande) ---------- */
.form-card{
  display:grid;
  gap:1.1em;
  /* ancho adaptable y más grande en desktop */
  width:clamp(320px, 78vw, 820px);
  padding:22px;                 /* ↑ padding */
  border-radius:18px;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:
    0 16px 40px rgba(15,23,42,.08),
    0 3px 10px rgba(15,23,42,.05);
}

.row-form{
  display:flex;
  align-items:center;
  padding:.8rem .25rem;         /* ↑ alto de fila */
}

.row-form + .row-form{
  border-top:1px dashed rgba(2,6,23,.06);
}

.col-w{
  width:270px;                  /* ↑ ancho columna etiqueta */
  max-width:45%;
  font-weight:800;
  font-size:1.15rem;            /* ↑ tamaño etiqueta */
  color:var(--muted);
}

.col-info{
  text-align:center;
  width:100%;
  font-size:1.15rem;            /* ↑ tamaño contenido */
  font-weight:700;
  color:var(--text);
}

/* ---------- Estados (amables) ---------- */
.col-info.vigente,
.col-info.vencido{
  border-radius:12px;
  border:2px solid transparent;
  padding:.5rem .7rem;          /* ↑ padding */
  max-width:300px;              /* ↑ ancho pill */
  margin-inline:auto;
}

.col-info.vigente{
  background:var(--ok-bg);
  border-color:var(--ok-bd);
}

.col-info.vencido{
  background:var(--bad-bg);
  border-color:var(--bad-bd);
}

.estado-text{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  font-family:"Poppins","Inter",Arial,sans-serif;
  font-weight:800;
  letter-spacing:.6px;
  font-size:1.1rem;             /* ↑ tamaño estado */
}

.col-info.vigente .estado-text{ color:var(--ok-tx); }
.col-info.vencido .estado-text{ color:var(--bad-tx); }

.estado-text::before{
  content:"";
  width:12px;
  height:12px;
  border-radius:999px;
  display:inline-block;
}

.col-info.vigente .estado-text::before{
  background:#10b981;
  box-shadow:0 0 0 3px #a7f3d0;
}

.col-info.vencido .estado-text::before{
  background:#f43f5e;
  box-shadow:0 0 0 3px #fecdd3;
}

/* Imagen auxiliar (si se usa) */
.login_img{
  object-fit:cover;
  position:absolute;
  margin-right:250px;
}

/* ---------- Responsivo ---------- */
@media (max-width:640px){
  .col-w{ width:42%; font-size:1.05rem; }
  .col-info{ font-size:1.05rem; font-weight:600; }
  .estado-text{ font-size:1rem; }
}