/* =========================================================
   AC PERSONAL — Identidad visual
   Paleta: violeta índigo (marca) + verde menta (en línea) +
   ámbar (score / deals). Tipografía: Sora (display) + Inter (cuerpo/datos).
   Firma: la barra "Ir en línea" con pulso tipo radar cuando está activa.
   ========================================================= */

.acp-panel, .acp-acceso, .acp-auth-fondo{
  --acp-bg:#F6F5FA;
  --acp-surface:#FFFFFF;
  --acp-ink:#1B1B2F;
  --acp-ink-soft:#6B6B85;
  --acp-brand:#5B4FE0;
  --acp-brand-dark:#221F5C;
  --acp-brand-soft:#EDEBFC;
  --acp-online:#17C67D;
  --acp-online-soft:#E3FBF0;
  --acp-offline:#9AA0B4;
  --acp-warn:#FFB020;
  --acp-warn-soft:#FFF3DD;
  --acp-danger:#E24C4C;
  --acp-danger-soft:#FDE8E8;
  --acp-border:#E7E5F2;
  --acp-shadow:0 10px 26px rgba(27,27,47,0.08);
  --acp-radius-lg:24px;
  --acp-radius-md:16px;
  --acp-nav-h:66px;
  --acp-online-h:58px;
}

.acp-panel{
  position:relative;
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--acp-bg);
  color:var(--acp-ink);
  font-family:'Inter', -apple-system, sans-serif;
  font-size:15px;
  line-height:1.5;
  padding-bottom:calc(var(--acp-nav-h) + var(--acp-online-h) + 14px);
  box-sizing:border-box;
  isolation:isolate;
}
.acp-panel *{ box-sizing:border-box; }
.acp-panel h2, .acp-panel h3{
  font-family:'Sora', sans-serif;
  color:var(--acp-ink);
  margin:0 0 .4em;
}
.acp-panel h2{ font-size:1.3rem; font-weight:700; }
.acp-panel h3{ font-size:1.05rem; font-weight:600; }
.acp-panel p{ margin:0 0 .6em; }

/* ---------- Acceso / sin permiso ---------- */
.acp-auth-fondo{
  min-height:82vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2.4rem 1rem;
  background:radial-gradient(circle at 25% 15%, var(--acp-brand-soft), var(--acp-bg) 55%);
  font-family:'Inter', sans-serif;
  box-sizing:border-box;
}
.acp-acceso{
  width:100%;
  max-width:400px;
  padding:2.2rem 1.6rem;
  background:#fff;
  border-radius:var(--acp-radius-lg);
  box-shadow:var(--acp-shadow);
  font-family:'Inter', sans-serif;
  text-align:center;
}
.acp-acceso h2{ font-family:'Sora', sans-serif; margin-bottom:.3rem; }
.acp-acceso > p{ color:var(--acp-ink-soft); font-size:.92rem; }

.acp-login-marca{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:'Sora', sans-serif; font-weight:700; color:var(--acp-brand);
  margin-bottom:1.2rem; font-size:1.02rem; letter-spacing:.01em;
}
.acp-login-punto{
  width:11px; height:11px; border-radius:50%; flex:none;
  background:linear-gradient(135deg, var(--acp-brand), var(--acp-online));
}

.acp-login-recordar{
  display:flex; align-items:center; gap:.45rem;
  margin:-.3rem 0 1rem !important;
  font-size:.85rem; color:var(--acp-ink-soft);
}
.acp-login-recordar input{ width:auto !important; margin:0 !important; }
.acp-login-recordar label{ margin:0 !important; font-weight:500 !important; }

.acp-login-extra{ text-align:center; margin-top:1rem; font-size:.85rem; }
.acp-login-extra a{ color:var(--acp-brand); font-weight:600; text-decoration:none; }

.acp-login-registro{
  margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--acp-border);
}
.acp-login-registro span{ display:block; font-size:.85rem; color:var(--acp-ink-soft); margin-bottom:.6rem; }

