/* ═══════════════════════════════════════════════════════════
   ECARYE — Oficina Virtual | public.css v3 (limpio)
═══════════════════════════════════════════════════════════ */
:root {
  --ec-green-dark:  #1B4332;
  --ec-green:       #2D6A4F;
  --ec-green-light: #52B788;
  --ec-green-pale:  #D8F3DC;
  --ec-gold:        #D4AF37;
  --ec-gold-light:  #F9EFBA;
  --ec-red:         #C1121F;
  --ec-red-pale:    #FFE5E7;
  --ec-gray-50:     #F8F9FA;
  --ec-gray-100:    #F1F3F5;
  --ec-gray-200:    #E9ECEF;
  --ec-gray-400:    #ADB5BD;
  --ec-gray-600:    #6C757D;
  --ec-gray-800:    #343A40;
  --ec-white:       #FFFFFF;
  --ec-radius:      12px;
  --ec-radius-sm:   8px;
  --ec-shadow:      0 2px 12px rgba(0,0,0,.07);
  --ec-shadow-md:   0 4px 24px rgba(0,0,0,.10);
  --ec-font:        'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --ec-nav-h:       62px;
}

/* ── Reset ── */
.ec-app *, .ec-auth-wrap * { box-sizing:border-box; }
.ec-app { font-family:var(--ec-font); color:var(--ec-gray-800); background:var(--ec-gray-50); min-height:100vh; }
body.ecarye-page { margin:0 !important; padding:0 !important; background:var(--ec-gray-50) !important; }

/* ══════════════════════════════════════
   TOPNAV — barra superior principal
══════════════════════════════════════ */
.ec-topnav {
  position: sticky;
  top: 0;
  z-index: 500;
  height: var(--ec-nav-h);
  background: linear-gradient(90deg, #0d2b1e 0%, #1B4332 55%, #2D6A4F 100%);
  display: flex;
  align-items: stretch;
  box-shadow: 0 2px 16px rgba(0,0,0,.28);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Cuando hay barra de admin WP, bajar el sticky */
.admin-bar .ec-topnav { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .ec-topnav { top: 46px; }
}

/* Logo */
.ec-topnav__brand {
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 24px;
  background: rgba(0,0,0,.20);
  border-right: 1px solid rgba(255,255,255,.07);
  text-decoration: none;
  flex-shrink: 0;
  min-width: 130px;
  transition: background .15s;
}
.ec-topnav__brand:hover { background: rgba(0,0,0,.28); }
.ec-topnav__brand-text {
  font-size: 21px; font-weight: 900;
  color: #fff; letter-spacing: -.5px; line-height: 1;
}
.ec-topnav__brand-text span { color: var(--ec-gold); }
.ec-topnav__brand small {
  font-size: 9px; color: rgba(255,255,255,.38);
  letter-spacing: .8px; text-transform: uppercase; margin-top: 3px;
}

/* Links de navegación */
.ec-topnav__links {
  display: flex; align-items: stretch;
  flex: 1; overflow-x: auto; gap: 0;
  scrollbar-width: none;
}
.ec-topnav__links::-webkit-scrollbar { display: none; }
.ec-topnav__links a {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; padding: 0 18px;
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,.50);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
  letter-spacing: .2px;
}
.ec-topnav__links a:hover {
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.06);
}
.ec-topnav__links a.active {
  color: var(--ec-gold);
  border-bottom-color: var(--ec-gold);
  background: rgba(255,255,255,.05);
}
.ec-nav-icon { font-size: 17px; line-height: 1; }
.ec-nav-label { font-size: 10px; font-weight: 600; }

/* Zona derecha: admin btn + user pill + burger */
.ec-topnav__right {
  display: flex; align-items: center;
  gap: 10px; padding: 0 14px;
  border-left: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}

.ec-topnav__admin-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  background: rgba(212,175,55,.12);
  border: 1px solid rgba(212,175,55,.30);
  border-radius: 6px;
  font-size: 11px; font-weight: 700;
  color: var(--ec-gold); text-decoration: none;
  white-space: nowrap; transition: background .15s;
}
.ec-topnav__admin-btn:hover { background: rgba(212,175,55,.22); color: var(--ec-gold); }

