/* ============================================================
   fase5.css — Monetización: Licencias · Marketing · Holding · Directorio
   ============================================================ */

/* ══ LICENCIAS — grid de tarjetas de catálogo ══ */
.lic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.lic-card {
  background: var(--surface1);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.lic-card-inactive { opacity: .55; }
.lic-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.lic-card-name { font-size: 15px; font-weight: 800; color: var(--text); }
.lic-card-price {
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 12px;
}
.lic-card-cycle { font-size: 12px; font-weight: 600; color: var(--text-2); margin-left: 4px; }
.lic-card-features {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.lic-card-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
}
.lic-card-features li svg { width: 15px; height: 15px; color: var(--success); flex: none; }
.lic-empty-feat { color: var(--text-2); opacity: .5; }
.lic-card-actions { margin-top: auto; }

/* ══ MARKETING — composer de campañas ══ */
.mkt-channel-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.mkt-channel-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface1);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  transition: border-color .12s, background .12s, color .12s;
  -webkit-tap-highlight-color: transparent;
}
.mkt-channel-tab svg { width: 16px; height: 16px; }
.mkt-channel-tab:hover { border-color: var(--accent); }
.mkt-channel-tab.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface1));
  color: var(--accent);
}
.mkt-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 50px 24px;
  text-align: center;
  background: var(--surface1);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.mkt-locked svg { width: 40px; height: 40px; color: var(--premium); opacity: .7; }
.mkt-locked-title { font-size: 16px; font-weight: 800; color: var(--text); }
.mkt-locked-body { font-size: 13px; color: var(--text-2); max-width: 380px; }

/* ══ HOLDING — desglose por Cliente APP ══ */
.hold-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.hold-card {
  background: var(--surface1);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  cursor: pointer;
  transition: border-color .12s;
}
.hold-card:hover { border-color: var(--accent); }
.hold-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hold-card-name { font-size: 15px; font-weight: 800; color: var(--text); }
.hold-card-sub { font-size: 12px; color: var(--text-2); }
.hold-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hold-stat { display: flex; flex-direction: column; gap: 2px; }
.hold-stat-val { font-size: 17px; font-weight: 800; color: var(--text); }
.hold-stat-lbl { font-size: 10.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; }
.hold-detail-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface1);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 16px;
}
.hold-back-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--accent); font-size: 13px; font-weight: 700;
  padding: 8px 0; margin-bottom: 12px;
}
.hold-back-btn svg { width: 16px; height: 16px; }

