/* CBK Manager · Disparos por período · responsive dentro de tarjeta */
.cbk-shot-period-tools{
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  gap:clamp(4px, .7cqi, 8px);
  flex-wrap:wrap;
  min-width:0;
}

.cbk-shot-period-tools label{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:78px;
  font-size:clamp(9px, 1.15cqi, 11px);
  line-height:1.05;
}

.cbk-shot-period-tools select,
.cbk-shot-period-tools button{
  min-height:26px;
  max-height:30px;
  box-sizing:border-box;
  background:#ecfeff;
  color:#164e63;
  border:1px solid #0891b2;
  border-radius:7px;
  padding:4px clamp(5px, .8cqi, 8px);
  font:inherit;
  font-size:clamp(9px, 1.1cqi, 11px);
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
}

.cbk-shot-period-tools select{min-width:84px}
.cbk-shot-period-tools select:disabled,
.cbk-shot-period-tools button:disabled{opacity:.55;cursor:not-allowed}

.cbk-shot-period-actions{
  display:flex;
  align-items:center;
  gap:clamp(3px, .5cqi, 6px);
  min-width:0;
  flex-wrap:nowrap;
}

.cbk-shot-period-tools .cbk-shot-period-update{
  background:#0891b2;
  color:#fff;
  font-weight:800;
}

.cbk-shot-period-label{
  min-width:0;
  margin:1px 0 0;
  font-size:clamp(8px, 1.05cqi, 10px);
  line-height:1.15;
  max-height:2.3em;
  overflow:auto;
  overflow-wrap:anywhere;
  scrollbar-width:thin;
}

.cbk-shot-period-chart{
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(6px, 1.15cqi, 12px);
  overflow:hidden;
}

.cbk-shot-pie{
  width:clamp(62px, 11cqi, 88px);
  height:clamp(62px, 11cqi, 88px);
  border-radius:50%;
  flex:0 0 auto;
}

.cbk-shot-period-chart ul{
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  padding:0;
  margin:0;
  list-style:none;
}

.cbk-shot-period-chart li{
  display:grid;
  grid-template-columns:8px minmax(0,1fr) auto;
  align-items:center;
  column-gap:clamp(4px, .65cqi, 7px);
  margin:clamp(3px, .65cqi, 5px) 0;
  min-width:0;
  font-size:clamp(8.5px, 1.12cqi, 11px);
  line-height:1.1;
}

.cbk-shot-period-chart li span{
  width:8px;
  height:8px;
  border-radius:3px;
  flex-shrink:0;
}

.cbk-shot-period-chart li strong{
  margin-left:0;
  white-space:nowrap;
  font-size:inherit;
}

.cbk-shot-period-chart li:not(:has(strong)){
  grid-template-columns:8px minmax(0,1fr);
}

.cbk-shot-period-empty{
  padding:6px;
  font-size:clamp(9px, 1.15cqi, 11px);
  line-height:1.2;
}

.cbk-shot-period-tools button:focus-visible,
.cbk-shot-period-tools select:focus-visible{
  outline:2px solid #0891b2;
  outline-offset:2px;
}

/* La tarjeta ocupa exactamente dos tarjetas base (2 columnas x 1 fila). */
#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"]{
  grid-column:span 2;
  grid-row:span 1;
  min-width:0;
  min-height:0;
  align-self:stretch;
  overflow:hidden;
  container-type:inline-size;
  container-name:cbk-shot-period-card;
  padding:clamp(9px, 1.25cqi, 14px);
  gap:clamp(2px, .45cqi, 4px);
}

#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-vz-card__head{
  min-width:0;
  flex:0 0 auto;
  align-items:center;
  gap:8px;
}

#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-vz-card__title{
  min-width:0;
  font-size:clamp(11px, 1.75cqi, 15px);
  line-height:1.05;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-vz-card__tag{
  flex:0 0 auto;
  font-size:clamp(8px, 1.1cqi, 10px);
  line-height:1;
}

#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-vz-card__body{
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(138px, .72fr) minmax(210px, 1.28fr);
  grid-template-rows:auto auto minmax(0,1fr);
  column-gap:clamp(8px, 1.7cqi, 16px);
  row-gap:clamp(1px, .35cqi, 4px);
  align-items:start;
  justify-content:stretch;
}

#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-vz-card__body>div:first-child{
  grid-column:1;
  grid-row:1;
  min-width:0;
}

#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-vz-value{
  font-size:clamp(30px, 5.2cqi, 44px);
  line-height:.86;
  margin:0;
}

#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-vz-subvalue{
  margin-top:2px;
  font-size:clamp(9px, 1.45cqi, 12px);
  line-height:1.05;
  white-space:normal;
}

#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-shot-period-tools{
  grid-column:1;
  grid-row:2;
}

#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-shot-period-label{
  grid-column:1;
  grid-row:3;
  align-self:start;
}

#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-shot-period-chart{
  grid-column:2;
  grid-row:1 / span 3;
  align-self:stretch;
}

#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-vz-card__foot{
  flex:0 0 auto;
  min-width:0;
  margin-top:0;
  font-size:clamp(8px, 1.05cqi, 10px);
  line-height:1.08;
  max-height:2.2em;
  overflow:hidden;
}

