/* Club Loiacono — estilos del portal.
   Todo cuelga de .lc-club para no pelear con el tema del sitio. */

/* Paleta tomada del sitio: loiaconopropiedades.com.ar (tema realhomes).
   Amarillo del encabezado #FFD400, acento rojo #DD3333, texto #666,
   fondo #F5F5F5, tipografía Catamaran.

   Los nombres de variables son los de antes y apuntan a la paleta nueva.
   Es a propósito: así las 180 líneas de reglas que siguen adoptan el estilo
   del sitio sin tocarlas una por una, y si mañana cambia un color se cambia
   acá y en un solo lugar. */
.lc-club{
  --lc-tinta:#343A3B; --lc-tinta-2:#4A5152; --lc-tenue:#666666;
  --lc-linea:#E4E4E4; --lc-linea-2:#CFCFCF;
  --lc-panel:#FFFFFF; --lc-panel-2:#F5F5F5;
  --lc-amarillo:#FFD400; --lc-amarillo-2:#FFD21D;

  /* El acento del sitio es el rojo; ocupa el lugar que tenía el latón. */
  --lc-laton:#DD3333; --lc-laton-suave:#FFF6D6;
  --lc-verde:#343A3B; --lc-verde-suave:#F5F5F5;
  --lc-ok:#1A7550; --lc-ok-suave:#E7F4EC;
  --lc-alerta:#B26A00; --lc-alerta-suave:#FFF3D6;
  --lc-error:#DD3333; --lc-error-suave:#FCEAEA;

  color:var(--lc-tinta);
  font-family:Catamaran, "Helvetica Neue", Arial, sans-serif;
  font-size:15px;
  line-height:1.6;
  max-width:1100px;
  margin:0 auto;
}

/* Banda amarilla con el isologotipo, igual que el encabezado del sitio. */
.lc-cabecera{
  display:flex; align-items:center; gap:14px;
  background:var(--lc-amarillo);
  padding:14px 18px; margin:0 0 22px; border-radius:4px;
}
.lc-logo{height:46px; width:auto; display:block; flex:none}
.lc-cabecera-txt{
  font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:#343A3B;
}
@media (max-width:480px){
  .lc-cabecera{padding:12px 14px; gap:10px}
  .lc-logo{height:34px}
  .lc-cabecera-txt{font-size:.66rem; letter-spacing:.1em}
}
.lc-club *{box-sizing:border-box}
.lc-club p{margin:0 0 12px}

