@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap');

/* ═══════════════════════ TOKENS (neobrutalism) ═══════════════════════ */
:root{
  --primary:#FDC800; --secondary:#432DD7;
  --success:#16A34A; --warning:#D97706; --danger:#DC2626;
  --surface:#FBFBF9; --ink:#1C293C; --paper:#FFFFFF;
  --muted:#5B6776;

  --bd:3px solid var(--ink);
  --bd-thin:2px solid var(--ink);
  --sh:4px 4px 0 var(--ink);
  --sh-lg:6px 6px 0 var(--ink);
  --sh-sm:3px 3px 0 var(--ink);

  --r:6px;
  --f-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'Courier New',monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--f-sans); color:var(--ink);
  background:var(--surface);
  background-image:radial-gradient(var(--ink) 1.2px, transparent 1.2px);
  background-size:26px 26px; background-position:-13px -13px;
  font-size:15px; line-height:1.45;
}
h1,h2,h3{margin:0; line-height:1.1; letter-spacing:-.02em}
a{color:inherit}

/* ═══════════════════════ BOTONES ═══════════════════════ */
.nb-btn{
  font-family:var(--f-sans); font-weight:800; font-size:15px;
  border:var(--bd); border-radius:var(--r); background:var(--paper);
  color:var(--ink); padding:10px 16px; cursor:pointer;
  box-shadow:var(--sh); transition:transform .08s ease, box-shadow .08s ease;
  display:inline-flex; align-items:center; gap:6px; line-height:1;
}
.nb-btn:hover{transform:translate(-2px,-2px); box-shadow:var(--sh-lg)}
.nb-btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
.nb-btn:focus-visible{outline:3px solid var(--secondary); outline-offset:2px}
.nb-btn-primary{background:var(--primary)}
.nb-btn-secondary{background:var(--secondary); color:#fff}
.nb-btn-ghost{background:var(--paper)}
.nb-btn-block{width:100%; justify-content:center; margin-top:var(--s4)}
.nb-btn-sm{padding:7px 12px; font-size:13px; box-shadow:var(--sh-sm)}
.nb-btn-danger{background:var(--danger); color:#fff}

/* ═══════════════════════ INPUTS ═══════════════════════ */
.nb-input{
  font-family:var(--f-sans); font-size:15px; color:var(--ink);
  width:100%; padding:10px 12px; background:var(--paper);
  border:var(--bd); border-radius:var(--r); box-shadow:var(--sh-sm);
}
.nb-input:focus{outline:none; box-shadow:var(--sh); border-color:var(--secondary)}
.nb-input:focus-visible{outline:3px solid var(--secondary); outline-offset:2px}
.nb-input-sm{padding:7px 10px; font-size:13.5px; box-shadow:none; border:var(--bd-thin)}
textarea.nb-input{resize:vertical; min-height:46px}
select.nb-input{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:30px}

.field-label{display:block; font-size:13px; font-weight:700; margin:0 0 5px; color:var(--ink)}
.login-card .field-label{margin-top:var(--s3)}

/* ═══════════════════════ LOGIN ═══════════════════════ */
.login-body{min-height:100dvh; display:grid; place-items:center; padding:var(--s4)}
.login-card{
  width:100%; max-width:380px; background:var(--paper);
  border:var(--bd); border-radius:12px; box-shadow:var(--sh-lg);
  padding:var(--s8) var(--s6) var(--s6); text-align:center;
}
.login-badge{
  width:58px; height:58px; display:grid; place-items:center; margin:0 auto var(--s4);
  background:var(--primary); border:var(--bd); border-radius:12px;
  box-shadow:var(--sh); font-size:28px; line-height:1;
}
.login-title{font-size:34px; font-weight:900}
.login-sub{margin:var(--s2) 0 var(--s6); color:var(--muted); font-weight:600; font-size:13px}
.login-foot{margin:var(--s6) 0 0; font-size:11.5px; color:var(--muted)}
.login-card form{text-align:left}

/* ═══════════════════════ ALERTAS / TOAST ═══════════════════════ */
.alert{border:var(--bd); border-radius:var(--r); padding:10px 12px; font-weight:600; font-size:13.5px; text-align:left; box-shadow:var(--sh-sm); margin-bottom:var(--s3)}
.alert-danger{background:#FFE2E2; color:#7f1212; border-color:var(--danger)}
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-weight:700; font-size:14px;
  padding:12px 18px; border-radius:var(--r); border:var(--bd-thin);
  box-shadow:var(--sh); z-index:60;
}
.toast.is-err{background:var(--danger)}

/* ═══════════════════════ TOPBAR ═══════════════════════ */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); padding:14px var(--s6);
  background:var(--primary); border-bottom:var(--bd);
}
.topbar-left{display:flex; align-items:center; gap:var(--s3)}
.logo-badge{width:40px; height:40px; display:grid; place-items:center; background:var(--paper); border:var(--bd); border-radius:8px; box-shadow:var(--sh-sm); font-size:20px}
.topbar-title{display:block; font-size:18px; font-weight:900; line-height:1}
.topbar-sub{display:block; font-size:11.5px; font-weight:600; color:#5a4a00}
.topbar-right{display:flex; align-items:center; gap:var(--s3)}
.user-chip{font-family:var(--f-mono); font-weight:700; font-size:12.5px; background:var(--paper); border:var(--bd-thin); border-radius:20px; padding:5px 12px; box-shadow:var(--sh-sm)}

/* ═══════════════════════ LAYOUT ═══════════════════════ */
.wrap{max-width:1180px; margin:0 auto; padding:var(--s6); display:flex; flex-direction:column; gap:var(--s6)}
.panel{background:var(--paper); border:var(--bd); border-radius:10px; box-shadow:var(--sh); padding:var(--s6)}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s4); flex-wrap:wrap}
.panel-title{font-size:18px; font-weight:900}

