*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── VARIABLES MODO OSCURO (default) ── */
:root {
  --bg:          #0a0a0a;
  --bg2:         #111;
  --bg3:         #1e1e1e;
  --bg-footer:   #050505;
  --border:      #1a1a1a;
  --border2:     #2a2a2a;
  --border3:     #222;
  --text:        #fff;
  --text2:       #aaa;
  --text3:       #888;
  --text4:       #666;
  --text5:       #555;
  --text6:       #444;
  --num-top:     #777;
  --tab-inactive:#777;
  --cat-inactive:#666;
  --col-header:  #444;
  --stat-subs:   #aaa;
  --stat-vids:   #555;
  --stat-label:  #555;
  --more-border: #333;
  --more-color:  #888;
  --form-bg:     #111;
  --form-border: #2a2a2a;
  --form-text:   #fff;
  --form-ph:     #444;
  --select-bg:   #111;
  --footer-text: #F7F9FA;
  --footer-bg:   #050505;
  --footer-div:  #1e1e1e;
  --hub-color:   #fff;
  --cl-color:    #666;
  --loading:     #555;
  --thumb-bg:    #111;
  --switch-bg:   #333;
  --switch-knob: #888;
}

/* ── VARIABLES MODO CLARO ── */
body.light {
  --bg:          #f5f5f5;
  --bg2:         #fff;
  --bg3:         #e8e8e8;
  --bg-footer:   #ebebeb;
  --border:      #e0e0e0;
  --border2:     #d0d0d0;
  --border3:     #ddd;
  --text:        #111;
  --text2:       #444;
  --text3:       #666;
  --text4:       #888;
  --text5:       #999;
  --text6:       #aaa;
  --num-top:     #555;
  --tab-inactive:#999;
  --cat-inactive:#888;
  --col-header:  #aaa;
  --stat-subs:   #555;
  --stat-vids:   #aaa;
  --stat-label:  #aaa;
  --more-border: #ccc;
  --more-color:  #888;
  --form-bg:     #fff;
  --form-border: #ddd;
  --form-text:   #111;
  --form-ph:     #bbb;
  --select-bg:   #fff;
  --footer-text: #444;
  --footer-bg:   #ebebeb;
  --footer-div:  #d0d0d0;
  --hub-color:   #111;
  --cl-color:    #aaa;
  --loading:     #aaa;
  --thumb-bg:    #e8e8e8;
  --switch-bg:   #ccc;
  --switch-knob: #fff;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  transition: background .25s, color .25s;
}