.ec-topnav__user-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 40px;
}
.ec-topnav__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ec-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: var(--ec-green-dark);
  flex-shrink: 0;
}
.ec-topnav__user-info { line-height: 1.25; }
.ec-topnav__uname { font-size: 12px; font-weight: 700; color: #fff; }
.ec-topnav__ucode { font-size: 10px; color: rgba(255,255,255,.38); }
.ec-topnav__logout {
  font-size: 15px; color: rgba(255,255,255,.30);
  text-decoration: none; padding: 2px 0; transition: color .15s;
}
.ec-topnav__logout:hover { color: var(--ec-red); }

/* Hamburger */
.ec-burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.ec-burger span {
  display: block; width: 22px; height: 2px;
  background: rgba(255,255,255,.7); border-radius: 2px;
}

/* Menú móvil (panel lateral derecho) */
.ec-mobile-nav {
  position: fixed;
  top: 0; right: -280px; bottom: 0;
  width: 280px;
  background: #0d2b1e;
  z-index: 600;
  transition: right .28s ease;
  overflow-y: auto;
  box-shadow: -8px 0 32px rgba(0,0,0,.35);
}
.ec-mobile-nav.open { right: 0; }
.ec-mobile-nav__inner { padding: 16px 0 40px; }
.ec-mobile-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 24px;
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.65); text-decoration: none;
  transition: background .15s, color .15s;
}
.ec-mobile-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.ec-mobile-nav a.active {
  color: var(--ec-gold);
  background: rgba(255,255,255,.05);
  border-left: 3px solid var(--ec-gold);
}
.ec-mobile-nav__overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); z-index: 599;
}
.ec-mobile-nav__overlay.open { display: block; }

/* ══════════════════════════════════════
   LAYOUT PRINCIPAL
══════════════════════════════════════ */
.ec-main { width: 100%; }
.ec-content { max-width: 1440px; margin: 0 auto; padding: 24px 32px; }
.ec-page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.ec-page-title { font-size: 20px; font-weight: 700; color: var(--ec-green-dark); }

/* ══════════════════════════════════════
   TARJETAS
══════════════════════════════════════ */
.ec-card {
  background: var(--ec-white);
  border-radius: var(--ec-radius);
  box-shadow: var(--ec-shadow);
  padding: 24px;
  border: 1px solid var(--ec-gray-200);
}
.ec-card__title {
  font-size: 11px; font-weight: 700;
  color: var(--ec-gray-600);
  text-transform: uppercase; letter-spacing: .6px;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}