/* ── Período ── */
.period-bar{display:flex; flex-direction:column; gap:var(--s3)}
.period-presets{display:flex; flex-wrap:wrap; gap:var(--s2)}
.nb-chip{
  font-family:var(--f-sans); font-weight:700; font-size:13px; cursor:pointer;
  background:var(--paper); border:var(--bd-thin); border-radius:20px; padding:7px 14px;
  box-shadow:var(--sh-sm); transition:transform .08s, box-shadow .08s, background .08s;
}
.nb-chip:hover{transform:translate(-1px,-1px); box-shadow:var(--sh)}
.nb-chip:focus-visible{outline:3px solid var(--secondary); outline-offset:2px}
.nb-chip.is-active{background:var(--secondary); color:#fff}
.period-range{display:flex; align-items:flex-end; gap:var(--s3); flex-wrap:wrap}
.period-range .field-label{margin:0; display:flex; flex-direction:column; gap:4px}
.period-label{font-family:var(--f-mono); font-weight:700; font-size:13px; color:var(--muted)}

/* ── Resumen ── */
.summary-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s4)}
.brand-card{background:var(--paper); border:var(--bd); border-radius:10px; box-shadow:var(--sh); padding:var(--s4) var(--s4) var(--s4); position:relative; overflow:hidden}
.brand-card::before{content:""; position:absolute; inset:0 auto 0 0; width:8px; background:var(--primary)}
.brand-card:nth-child(2)::before{background:var(--secondary)}
.brand-card:nth-child(3)::before{background:var(--success)}
.brand-card h3{font-size:16px; font-weight:900; margin-bottom:var(--s3); padding-left:6px}
.metrics{display:flex; gap:var(--s2); padding-left:6px}
.metric{flex:1; border:var(--bd-thin); border-radius:8px; padding:8px 6px; text-align:center; background:var(--surface)}
.metric .num{font-family:var(--f-mono); font-weight:700; font-size:21px; display:block; line-height:1.1}
.metric .lab{font-size:10.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em}
.metric.is-rating .num{color:#b88a00}
.metric.is-pending .num{color:var(--danger)}
.brand-plats{display:flex; gap:6px; flex-wrap:wrap; margin-top:var(--s3); padding-left:6px}
.plat-pill{font-size:11px; font-weight:700; border:var(--bd-thin); border-radius:6px; padding:3px 8px; background:var(--surface)}
.plat-pill b{font-family:var(--f-mono)}

/* ── Filtros ── */
.filters{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--s3); margin-bottom:var(--s4)}