/* Ajustes según el ancho real de ESTA tarjeta, no según el zoom del navegador. */
@container cbk-shot-period-card (max-width: 700px){
  #cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-vz-card__body{
    grid-template-columns:minmax(126px, .74fr) minmax(180px, 1.26fr);
    column-gap:8px;
  }
  .cbk-shot-pie{width:68px;height:68px}
  .cbk-shot-period-chart{gap:7px}
  .cbk-shot-period-chart li{font-size:9px;margin:3px 0;column-gap:4px}
  .cbk-shot-period-tools{gap:4px}
  .cbk-shot-period-actions{gap:3px}
  .cbk-shot-period-tools select,
  .cbk-shot-period-tools button{padding:4px 5px;font-size:9px}
}

@container cbk-shot-period-card (max-width: 540px){
  #cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-vz-card__body{
    grid-template-columns:minmax(116px, .78fr) minmax(155px, 1.22fr);
    column-gap:6px;
  }
  #cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-vz-value{font-size:30px}
  #cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-vz-subvalue{font-size:9px}
  .cbk-shot-pie{width:58px;height:58px}
  .cbk-shot-period-chart{gap:5px}
  .cbk-shot-period-chart li{font-size:8px;grid-template-columns:7px minmax(0,1fr) auto}
  .cbk-shot-period-chart li span{width:7px;height:7px}
  .cbk-shot-period-tools label{font-size:8px;min-width:70px}
  .cbk-shot-period-tools select,
  .cbk-shot-period-tools button{min-height:24px;max-height:26px;font-size:8px;padding:3px 4px}
  .cbk-shot-period-tools select{min-width:72px}
  .cbk-shot-period-label{font-size:8px}
}

/* Si el visualizador pasa a una sola columna, conserva el contenido dentro de la tarjeta. */
@media(max-width:600px){
  #cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"]{
    grid-column:1 / -1;
    grid-row:auto;
    min-height:220px;
  }
}

.cbk-vz-dark .cbk-shot-period-tools select,
.cbk-vz-dark .cbk-shot-period-tools button{
  background:#41464f;
  color:#f1f5f9;
  border-color:#616a76;
}

.cbk-vz-dark .cbk-shot-period-tools .cbk-shot-period-update{
  background:#0891b2;
  color:#fff;
  border-color:#22d3ee;
}

/* Disparos del día: resumen, calendario de un día y tabla operativa. */
#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-vz-card__body{
  grid-template-columns:minmax(150px,.7fr) minmax(260px,1.3fr);
  grid-template-rows:auto auto auto minmax(0,1fr);
  column-gap:clamp(10px,1.8cqi,18px);
  row-gap:clamp(2px,.45cqi,5px);
}
#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-shot-period-tools{
  grid-column:1;grid-row:2;align-self:start;position:relative;
}
#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-shot-date-input{
  position:absolute;left:0;top:0;width:1px;height:1px;opacity:.01;pointer-events:none;
}
#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-shot-period-label{
  grid-column:1;grid-row:3;
}
#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-shot-period-chart{
  grid-column:1;grid-row:4;align-self:center;justify-content:flex-start;overflow:visible;
}
#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-shot-pie--empty{
  background:conic-gradient(#06b6d4 0 100%);opacity:.35;
}
#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-shot-records{
  grid-column:2;grid-row:1 / span 4;align-self:stretch;min-width:0;min-height:0;
  overflow:auto;border:1px solid #cbd5e1;border-radius:10px;background:rgba(255,255,255,.55);
}
#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-shot-records table{
  width:100%;height:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;
  color:#172033;font-size:clamp(9px,1.3cqi,13px);
}
#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-shot-records th{
  position:sticky;top:0;z-index:1;background:#f1f5f9;color:#263244;text-align:left;
  padding:8px 7px;font-weight:800;border-bottom:1px solid #cbd5e1;white-space:normal;
}
#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-shot-records td{
  padding:7px;border-bottom:1px solid #dbe3ec;overflow-wrap:anywhere;vertical-align:middle;
}
#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-shot-records tr:last-child td{border-bottom:0}
#cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-shot-records-empty{text-align:center;color:#64748b}
#cbk-visualizador-overlay.cbk-vz-dark [data-cbk-vz-card="shot_periods"] .cbk-shot-records{background:#33373e;border-color:#50565e}
#cbk-visualizador-overlay.cbk-vz-dark [data-cbk-vz-card="shot_periods"] .cbk-shot-records table{background:#33373e;color:#fff}
#cbk-visualizador-overlay.cbk-vz-dark [data-cbk-vz-card="shot_periods"] .cbk-shot-records th{background:#33373e;color:#fff;border-color:#50565e}
#cbk-visualizador-overlay.cbk-vz-dark [data-cbk-vz-card="shot_periods"] .cbk-shot-records td{background:#33373e;color:#fff;border-color:#50565e}
#cbk-visualizador-overlay.cbk-vz-dark [data-cbk-vz-card="shot_periods"] .cbk-shot-records-empty{color:#fff}
@container cbk-shot-period-card (max-width:600px){
  #cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-vz-card__body{grid-template-columns:minmax(115px,.7fr) minmax(170px,1.3fr);column-gap:7px}
  #cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-shot-records th,
  #cbk-visualizador-overlay [data-cbk-vz-card="shot_periods"] .cbk-shot-records td{padding:5px 4px;font-size:9px}
}