/* ══════════════════════════════════════
   MÉTRICAS
══════════════════════════════════════ */
.ec-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 16px; margin-bottom: 24px;
}
.ec-metric {
  background: var(--ec-white); border-radius: var(--ec-radius);
  border: 1px solid var(--ec-gray-200); box-shadow: var(--ec-shadow);
  padding: 20px 24px; position: relative; overflow: hidden;
}
.ec-metric::after {
  content:''; position:absolute; top:0; right:0;
  width:4px; height:100%;
  background:var(--ec-green-light);
  border-radius:0 var(--ec-radius) var(--ec-radius) 0;
}
.ec-metric--gold::after  { background:var(--ec-gold); }
.ec-metric--alert::after { background:var(--ec-red); }
.ec-metric__label { font-size:11px; font-weight:700; color:var(--ec-gray-600); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.ec-metric__value { font-size:28px; font-weight:800; color:var(--ec-green-dark); line-height:1; }
.ec-metric__value.gold { color:var(--ec-gold); }
.ec-metric__sub { font-size:12px; color:var(--ec-gray-400); margin-top:6px; }

/* ══════════════════════════════════════
   SEMÁFOROS
══════════════════════════════════════ */
.ec-status-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.ec-status-badge {
  display:flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:40px;
  font-size:13px; font-weight:600; border:2px solid transparent;
}
.ec-status-badge .ec-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.ec-status-badge.ok    { background:var(--ec-green-pale); color:var(--ec-green);   border-color:var(--ec-green-light); }
.ec-status-badge.ok .ec-dot    { background:var(--ec-green-light); }
.ec-status-badge.warn  { background:var(--ec-gold-light);  color:#7a6010;           border-color:var(--ec-gold); }
.ec-status-badge.warn .ec-dot  { background:var(--ec-gold); }
.ec-status-badge.alert { background:var(--ec-red-pale);    color:var(--ec-red);     border-color:var(--ec-red); }
.ec-status-badge.alert .ec-dot { background:var(--ec-red); }

/* ══════════════════════════════════════
   COUNTDOWN
══════════════════════════════════════ */
.ec-countdown {
  background:linear-gradient(135deg,var(--ec-green-dark),var(--ec-green));
  border-radius:var(--ec-radius); padding:20px 28px;
  color:#fff; display:flex; align-items:center; justify-content:space-between;
  margin-bottom:24px;
}
.ec-countdown__label { font-size:12px; opacity:.7; margin-bottom:4px; }
.ec-countdown__days  { font-size:38px; font-weight:800; color:var(--ec-gold); line-height:1; }
.ec-countdown__desc  { font-size:13px; opacity:.75; margin-top:4px; }
.ec-countdown__icon  { font-size:44px; opacity:.22; }

/* ══════════════════════════════════════
   NIVELES DE RED
══════════════════════════════════════ */
.ec-levels {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:10px; margin-bottom:24px;
}
.ec-level {
  background:var(--ec-gray-100); border-radius:var(--ec-radius-sm);
  padding:14px 10px; text-align:center;
  border:2px solid var(--ec-gray-200); transition:all .2s; cursor:pointer;
}
.ec-level:hover   { border-color:var(--ec-green-light); }
.ec-level.full    { background:var(--ec-gold-light);  border-color:var(--ec-gold); }
.ec-level.partial { background:var(--ec-green-pale);  border-color:var(--ec-green-light); }
.ec-level__num    { font-size:10px; font-weight:700; color:var(--ec-gray-400); text-transform:uppercase; letter-spacing:.5px; }
.ec-level__count  { font-size:24px; font-weight:800; color:var(--ec-green-dark); margin:4px 0; }
.ec-level__max    { font-size:11px; color:var(--ec-gray-400); }
.ec-level__pct    { height:4px; border-radius:2px; background:var(--ec-gray-200); margin-top:8px; overflow:hidden; }
.ec-level__pct-fill { height:100%; border-radius:2px; background:var(--ec-green-light); transition:width .6s; }
.ec-level.full .ec-level__pct-fill { background:var(--ec-gold); }
.ec-level__rate   { font-size:11px; font-weight:700; color:var(--ec-green); margin-top:6px; }
.ec-level.full .ec-level__rate { color:#7a6010; }

/* ══════════════════════════════════════
   TABLA
══════════════════════════════════════ */
.ec-table-wrap { overflow-x:auto; }
.ec-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.ec-table th {
  background:var(--ec-gray-50); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; color:var(--ec-gray-600);
  padding:10px 14px; text-align:left; border-bottom:2px solid var(--ec-gray-200);
}
.ec-table td { padding:12px 14px; border-bottom:1px solid var(--ec-gray-100); vertical-align:middle; }
.ec-table tr:last-child td { border-bottom:none; }
.ec-table tr:hover td { background:var(--ec-gray-50); }

/* ══════════════════════════════════════
   BADGES, BOTONES, FORMS, ALERTAS
══════════════════════════════════════ */
.ec-badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.ec-badge.green { background:var(--ec-green-pale); color:var(--ec-green); }
.ec-badge.gold  { background:var(--ec-gold-light); color:#7a6010; }
.ec-badge.red   { background:var(--ec-red-pale);   color:var(--ec-red); }
.ec-badge.gray  { background:var(--ec-gray-100);   color:var(--ec-gray-600); }

.ec-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 20px; border-radius:var(--ec-radius-sm);
  font-size:14px; font-weight:600; cursor:pointer; border:none;
  text-decoration:none; transition:all .15s; font-family:var(--ec-font);
}
.ec-btn--primary { background:var(--ec-green-dark); color:#fff; }
.ec-btn--primary:hover { background:var(--ec-green); color:#fff; }
.ec-btn--gold    { background:var(--ec-gold); color:var(--ec-green-dark); }
.ec-btn--gold:hover { background:#c9a227; }
.ec-btn--outline { background:transparent; border:2px solid var(--ec-green-dark); color:var(--ec-green-dark); }
.ec-btn--outline:hover { background:var(--ec-green-dark); color:#fff; }
.ec-btn--sm  { padding:6px 14px; font-size:12px; }
.ec-btn--danger { background:var(--ec-red); color:#fff; }

.ec-form-group { margin-bottom:18px; }
.ec-label { display:block; font-size:13px; font-weight:600; color:var(--ec-gray-800); margin-bottom:6px; }
.ec-input,.ec-select,.ec-textarea {
  width:100%; padding:10px 14px;
  border:1.5px solid var(--ec-gray-200); border-radius:var(--ec-radius-sm);
  font-size:14px; font-family:var(--ec-font); color:var(--ec-gray-800);
  background:var(--ec-white); transition:border-color .15s; outline:none;
}
.ec-input:focus,.ec-select:focus,.ec-textarea:focus {
  border-color:var(--ec-green-light); box-shadow:0 0 0 3px rgba(82,183,136,.15);
}
.ec-input-help { font-size:12px; color:var(--ec-gray-400); margin-top:4px; }

.ec-alert { padding:12px 16px; border-radius:var(--ec-radius-sm); font-size:14px; display:flex; align-items:flex-start; gap:10px; margin-bottom:16px; }
.ec-alert.info    { background:var(--ec-green-pale); color:var(--ec-green);    border-left:4px solid var(--ec-green-light); }
.ec-alert.warning { background:var(--ec-gold-light); color:#7a6010;            border-left:4px solid var(--ec-gold); }
.ec-alert.danger  { background:var(--ec-red-pale);   color:var(--ec-red);      border-left:4px solid var(--ec-red); }

/* ══════════════════════════════════════
   NOTIFICACIONES
══════════════════════════════════════ */
.ec-notif-dot { display:inline-block; width:8px; height:8px; background:var(--ec-red); border-radius:50%; vertical-align:middle; margin-left:4px; }
.ec-notif-list { display:flex; flex-direction:column; gap:10px; }
.ec-notif-item { padding:12px 16px; border-radius:var(--ec-radius-sm); background:var(--ec-gray-50); border-left:3px solid var(--ec-green-light); font-size:13.5px; }
.ec-notif-item.unread { background:var(--ec-green-pale); border-left-color:var(--ec-green); }
.ec-notif-item__title { font-weight:700; margin-bottom:3px; }
.ec-notif-item__time  { font-size:11px; color:var(--ec-gray-400); margin-top:4px; }

/* ══════════════════════════════════════
   LOADER / SPINNER
══════════════════════════════════════ */
.ec-loader { display:flex; align-items:center; justify-content:center; padding:48px; color:var(--ec-gray-400); font-size:14px; gap:10px; }
.ec-spinner { width:20px; height:20px; border:2px solid var(--ec-gray-200); border-top-color:var(--ec-green); border-radius:50%; animation:ec-spin .7s linear infinite; flex-shrink:0; }
@keyframes ec-spin { to { transform:rotate(360deg); } }

/* ══════════════════════════════════════
   UTILIDADES
══════════════════════════════════════ */
.ec-separator { border:none; border-top:1px solid var(--ec-gray-200); margin:20px 0; }
.ec-mb-16 { margin-bottom:16px; } .ec-mb-24 { margin-bottom:24px; }
.ec-flex { display:flex; }
.ec-flex-between { display:flex; justify-content:space-between; align-items:center; }
.ec-gap-8 { gap:8px; }
.ec-fw-700 { font-weight:700; }
.ec-color-green { color:var(--ec-green); } .ec-color-gold { color:var(--ec-gold); } .ec-color-red { color:var(--ec-red); }
.ec-fs-12 { font-size:12px; } .ec-fs-13 { font-size:13px; }
.ec-text-right { text-align:right; } .ec-text-center { text-align:center; }
.ec-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.ec-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }

/* ══════════════════════════════════════
   AUTH (login / registro)
══════════════════════════════════════ */
.ec-auth-wrap { min-height:100vh; display:flex; background:var(--ec-gray-50); }
.ec-auth-panel { width:480px; max-width:100%; margin:auto; background:var(--ec-white); border-radius:var(--ec-radius); box-shadow:var(--ec-shadow-md); padding:40px; }
.ec-auth-logo { text-align:center; margin-bottom:28px; }
.ec-auth-logo .brand { font-size:32px; font-weight:900; color:var(--ec-green-dark); letter-spacing:-1px; }
.ec-auth-logo .brand span { color:var(--ec-gold); }
.ec-auth-logo p { font-size:14px; color:var(--ec-gray-600); margin-top:6px; }
.ec-auth-title { font-size:20px; font-weight:700; color:var(--ec-green-dark); margin-bottom:6px; }
.ec-auth-sub   { font-size:14px; color:var(--ec-gray-600); margin-bottom:24px; }
.ec-auth-footer { text-align:center; font-size:13px; color:var(--ec-gray-600); margin-top:20px; }
.ec-auth-footer a { color:var(--ec-green); font-weight:600; text-decoration:none; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 960px) {
  .ec-topnav__links { display:none; }
  .ec-topnav__user-pill .ec-topnav__user-info { display:none; }
  .ec-burger { display:flex; }
  .ec-content { padding:16px; }
  .ec-levels { grid-template-columns:repeat(3,1fr); }
  .ec-metrics { grid-template-columns:1fr 1fr; }
  .ec-grid-2,.ec-grid-3 { grid-template-columns:1fr; }
  .ec-countdown__icon { display:none; }
}
@media (max-width: 540px) {
  .ec-levels  { grid-template-columns:1fr 1fr; }
  .ec-metrics { grid-template-columns:1fr; }
  .ec-auth-panel { padding:24px 16px; }
  .ec-content { padding:12px; }
}

/* ══════════════════════════════════════
   RED — Acordeón de niveles
══════════════════════════════════════ */
.ec-net-level {
  border-radius: var(--ec-radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
  border: 1px solid var(--ec-gray-200);
}

.ec-net-level__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--ec-white);
  cursor: pointer;
  transition: background .15s;
  user-select: none;
  gap: 12px;
  flex-wrap: wrap;
}
.ec-net-level__header:hover { background: var(--ec-gray-50); }

.ec-net-level__toggle {
  font-size: 11px;
  color: var(--ec-gray-400);
  transition: transform .25s ease;
  flex-shrink: 0;
  width: 16px;
}

.ec-net-level__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 26px;
  border-radius: 20px;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0;
}

.ec-net-level__rate {
  font-size: 12px; font-weight: 700;
  color: var(--ec-green);
  background: var(--ec-green-pale);
  padding: 3px 10px; border-radius: 20px;
}

.ec-net-level__body {
  padding: 16px;
  background: var(--ec-gray-50);
  border-top: 1px solid var(--ec-gray-100);
}

/* Grid de tarjetas de afiliados */
.ec-net-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.ec-net-card {
  background: var(--ec-white);
  border-radius: var(--ec-radius-sm);
  border: 1.5px solid var(--ec-gray-200);
  padding: 12px 14px;
  transition: box-shadow .15s, border-color .15s;
}
.ec-net-card:hover {
  box-shadow: var(--ec-shadow);
}
.ec-net-card.active {
  border-left-width: 4px;
}
.ec-net-card.inactive {
  opacity: .75;
}
.ec-net-card--empty {
  border-style: dashed;
  cursor: pointer;
  opacity: .6;
  transition: opacity .15s;
}
.ec-net-card--empty:hover { opacity: 1; }

.ec-net-card__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.ec-net-card__name {
  font-size: 13px; font-weight: 700;
  color: var(--ec-gray-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ec-net-card__meta {
  font-size: 11px; color: var(--ec-gray-400);
  margin-top: 2px;
}

/* Sub-nivel anidado */
.ec-net-level__body .ec-net-level {
  background: var(--ec-white);
}
.ec-net-level__body .ec-net-level__body {
  background: var(--ec-gray-100);
  margin-left: 16px;
  border-left: 3px solid var(--ec-gray-200);
  border-radius: 0 0 var(--ec-radius-sm) var(--ec-radius-sm);
  padding: 12px;
}

@media (max-width: 640px) {
  .ec-net-cards { grid-template-columns: 1fr; }
  .ec-net-level__header { padding: 12px 14px; }
  .ec-net-level__rate { display: none; }
}