/* ============ Llave CEAD: inicio de sesión y registro ============
   Concepto: un llavero. La tarjeta es la etiqueta (con su orificio), el progreso del
   registro es la hoja de una llave cuyos dientes se cortan paso a paso, y el fondo lleva
   la estrella del escudo del CEAD. Colores: rojo de la llave + gris carbón del candado. */

.app:has(> .llave) { max-width: none; padding: 0; }
body:has(.llave) .footer { display: none; }

.llave {
  --rojo-llave: #a7201f;
  --rojo-hondo: #7d1b19;
  --carbon: #2b2b2e;
  --carbon-suave: #4a4a4f;
  --papel: #f6f1ea;
  --linea: #e4dcd2;
  --texto-suave: #6d665f;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  color: var(--carbon);
  background-color: var(--papel);
  /* Estrella del CEAD en patrón muy tenue. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='%23a7201f' fill-opacity='0.05'%3E%3Cpath d='M48 20l6 14 14-6-6 14 14 6-14 6 6 14-14-6-6 14-6-14-14 6 6-14-14-6 14-6-6-14 14 6z'/%3E%3C/g%3E%3Cpath d='M48 40l8 8-8 8-8-8z' fill='%23f6f1ea'/%3E%3C/svg%3E");
}

/* Llave gigante de contorno, decorativa. */
.llave-deco {
  position: absolute;
  width: 760px;
  left: -140px;
  bottom: -40px;
  color: var(--rojo-llave);
  opacity: .07;
  transform: rotate(-18deg);
  pointer-events: none;
}

/* ---------- Encabezado ---------- */
.llave-top {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.llave-top__marca { display: flex; align-items: center; gap: 12px; }
.llave-top__marca img { width: 38px; height: 38px; border-radius: 10px; }
.llave-marca { font-size: 20px; font-weight: 300; letter-spacing: -.3px; }
.llave-marca b {
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
  background: var(--rojo-llave);
  padding: 1px 7px 2px;
  border-radius: 6px;
  margin-left: 2px;
}
.llave-top__derecha { margin-left: auto; }
.llave-top__lema { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--texto-suave); }
.llave-top__boton {
  background: transparent;
  border: 1.5px solid var(--carbon);
  color: var(--carbon);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.llave-top__boton:hover { background: var(--carbon); color: #fff; }

/* ---------- Inicio de sesión ---------- */
.llave-escena {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 28px 64px;
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 64px;
  align-items: center;
  min-height: calc(100vh - 90px);
}

.llave-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--rojo-llave);
}
.llave-kicker::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: currentColor; }

.llave-mensaje__titulo {
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -2px;
  font-weight: 800;
  margin: 0 0 22px;
  color: var(--carbon);
}
.llave-mensaje__titulo em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--rojo-llave);
  letter-spacing: -1px;
  position: relative;
}
.llave-mensaje__texto { font-size: 18px; line-height: 1.55; color: var(--texto-suave); max-width: 500px; margin: 0 0 28px; }

.llave-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-suave); }
.llave-chips span { margin-right: 4px; }
.llave-chips b {
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--linea);
  color: var(--carbon);
  font-weight: 700;
}