/* ── Tabla ── */
.table-scroll{overflow-x:auto; border:var(--bd-thin); border-radius:8px}
.nb-table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:820px}
.nb-table thead th{
  background:var(--ink); color:#fff; text-align:left; font-weight:800; font-size:12px;
  text-transform:uppercase; letter-spacing:.03em; padding:10px 12px; white-space:nowrap;
}
.nb-table tbody td{padding:10px 12px; border-top:var(--bd-thin); vertical-align:top}
.nb-table tbody tr:nth-child(even){background:var(--surface)}
.nb-table tbody tr:hover{background:#FFF6CC}
.cell-date{font-family:var(--f-mono); font-weight:700; white-space:nowrap}
.cell-summary{max-width:280px}
.cell-stars{font-family:var(--f-mono); font-weight:700; white-space:nowrap}
.badge{display:inline-block; font-size:11px; font-weight:800; border:var(--bd-thin); border-radius:20px; padding:3px 9px; white-space:nowrap}
.badge-plat{background:var(--surface)}
.badge.g{background:#E8F0FE} .badge.f{background:#E7ECFF} .badge.t{background:#E6F7EC}
.badge-ans{background:#DCFCE7; border-color:var(--success); color:#0f5132}
.badge-pen{background:#FFE2E2; border-color:var(--danger); color:#7f1212}
.row-actions{display:flex; gap:6px; white-space:nowrap}
.icon-btn{border:var(--bd-thin); border-radius:6px; background:var(--paper); width:32px; height:32px; cursor:pointer; font-size:14px; box-shadow:var(--sh-sm); transition:transform .08s}
.icon-btn:hover{transform:translate(-1px,-1px)}
.icon-btn.del:hover{background:#FFE2E2}
.empty{text-align:center; padding:var(--s8) var(--s4); color:var(--muted); font-weight:600}

/* ═══════════════════════ MODAL ═══════════════════════ */
.modal-overlay{position:fixed; inset:0; background:rgba(28,41,60,.5); display:grid; place-items:center; padding:var(--s4); z-index:50}
.modal-card{width:100%; max-width:620px; max-height:92dvh; overflow:auto; background:var(--paper); border:var(--bd); border-radius:12px; box-shadow:var(--sh-lg)}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:var(--s4) var(--s6); background:var(--primary); border-bottom:var(--bd); position:sticky; top:0}
.modal-head h3{font-size:19px; font-weight:900}
.modal-close{border:var(--bd-thin); background:var(--paper); width:34px; height:34px; border-radius:8px; cursor:pointer; font-weight:800; box-shadow:var(--sh-sm)}
.modal-close:hover{transform:translate(-1px,-1px)}
#reviewForm{padding:var(--s6)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
.field-full{grid-column:1 / -1}
.form-grid .field-label{margin:0}
.modal-actions{display:flex; justify-content:flex-end; gap:var(--s3); margin-top:var(--s6)}

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media (max-width:640px){
  .wrap{padding:var(--s4)}
  .panel{padding:var(--s4)}
  .topbar{padding:12px var(--s4)}
  .topbar-sub{display:none}
  .form-grid{grid-template-columns:1fr}
  .login-title{font-size:30px}
}

/* ═══════════════════════ FIX MODAL (ocultar overlay con [hidden]) ═══════════════════════ */
.modal-overlay[hidden]{display:none !important}

/* ═══════════════════════ FANTASMAS PAC-MAN (decorativo, no altera el layout) ═══════════════════════ */
.brand-card{ } /* la tarjeta ya tiene position:relative y overflow:hidden en el diseño original */

.brand-card .pac-ghost{
  position:absolute; top:12px; right:12px;
  width:26px; height:26px; pointer-events:none; z-index:1;
  animation:pac-float 2.6s ease-in-out infinite;
}
.brand-card:nth-child(2) .pac-ghost{ animation-delay:.4s }
.brand-card:nth-child(3) .pac-ghost{ animation-delay:.8s }

@keyframes pac-float{
  0%,100%{ transform:translateY(0) }
  50%   { transform:translateY(-5px) }
}

@media (prefers-reduced-motion: reduce){
  .brand-card .pac-ghost{ animation:none }
}