/* DTC OS — hoja única. Oscuro, editorial, denso en datos. */
:root{
  --bg:#0b0c0e; --sup:#121417; --sup2:#171a1f; --linea:#24282f;
  --tx:#e8eaed; --dim:#9aa1ab; --tenue:#6b727d;
  --acc:#d9b25c; --acc2:#7fd1c1;
  --rojo:#e5534b; --naranja:#e08c3a; --amarillo:#d9b25c; --negro:#7c828c;
  --r:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--tx);
  font:15px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a{color:inherit}
code{font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--acc)}

/* --- barra ---------------------------------------------------------- */
.barra{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  padding:14px 28px; background:rgba(11,12,14,.9);
  border-bottom:1px solid var(--linea); backdrop-filter:blur(8px);
}
.logo{display:flex; gap:6px; align-items:baseline; text-decoration:none; font-weight:700; letter-spacing:.06em}
.logo .t1{color:var(--tx)} .logo .t2{color:var(--acc)}
.barra nav{display:flex; gap:20px; flex-wrap:wrap}
.barra nav a{
  text-decoration:none; color:var(--dim); font-size:14px;
  padding:4px 0; border-bottom:2px solid transparent;
}
.barra nav a:hover{color:var(--tx)}
.barra nav a.on{color:var(--tx); border-bottom-color:var(--acc)}

main{max-width:1180px; margin:0 auto; padding:36px 28px 80px}
h1{font-size:30px; line-height:1.2; margin:0 0 10px; letter-spacing:-.02em}
h2{font-size:13px; text-transform:uppercase; letter-spacing:.14em; color:var(--tenue);
   margin:0 0 14px; font-weight:600}
h3{font-size:16px; margin:0 0 8px; line-height:1.35}
section{margin:38px 0}
.lede{color:var(--dim); max-width:66ch; margin:0 0 6px}
.nota{color:var(--tenue); font-size:13.5px; max-width:74ch}
.miga{color:var(--tenue); font-size:13px; margin:0 0 10px}
.miga a{color:var(--dim)}
.dim{color:var(--dim)}
.vacio{color:var(--tenue); padding:28px 0}
.cuenta{color:var(--tenue); font-size:13px; margin:18px 0 12px}
.cuenta b{color:var(--tx)}
.ok{color:var(--acc2); font-size:14px}

/* --- kpis ----------------------------------------------------------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:26px 0}
.kpi{background:var(--sup); border:1px solid var(--linea); border-radius:var(--r); padding:18px}
.kpi b{display:block; font-size:30px; line-height:1; letter-spacing:-.02em}
.kpi span{display:block; margin-top:6px; color:var(--tenue); font-size:12.5px}

/* --- barras --------------------------------------------------------- */
.barras{display:flex; flex-direction:column; gap:8px; max-width:640px}
.barra-wrap{display:contents}
.barras .barra{
  position:static; display:grid; grid-template-columns:150px 1fr 40px;
  align-items:center; gap:12px; padding:0; border:0; background:none; backdrop-filter:none;
}
.barras .et{color:var(--dim); font-size:13.5px}
.barras .tr{height:8px; background:var(--sup2); border-radius:99px; overflow:hidden}
.barras .tr i{display:block; height:100%; background:var(--acc); border-radius:99px}
.barras b{text-align:right; font-size:13px; color:var(--dim)}

/* --- nube de marcas ------------------------------------------------- */
.nube{display:flex; flex-wrap:wrap; gap:8px}
.nube a{
  text-decoration:none; background:var(--sup); border:1px solid var(--linea);
  border-radius:99px; padding:6px 14px; font-size:13.5px; color:var(--dim);
}
.nube a:hover{border-color:var(--acc); color:var(--tx)}
.nube b{color:var(--acc); margin-left:4px}

/* --- listas dos columnas -------------------------------------------- */
.doscol{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:26px; margin-top:16px}
.doscol h3{font-size:13px; color:var(--tenue); text-transform:uppercase; letter-spacing:.1em}
.lista{list-style:none; margin:0; padding:0}
.lista li{display:flex; justify-content:space-between; gap:12px; padding:7px 0;
  border-bottom:1px solid var(--linea); font-size:14px}
.lista a{color:var(--dim); text-decoration:none}
.lista a:hover{color:var(--tx)}
.lista b{color:var(--acc)}

/* --- buscador y filtros --------------------------------------------- */
.buscador{display:flex; gap:8px; align-items:center; margin:20px 0 6px; flex-wrap:wrap}
.buscador input[type=search]{
  flex:1; min-width:240px; background:var(--sup); border:1px solid var(--linea);
  color:var(--tx); border-radius:var(--r); padding:10px 14px; font-size:14px;
}
.buscador input[type=search]:focus{outline:none; border-color:var(--acc)}
.buscador button{
  background:var(--acc); color:#1a1508; border:0; border-radius:var(--r);
  padding:10px 18px; font-size:14px; font-weight:600; cursor:pointer;
}
.limpiar{color:var(--tenue); font-size:13px}