.acp-registro-form label{ display:block; font-weight:600; font-size:.85rem; color:#4C4C63; margin-bottom:.25rem; text-align:left; }
.acp-registro-form input{
  width:100%; padding:.65rem .8rem; margin-bottom:.9rem;
  border:1px solid #E7E5F2; border-radius:14px;
  font-family:'Inter', sans-serif; font-size:.95rem;
}
.acp-registro-form p{ text-align:left; margin:0; }

/* ---------- Encabezado ---------- */
.acp-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding:1.1rem 1.1rem .9rem;
  background:linear-gradient(135deg, var(--acp-brand-dark), var(--acp-brand));
  color:#fff;
  border-radius:0 0 28px 28px;
}
.acp-header-user{ display:flex; align-items:center; gap:.7rem; }
.acp-avatar{
  width:44px; height:44px; border-radius:50%;
  border:2px solid rgba(255,255,255,.6);
  object-fit:cover; flex:none;
}
.acp-header-name{ font-family:'Sora', sans-serif; font-weight:700; font-size:1.02rem; }
.acp-header-sub{ font-size:.78rem; opacity:.8; }
.acp-status-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  font-size:.78rem; font-weight:600;
  white-space:nowrap;
}
.acp-status-dot{ width:8px; height:8px; border-radius:50%; background:var(--acp-offline); }
.acp-panel.is-online .acp-status-dot{ background:var(--acp-online); box-shadow:0 0 0 3px rgba(23,198,125,.35); }

/* ---------- Contenido / secciones ---------- */
.acp-content{ padding:1.1rem 1.1rem 0; }
.acp-section{ display:none; animation:acpFade .25s ease; }
.acp-section.is-active{ display:block; }
@keyframes acpFade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

