/* ============================================================
   PAPIRO STUDIO — Layout CSS
   css/ps-layout.css
   App shell · Header · Nav · Dashboard · Admin
   ============================================================ */

/* ── App Header (tablero principal) ───────────────────────── */
.app-header {
  background: var(--ps-dark);
  padding: 11px 20px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  position: sticky; top: 0; z-index: var(--z-sticky);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.header-brand    { display: flex; align-items: center; gap: 10px; }
.header-logo {
  width: 32px; height: 32px; background: var(--ps-red); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff; flex-shrink: 0;
}
.header-title    { font-size: 14px; font-weight: 700; color: #fff; }
.header-subtitle { font-size: 11px; color: rgba(255,255,255,.4); }
.header-actions  { display: flex; align-items: center; gap: 7px; }

.header-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.7); font-size: 16px;
  transition: all var(--tr-base);
}
.header-back:hover { background: rgba(255,255,255,.16); color: #fff; }

/* User pill in dark header */
.user-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-full);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11);
}
.user-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.user-name     { font-size: 11px; color: rgba(255,255,255,.75); }
.user-role-tag {
  font-size: 10px; padding: 1px 6px; border-radius: var(--r-full); font-weight: 600;
}

/* ── Parrilla selector bar ────────────────────────────────── */
.parrilla-bar {
  background: var(--ps-mid); border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 7px 20px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.parrilla-bar-left, .parrilla-bar-right { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.parrilla-label { font-size: 11px; color: rgba(255,255,255,.4); white-space: nowrap; }

.parrilla-select {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-sm); padding: 5px 28px 5px 10px;
  font-size: 12px; color: #fff; outline: none; cursor: pointer; min-width: 170px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
  transition: border-color var(--tr-base);
}
.parrilla-select option { background: var(--ps-dark); }
.parrilla-select:focus  { border-color: rgba(255,255,255,.3); }

.parrilla-info-pill {
  font-size: 10px; color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.05); border-radius: var(--r-full); padding: 3px 9px;
  white-space: nowrap;
}

/* ── Stats bar ────────────────────────────────────────────── */
.stats-bar {
  background: var(--color-bg-card); padding: 8px 20px;
  display: flex; align-items: center; gap: 5px;
  border-bottom: 1px solid var(--color-border); flex-wrap: wrap;
}
.stat-pill {
  display: flex; align-items: center; gap: 4px;
  background: var(--g100); border-radius: var(--r-full); padding: 3px 9px;
  font-size: 11px; color: var(--g500); white-space: nowrap;
}
.stat-pill b      { font-size: 13px; font-weight: 700; color: var(--g900); }
.stat-pill.fb b   { color: var(--fb); }
.stat-pill.ig b   { color: var(--ig); }
.stat-pill.li b   { color: var(--li); }
.stat-pill.tt b   { color: var(--tt); }
.stat-pill.edu b  { color: var(--edu-color); }
.stat-pill.com b  { color: var(--com-color); }
.stat-pill.exp b  { color: var(--exp-color); }
.stat-pill.atr b  { color: var(--atr-color); }
.stats-divider    { width: 1px; height: 16px; background: var(--color-border); flex-shrink: 0; }

