/* LLOG Credencial
 *
 * REGLAS DE ESTE SITIO, aprendidas a golpes en llog-cursos:
 *  - nunca abreviaturas (border:, background:) con var(): algunos motores las
 *    resuelven mal y el borde o el fondo desaparecen sin avisar;
 *  - listas y tablas propias con <div>, no <ul>/<li>: contra un div Avada no
 *    tiene reglas que ganar;
 *  - todo prefijado con .llogcr y, donde importa, con html body por delante.
 */

.llogcr{
  --llogcr-rojo:#E30613;
  --llogcr-negro:#1A1A1A;
  --llogcr-gris:#6B7280;
  --llogcr-linea:#E5E8EC;
  --llogcr-fondo:#F7F8FA;
  color:var(--llogcr-negro);
  line-height:1.5;
}

/* ------------------------------------------------------------ tarjetas -- */
.llogcr .llogcr-tarjeta{
  background-color:#fff;
  border-width:1px;border-style:solid;border-color:var(--llogcr-linea);
  border-radius:14px;
  margin-bottom:20px;
  overflow:hidden;
}
.llogcr .llogcr-tarjeta__cab{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:13px 16px;
  border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--llogcr-linea);
  background-color:var(--llogcr-fondo);
}
.llogcr .llogcr-tarjeta__cab h3{margin:0;font-size:15px;font-weight:700}
.llogcr .llogcr-conteo{font-size:12px;color:var(--llogcr-gris)}
.llogcr .llogcr-bloque{padding:12px 16px;border-top-width:1px;border-top-style:solid;border-top-color:var(--llogcr-linea)}

