/* Panel de Carlos — colores de Sambotella, pensado primero para el celular */

:root{
  --fondo:#0D0D0F; --tarjeta:#141416; --borde:#26262b;
  --texto:#F2F2F3; --tenue:#8A8A93;
  --dorado:#F1C40F; --verde:#2ECC71; --rojo:#E5534B;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* ── barra ── */
.barra{background:#000;border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:50}
.barra-in{max-width:1080px;margin:0 auto;padding:14px 16px;display:flex;align-items:baseline;gap:10px}
.marca{font-weight:800;letter-spacing:.5px;text-decoration:none;font-size:17px}
.marca-sub{color:var(--tenue);font-size:12px;flex:1}
.salir{color:var(--tenue);font-size:12px;text-decoration:none;border:1px solid var(--borde);
  padding:5px 11px;border-radius:999px}
.salir:hover{color:var(--texto);border-color:var(--tenue)}

/* ── pestañas ── */
.tabs{background:#0A0A0C;border-bottom:1px solid var(--borde);position:sticky;top:53px;z-index:49}
.tabs-in{max-width:1080px;margin:0 auto;display:flex;gap:2px;overflow-x:auto;
  scrollbar-width:none;padding:0 8px}
.tabs-in::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:13px 14px;
  text-decoration:none;color:var(--tenue);font-size:13px;font-weight:600;white-space:nowrap;
  border-bottom:2px solid transparent}
.tab:hover{color:var(--texto)}
.tab.on{color:var(--dorado);border-bottom-color:var(--dorado)}
.tab-i{font-size:11px;opacity:.8}

/* ── hoja ── */
.hoja{max-width:1080px;margin:0 auto;padding:22px 16px 60px}
.titulo{font-size:19px;font-weight:800;margin:34px 0 4px;letter-spacing:-.2px}
.titulo:first-child{margin-top:6px}
.sub{color:var(--tenue);font-size:13px;margin:0 0 14px}
.vacio{color:var(--tenue);font-size:14px;background:var(--tarjeta);border:1px dashed var(--borde);
  border-radius:12px;padding:20px;text-align:center}
.mas{margin:18px 0 0}
.mas a{color:var(--dorado);font-weight:600;font-size:14px;text-decoration:none}
.grande{font-size:17px;font-weight:700;margin:0}

/* ── tarjetas de número ── */
.tarjetas{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:15px 14px;
  display:flex;flex-direction:column;gap:2px}
.tarjeta.destaca{border-color:rgba(46,204,113,.45);background:linear-gradient(180deg,rgba(46,204,113,.09),transparent)}
.tarjeta.aviso{border-color:rgba(241,196,15,.4)}
.t-num{font-size:27px;font-weight:800;line-height:1.1;letter-spacing:-1px}
.t-tit{font-size:12.5px;font-weight:600;line-height:1.35}
.t-pie{font-size:11.5px;color:var(--tenue)}
.bloque{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:16px;margin-top:12px}
.bloque .tarjetas{grid-template-columns:repeat(3,1fr);margin-bottom:0}
.bloque .tarjeta{background:#0D0D0F}
.bloque .t-num{font-size:22px}

/* ── listas ── */
.lista{list-style:none;margin:12px 0 0;padding:0;border:1px solid var(--borde);
  border-radius:12px;overflow:hidden}
.lista li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:12px 14px;background:var(--tarjeta);border-bottom:1px solid var(--borde);font-size:13.5px}
.lista li:last-child{border-bottom:0}
.lista li b{font-weight:600;word-break:break-word}
.lista li span{color:var(--tenue);font-size:12px;white-space:nowrap;flex:0 0 auto}
.lista a{color:var(--dorado);text-decoration:none}

/* ── filas (en vez de tablas: una tabla de 6 columnas no entra en un celular) ── */
.filas{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.fila{background:var(--tarjeta);border:1px solid var(--borde);border-radius:12px;padding:13px 14px}
.f-tit b{display:block;font-size:14px;font-weight:700;line-height:1.35;word-break:break-word}
.f-tit span{display:block;font-size:11.5px;color:var(--tenue);margin-top:2px}
.f-nums{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;
  padding-top:10px;border-top:1px solid #1d1d21}
.f-nums span{font-size:11.5px;color:var(--tenue);white-space:nowrap}
.f-nums b{font-size:15px;font-weight:800;color:var(--texto);margin-right:3px}
.f-nums .verde b,.verde{color:var(--verde)}
.f-nums .rojo b{color:var(--rojo)}
.tenue{color:var(--tenue)}

/* ── barras de suscriptores ── */
.barras{display:flex;align-items:flex-end;gap:4px;height:150px;margin-top:14px;
  padding:10px 8px;background:var(--tarjeta);border:1px solid var(--borde);border-radius:12px;
  overflow-x:auto}
.barra{flex:1 0 26px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:100%;gap:4px}
.b-n{font-size:10px;color:var(--tenue);font-weight:700}
.b-col{width:100%;max-width:26px;background:linear-gradient(180deg,var(--dorado),#9A7B0A);
  border-radius:4px 4px 0 0;min-height:4px}
.b-f{font-size:9.5px;color:var(--tenue);white-space:nowrap}

/* ── combos ── */
.combos{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.combo{background:var(--tarjeta);border:1px solid var(--borde);border-radius:12px;padding:10px;
  text-decoration:none;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.combo img,.c-sinfoto{width:78px;height:78px;object-fit:contain;border-radius:8px;background:#1b1b1f}
.c-nom{font-size:12px;font-weight:600;line-height:1.3}
.c-pre{font-size:13px;font-weight:800;color:var(--verde)}

/* ── chips ── */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.chip{background:var(--tarjeta);border:1px solid var(--borde);border-radius:999px;
  padding:6px 12px;font-size:12px;text-decoration:none;color:var(--tenue)}
.chip:hover{color:var(--texto);border-color:var(--tenue)}

/* ── nota ── */
.nota{margin-top:20px;background:rgba(241,196,15,.07);border:1px solid rgba(241,196,15,.28);
  border-radius:12px;padding:14px 15px;font-size:13px;line-height:1.6;color:#E8E3CE}
.nota b{color:var(--dorado)}

/* ── bitácora ── */
.bitacora{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.bitacora li{background:var(--tarjeta);border:1px solid var(--borde);border-radius:12px;padding:14px}
.bi-cab{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.bitacora time{font-size:11.5px;color:var(--tenue)}
.bitacora b{display:block;font-size:14.5px;font-weight:700;line-height:1.35}
.bitacora p{margin:5px 0 0;font-size:13px;color:var(--tenue);line-height:1.55}
.etiqueta{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  padding:3px 9px;border-radius:999px;border:1px solid}
.e-tienda{color:#F1C40F;border-color:rgba(241,196,15,.4);background:rgba(241,196,15,.08)}
.e-correos{color:#5AA9FF;border-color:rgba(90,169,255,.4);background:rgba(90,169,255,.08)}
.e-web{color:#C08CFF;border-color:rgba(192,140,255,.4);background:rgba(192,140,255,.08)}
.e-bot{color:#2ECC71;border-color:rgba(46,204,113,.4);background:rgba(46,204,113,.08)}
.e-velocidad{color:#FF9A5A;border-color:rgba(255,154,90,.4);background:rgba(255,154,90,.08)}

/* ── pie ── */
.pie{border-top:1px solid var(--borde);padding:22px 16px 40px;text-align:center;
  color:var(--tenue);font-size:12px}
.pie p{margin:3px 0}
.pie a{color:var(--dorado);text-decoration:none}
.pie-mini{font-size:11px;opacity:.7}

/* ── entrar ── */
body.centrado{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.entrar{background:var(--tarjeta);border:1px solid var(--borde);border-radius:18px;
  padding:30px 24px;width:100%;max-width:370px;text-align:center}
.entrar-logo{max-width:180px;height:auto;margin-bottom:14px}
.entrar h1{font-size:19px;margin:0;font-weight:800}
.entrar-sub{color:var(--tenue);font-size:13px;margin:5px 0 22px}
.entrar label{display:block;text-align:left;font-size:12px;font-weight:600;
  color:var(--tenue);margin-bottom:13px}
.entrar input{width:100%;margin-top:5px;background:#0D0D0F;border:1px solid var(--borde);
  border-radius:10px;padding:12px;color:var(--texto);font-size:16px;font-family:inherit}
.entrar input:focus{outline:none;border-color:var(--dorado)}
.entrar button{width:100%;margin-top:8px;background:var(--dorado);color:#1A1208;border:0;
  border-radius:10px;padding:13px;font-size:15px;font-weight:800;font-family:inherit;cursor:pointer}
.entrar button:hover{filter:brightness(1.08)}
.alerta{background:rgba(229,83,75,.12);border:1px solid rgba(229,83,75,.4);color:#FFB3AE;
  border-radius:10px;padding:10px;font-size:12.5px;margin:0 0 16px}

/* ── pantallas grandes ── */
@media (min-width:700px){
  body{font-size:15.5px}
  .tarjetas{grid-template-columns:repeat(4,1fr)}
  .combos{grid-template-columns:repeat(5,1fr)}
  .titulo{font-size:22px}
  .t-num{font-size:31px}
  .combo img,.c-sinfoto{width:92px;height:92px}
}

/* ── reparto: en cuántos correos abrió cada quien ── */
.reparto{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.rep{background:var(--tarjeta);border:1px solid var(--borde);border-radius:12px;padding:13px 14px}
.rep.verde{border-color:rgba(46,204,113,.4)}
.rep.rojo{border-color:rgba(229,83,75,.3)}
.rep-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.rep-cab>b{font-size:14px;font-weight:700}
.rep-cab>span{font-size:11.5px;color:var(--tenue);white-space:nowrap}
.rep-cab>span b{font-size:17px;font-weight:800;color:var(--texto);margin-right:3px}
.rep-pie{margin:7px 0 0;font-size:11.5px;color:var(--tenue)}