/* =======================
   ConectaClub — UI Base (limpio)
   ======================= */

/* Paleta */
:root{
  --bg:#0a0f1e;
  --bg-2:#111734;
  --card:#121a38cc;
  --card-solid:#152047;
  --primary:#5dd6ff;
  --primary-2:#3b82f6;
  --accent:#ff5b6e;
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;

  --text:#e9f0ff;
  --muted:#9db0d0;

  --radius:16px;
  --radius-sm:12px;
  --shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03) inset;
}

/* Reset + base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at -10% -10%, #ff385522 0%, transparent 45%),
    radial-gradient(1200px 800px at 110% 110%, #3b82f633 0%, transparent 45%),
    linear-gradient(180deg, #0b1024 0%, #0a0f1e 100%);
}

/* Contenedor */
.wrap{ width:100%; max-width:1050px; margin-inline:auto; padding:16px }

/* Tarjetas */
.card{
  background: linear-gradient(180deg, rgba(18,26,56,.8), rgba(18,26,56,.6));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Tipografía */
h1,h2,h3{ margin:0 0 10px; line-height:1.2 }
h2{ font-size:clamp(20px,4.5vw,26px) }
h3{ font-size:clamp(18px,4vw,22px) }
.muted{ color:var(--muted); font-size:14px }

/* Botones */
.btn{
  --bgBtn:linear-gradient(135deg,var(--primary) 0%,#7cc7ff 50%,var(--primary-2) 100%);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.08);
  background:var(--bgBtn); color:#04121e; font-weight:600; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow:0 6px 18px rgba(93,214,255,.25);
}
.btn:hover{ transform:translateY(-1px); filter:saturate(105%); box-shadow:0 10px 26px rgba(93,214,255,.35), 0 0 18px rgba(93,214,255,.25) }
.btn:active{ transform:translateY(0) scale(.98) }
.btn-outline{ background:transparent; color:var(--primary); border:1px solid rgba(93,214,255,.45); box-shadow:none }
.btn-outline:hover{ box-shadow:0 0 20px rgba(93,214,255,.25) }
.btn-danger{ --bgBtn:linear-gradient(135deg,#ff7a89,var(--accent)); color:#14060a; box-shadow:0 6px 18px rgba(255,91,110,.25) }
.btn-success{ --bgBtn:linear-gradient(135deg,#34d399,var(--success)); color:#04120a; box-shadow:0 6px 18px rgba(34,197,94,.24) }

/* Badges / Chips */
.badge{ display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; background:#1b2447; color:#bcd0ff; border:1px solid rgba(255,255,255,.06) }
.chip{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:linear-gradient(90deg, rgba(0,178,255,.15), rgba(120,0,255,.15));
  border:1px solid rgba(120,180,255,.35);
  color:#cfe8ff; font-size:13px;
}

/* Grids */
.grid{ display:grid; gap:12px }
.grid-2{ grid-template-columns:1fr }
@media (min-width:640px){ .grid-2{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:920px){ .grid-3{ grid-template-columns:repeat(3,1fr) } }

/* KPI */
.kpi{
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(180deg, rgba(21,32,71,.9), rgba(21,32,71,.65));
  border:1px solid rgba(93,214,255,.08); border-radius:var(--radius); padding:12px 14px;
}
.kpi .icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:radial-gradient(80% 80% at 30% 20%, rgba(93,214,255,.4), rgba(59,130,246,.25));
  color:#002033; font-weight:900; border:1px solid rgba(93,214,255,.25);
  box-shadow:0 6px 26px rgba(93,214,255,.25);
}
.kpi .value{ font-size:22px; font-weight:800 }
.kpi .label{ color:var(--muted); font-size:12px }

/* List */
.list{ display:flex; flex-direction:column; gap:12px }
.list .item{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-sm);
  padding:12px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}

/* Tabs */
.tabs{ display:flex; gap:8px; overflow:auto; padding-bottom:8px; margin-bottom:12px }
.tab{
  padding:10px 12px; border-radius:12px; background:#121a38; color:#bcd0ff; text-decoration:none; white-space:nowrap;
  border:1px solid rgba(255,255,255,.06); transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.tab.active,.tab:hover{ background:linear-gradient(135deg,#1a2b5e,#20356e); color:#fff; box-shadow:0 8px 20px rgba(93,214,255,.12) }

/* Inputs */
input,select,textarea{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.08);
  background:#0e1531; color:var(--text); outline:none; transition: box-shadow .15s ease, border-color .15s ease;
}
input:focus,select:focus,textarea:focus{ border-color:rgba(93,214,255,.45); box-shadow:0 0 0 4px rgba(93,214,255,.15) }

/* Animación */
@keyframes fadeUp{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.card,.kpi,.list .item{ animation:fadeUp .35s ease both }

/* Helpers */
.space{height:10px}
.right{margin-left:auto}
.center{text-align:center}

/* Flash alerts */
.alert{
  margin:10px auto; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.08); background:#0e1531; color:#cfe2ff; box-shadow:var(--shadow)
}
.alert.success{ border-color:rgba(34,197,94,.35); background:linear-gradient(180deg, rgba(16,36,29,.9), rgba(16,36,29,.7)); color:#dcfce7 }
.alert.error{ border-color:rgba(239,68,68,.35); background:linear-gradient(180deg, rgba(43,16,24,.9), rgba(43,16,24,.7)); color:#fee2e2 }

/* ===== PÚBLICO: Directorio & Empresa ===== */

/* Hero (búsqueda) */
.hero{ display:grid; gap:12px; margin-bottom:18px; text-align:center }
.hero h1{ font-size:28px; font-weight:700; margin:0 }
.hero .search{ display:flex; gap:8px; justify-content:center }
.hero .search input{
  max-width:420px; width:100%;
  padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04); color:#e8f0ff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Hero de empresa */
.hero-business{
  position:relative; border-radius:18px; overflow:hidden; min-height:160px;
  background: radial-gradient(100% 100% at 0% 0%, #0b1220 0%, #0b1220 60%) no-repeat,
              var(--hero) center/cover no-repeat;
}
.hero-business .hero-overlay{
  position:relative; padding:18px; min-height:160px;
  background:linear-gradient(0deg, rgba(11,18,32,.85), rgba(11,18,32,.65));
}
.hero-meta{ display:grid; grid-template-columns:56px 1fr; gap:12px; align-items:center }
.biz-logo{ width:56px; height:56px; border-radius:14px; object-fit:cover; border:1px solid #2b3c5c; box-shadow:0 0 0 3px rgba(37,99,235,.15) }
.hero-title{ margin:0 0 2px; font-size:22px }

/* Grilla de empresas — 3 por fila en desktop */
.biz-grid{
  display:grid;
  grid-template-columns:repeat(1, minmax(0,1fr));
  gap:14px;
}
@media (min-width:640px){ .biz-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (min-width:960px){ .biz-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) } }

/* Tarjeta de empresa */
.biz-card{
  display:block; border-radius:16px; padding:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 22px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.biz-card:hover{
  transform:translateY(-2px);
  border-color:rgba(80,180,255,.55);
  box-shadow:0 10px 26px rgba(0,0,0,.45), 0 0 22px rgba(80,180,255,.25);
}

/* Miniatura */
.biz-thumb{ width:100%; aspect-ratio:16/10; overflow:hidden; border-radius:12px; background:#0c1222 }
.biz-thumb img{ width:100%; height:100%; object-fit:cover; display:block }

/* Cuerpo */
.biz-body{ padding:10px 4px 6px }
.biz-body h3{ margin:6px 0 4px; font-size:18px }
.biz-actions{ margin-top:8px; display:flex; gap:8px; align-items:center }

/* Listados (cards) */
.card-listing .img{ width:100%; height:150px; object-fit:cover; border-radius:12px }
.card-listing .card-body{ display:grid; gap:6px }
.listing-title{ font-size:16px; font-weight:600 }
.price{ font-weight:700; letter-spacing:.2px }
/* ==== DIRECTORY: 3 por fila en desktop, compacto ==== */

/* Grid responsive: 1 col (móvil), 2 cols (tablet), 3 cols (desktop) */
.biz-grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(1, minmax(0,1fr));
}
@media (min-width:600px){
  .biz-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width:900px){
  .biz-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Card más compacta */
.biz-card{
  display:block;
  padding:10px;
  border-radius:12px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.biz-card:hover{
  transform: translateY(-2px);
  border-color: rgba(80,180,255,.55);
  box-shadow: 0 10px 22px rgba(0,0,0,.45), 0 0 16px rgba(80,180,255,.22);
}

/* Miniatura fija pequeña (evita que crezcan) */
.biz-thumb{
  width:100%;
  height:130px;                 /* <-- tamaño de imagen */
  overflow:hidden;
  border-radius:10px;
  background:#0c1222;
}
@media (min-width:900px){
  .biz-thumb{ height:140px; }   /* un pelín más grande en desktop */
}
.biz-thumb img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* Texto compacto */
.biz-body{ padding:10px 6px 6px; }
.biz-body h3{ margin:6px 0 4px; font-size:16px; line-height:1.2; }
.biz-body .muted{ font-size:12px; }
.chip{ font-size:12px; padding:5px 9px; }