/* ══ DIRECTORIO PÚBLICO (dentro del app, vista MASTER) ══ */
.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.dir-card {
  background: #FFFFFF;
  border: 1px solid #DCE6EF;
  border-radius: 16px;
  padding: 16px;
  position: relative;
}
[data-theme="dark"] .dir-card {
  background: #1B2436;
  border-color: #2E3A4E;
}
.dir-card-verified {
  position: absolute;
  top: 14px;
  right: 14px;
}
.dir-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.dir-card-cat { font-size: 11px; color: #6B7280; font-weight: 600; margin-top: 2px; }
[data-theme="dark"] .dir-card-cat { color: #7B8FA6; }

@media (max-width: 700px) {
  .lic-grid, .hold-grid, .dir-grid { grid-template-columns: 1fr; }
  .mkt-channel-tabs { flex-direction: column; }
}

/* ══ PÁGINA PÚBLICA — /directorio (sin login, fuera del shell) ══ */
.pubdir-page {
  min-height: 100vh;
  background: #FFFFFF;
  font-family: 'Inter', system-ui, sans-serif;
}
.pubdir-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #DCE6EF;
  position: sticky;
  top: 0;
  background: #FFFFFF;
  z-index: 10;
}
.pubdir-logo { display: flex; align-items: center; gap: 10px; }
.pubdir-logo img { height: 28px; }
.pubdir-logo-name { font-size: 16px; font-weight: 800; color: #0C2D48; }
.pubdir-hero {
  padding: 40px 24px 24px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.pubdir-hero h1 { font-size: 26px; font-weight: 800; color: #0C2D48; margin: 0 0 8px; }
.pubdir-hero p { font-size: 14px; color: #4A6B8A; margin: 0 0 22px; }
.pubdir-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F6F9FC;
  border: 1.5px solid #DCE6EF;
  border-radius: 99px;
  padding: 12px 20px;
  max-width: 480px;
  margin: 0 auto;
}
.pubdir-search svg { width: 18px; height: 18px; color: #4A6B8A; flex: none; }
.pubdir-search input { flex: 1; border: none; background: none; outline: none; font-size: 14px; color: #0C2D48; font-family: 'Inter', sans-serif; }
.pubdir-cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 18px auto 0;
  max-width: 720px;
  padding: 0 24px;
}
.pubdir-cat-chip {
  padding: 7px 16px;
  border-radius: 99px;
  border: 1.5px solid #DCE6EF;
  background: #F6F9FC;
  font-size: 12.5px;
  font-weight: 600;
  color: #4A6B8A;
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.pubdir-cat-chip.active, .pubdir-cat-chip:hover { border-color: #0E7490; color: #0E7490; }
.pubdir-grid {
  max-width: 1100px;
  margin: 32px auto;
  padding: 0 24px 60px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.pubdir-card {
  background: #F6F9FC;
  border: 1px solid #DCE6EF;
  border-radius: 16px;
  padding: 18px;
  position: relative;
}
.pubdir-card-priority {
  border: 1.5px solid #7C3AED;
  background: #FBFAFF;
}
.pubdir-badge-verified {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #EDE9FE;
  color: #7C3AED;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pubdir-badge-verified svg { width: 11px; height: 11px; }
.pubdir-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pubdir-avatar {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: 17px;
  flex: none;
}
.pubdir-card-name { font-size: 15px; font-weight: 800; color: #0C2D48; }
.pubdir-card-cat { font-size: 12px; color: #4A6B8A; font-weight: 600; }
.pubdir-card-city { font-size: 11.5px; color: #4A6B8A; margin-top: 2px; }
.pubdir-card-desc { font-size: 12.5px; color: #4A6B8A; line-height: 1.5; margin: 10px 0 14px; }
.pubdir-card-actions { display: flex; gap: 8px; }
.pubdir-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid transparent;
  -webkit-tap-highlight-color: transparent;
}
.pubdir-btn svg { width: 14px; height: 14px; }
.pubdir-btn-primary { background: #0E7490; color: #fff; }
.pubdir-btn-primary:hover { background: #0891B2; }
.pubdir-btn-ghost { background: #fff; border-color: #DCE6EF; color: #0C2D48; }
.pubdir-btn-ghost:hover { border-color: #0E7490; color: #0E7490; }
.pubdir-empty { text-align: center; padding: 60px 24px; color: #4A6B8A; }
.pubdir-loading { display: flex; align-items: center; justify-content: center; min-height: 50vh; color: #4A6B8A; }

/* ══ MÓDULO USUARIOS — árbol padre-hijo (Fase D) ══ */

/* Encabezados de sección (App Clients / Colaboradores del Master) */
.usr-section-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-2);
  padding: 14px 16px 6px;
  border-bottom: 1px solid var(--border);
}

/* Bloque de hijos (colaboradores de un Cliente APP) */
.usr-children {
  background: color-mix(in srgb, var(--accent) 3%, var(--surface1));
  border-bottom: 1px solid var(--border);
}
.usr-children .usr-row {
  border-left: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Flecha de árbol */
.usr-child-indent {
  display: flex;
  align-items: center;
  color: var(--text-2);
  opacity: .5;
  flex: none;
  margin-right: 2px;
}
.usr-child-indent svg { width: 14px; height: 14px; transform: rotate(-90deg); }

/* Fila de usuario — usa dl-row como base, columnas propias */
.usr-row {
  display: grid;
  grid-template-columns: 1fr 130px 100px 220px;
  gap: 8px;
  align-items: center;
  padding: 10px 16px;
  min-height: 52px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.usr-row:last-child { border-bottom: none; }
.usr-row:hover { background: var(--surface2); }

.usr-role-col   { }
.usr-status-col { }
.usr-actions-col {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-wrap: wrap;
}

/* Responsive móvil */
@media (max-width: 980px) {
  .usr-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "info actions" "roles roles";
    gap: 6px;
    padding: 12px 14px;
  }
  .dc-client        { grid-area: info; }
  .usr-actions-col  { grid-area: actions; }
  .usr-role-col,
  .usr-status-col   { grid-area: roles; display: inline-flex; gap: 6px; }
}