/* La etiqueta del llavero */
.llave-tag {
  position: relative;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 1px 0 var(--linea), 0 24px 60px -20px rgba(60, 20, 10, .35);
}
/* Una segunda etiqueta roja asoma detrás, ligeramente girada. */
.llave-inicio .llave-tag::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 26px;
  background: var(--rojo-llave);
  transform: rotate(4deg) translate(10px, 6px);
}
.llave-tag__cabeza {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 28px 22px 28px;
  background: var(--carbon);
  color: #fff;
  border-radius: 26px 26px 0 0;
  border-bottom: 5px solid var(--rojo-llave);
}
.llave-tag__orificio {
  position: absolute;
  top: 16px;
  right: 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--papel);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45), 0 0 0 4px rgba(255, 255, 255, .12);
}
.llave-tag__logo { width: 62px; height: 62px; border-radius: 14px; background: #fff; padding: 4px; object-fit: contain; flex-shrink: 0; }
.llave-tag__titulo { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.4px; }
.llave-tag__titulo em {
  font-style: normal;
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
  background: var(--rojo-llave);
  padding: 0 8px 2px;
  border-radius: 7px;
  margin-left: 2px;
}
.llave-tag__sub { margin: 2px 0 0; font-size: 14px; color: rgba(255, 255, 255, .6); }
.llave-tag__cuerpo { padding: 26px 28px 8px; }
.llave-tag__pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 18px 28px;
  border: none;
  border-top: 1px dashed var(--linea);
  border-radius: 0 0 26px 26px;
  background: #fbf8f4;
  font-size: 14px;
  color: var(--texto-suave);
  cursor: pointer;
  text-align: left;
}
.llave-tag__pie b { color: var(--rojo-llave); white-space: nowrap; }
.llave-tag__pie:hover { background: #f5eee6; }

/* Campos */
.llave .campo label { font-size: 13px; font-weight: 700; color: var(--carbon); margin-bottom: 7px; }
.llave-form .campo.obligatorio label::after { content: " *"; color: var(--rojo-llave); }
.llave .campo input {
  padding: 13px 14px;
  font-size: 15px;
  border-radius: 12px;
  background: #fbf9f6;
  border: 1.5px solid var(--linea);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.llave .campo input:hover { border-color: #d4c9bc; }
.llave .campo input:focus { background: #fff; border-color: var(--rojo-llave); box-shadow: 0 0 0 4px rgba(167, 32, 31, .12); }
.llave .campo .ayuda { color: var(--texto-suave); }

.llave-label-fila { display: flex; justify-content: space-between; align-items: baseline; }
.llave-link-chico {
  background: none;
  border: none;
  padding: 0;
  color: var(--rojo-llave);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.llave-link-chico:hover { text-decoration: underline; }
.llave-centro { display: block; margin: 16px auto 10px; }

.btn-llave {
  width: 100%;
  padding: 14px 18px;
  font-size: 16px;
  border-radius: 12px;
  background: var(--rojo-llave);
  box-shadow: 0 8px 18px -8px rgba(167, 32, 31, .7);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.btn-llave:hover:not(:disabled) { background: var(--rojo-hondo); transform: translateY(-1px); }
.btn-llave:disabled { background: #ebe5dd; color: #a39a90; box-shadow: none; cursor: not-allowed; }
.btn-llave-contorno {
  width: 100%;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  background: #fff;
  color: var(--carbon);
  border: 1.5px solid var(--linea);
  cursor: pointer;
}
.btn-llave-contorno:hover { border-color: var(--carbon); }

.llave :focus-visible { outline: 3px solid rgba(167, 32, 31, .45); outline-offset: 2px; }

/* ---------- Registro ---------- */
.llave-registro { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 4px 28px 64px; }
.llave-salir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--texto-suave);
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
}
.llave-salir:hover { color: var(--rojo-llave); }

.llave-tag--ancha .llave-tag__cabeza { flex-wrap: wrap; gap: 18px 32px; padding: 26px 32px 22px; }
.llave-tag__encabezado { min-width: 200px; }

/* Progreso con forma de llave: cabeza redonda + hoja con 3 dientes. */
.llave-progreso {
  list-style: none;
  margin: 0 40px 0 auto;
  padding: 0;
  display: flex;
  align-items: flex-start;
  flex: 1;
  min-width: 320px;
  max-width: 560px;
}
.llave-progreso__cabeza {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  margin-top: -12px;
  border-radius: 50%;
  border: 6px solid var(--rojo-llave);
  background: var(--carbon);
}
.llave-progreso__cabeza.lista { background: var(--rojo-llave); }
.llave-diente { flex: 1; display: flex; flex-direction: column; }
.llave-diente__corte {
  position: relative;
  height: 10px;
  background: rgba(255, 255, 255, .16);
  transition: background .3s;
}
/* El diente cuelga de la hoja; cada uno tiene distinta altura, como una llave real. */
.llave-diente__corte::after {
  content: "";
  position: absolute;
  right: 18%;
  top: 100%;
  width: 18%;
  height: 9px;
  background: inherit;
  border-radius: 0 0 3px 3px;
}
.llave-diente:nth-of-type(2) .llave-diente__corte::after { height: 14px; }
.llave-diente:nth-of-type(3) .llave-diente__corte::after { height: 7px; }
.llave-diente:last-child .llave-diente__corte { border-radius: 0 6px 6px 0; }
.llave-diente.hecho .llave-diente__corte,
.llave-diente.actual .llave-diente__corte { background: var(--rojo-llave); }
.llave-diente.actual .llave-diente__corte { background: linear-gradient(90deg, var(--rojo-llave) 0 60%, rgba(255, 255, 255, .16) 60%); }
.llave-diente__texto {
  margin-top: 20px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .5);
  padding-left: 4px;
}
.llave-diente.hecho .llave-diente__texto { color: rgba(255, 255, 255, .8); }
.llave-diente.hecho .llave-diente__texto::before { content: "✓ "; color: #ff8a86; }
.llave-diente.actual .llave-diente__texto { color: #fff; }

.llave-panel { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.llave-form { padding: 32px; }
.llave-ayuda-lateral {
  margin: 24px 24px 24px 0;
  padding: 24px;
  border-radius: 18px;
  background: #fbf8f4;
  border: 1px dashed var(--linea);
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto-suave);
  align-self: start;
}
.llave-ayuda-lateral h3 { font-size: 15px; color: var(--carbon); margin: 0 0 10px; }
.llave-ayuda-lateral h3::before { content: "🔑 "; }
.llave-ayuda-lateral b { color: var(--carbon); }
.llave-ayuda-lateral ul { padding-left: 18px; margin: 0; }
.llave-ayuda-lateral li { margin-bottom: 8px; }
.llave-ayuda-lateral li::marker { color: var(--rojo-llave); }

.llave-intro { font-size: 15px; color: var(--texto-suave); margin: 0 0 16px; }

/* Selector Con FOLIO / Sin FOLIO */
.llave-opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 5px;
  border-radius: 14px;
  background: #efe8df;
  margin-bottom: 22px;
}
.llave-opcion {
  padding: 11px 10px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--texto-suave);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .3px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.llave-opcion:hover { color: var(--carbon); }
.llave-opcion.activa { background: var(--carbon); color: #fff; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); }

.llave-texto-chico { font-size: 14px; color: var(--texto-suave); margin: -6px 0 20px; }
.llave-link { background: none; border: none; padding: 0; color: var(--rojo-llave); font-weight: 700; text-decoration: underline; cursor: pointer; }

/* Captcha */
.llave-captcha {
  border: 1.5px dashed var(--linea);
  border-radius: 14px;
  padding: 14px;
  background: #fbf8f4;
  margin-bottom: 20px;
}
.llave-captcha__titulo { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.llave-captcha__fila { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.llave-captcha__img { width: 200px; max-width: 100%; height: 64px; border-radius: 10px; border: 1px solid var(--linea); background: #fff; user-select: none; }
.llave-captcha__recargar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--linea);
  background: #fff;
  color: var(--rojo-llave);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s;
}
.llave-captcha__recargar:hover { transform: rotate(90deg); border-color: var(--rojo-llave); }
.llave-captcha input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--linea);
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  background: #fff;
}
.llave-captcha input::placeholder { letter-spacing: 1px; font-weight: 400; font-size: 15px; text-transform: none; }
.llave-captcha input:focus { outline: none; border-color: var(--rojo-llave); box-shadow: 0 0 0 4px rgba(167, 32, 31, .12); }

/* Resultados sin folio */
.llave-resultados { margin-top: 18px; display: grid; gap: 10px; }
.llave-resultado {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--linea);
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
  transition: border-color .15s;
}
.llave-resultado:hover { border-color: var(--rojo-llave); }
.llave-resultado__datos { flex: 1; min-width: 0; }
.llave-resultado__nombre { font-weight: 800; overflow-wrap: anywhere; }
.llave-resultado__extra { font-size: 13px; color: var(--texto-suave); }
.llave-resultado .btn { background: var(--carbon); border-radius: 999px; }
.llave-vacio { background: var(--amarillo-bg); color: var(--amarillo); border-radius: 12px; padding: 12px 14px; font-size: 14px; }

.llave-identificado {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--verde-bg);
  color: var(--verde);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 22px;
  font-size: 13px;
}
.llave-identificado strong { display: block; color: var(--carbon); font-size: 15px; overflow-wrap: anywhere; }

.llave-estado-campo { font-size: 12px; margin-top: 5px; font-weight: 600; }
.llave-estado-campo.ok { color: var(--verde); }
.llave-estado-campo.mal { color: var(--rojo); }

.llave-acciones { display: flex; gap: 12px; margin-top: 8px; }
.llave-acciones > * { flex: 1; }

/* Fuerza de contraseña */
.llave-fuerza { height: 6px; border-radius: 6px; background: #efe8df; overflow: hidden; margin: -6px 0 10px; }
.llave-fuerza span { display: block; height: 100%; width: 0; transition: width .25s, background .25s; }
.llave-reglas { list-style: none; padding: 0; margin: 0 0 18px; font-size: 13px; color: var(--texto-suave); display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.llave-reglas li::before { content: "○ "; }
.llave-reglas li.ok { color: var(--verde); }
.llave-reglas li.ok::before { content: "✓ "; }

.llave-listo { text-align: center; padding: 16px 0; }
.llave-listo__icono {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--carbon);
  color: #fff;
  border: 6px solid var(--rojo-llave);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 32px;
}
.llave-listo h2 { margin: 0 0 8px; }
.llave-listo p { color: var(--texto-suave); margin: 0 0 22px; }

@media (prefers-reduced-motion: reduce) {
  .llave * { transition: none !important; }
}

@media (max-width: 960px) {
  .llave-escena { grid-template-columns: 1fr; gap: 36px; padding: 8px 16px 48px; min-height: 0; }
  .llave-top { padding: 16px; }
  .llave-top__lema { display: none; }
  .llave-mensaje__titulo { letter-spacing: -1px; margin-bottom: 14px; }
  .llave-mensaje__texto { font-size: 16px; margin-bottom: 18px; }
  .llave-inicio .llave-tag::before { transform: rotate(2deg) translate(5px, 5px); }
  .llave-deco { width: 480px; left: -160px; bottom: auto; top: 260px; }

  .llave-registro { padding: 0 16px 40px; }
  .llave-progreso { margin: 0; min-width: 0; max-width: none; flex-basis: 100%; }
  .llave-panel { grid-template-columns: 1fr; }
  .llave-ayuda-lateral { margin: 0 20px 20px; }
}

@media (max-width: 520px) {
  .llave-tag__cabeza, .llave-tag--ancha .llave-tag__cabeza { padding: 22px 20px 18px; }
  .llave-tag__cuerpo, .llave-form { padding: 22px 20px 6px; }
  .llave-form { padding-bottom: 22px; }
  .llave-tag__pie { padding: 16px 20px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .llave-tag__logo { width: 50px; height: 50px; }
  .llave-tag__titulo { font-size: 21px; }
  .llave-diente__texto { font-size: 10px; }
  .llave-reglas { grid-template-columns: 1fr; }
  .llave .fila { flex-direction: column; gap: 0; }
  .llave-ayuda-lateral { display: none; }
}