/* ── View switcher ────────────────────────────────────────── */
.view-bar {
  background: var(--ps-mid); padding: 6px 20px;
  display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.view-bar-label { font-size: 11px; color: rgba(255,255,255,.35); margin-right: 4px; }
.btn-view {
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.65);
  border-color: rgba(255,255,255,.12);
}
.btn-view.active  { background: rgba(230,48,37,.22); color: #FFB3AE; border-color: rgba(230,48,37,.45); }
.btn-view:hover:not(.active) { background: rgba(255,255,255,.13); }

/* ── Filters bar ──────────────────────────────────────────── */
.filters-bar {
  background: var(--color-bg-card); padding: 7px 20px;
  display: flex; align-items: center; gap: 5px;
  border-bottom: 1px solid var(--color-border); flex-wrap: wrap;
}
.filter-label { font-size: 11px; color: var(--g400); margin-right: 1px; }
.filter-btn {
  padding: 3px 10px; border-radius: var(--r-full); font-size: 11px; font-weight: 500;
  cursor: pointer; border: 1px solid var(--g200); background: var(--color-bg-card); color: var(--g500);
  transition: all var(--tr-base);
}
.filter-btn:hover { border-color: var(--g300); color: var(--g700); }
.filter-btn.active.fb  { background: var(--fb-bg);  border-color: var(--fb);        color: var(--fb-txt); }
.filter-btn.active.ig  { background: var(--ig-bg);  border-color: var(--ig);        color: var(--ig-txt); }
.filter-btn.active.li  { background: var(--li-bg);  border-color: var(--li);        color: var(--li-txt); }
.filter-btn.active.tt  { background: var(--tt-bg);  border-color: #555;             color: var(--tt-txt); }
.filter-btn.active.yt  { background: var(--yt-bg);  border-color: var(--yt);        color: var(--yt-txt); }
.filter-btn.active.tw  { background: var(--tw-bg);  border-color: var(--tw);        color: var(--tw-txt); }
.filter-btn.active.pi  { background: var(--pi-bg);  border-color: var(--pi);        color: var(--pi-txt); }
.filter-btn.active.gn  { background: var(--gn-bg);  border-color: var(--gn);        color: var(--gn-txt); }
.filter-btn.active.edu { background: var(--edu-bg); border-color: var(--edu-color); color: var(--edu-color); }
.filter-btn.active.com { background: var(--com-bg); border-color: var(--com-color); color: var(--com-color); }
.filter-btn.active.exp { background: var(--exp-bg); border-color: var(--exp-color); color: var(--exp-color); }
.filter-btn.active.atr { background: var(--atr-bg); border-color: var(--atr-color); color: var(--atr-color); }

.search-wrap { margin-left: auto; position: relative; }
.search-wrap .search-icon {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--g400); font-size: 13px; line-height: 1;
}
.search-input {
  padding: 5px 10px 5px 27px; border-radius: var(--r-full);
  border: 1px solid var(--color-border); font-size: 12px;
  color: var(--g700); background: var(--g50); outline: none; width: 160px;
  transition: all var(--tr-base);
}
.search-input:focus { border-color: var(--g400); background: var(--color-bg-card); width: 200px; }

/* ── Progress & Log (Trello build) ───────────────────────── */
.progress-wrap {
  display: none; padding: 7px 20px; background: var(--g50);
  border-bottom: 1px solid var(--color-border); gap: 10px; align-items: center;
}
.progress-wrap.visible { display: flex; }
.progress-track { flex: 1; height: 4px; background: var(--g200); border-radius: var(--r-full); overflow: hidden; }
.progress-fill  { height: 100%; background: var(--ps-red); border-radius: var(--r-full); width: 0%; transition: width .3s; }
.progress-pct   { font-size: 11px; color: var(--g500); min-width: 32px; text-align: right; }

.log-panel {
  display: none; max-height: 140px; overflow-y: auto;
  background: var(--ps-dark); padding: 8px 20px;
  font-size: 11px; line-height: 1.9; font-family: var(--font-mono);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.log-panel.visible { display: block; }
.log-ok   { color: #6EE7B7; }
.log-err  { color: #FCA5A5; }
.log-info { color: rgba(255,255,255,.4); }
.log-warn { color: #FDE68A; }

.result-banner {
  display: none; align-items: center; gap: 10px;
  padding: 9px 20px; background: #D1FAE5; border-bottom: 1px solid #6EE7B7; font-size: 13px;
}
.result-banner.visible { display: flex; }
.result-banner a { color: var(--color-success); font-weight: 600; text-decoration: underline; }

/* ── View panels ──────────────────────────────────────────── */
.view-panel { display: none; }
.view-panel.active { display: block; }

/* ── Dashboard layout ─────────────────────────────────────── */
.dash-page { background: var(--ps-dark); min-height: 100vh; }
.dash-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 24px; background: var(--ps-mid);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.dash-content { max-width: 960px; margin: 0 auto; padding: 44px 24px; }
.dash-hello   { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.dash-hello span { color: var(--ps-red); }
.dash-desc    { font-size: 14px; color: rgba(255,255,255,.4); margin-bottom: 36px; }
.dash-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: rgba(255,255,255,.3); margin-bottom: 12px;
}

/* Parrilla cards grid */
.parrilla-cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px; margin-bottom: 36px;
}
.parrilla-card {
  background: var(--ps-mid); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-xl); padding: 20px; cursor: pointer;
  transition: all var(--tr-slow); position: relative; overflow: hidden;
}
.parrilla-card:hover {
  border-color: var(--ps-red);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(230,48,37,.18);
}
.parrilla-card.is-active { border-color: var(--ps-red); background: rgba(230,48,37,.07); }
.parrilla-active-dot {
  position: absolute; top: 14px; right: 14px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--ps-red);
  display: none;
}
.parrilla-card.is-active .parrilla-active-dot { display: block; }
.parrilla-card-month  { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.parrilla-card-agency { font-size: 11px; color: rgba(255,255,255,.4); }
.parrilla-card-stats  { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.parrilla-card-stat {
  font-size: 10px; padding: 2px 8px; border-radius: var(--r-full);
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.5);
}
.parrilla-card-published {
  background: rgba(5,150,105,.15); color: #6EE7B7;
}
.parrilla-card-source { font-size: 10px; color: rgba(255,255,255,.2); margin-top: 8px; }

/* Quick action cards */
.quick-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.qa-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--ps-mid); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg); padding: 14px 18px; cursor: pointer;
  transition: all var(--tr-base); min-width: 180px;
}
.qa-card:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.05); }
.qa-icon  { font-size: 22px; flex-shrink: 0; }
.qa-title { font-size: 13px; font-weight: 600; color: #fff; }
.qa-sub   { font-size: 11px; color: rgba(255,255,255,.4); }

/* ── Admin layout ─────────────────────────────────────────── */
.admin-page { background: var(--ps-dark); min-height: 100vh; }
.admin-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 22px; background: var(--ps-mid);
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.admin-title { font-size: 15px; font-weight: 700; color: #fff; flex: 1; }

.admin-layout { display: flex; min-height: calc(100vh - 54px); }

.admin-nav {
  width: 190px; flex-shrink: 0;
  background: rgba(255,255,255,.025);
  border-right: 1px solid rgba(255,255,255,.06);
  padding: 14px 8px;
}
.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-sm);
  color: rgba(255,255,255,.5); font-size: 13px; font-weight: 500;
  cursor: pointer; margin-bottom: 2px;
  transition: all var(--tr-base); border: 1px solid transparent;
}
.nav-item:hover  { background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); }
.nav-item.active { background: rgba(230,48,37,.15); border-color: rgba(230,48,37,.3); color: #FFB3AE; }
.nav-item-icon   { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }

.admin-content { flex: 1; padding: 26px 28px; overflow-y: auto; }

.admin-section-header {
  display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; gap: 10px;
}
.admin-section-title { font-size: 19px; font-weight: 700; color: #fff; }
.admin-section-sub   { font-size: 12px; color: rgba(255,255,255,.4); margin-top: 2px; }

/* Admin table */
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  background: rgba(255,255,255,.04); color: rgba(255,255,255,.4);
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  padding: 8px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06);
}
.admin-table td {
  padding: 11px 12px; border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 13px; color: rgba(255,255,255,.75); vertical-align: middle;
}
.admin-table tr:hover td { background: rgba(255,255,255,.025); }
.admin-table tr.is-inactive td { opacity: .45; }
.admin-table .empty-row td {
  text-align: center; padding: 32px; color: rgba(255,255,255,.25); font-style: italic;
}