.acp-mensaje{
  margin:0 1.1rem 1rem;
  padding:.7rem .9rem;
  border-radius:var(--acp-radius-md);
  font-size:.9rem;
  font-weight:600;
}
.acp-mensaje[data-tipo="ok"]{ background:var(--acp-online-soft); color:#0B7A4B; }
.acp-mensaje[data-tipo="error"]{ background:var(--acp-danger-soft); color:#A31E1E; }

/* ---------- Tarjetas genéricas ---------- */
.acp-card{
  background:var(--acp-surface);
  border-radius:var(--acp-radius-lg);
  box-shadow:var(--acp-shadow);
  padding:1.1rem;
  margin-bottom:1rem;
}
.acp-resumen{ list-style:none; margin:0 0 .3em; padding:0; display:grid; gap:.55rem; }
.acp-resumen li{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.92rem; color:var(--acp-ink-soft);
}
.acp-resumen li strong{ color:var(--acp-ink); font-family:'Sora', sans-serif; }

.acp-aviso{ background:var(--acp-warn-soft); color:#8A5A00; padding:.7rem .9rem; border-radius:var(--acp-radius-md); font-size:.88rem; font-weight:600; }
.acp-ok{ background:var(--acp-online-soft); color:#0B7A4B; padding:.7rem .9rem; border-radius:var(--acp-radius-md); font-size:.88rem; font-weight:600; }

/* ---------- Mapa (Inicio) ---------- */
.acp-mapa{
  width:100%; height:190px;
  border-radius:var(--acp-radius-lg);
  overflow:hidden;
  margin-bottom:1rem;
  background:var(--acp-brand-soft);
  box-shadow:var(--acp-shadow);
}
.acp-mapa-vacio{
  height:100%; display:flex; align-items:center; justify-content:center;
  color:var(--acp-brand); font-size:.85rem; font-weight:600; text-align:center; padding:1rem;
}

/* ---------- Tareas / servicios ---------- */
.acp-lista-tareas{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem; }
.acp-tarjeta-tarea{
  background:var(--acp-surface);
  border:1px solid var(--acp-border);
  border-radius:var(--acp-radius-lg);
  padding:1rem;
  box-shadow:var(--acp-shadow);
}
.acp-tarjeta-tarea h3{ margin-bottom:.2rem; }
.acp-tarjeta-tarea p{ color:var(--acp-ink-soft); font-size:.88rem; margin-bottom:.4rem; }
.acp-monto{ font-family:'Sora', sans-serif; font-weight:700; color:var(--acp-brand); font-variant-numeric:tabular-nums; }
.acp-acciones{ display:flex; gap:.6rem; margin-top:.7rem; }

.acp-btn{
  appearance:none; border:none; cursor:pointer;
  font-family:'Sora', sans-serif; font-weight:600; font-size:.88rem;
  padding:.65rem 1.1rem; border-radius:999px;
  transition:transform .1s ease, opacity .15s ease;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
}
.acp-btn:active{ transform:scale(.96); }
.acp-btn-aceptar{ background:var(--acp-online); color:#fff; }
.acp-btn-rechazar{ background:var(--acp-danger-soft); color:var(--acp-danger); }
.acp-btn-entrada{ background:var(--acp-brand); color:#fff; }
.acp-btn-salida{ background:var(--acp-warn); color:#5C3A00; }
.acp-btn[disabled]{ opacity:.5; pointer-events:none; }
.acp-btn-full{ width:100%; }

/* ---------- Historial y eventos / calendario ---------- */
.acp-calendario{ background:var(--acp-surface); border-radius:var(--acp-radius-lg); box-shadow:var(--acp-shadow); padding:1rem; margin-bottom:1rem; }
.acp-cal-cabecera{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; }
.acp-cal-mes{ font-family:'Sora', sans-serif; font-weight:700; }
.acp-cal-nav{ display:flex; gap:.3rem; }
.acp-cal-nav button{ background:var(--acp-brand-soft); color:var(--acp-brand); border:none; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:1rem; }
.acp-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; }
.acp-cal-diasemana{ font-size:.68rem; color:var(--acp-ink-soft); font-weight:600; padding-bottom:.3rem; }
.acp-cal-dia{ position:relative; padding:.4rem 0; border-radius:10px; font-size:.82rem; color:var(--acp-ink); }
.acp-cal-dia.acp-cal-vacio{ visibility:hidden; }
.acp-cal-dia.acp-cal-hoy{ background:var(--acp-brand-soft); font-weight:700; }
.acp-cal-puntos{ display:flex; justify-content:center; gap:2px; margin-top:2px; height:5px; }
.acp-cal-punto{ width:5px; height:5px; border-radius:50%; }
.acp-cal-punto.completada{ background:var(--acp-online); }
.acp-cal-punto.proxima{ background:var(--acp-brand); }

.acp-eventos-lista{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.acp-evento{ display:flex; gap:.7rem; align-items:flex-start; background:var(--acp-surface); border-radius:var(--acp-radius-md); padding:.7rem .8rem; box-shadow:var(--acp-shadow); }
.acp-evento-marca{ width:10px; height:10px; border-radius:50%; margin-top:.35rem; flex:none; }
.acp-evento-marca.completada{ background:var(--acp-online); }
.acp-evento-marca.proxima{ background:var(--acp-brand); }
.acp-evento-fecha{ font-size:.76rem; color:var(--acp-ink-soft); }

/* ---------- Ganancias ---------- */
.acp-periodos{ display:flex; gap:.4rem; margin-bottom:1rem; overflow-x:auto; }
.acp-periodo-btn{
  flex:none; background:var(--acp-surface); border:1px solid var(--acp-border);
  color:var(--acp-ink-soft); font-family:'Sora', sans-serif; font-weight:600; font-size:.82rem;
  padding:.5rem 1rem; border-radius:999px; cursor:pointer;
}
.acp-periodo-btn.is-active{ background:var(--acp-brand); color:#fff; border-color:var(--acp-brand); }

.acp-ganancia-total{
  background:linear-gradient(135deg, var(--acp-brand-dark), var(--acp-brand));
  color:#fff; border-radius:var(--acp-radius-lg); padding:1.3rem; margin-bottom:1rem;
  box-shadow:var(--acp-shadow);
}
.acp-ganancia-total .acp-cifra{ font-family:'Sora', sans-serif; font-size:2rem; font-weight:700; font-variant-numeric:tabular-nums; }
.acp-ganancia-total .acp-cifra-label{ font-size:.8rem; opacity:.85; }

.acp-anio-selector{ display:flex; align-items:center; justify-content:center; gap:.9rem; margin-bottom:.8rem; }
.acp-anio-selector button{ background:var(--acp-brand-soft); color:var(--acp-brand); border:none; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:1rem; }
.acp-anio-selector span{ font-family:'Sora', sans-serif; font-weight:700; }

.acp-barra-item{ display:flex; align-items:center; gap:.7rem; margin-bottom:.55rem; }
.acp-barra-label{ width:64px; font-size:.76rem; color:var(--acp-ink-soft); flex:none; }
.acp-barra-pista{ flex:1; height:10px; background:var(--acp-brand-soft); border-radius:999px; overflow:hidden; }
.acp-barra-relleno{ height:100%; background:var(--acp-brand); border-radius:999px; }
.acp-barra-monto{ width:64px; text-align:right; font-size:.78rem; font-weight:700; font-variant-numeric:tabular-nums; flex:none; }

/* ---------- Notificaciones ---------- */
.acp-subtabs{ display:flex; gap:.4rem; margin-bottom:1rem; overflow-x:auto; }
.acp-subtab-btn{
  flex:none; background:var(--acp-surface); border:1px solid var(--acp-border);
  color:var(--acp-ink-soft); font-family:'Sora', sans-serif; font-weight:600; font-size:.8rem;
  padding:.45rem .85rem; border-radius:999px; cursor:pointer;
}
.acp-subtab-btn.is-active{ background:var(--acp-ink); color:#fff; border-color:var(--acp-ink); }

.acp-lista-notif{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.acp-notif{ background:var(--acp-surface); border-radius:var(--acp-radius-md); padding:.8rem .9rem; box-shadow:var(--acp-shadow); border-left:4px solid var(--acp-brand); }
.acp-notif.is-leida{ opacity:.55; border-left-color:var(--acp-border); }
.acp-notif[data-categoria="alerta"]{ border-left-color:var(--acp-danger); }
.acp-notif[data-categoria="update"]{ border-left-color:var(--acp-warn); }
.acp-notif[data-categoria="deal"]{ border-left-color:var(--acp-online); }
.acp-notif p{ margin:0 0 .2rem; font-size:.88rem; }
.acp-fecha{ font-size:.72rem; color:var(--acp-ink-soft); }

/* ---------- Barra "Ir en línea" (firma visual) ---------- */
.acp-bottom{
  position:fixed; left:0; right:0; bottom:0;
  max-width:480px; margin:0 auto;
  z-index:40;
}
.acp-online-bar{
  width:100%; height:var(--acp-online-h);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--acp-offline);
  color:#fff;
  font-family:'Sora', sans-serif; font-weight:700; font-size:.98rem;
  letter-spacing:.02em;
  position:relative; overflow:hidden;
  transition:background .25s ease;
}
.acp-online-bar.is-online{ background:var(--acp-online); }
.acp-online-bar .acp-radar{
  position:absolute; inset:0; pointer-events:none;
}
.acp-online-bar.is-online .acp-radar::before,
.acp-online-bar.is-online .acp-radar::after{
  content:""; position:absolute; top:50%; left:20px;
  width:14px; height:14px; margin-top:-7px;
  border-radius:50%; background:rgba(255,255,255,.55);
  animation:acpPulso 1.8s ease-out infinite;
}
.acp-online-bar.is-online .acp-radar::after{ animation-delay:.9s; }
@keyframes acpPulso{
  0%{ transform:scale(1); opacity:.7; }
  100%{ transform:scale(3.4); opacity:0; }
}
.acp-online-dot{ width:9px; height:9px; border-radius:50%; background:#fff; flex:none; }

/* ---------- Menú de 5 espacios ---------- */
.acp-nav{
  display:grid; grid-template-columns:repeat(5,1fr);
  height:var(--acp-nav-h);
  background:#fff;
  box-shadow:0 -6px 18px rgba(27,27,47,.08);
}
.acp-nav-btn{
  appearance:none; border:none; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
  color:var(--acp-ink-soft);
  font-family:'Inter', sans-serif; font-size:.66rem; font-weight:600;
}
.acp-nav-btn svg{ width:22px; height:22px; }
.acp-nav-btn.is-active{ color:var(--acp-brand); }
.acp-nav-badge{
  position:absolute; transform:translate(10px,-9px);
  background:var(--acp-danger); color:#fff; font-size:.6rem; font-weight:700;
  border-radius:999px; padding:1px 5px; min-width:15px;
}

/* ---------- Menú hamburguesa (panel) ---------- */
.acp-drawer{
  position:fixed; inset:0; z-index:60;
  display:none;
}
.acp-drawer.is-open{ display:block; }
.acp-drawer-fondo{ position:absolute; inset:0; background:rgba(20,18,40,.45); }
.acp-drawer-panel{
  position:absolute; right:0; top:0; bottom:0; width:82%; max-width:340px;
  background:#fff; padding:1.4rem 1.2rem; overflow-y:auto;
  box-shadow:-14px 0 30px rgba(0,0,0,.15);
  animation:acpSlideIn .22s ease;
}
@keyframes acpSlideIn{ from{ transform:translateX(24px); opacity:0;} to{ transform:translateX(0); opacity:1;} }
.acp-drawer-cerrar{ background:var(--acp-brand-soft); color:var(--acp-brand); border:none; width:32px; height:32px; border-radius:50%; font-size:1.1rem; cursor:pointer; float:right; }
.acp-drawer-perfil{ text-align:center; margin:1.6rem 0 1.2rem; }
.acp-drawer-avatar{ width:76px; height:76px; border-radius:50%; object-fit:cover; margin-bottom:.6rem; border:3px solid var(--acp-brand-soft); }
.acp-drawer-nombre{ font-family:'Sora', sans-serif; font-weight:700; }
.acp-score{
  display:inline-flex; align-items:center; gap:.3rem; margin-top:.4rem;
  background:var(--acp-warn-soft); color:#8A5A00; font-weight:700; font-size:.82rem;
  padding:.25rem .7rem; border-radius:999px;
}
.acp-drawer-wallet{
  background:linear-gradient(135deg, var(--acp-brand-dark), var(--acp-brand));
  color:#fff; border-radius:var(--acp-radius-lg); padding:1rem 1.1rem; margin-bottom:1.2rem;
}
.acp-drawer-wallet .acp-cifra{ font-family:'Sora', sans-serif; font-size:1.5rem; font-weight:700; }
.acp-drawer-menu{ list-style:none; margin:0; padding:0; display:grid; gap:.2rem; }
.acp-drawer-menu li a{
  display:flex; align-items:center; gap:.7rem;
  padding:.8rem .3rem; color:var(--acp-ink); text-decoration:none; font-weight:600; font-size:.92rem;
  border-bottom:1px solid var(--acp-border);
}
.acp-drawer-menu li a svg{ width:19px; height:19px; color:var(--acp-brand); flex:none; }

/* ---------- Formularios (Mi perfil) ---------- */
.acp-panel form label{ font-weight:600; font-size:.85rem; color:var(--acp-ink-soft); }
.acp-panel form input[type="text"]{
  width:100%; padding:.65rem .8rem; margin-top:.3rem;
  border:1px solid var(--acp-border); border-radius:var(--acp-radius-md);
  font-family:'Inter', sans-serif; font-size:.92rem;
}

/* ---------- Accesibilidad ---------- */
.acp-panel :focus-visible{ outline:3px solid var(--acp-brand); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .acp-online-bar.is-online .acp-radar::before,
  .acp-online-bar.is-online .acp-radar::after{ animation:none; }
  .acp-section, .acp-drawer-panel{ animation:none; }
}