/* ------------------------------------------------------------ formulario */
.llogcr .llogcr-form{padding:16px}
.llogcr .llogcr-campo{display:block}
.llogcr .llogcr-campo>span{display:block;font-size:12px;font-weight:600;margin-bottom:4px}
.llogcr .llogcr-campo>em{display:block;font-size:11px;color:var(--llogcr-gris);margin-top:4px;font-style:normal}
.llogcr .llogcr-req{color:var(--llogcr-rojo)}
.llogcr .llogcr-campo input[type=text],
.llogcr .llogcr-campo input[type=date],
.llogcr .llogcr-campo select,
.llogcr .llogcr-buscador input[type=text]{
  width:100%;
  padding:8px 10px;
  font-size:14px;
  border-width:1px;border-style:solid;border-color:#CFD5DC;
  border-radius:9px;
  background-color:#fff;
  -webkit-appearance:none;appearance:none;
}
.llogcr .llogcr-campo select{background-image:none}
.llogcr .llogcr-form__pie{padding:12px 16px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.llogcr .llogcr-linea{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.llogcr .llogcr-crece{flex:1 1 200px}

.llogcr .llogcr-boton{
  font-size:13.5px;font-weight:600;
  color:#fff;background-color:var(--llogcr-negro);
  border-width:1px;border-style:solid;border-color:var(--llogcr-negro);
  border-radius:9px;padding:9px 15px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.llogcr .llogcr-boton--callado{color:var(--llogcr-negro);background-color:#fff;border-color:#CFD5DC}
.llogcr .llogcr-boton:hover{opacity:.9}
.llogcr .llogcr-enlace{font-size:13px;color:var(--llogcr-gris)}

/* ------------------------------------------------------------ tablas ---- */
.llogcr .llogcr-tabla{border-top-width:1px;border-top-style:solid;border-top-color:var(--llogcr-linea)}
.llogcr .llogcr-fila--cab{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--llogcr-gris);background-color:var(--llogcr-fondo)}
.llogcr .llogcr-fila--mala{background-color:#FFF6F6}
.llogcr .llogcr-fila em{display:block;font-style:normal;font-size:11px}
.llogcr .llogcr-mono{font-family:ui-monospace,'JetBrains Mono','Courier New',monospace;font-size:12.5px}
.llogcr .llogcr-malo{color:var(--llogcr-rojo)}
.llogcr .llogcr-nota{font-size:12px;color:var(--llogcr-gris);margin:8px 16px 12px}
.llogcr .llogcr-vacio{padding:22px 16px;text-align:center;color:var(--llogcr-gris);font-size:13.5px}
.llogcr .llogcr-buscador{display:flex;gap:9px;padding:12px 16px;flex-wrap:wrap}
.llogcr .llogcr-buscador input[type=text]{flex:1 1 200px}

.llogcr .llogcr-aviso{padding:11px 14px;border-radius:11px;margin-bottom:16px;font-size:13.5px}
.llogcr .llogcr-aviso--ok{background-color:#EEF7F0;color:#14532D}
.llogcr .llogcr-aviso--error{background-color:#FDECEC;color:#8A1220}

/* ------------------------------------------------------------ pastillas - */
.llogcr .llogcr-pastilla{
  display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;
  background-color:#EDEFF2;color:var(--llogcr-negro);
}
.llogcr .llogcr-pastilla--vigente{background-color:#DFF3E6;color:#14532D}
.llogcr .llogcr-pastilla--vencida{background-color:#FDF0DA;color:#7A4A05}
.llogcr .llogcr-pastilla--revocada{background-color:#FDE0E3;color:#8A1220}
.llogcr .llogcr-pastilla--inexistente{background-color:#EDEFF2;color:#4B5563}

/* ------------------------------------------------------------ visor 3D -- */
.llogcr .llogcr-visor{margin:0 0 26px}
.llogcr .llogcr-escena{
  width:min(330px,74vw);
  aspect-ratio:.63;
  margin:0 auto;
  touch-action:none;
  cursor:grab;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.llogcr .llogcr-escena:active{cursor:grabbing}
.llogcr .llogcr-escena:focus-visible{outline-width:2px;outline-style:solid;outline-color:#F5A623;outline-offset:14px}
.llogcr .llogcr-carta{will-change:transform}
.llogcr .llogcr-asentando{transition:transform .6s cubic-bezier(.22,.9,.28,1)}
.llogcr .llogcr-cara{
  background-color:#fff;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.45);
}
.llogcr .llogcr-cara canvas{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none}
.llogcr .llogcr-cara--frente{transform:translateZ(4px)}
.llogcr .llogcr-cara--reverso{transform:rotateY(180deg) translateZ(4px)}
.llogcr .llogcr-cara--rota{background-color:#F1F3F6}
.llogcr .llogcr-canto{position:absolute;background-color:#D8DCE2}
.llogcr .llogcr-canto--sup{top:0;left:0;width:100%;height:8px;transform:translateY(-4px) rotateX(90deg)}
.llogcr .llogcr-canto--inf{bottom:0;left:0;width:100%;height:8px;transform:translateY(4px) rotateX(90deg)}
.llogcr .llogcr-canto--izq{top:0;left:0;height:100%;width:8px;transform:translateX(-4px) rotateY(90deg)}
.llogcr .llogcr-canto--der{top:0;right:0;height:100%;width:8px;transform:translateX(4px) rotateY(90deg)}
.llogcr .llogcr-visor__pie{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:18px;flex-wrap:wrap}

/* ------------------------------------------------- página de verificación */
body.llogcr-verificar-cuerpo{
  margin:0;background-color:#F4F6F8;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
}
.llogcr-verificar{max-width:520px;margin:0 auto;padding:26px 16px 40px}
.llogcr-verificar__cab{display:flex;flex-direction:column;gap:2px;margin-bottom:18px}
.llogcr-verificar__cab strong{font-size:15px}
.llogcr-verificar__cab span{font-size:12px;color:var(--llogcr-gris);text-transform:uppercase;letter-spacing:.1em}
.llogcr-resultado{
  background-color:#fff;border-radius:16px;padding:20px;margin-bottom:18px;
  border-top-width:4px;border-top-style:solid;border-top-color:#CFD5DC;
}
.llogcr-resultado--vigente{border-top-color:#1F9D55}
.llogcr-resultado--vencida{border-top-color:#D18700}
.llogcr-resultado--revocada{border-top-color:var(--llogcr-rojo)}
.llogcr-resultado--inexistente{border-top-color:#9AA3AF}
.llogcr-resultado--aviso{border-top-color:#D18700}
.llogcr-resultado h1{font-size:20px;margin:10px 0 14px}
.llogcr-datos div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#EDEFF2}
.llogcr-datos span{font-size:12.5px;color:var(--llogcr-gris)}
.llogcr-datos b{font-size:13.5px}
.llogcr-buscador--grande{display:block;background-color:#fff;border-radius:14px;padding:16px}
.llogcr-buscador--grande label{display:block;font-size:12.5px;font-weight:600;margin-bottom:7px}
.llogcr-buscador__linea{display:flex;gap:8px}
.llogcr-buscador__linea input{flex:1 1 auto;padding:9px 11px;border-width:1px;border-style:solid;border-color:#CFD5DC;border-radius:9px;font-size:14px}
.llogcr-legal{font-size:11.5px;color:var(--llogcr-gris);margin-top:16px;line-height:1.55}

@media (max-width:640px){
  .llogcr .llogcr-fila{grid-template-columns:1fr 1fr;gap:4px 10px}
  .llogcr .llogcr-fila--cab{display:none}
}
@media (prefers-reduced-motion:reduce){
  .llogcr .llogcr-asentando{transition:none}
}