/* Admin form panel */
.admin-form-panel {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg); padding: 22px; margin-bottom: 20px;
}
.admin-form-panel h3 { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 14px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-col-full { grid-column: 1 / -1; }

/* User row display */
.user-row-name { display: flex; align-items: center; gap: 10px; }
.user-row-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.user-row-display-name { font-weight: 600; color: #fff; }
.user-row-username      { font-size: 11px; color: rgba(255,255,255,.35); }

/* Role badge */
.role-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-full); font-size: 11px; font-weight: 600;
}
.status-pill {
  padding: 2px 8px; border-radius: var(--r-full); font-size: 11px; font-weight: 500;
}
.status-pill.active   { background: rgba(5,150,105,.2);  color: #6EE7B7; }
.status-pill.inactive { background: rgba(107,114,128,.2); color: rgba(255,255,255,.4); }

/* Parrilla checkboxes in user form */
.parrilla-check-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.parrilla-check-item {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--r-full); font-size: 11px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.6); cursor: pointer; transition: all var(--tr-base); user-select: none;
}
.parrilla-check-item:hover  { border-color: rgba(255,255,255,.2); }
.parrilla-check-item.checked { background: rgba(230,48,37,.15); border-color: rgba(230,48,37,.4); color: #FFB3AE; }

/* Action buttons in tables */
.table-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.action-btn {
  padding: 4px 9px; border-radius: var(--r-xs); font-size: 11px; font-weight: 500;
  cursor: pointer; border: 1px solid transparent; background: transparent;
  font-family: var(--font-sans); transition: all var(--tr-base); color: rgba(255,255,255,.5);
}
.action-btn:hover        { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); }
.action-btn.danger:hover { background: rgba(230,48,37,.15); color: #FCA5A5; border-color: rgba(230,48,37,.3); }
.action-btn.primary      { background: rgba(230,48,37,.15); color: #FFB3AE; border-color: rgba(230,48,37,.3); }
.action-btn.primary:hover { background: rgba(230,48,37,.25); }

/* ── Empty state ──────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 40px 20px;
  color: rgba(255,255,255,.3); font-size: 13px;
}
.empty-state-icon { font-size: 40px; margin-bottom: 12px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .admin-nav { width: 160px; }
  .admin-content { padding: 16px; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .dash-content { padding: 24px 16px; }
  .parrilla-cards-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .admin-layout { flex-direction: column; }
  .admin-nav { width: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); }
  .nav-item { display: inline-flex; }
  .quick-actions { flex-direction: column; }
}