/* ============================================================
   KELAR SOCIAL MEDIA — Portal de clientes
   Negro mate + dorado champán · VIP minimalista · Mobile-first
   ============================================================ */

:root{
  --negro:#0b0b0d;
  --negro-2:#121215;
  --negro-3:#1a1a1e;
  --linea:rgba(217,185,138,.16);
  --dorado:#d9b98a;
  --dorado-2:#e9d3a3;
  --texto:#f4efe6;
  --texto-2:#a79f92;
  --radio:20px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html{scroll-behavior:smooth}

body{
  background:var(--negro);
  color:var(--texto);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
  min-height:100vh;
  background-image:radial-gradient(120% 60% at 50% -10%,rgba(217,185,138,.10),transparent 60%);
  background-attachment:fixed;
}

.contenedor{max-width:560px;margin:0 auto;padding:24px 20px 48px}

/* ---------- Marca ---------- */
.marca{text-align:center;padding:28px 0 8px}
.marca img{width:304px;max-width:88vw;height:auto}
.marca.marca-cliente img{width:240px}
.lema{color:var(--dorado);letter-spacing:.22em;text-transform:uppercase;font-size:.68rem;margin-top:10px}
.etiqueta{color:var(--texto-2);letter-spacing:.28em;text-transform:uppercase;font-size:.62rem}

/* ---------- Pantalla de acceso ---------- */
.acceso{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.tarjeta-acceso{
  background:linear-gradient(180deg,var(--negro-2),var(--negro));
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:34px 26px 30px;
  margin-top:28px;
  text-align:center;
}
.tarjeta-acceso h1{font-size:1.45rem;font-weight:600;letter-spacing:.01em}
.tarjeta-acceso p{color:var(--texto-2);font-size:.92rem;margin:10px 0 22px}
.campo-codigo{
  width:100%;background:var(--negro-3);border:1px solid var(--linea);border-radius:14px;
  color:var(--texto);font-size:1.05rem;letter-spacing:.18em;text-align:center;
  padding:15px 12px;text-transform:uppercase;outline:none;transition:border-color .2s;
}
.campo-codigo:focus{border-color:var(--dorado)}
.boton{
  width:100%;margin-top:14px;border:none;cursor:pointer;border-radius:14px;
  background:linear-gradient(135deg,var(--dorado),var(--dorado-2));
  color:#17130a;font-weight:700;font-size:1rem;letter-spacing:.04em;
  padding:15px 12px;transition:transform .15s,opacity .15s;
}
.boton:active{transform:scale(.98)}
.error{color:#e08a8a;font-size:.86rem;min-height:1.2em;margin-top:12px}
.pie{margin-top:26px;text-align:center;color:var(--texto-2);font-size:.8rem}
.sacudir{animation:sacudir .35s}
@keyframes sacudir{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* ---------- Perfil ---------- */
.saludo{padding:26px 0 4px}
.saludo .etiqueta{margin-bottom:6px;display:block}
.saludo h1{font-size:2rem;font-weight:700;line-height:1.15}
.saludo h1 span{color:var(--dorado)}
.fase{
  display:inline-block;margin-top:12px;padding:7px 14px;border:1px solid var(--linea);
  border-radius:999px;color:var(--dorado-2);font-size:.8rem;letter-spacing:.06em;background:rgba(217,185,138,.06);
}

/* Pestañas */
.pestanas{
  display:flex;gap:8px;margin:24px 0 20px;position:sticky;top:0;z-index:5;
  background:rgba(11,11,13,.92);backdrop-filter:blur(8px);padding:10px 0;
}
.pestana{
  flex:1;border:1px solid var(--linea);background:var(--negro-2);color:var(--texto-2);
  border-radius:999px;padding:10px 2px;font-size:.82rem;cursor:pointer;
  transition:all .2s;letter-spacing:.02em;
}
.pestana.activa{background:linear-gradient(135deg,var(--dorado),var(--dorado-2));color:#17130a;font-weight:700;border-color:transparent}
.vista{display:none;animation:aparecer .35s ease}
.vista.activa{display:block}
@keyframes aparecer{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Tarjetas y números */
.tarjeta{
  background:linear-gradient(180deg,var(--negro-2),var(--negro));
  border:1px solid var(--linea);border-radius:var(--radio);padding:22px;margin-bottom:14px;
}
.tarjeta h2{font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dorado);font-weight:600;margin-bottom:14px}
.numero-grande{font-size:2.5rem;font-weight:800;line-height:1;color:var(--texto)}
.numero-grande small{font-size:1.1rem;color:var(--dorado);font-weight:700}
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rejilla .tarjeta{margin-bottom:0}
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.dato .etiqueta{display:block;margin-bottom:8px}
.dato p{color:var(--texto-2);font-size:.85rem;margin-top:6px}

/* Anillos de metas */
.anillos{display:flex;justify-content:space-between;gap:6px;text-align:center}
.anillo{flex:1}
.anillo svg{width:88px;height:88px;transform:rotate(-90deg)}
.anillo .fondo-c{fill:none;stroke:var(--negro-3);stroke-width:7}
.anillo .progreso-c{fill:none;stroke:var(--dorado);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset 1.2s ease}
.anillo .valor{font-size:1.05rem;font-weight:800;margin-top:-62px;margin-bottom:40px}
.anillo .nombre{font-size:.74rem;color:var(--texto-2);letter-spacing:.04em}
.anillo .meta{font-size:.74rem;color:var(--dorado)}

/* Pilares */
.pilar{margin-bottom:16px}
.pilar .fila{display:flex;justify-content:space-between;font-size:.92rem;margin-bottom:6px}
.pilar .fila b{color:var(--dorado)}
.pilar p{color:var(--texto-2);font-size:.84rem}
.barra{height:8px;background:var(--negro-3);border-radius:99px;overflow:hidden}
.barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--dorado),var(--dorado-2));border-radius:99px;transition:width 1.1s ease}

/* Series y calendario */
.serie{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--linea)}
.serie:last-child{border-bottom:none}
.serie b{font-size:.95rem}
.serie p{color:var(--texto-2);font-size:.82rem}
.serie .cuando{color:var(--dorado);font-size:.78rem;white-space:nowrap;letter-spacing:.04em}
.fila-cal{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--linea)}
.fila-cal:last-child{border-bottom:none}
.fila-cal .dia{width:86px;font-weight:700;font-size:.92rem}
.fila-cal .hora{color:#17130a;background:var(--dorado);border-radius:8px;font-weight:800;font-size:.8rem;padding:4px 9px;white-space:nowrap}
.fila-cal .det{font-size:.84rem;color:var(--texto-2)}
.fila-cal .det b{color:var(--texto);font-weight:600}

/* Checklist */
.item{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--linea);cursor:pointer}
.item:last-child{border-bottom:none}
.item input{appearance:none;width:24px;height:24px;flex:none;border:1.5px solid var(--dorado);border-radius:8px;background:transparent;cursor:pointer;position:relative;margin-top:1px}
.item input:checked{background:var(--dorado)}
.item input:checked::after{content:"✓";position:absolute;inset:0;color:#17130a;font-weight:900;font-size:.95rem;display:flex;align-items:center;justify-content:center}
.item span{font-size:.93rem}
.item input:checked + span{color:var(--texto-2);text-decoration:line-through}
.aviso-hoy{border-color:rgba(217,185,138,.45);background:linear-gradient(180deg,rgba(217,185,138,.10),var(--negro))}
.aviso-hoy .hora-grande{font-size:1.9rem;font-weight:800;color:var(--dorado)}

/* Gráfica */
.grafica{width:100%;height:auto}
.nota{color:var(--texto-2);font-size:.84rem;margin-top:10px}
.tabla-med{width:100%;border-collapse:collapse;font-size:.9rem}
.tabla-med th,.tabla-med td{padding:10px 6px;border-bottom:1px solid var(--linea);text-align:left}
.tabla-med th{color:var(--dorado);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.tabla-med td.pendiente{color:var(--texto-2)}

footer{margin-top:30px;text-align:center}
footer .lema{margin-bottom:6px}
footer p{color:var(--texto-2);font-size:.78rem}

/* ---------- Panel admin ---------- */
.tarjeta-cliente{padding:24px 22px}
.cab-cliente{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.avatar{
  width:52px;height:52px;flex:none;border-radius:50%;
  background:linear-gradient(135deg,var(--dorado),var(--dorado-2));
  color:#17130a;font-weight:800;font-size:1.05rem;letter-spacing:.03em;
  display:flex;align-items:center;justify-content:center;
}
.cab-cliente .quien b{font-size:1.08rem;display:block;line-height:1.25}
.cab-cliente .quien span{color:var(--dorado);font-size:.86rem}
.cab-cliente .fase{margin-top:8px}
.cifras-admin{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;text-align:center;margin-bottom:18px}
.cifras-admin .num{font-size:1.35rem;font-weight:800;line-height:1.1}
.cifras-admin .num small{font-size:.85rem;color:var(--dorado);font-weight:700}
.cifras-admin .lbl{display:block;margin-top:4px}
.avance{margin-bottom:18px}
.avance .fila{display:flex;justify-content:space-between;font-size:.84rem;color:var(--texto-2);margin-bottom:6px}
.avance .fila b{color:var(--dorado)}
.nota-admin{margin-top:6px;text-align:center;color:var(--texto-2);font-size:.78rem}

/* ---------- Selector de idioma ---------- */
.idioma{display:flex;justify-content:flex-end;align-items:center;gap:7px}
.idioma-btn{
  background:none;border:none;cursor:pointer;padding:4px 2px;
  color:var(--texto-2);font-size:.78rem;font-weight:600;letter-spacing:.14em;
  font-family:inherit;transition:color .2s;
}
.idioma-btn:hover{color:var(--dorado-2)}
.idioma-btn.activo{color:var(--dorado)}
.idioma-sep{color:rgba(217,185,138,.35);font-size:.78rem}

/* ---------- Portada Kelar Corp (hub) ---------- */
.marca-corp{
  background-image:radial-gradient(58% 58% at 50% 44%,rgba(217,185,138,.16),transparent 72%);
  background-repeat:no-repeat;
}
.portada{text-align:center;margin-top:26px}
.portada h1{font-size:1.68rem;font-weight:700;line-height:1.2;letter-spacing:.01em}
.portada p{color:var(--texto-2);font-size:.96rem;margin-top:9px}
.areas{display:flex;flex-direction:column;gap:13px;margin-top:24px}
/* Tarjeta-botón en ALTO RELIEVE: placa física elegante. Toda la
   tarjeta es el botón (icono + título + descripción). Volumen con
   degradado dorado, luz interior arriba, sombra profunda en la
   base y borde con doble luz; hover eleva y al presionar se hunde. */
.area{
  display:flex;align-items:center;gap:15px;
  text-decoration:none;color:var(--texto);
  background:linear-gradient(168deg,rgba(233,211,163,.17),rgba(217,185,138,.05) 34%,var(--negro-2) 64%,#08080a);
  border:1px solid rgba(217,185,138,.42);border-radius:20px;
  padding:20px;
  box-shadow:
    inset 0 1px 0 rgba(244,239,230,.30),
    inset 0 -1px 0 rgba(0,0,0,.65),
    inset 0 -16px 26px rgba(0,0,0,.50),
    0 18px 36px rgba(0,0,0,.55),
    0 4px 10px rgba(0,0,0,.50);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.area:hover{
  transform:translateY(-3px);border-color:rgba(233,211,163,.72);
  box-shadow:
    inset 0 1px 0 rgba(244,239,230,.42),
    inset 0 -1px 0 rgba(0,0,0,.65),
    inset 0 -16px 26px rgba(0,0,0,.45),
    0 26px 48px rgba(0,0,0,.60),
    0 0 30px rgba(217,185,138,.18);
}
.area:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 7px rgba(0,0,0,.55),
    inset 0 -6px 14px rgba(0,0,0,.40),
    0 6px 14px rgba(0,0,0,.50);
}
.area-icono{
  flex:none;width:50px;height:50px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--dorado);
  border:1px solid rgba(217,185,138,.45);
  background:radial-gradient(circle at 32% 26%,rgba(233,211,163,.28),rgba(217,185,138,.05) 72%);
  box-shadow:0 0 18px rgba(217,185,138,.12),inset 0 1px 0 rgba(244,239,230,.25);
}
.area-icono svg{width:25px;height:25px}
.area-foto{
  flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(217,185,138,.6);
  box-shadow:0 8px 18px rgba(0,0,0,.5),0 0 16px rgba(217,185,138,.15);
}
.area-cuerpo{flex:1;min-width:0}
.area-titulo{display:block;font-size:1.14rem;font-weight:700;letter-spacing:.01em;color:var(--texto);line-height:1.2}
.area-texto{display:block;color:var(--texto-2);font-size:.86rem;margin-top:4px;line-height:1.45}
.area-pista{display:block;color:var(--dorado);font-size:.8rem;font-weight:600;margin-top:7px;letter-spacing:.02em}
@media (max-width:430px){
  .area{gap:12px;padding:17px 15px}
  .area-icono{width:44px;height:44px}
  .area-icono svg{width:22px;height:22px}
  .area-foto{width:54px;height:54px}
}
/* Computador y pantallas anchas: las tres áreas en una fila,
   tarjetas verticales centradas, mismo relieve dorado. */
@media (min-width:860px){
  .areas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .area{flex-direction:column;text-align:center;justify-content:flex-start;padding:24px 18px}
  .area-cuerpo{flex:none}
}

/* ---------- Kelar Pet: ficha de la mascota ---------- */
.titulo-seccion{font-size:1.15rem;font-weight:700;margin:30px 0 4px;color:var(--texto)}
.foto-mascota{
  width:124px;height:124px;border-radius:50%;object-fit:cover;display:block;
  margin:0 auto;border:3px solid var(--dorado);
  box-shadow:0 14px 30px rgba(0,0,0,.55),0 0 26px rgba(217,185,138,.18);
}
.cab-mascota{text-align:center;margin-top:20px}
.fila-dato{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:10px 0;border-bottom:1px solid rgba(217,185,138,.10);
}
.fila-dato:last-child{border-bottom:none}
.fila-dato b{flex:none;font-size:.9rem;color:var(--texto)}
.fila-dato span{text-align:right;color:var(--texto-2);font-size:.9rem;line-height:1.45}
.sub-ficha{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dorado);
  margin:20px 0 4px;font-weight:700;
}
.sub-ficha:first-child{margin-top:0}
.texto-ficha{color:var(--texto-2);font-size:.92rem;line-height:1.55;padding:8px 0}
.volver{color:var(--dorado);text-decoration:none;font-size:.85rem;letter-spacing:.03em}
.volver:hover{text-decoration:underline}