.filtros{display:flex; flex-direction:column; gap:10px; margin:14px 0 4px}
.filtros .fila{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap}
.filtros .fila > span{
  min-width:96px; color:var(--tenue); font-size:11.5px;
  text-transform:uppercase; letter-spacing:.1em;
}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chips a{
  text-decoration:none; font-size:12.5px; color:var(--dim);
  background:var(--sup); border:1px solid var(--linea);
  border-radius:99px; padding:4px 11px;
}
.chips a:hover{color:var(--tx)}
.chips a.on{background:var(--acc); border-color:var(--acc); color:#1a1508; font-weight:600}
.chips a.on b{color:#1a1508}
.chips b{color:var(--tenue); font-weight:600; margin-left:3px}

/* --- rejilla de tarjetas -------------------------------------------- */
.rejilla{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px}
.tarjeta{
  display:block; text-decoration:none; background:var(--sup);
  border:1px solid var(--linea); border-radius:var(--r); padding:16px;
  transition:border-color .15s, transform .15s;
}
.tarjeta:hover{border-color:var(--acc); transform:translateY(-2px)}
.tarjeta-top{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px}
.tarjeta .ang{color:var(--dim); font-size:13.5px; margin:8px 0 0}
.tarjeta-meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px}
.tarjeta-meta span{
  font-size:11.5px; color:var(--tenue); background:var(--sup2);
  border-radius:5px; padding:3px 8px;
}
.tarjeta-meta .av{color:var(--naranja)}
.tarjeta-meta .qa{color:var(--acc2)}
.pill{
  font-size:11px; color:var(--dim); background:var(--sup2);
  border-radius:99px; padding:3px 9px;
}

/* --- detalle --------------------------------------------------------- */
.ficha-meta{display:flex; gap:18px; flex-wrap:wrap; color:var(--tenue); font-size:13px; margin:14px 0 22px}
.ficha-meta b{color:var(--tx); font-weight:600}
.frames{margin:0 0 28px}
.frames img{width:100%; height:auto; border-radius:var(--r); border:1px solid var(--linea); display:block}
.frames figcaption{color:var(--tenue); font-size:12px; margin-top:8px}

.chips-qa{display:flex; gap:8px; flex-wrap:wrap}
.chip-qa{
  font-size:12.5px; color:var(--naranja); background:rgba(224,140,58,.1);
  border:1px solid rgba(224,140,58,.35); border-radius:6px; padding:5px 10px;
}
.chip-qa b{color:var(--naranja)}

.prosa{color:var(--dim); max-width:74ch; margin:0}
.prosa.guion{
  color:var(--tx); background:var(--sup); border:1px solid var(--linea);
  border-radius:var(--r); padding:18px 20px; max-width:none; font-size:14.5px;
}
.trans{
  color:var(--dim); background:var(--sup); border-left:2px solid var(--linea);
  padding:14px 18px; font-size:13.5px; border-radius:0 var(--r) var(--r) 0;
}
.hook{
  margin:0; font-size:19px; line-height:1.45; color:var(--tx);
  border-left:3px solid var(--acc); padding:6px 0 6px 18px;
}

.flujo{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px}
.fx{background:var(--sup); border:1px solid var(--linea); border-radius:var(--r); padding:16px}
.fx .fxh{font-size:11.5px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:8px}
.fx.hk{border-top:2px solid var(--acc)} .fx.hk .fxh{color:var(--acc)}
.fx.bd{border-top:2px solid var(--acc2)} .fx.bd .fxh{color:var(--acc2)}
.fx.cl{border-top:2px solid var(--tenue)} .fx.cl .fxh{color:var(--tenue)}
.fx .fxt{color:var(--dim); font-size:13.5px}

.puntos{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.puntos li{
  display:flex; gap:12px; background:var(--sup); border:1px solid var(--linea);
  border-radius:var(--r); padding:14px 16px; font-size:14px; color:var(--dim);
}
.puntos .dot{flex:0 0 auto; font-size:13px; line-height:1.6}
.puntos .cat{
  display:inline-block; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--acc); background:rgba(217,178,92,.12); border-radius:4px;
  padding:2px 7px; margin-right:8px;
}
.lista-compliance .origen{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px}
.lista-compliance .origen a{text-decoration:none}

/* --- tablas ---------------------------------------------------------- */
.tabla{width:100%; border-collapse:collapse; margin:0 0 20px; font-size:14px}
.tabla th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--tenue); font-weight:600; padding:8px 12px; border-bottom:1px solid var(--linea);
}
.tabla td{padding:10px 12px; border-bottom:1px solid var(--linea); vertical-align:top}
.tabla .k{color:var(--tenue); width:190px; font-size:12.5px}
.tabla.ficha td{font-size:14px}

/* --- paginación ------------------------------------------------------ */
.pag{display:flex; gap:6px; flex-wrap:wrap; margin:26px 0 0}
.pag a{
  text-decoration:none; color:var(--dim); background:var(--sup);
  border:1px solid var(--linea); border-radius:7px;
  min-width:34px; text-align:center; padding:6px 10px; font-size:13px;
}
.pag a.on{background:var(--acc); border-color:var(--acc); color:#1a1508; font-weight:600}

.pie{
  border-top:1px solid var(--linea); color:var(--tenue);
  font-size:12.5px; padding:22px 28px; text-align:center;
}

@media (max-width:640px){
  main{padding:26px 18px 60px}
  h1{font-size:24px}
  .barra{padding:12px 18px; gap:16px}
  .barras .barra{grid-template-columns:110px 1fr 34px}
  .filtros .fila > span{min-width:auto; width:100%}
}