.lc-claim{
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lc-laton); margin:0 0 18px;
}
.lc-titulo{font-size:1.35rem; margin:34px 0 14px; font-weight:600}
.lc-chico{font-size:.83rem; color:var(--lc-tenue); margin:8px 0 0}
.lc-rotulo{
  font-size:.66rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--lc-laton); display:block; margin-bottom:6px;
}
.lc-num{font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---- Credencial ---- */
.lc-credencial{
  background:linear-gradient(158deg,#3C4344,#25292A); color:#F5F5F5;
  border-radius:8px; padding:20px 22px; margin-bottom:20px;
  border:1px solid rgba(255,212,0,.38);
}
.lc-credencial.lc-pausada{background:linear-gradient(158deg,#3A3330,#241F1D); border-color:rgba(255,212,0,.18)}
.lc-cred-tope{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px}
.lc-cred-marca{font-size:.66rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--lc-amarillo)}
.lc-cred-estado{
  font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  border:1px solid currentColor; border-radius:99px; padding:2px 10px; color:#8FCBB5;
}
.lc-pausada .lc-cred-estado{color:#D8A254}
.lc-cred-nombre{font-size:1.45rem; font-weight:600; line-height:1.15}
.lc-cred-codigo{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1.05rem; letter-spacing:.12em;
  color:#B9CFC6; margin-top:2px;
}
.lc-cred-datos{
  display:flex; flex-wrap:wrap; gap:22px; margin-top:18px; padding-top:15px;
  border-top:1px solid rgba(255,255,255,.14);
}
.lc-cred-datos span{display:flex; flex-direction:column; font-size:.7rem; letter-spacing:.05em;
  text-transform:uppercase; color:#8FB0A5}
.lc-cred-datos b{font-size:1.25rem; font-weight:700; letter-spacing:0; text-transform:none;
  color:#EDF2EE; font-variant-numeric:tabular-nums}

/* ---- Ingreso con documento ---- */
.lc-ingreso{
  background:var(--lc-panel); border:1px solid var(--lc-linea); border-radius:12px;
  padding:22px; margin:0 0 22px; max-width:440px;
}
.lc-ingreso h2{margin:0 0 8px; font-size:1.3rem; font-weight:600}
.lc-ingreso .lc-form{display:flex; flex-direction:column; gap:8px; margin-top:16px}
.lc-ingreso label{font-size:.8rem; font-weight:600; color:var(--lc-tinta-2)}
.lc-ingreso input{
  width:100%; padding:14px; border:1px solid var(--lc-linea-2); border-radius:9px;
  background:var(--lc-panel-2); font-size:1.35rem; text-align:center; letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
}
.lc-cred-dni{
  font-family:inherit; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  margin-left:12px; opacity:.7;
}
.lc-salir{margin-top:26px; text-align:center}
.lc-enlace{
  background:none; border:0; padding:0; cursor:pointer; font-size:.83rem;
  color:var(--lc-tenue); text-decoration:underline; text-underline-offset:3px;
}
.lc-enlace:hover{color:var(--lc-tinta)}

/* ---- Avisos ---- */
.lc-aviso{border-radius:12px; padding:16px 18px; margin:0 0 18px; border:1px solid}
.lc-aviso h3{margin:0 0 6px; font-size:1.02rem; font-weight:700}
.lc-aviso p{margin:0 0 6px}
.lc-aviso p:last-child{margin-bottom:0}
.lc-bueno{background:var(--lc-ok-suave); border-color:var(--lc-ok); color:var(--lc-ok)}
.lc-malo{background:var(--lc-error-suave); border-color:var(--lc-error); color:var(--lc-error)}
.lc-pausa{background:var(--lc-alerta-suave); border-color:var(--lc-alerta); color:var(--lc-alerta)}
.lc-neutro{background:var(--lc-panel-2); border-color:var(--lc-linea); color:var(--lc-tinta)}
.lc-aviso .lc-chico{color:inherit; opacity:.82}

/* ---- Cupón ---- */
.lc-cupon,.lc-ficha-cupon{
  background:var(--lc-panel); border:2px dashed var(--lc-laton); border-radius:12px;
  padding:20px 22px; margin:0 0 20px;
}
.lc-cupon-codigo{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1.8rem; font-weight:700;
  letter-spacing:.1em; color:var(--lc-verde); line-height:1.1; margin:2px 0 8px;
}
.lc-cupon-que{font-size:1.02rem}
.lc-cupon-vence{font-size:.85rem; color:var(--lc-tenue); margin-top:4px}

.lc-datos{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:14px 0 16px}
.lc-datos dt{font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lc-tenue)}
.lc-datos dd{margin:0}

/* ---- Grilla de beneficios ---- */
.lc-grilla{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px}
.lc-tarjeta{
  background:var(--lc-panel); border:1px solid var(--lc-linea); border-radius:12px;
  padding:16px 17px; display:flex; flex-direction:column;
}
.lc-tarjeta-tope{display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap}
.lc-rubro{font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--lc-tenue)}
.lc-etq{
  font-size:.63rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  border-radius:99px; padding:2px 8px; border:1px solid; margin-left:auto;
}
.lc-kit{background:var(--lc-alerta-suave); color:var(--lc-alerta); border-color:var(--lc-alerta)}
.lc-usado{background:var(--lc-ok-suave); color:var(--lc-ok); border-color:var(--lc-ok)}
/* «Cerca tuyo» va en latón: el verde ya lo usa «Usado» y se confundirían. */
.lc-cerca{background:var(--lc-laton-suave); color:var(--lc-laton); border-color:var(--lc-laton)}
.lc-tarjeta-cerca{border-color:var(--lc-laton)}
.lc-beneficio{font-size:1.4rem; font-weight:700; color:var(--lc-laton); line-height:1.12}
.lc-comercio{font-weight:600; margin-top:2px}
.lc-detalle{font-size:.87rem; color:var(--lc-tinta-2); margin:8px 0 0}
.lc-condiciones{font-size:.78rem; color:var(--lc-tenue); margin:6px 0 0}
.lc-barrios{font-size:.78rem; color:var(--lc-tenue); margin:6px 0 0}
.lc-enlaces{font-size:.78rem; color:var(--lc-tenue); margin:6px 0 0}
.lc-enlaces a{color:var(--lc-laton); font-weight:600; text-underline-offset:2px}
.lc-pedido{font-size:.83rem; color:var(--lc-ok); margin:12px 0 0; font-weight:600}
.lc-tarjeta .lc-form{margin-top:auto; padding-top:14px}

/* ---- Formularios y botones ---- */
.lc-form{margin:0}
.lc-form-buscar{
  background:var(--lc-panel); border:1px solid var(--lc-linea); border-radius:12px;
  padding:18px; margin-top:18px; display:flex; flex-direction:column; gap:8px;
}
.lc-form-buscar label{font-size:.8rem; font-weight:600; color:var(--lc-tinta-2)}
.lc-form-buscar input{
  width:100%; padding:14px; border:1px solid var(--lc-linea-2); border-radius:9px;
  background:var(--lc-panel-2); font-size:1.25rem; text-align:center; text-transform:uppercase;
  letter-spacing:.12em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* El botón principal va en el rojo del sitio, el mismo del menú activo. */
.lc-btn{
  display:inline-block; background:var(--lc-laton); color:#fff; border:1px solid var(--lc-laton);
  border-radius:4px; padding:12px 20px; font-size:.92rem; font-weight:700; cursor:pointer;
  text-decoration:none; text-align:center; font-family:inherit;
}
/* Los controles de formulario no heredan la tipografía si no se les pide. */
.lc-club input, .lc-club button, .lc-club select, .lc-club textarea{font-family:inherit}
.lc-btn:hover{opacity:.9; color:#fff}
.lc-btn-ancho{width:100%; display:block}

/* ---- Tabla de cupones ---- */
.lc-tabla{width:100%; border-collapse:collapse; font-size:.9rem}
.lc-tabla td{padding:11px 8px; border-bottom:1px solid var(--lc-linea); vertical-align:top}
.lc-estado{font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.lc-estado-emitido{color:var(--lc-laton)}
.lc-estado-canjeado{color:var(--lc-ok)}
.lc-estado-vencido,.lc-estado-anulado{color:var(--lc-tenue)}

/* Acá había un bloque de modo oscuro. Se quitó a propósito.
   El club tiene que verse igual que loiaconopropiedades.com.ar, y ese sitio
   tiene una sola identidad: amarillo, blanco y rojo. Con el bloque puesto, a
   quien tuviera el sistema en oscuro le aparecía otra paleta y el club parecía
   de otra empresa. */