/* NAV */
.ph-nav { border-bottom: 1px solid var(--border); padding: 22px 0; }
.ph-nav-inner, .ph-wrap { max-width: 748px; margin: 0 auto; width: 88%; }
.ph-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* LOGO */
.ph-logo { display:flex; align-items:center; gap:0; font-family:'DM Sans',system-ui,sans-serif; font-size:30px; font-weight:800; letter-spacing:-1px; flex-shrink:0; }
.ph-logo .pod { background:#ff2222; color:#fff; padding:2px 8px 2px 6px; border-radius:4px 0 0 4px; }
.ph-logo .hub { color: var(--hub-color); padding:2px 0; transition: color .25s; }
.ph-logo .cl  { color: var(--cl-color); font-size:20px; font-weight:600; margin-left:2px; align-self:flex-end; padding-bottom:3px; transition: color .25s; }

/* NAV RIGHT — live + switch */
.ph-nav-right { display: flex; align-items: center; gap: 14px; }
.ph-live { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text2); }
.ph-live i { width: 8px; height: 8px; border-radius: 50%; background: #ff2222; display: inline-block; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:.3;transform:scale(.75);} }

/* SWITCH */
.ph-switch { display: flex; align-items: center; gap: 7px; cursor: pointer; flex-shrink: 0; }
.ph-switch-label { font-size: 12px; color: var(--text3); user-select: none; }
.ph-switch-track {
  width: 36px; height: 20px; border-radius: 10px;
  background: var(--switch-bg);
  position: relative; cursor: pointer;
  transition: background .25s;
}
.ph-switch-track.on { background: #ff2222; }
.ph-switch-knob {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--switch-knob);
  position: absolute; top: 3px; left: 3px;
  transition: transform .25s, background .25s;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.ph-switch-track.on .ph-switch-knob { transform: translateX(16px); background: #fff; }

/* HERO */
.ph-hero { padding: 32px 0 0; }
.ph-hero h1 { font-size: 36px; font-weight: 700; letter-spacing: -.8px; color: var(--text); line-height: 1.1; transition: color .25s; }
.ph-hero h1 span { color: #ff2222; }
.ph-hero p { font-size: 15px; color: var(--text3); margin-top: 8px; transition: color .25s; }

/* TABS */
.ph-tabs { display: flex; margin-top: 24px; border-bottom: 1px solid var(--border2); }
.ph-tab {
  font-size: 15px; font-weight: 500; color: var(--tab-inactive);
  padding: 10px 20px 10px 0;
  cursor: pointer; border: none; background: none; font-family: inherit;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s; white-space: nowrap;
}
.ph-tab:hover { color: var(--text2); }
.ph-tab.active { color: var(--text); border-bottom-color: #ff2222; }

/* CATS */
.ph-cats { display: flex; gap: 6px; padding: 16px 0; flex-wrap: wrap; }
.ph-cat {
  font-size: 13px; font-weight: 500; color: var(--cat-inactive);
  background: transparent; border: 1px solid var(--border2);
  padding: 5px 14px; border-radius: 20px;
  cursor: pointer; font-family: inherit;
  transition: all .15s; white-space: nowrap;
}
.ph-cat:hover { color: var(--text2); border-color: var(--text6); }
.ph-cat.active { color: var(--text); border-color: var(--text2); background: var(--bg3); }

/* COUNT */
.ph-count { padding: 0 0 12px; font-size: 12px; color: var(--text3); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }

/* LIST */
.ph-list { display: flex; flex-direction: column; }
.ph-item {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 0; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: opacity .15s;
}
.ph-item:hover { opacity: .7; }
.ph-item:last-child { border-bottom: none; }
.ph-num { font-size: 14px; font-weight: 500; color: var(--text6); width: 24px; text-align: right; flex-shrink: 0; }
.ph-num.top { color: var(--num-top); }
.ph-thumb { width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0; background: var(--thumb-bg); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: background .25s; }
.ph-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ph-mid { flex: 1; min-width: 0; }
.ph-ch { font-size: 17px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .25s; }
.ph-tt { font-size: 13px; color: var(--text3); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .25s; }

/* HEADER COLUMNAS */
.ph-cols-header { display: flex; align-items: center; gap: 16px; padding: 6px 0 8px; border-bottom: 1px solid var(--border3); margin-bottom: 2px; }
.phch-num  { width: 22px; flex-shrink: 0; }
.phch-thumb{ width: 46px; flex-shrink: 0; }
.phch-mid  { flex: 1; min-width: 0; }
.phch-stats{ display: flex; gap: 20px; flex-shrink: 0; }
.phch-col  { width: 56px; text-align: right; font-size: 10px; font-weight: 600; color: var(--col-header); text-transform: uppercase; letter-spacing: .08em; }
.phch-col.plat { width: 36px; }
.ph-stat-plat { width: 36px; display: flex; align-items: center; justify-content: flex-end; }
.ph-stats { display: flex; gap: 20px; flex-shrink: 0; align-items: center; }
.ph-stat  { width: 56px; text-align: right; }
.ph-stat-v { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -.4px; transition: color .25s; }
.ph-stat-v.subs { color: var(--stat-subs); }
.ph-stat-v.vids { color: var(--stat-vids); }
.ph-stat-l { font-size: 10px; color: var(--stat-label); text-transform: uppercase; letter-spacing: .06em; margin-top: 1px; }
.ph-badge { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 3px; }
.ph-badge.yt { background: #ff22221a; color: #ff5555; }
.ph-badge.tw { background: #9147ff1a; color: #9147ff; }
.ph-badge.ki { background: #53fc181a; color: #53fc18; }

/* VER MAS */
.ph-more-wrap { padding: 20px 0; text-align: center; }
.ph-more-btn {
  background: transparent; border: 1px solid var(--more-border); color: var(--more-color);
  font-size: 14px; font-weight: 500; padding: 10px 28px;
  cursor: pointer; font-family: inherit; border-radius: 4px;
  transition: all .15s;
}
.ph-more-btn:hover { border-color: var(--text3); color: var(--text); }

.ph-foot { padding: 8px 0 16px; font-size: 12px; color: var(--text6); }
.ph-loading { padding: 40px 0; text-align: center; font-size: 14px; color: var(--loading); }

/* FORMULARIO */
.ph-form-section { max-width: 748px; margin: 40px auto 0; width: 88%; border-top: 1px solid var(--border); padding-top: 32px; }
.ph-form-title { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 6px; transition: color .25s; }
.ph-form-sub { font-size: 14px; color: var(--text4); margin-bottom: 18px; }
.ph-form { display: flex; flex-direction: column; gap: 12px; }
.ph-form input, .ph-form select {
  background: var(--form-bg); border: 1px solid var(--form-border);
  color: var(--form-text); font-size: 14px; font-family: inherit;
  padding: 11px 14px; border-radius: 4px; outline: none;
  transition: border-color .15s, background .25s, color .25s; width: 100%;
}
.ph-form input::placeholder { color: var(--form-ph); }
.ph-form input:focus, .ph-form select:focus { border-color: var(--text3); }
.ph-form select option { background: var(--select-bg); color: var(--form-text); }
.ph-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ph-form-submit { background: #ff2222; border: none; color: #fff; font-size: 13px; font-weight: 600; font-family: inherit; padding: 10px 24px; cursor: pointer; border-radius: 4px; transition: background .15s; align-self: flex-start; }
.ph-form-submit:hover { background: #cc1111; }
.ph-form-ok { font-size: 13px; color: #22c55e; padding: 8px 0; display: none; }

/* FOOTER */
.ph-footer { background: var(--footer-bg); border-top: 1px solid var(--border); margin-top: 40px; padding: 28px 0; transition: background .25s; }
.ph-footer-inner { max-width: 748px; margin: 0 auto; width: 88%; }
.ph-footer p { font-size: 14px; color: var(--footer-text); line-height: 1.9; margin-bottom: 6px; }
.ph-footer a { color: var(--footer-text); text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.2); transition: border-color .15s; }
.ph-footer a:hover { border-bottom-color: var(--footer-text); }
.ph-footer-links { display: flex; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.ph-footer-link { font-size: 14px; color: var(--footer-text); text-decoration: none; border-bottom: none !important; display: flex; align-items: center; gap: 6px; transition: opacity .15s; }
.ph-footer-link:hover { opacity: .7; }
.ph-footer-divider { border: none; border-top: 1px solid var(--footer-div); margin: 18px 0; }
.ph-footer-credit { font-size: 13px; color: var(--footer-text); line-height: 1.8; opacity: .6; }
.ph-footer-credit a { color: var(--footer-text); }

/* RESPONSIVE */
@media (max-width: 600px) {
  .ph-nav-inner, .ph-wrap, .ph-form-section, .ph-footer-inner { width: 94%; }
  .ph-hero h1 { font-size: 24px; }
  .ph-logo { font-size: 24px; }
  .ph-logo .cl { font-size: 16px; }
  .ph-form-row { grid-template-columns: 1fr; }

  /* Ocultar columna videos en mobile */
  .phch-col:nth-child(3), .ph-stat:nth-child(3) { display: none; }

  /* Reducir gaps y tamaños para que quepa el nombre */
  .ph-stats { gap: 10px; }
  .ph-stat { width: 46px; }
  .ph-stat-v { font-size: 13px; }
  .ph-stat-l { font-size: 9px; }
  .ph-stat-plat { width: 28px; }
  .phch-col { width: 46px; font-size: 9px; }
  .phch-col.plat { width: 28px; }
  .ph-cols-header { gap: 10px; }
  .ph-item { gap: 10px; }
  .ph-thumb { width: 38px; height: 38px; font-size: 16px; }
  .phch-thumb { width: 38px; }
  .ph-num { width: 16px; font-size: 12px; }
  .phch-num { width: 16px; }
  .ph-ch { font-size: 14px; }
  .ph-tt { font-size: 11px; }
}