/**
 * Centro de la app (#m-backup) — layout v2 + iconos HD.
 * Cargar DESPUÉS de styles.min.css.
 */

/* ── Modal un poco más ancho para grilla 3 col ── */
#m-backup.backup-centro-modal-serio-v1.bk-centro-layout-v2 > .mbox.bitacora-mbox.ani-modal-serio-v2__mbox {
  max-width: min(520px, calc(100vw - 20px)) !important;
}

#m-backup.backup-centro-modal-serio-v1.bk-centro-layout-v2 .modal-serio-body.bk-centro-layout-v2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 10px !important;
}

/* ── Botones — icono directo, sin recuadros ── */
#m-backup.backup-centro-modal-serio-v1 .bk-serio-btn img {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  filter: none !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-action-btn img {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
}

/* Tile Leche — mismo wrap neutro que el resto (icono HD serio, sin pastilla azul) */
#m-backup.backup-centro-modal-serio-v1 .bk-centro-col-tile--leche .bk-centro-col-tile__ico-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#m-backup.backup-centro-modal-serio-v1 .serio-v1-icon-box img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  filter: none !important;
}

/* ══════════════════════════════════════════════════════════════
   ZONA HERO — estado + backup en una sola tarjeta
   ══════════════════════════════════════════════════════════════ */
#m-backup.backup-centro-modal-serio-v1 .bk-centro-hero {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 10px !important;
  background: var(--gris-0, #ffffff) !important;
  border: var(--borde-fino, 1px solid #cbd5e1) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-hero__estado {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  background: var(--gris-50, #f8fafc) !important;
  border: var(--borde-fino, 1px solid #cbd5e1) !important;
  border-left: 3px solid var(--gris-400, #94a3b8) !important;
  box-shadow: none !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-hero__estado .bk-serio-estado-tit {
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-hero__estado .bk-serio-estado-sub {
  font-size: 11px !important;
  line-height: 1.25 !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-progreso-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-progreso-top {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11px !important;
  color: var(--texto-suave, #64748b) !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-progreso-track {
  height: 6px !important;
  background: var(--gris-200, #e2e8f0) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-progreso-bar {
  height: 100% !important;
  width: 0% !important;
  border-radius: 20px !important;
  background: var(--manto-btn-b2-bg, linear-gradient(180deg, #475569 0%, #334155 100%)) !important;
  transition: width 0.25s ease !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-hero__estado .bk-serio-estado-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-hero__estado-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-hero__firebase-btn {
  flex: 0 0 auto !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-hero__ping {
  margin: 0 !important;
  font-size: 11px !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-hero__backup {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-hero__stats {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px 12px !important;
  align-items: end !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-hero__stat {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-hero__stat--total {
  align-items: flex-end !important;
  text-align: right !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-ultimo-val {
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: var(--texto-fuerte, #0f172a) !important;
  word-break: break-word !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-total-regs {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--texto-suave, #64748b) !important;
  white-space: nowrap !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-hero__cta .bk-serio-btn,
#m-backup.backup-centro-modal-serio-v1 .bk-centro-hero__cta #btn-bk-subir {
  width: 100% !important;
  min-height: 40px !important;
}

/* ══════════════════════════════════════════════════════════════
   SECCIONES — títulos ligeros (sin bloques numerados)
   ══════════════════════════════════════════════════════════════ */
#m-backup.backup-centro-modal-serio-v1 .bk-centro-seccion {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-seccion__tit {
  margin: 0 !important;
  padding: 0 2px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--texto-fuerte, #0f172a) !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-seccion__hint {
  margin: -4px 0 0 !important;
  padding: 0 2px !important;
  font-size: 11px !important;
  color: var(--texto-suave, #64748b) !important;
  line-height: 1.3 !important;
}

/* ══════════════════════════════════════════════════════════════
   COLECCIONES — grilla 3 col, tile vertical compacto
   ══════════════════════════════════════════════════════════════ */
#m-backup.backup-centro-modal-serio-v1 .bk-centro-colecciones-grid,
#m-backup.backup-centro-modal-serio-v1 #bk-colecciones {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 8px !important;
  background: var(--gris-100, #f1f5f9) !important;
  border: var(--borde-fino, 1px solid #cbd5e1) !important;
  border-radius: 12px !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-col-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  min-height: 78px !important;
  padding: 6px 4px 8px !important;
  text-align: center !important;
  background: var(--gris-0, #ffffff) !important;
  border: var(--borde-fino, 1px solid #cbd5e1) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  cursor: pointer !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-col-tile:hover,
#m-backup.backup-centro-modal-serio-v1 .bk-centro-col-tile:focus-visible {
  border-color: var(--gris-400, #94a3b8) !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-col-tile--empty {
  opacity: 0.65 !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-col-tile__ico-wrap {
  flex: 0 0 auto !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-col-tile__ico {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  object-fit: contain !important;
  display: block !important;
  filter: none !important;
  -webkit-filter: none !important;
  image-rendering: auto !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-col-tile__body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  min-width: 0 !important;
  width: 100% !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-col-tile__tit {
  display: block !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: var(--texto-fuerte, #0f172a) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-col-tile__desc {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: var(--texto-suave, #64748b) !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-col-tile:not(.bk-centro-col-tile--empty) .bk-centro-col-tile__desc {
  color: var(--texto-base, #334155) !important;
}

/* ══════════════════════════════════════════════════════════════
   COMUNICACIONES — correo + WhatsApp en 2 columnas
   ══════════════════════════════════════════════════════════════ */
#m-backup.backup-centro-modal-serio-v1 .bk-centro-comms-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-comms-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 10px !important;
  background: var(--gris-0, #ffffff) !important;
  border: var(--borde-fino, 1px solid #cbd5e1) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  min-width: 0 !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-comms-card__tit {
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--texto-fuerte, #0f172a) !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-mail-hint {
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  color: var(--texto-suave, #64748b) !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-comms-card .fg {
  margin-bottom: 0 !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-comms-card .flbl {
  font-size: 10px !important;
  margin-bottom: 4px !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-comms-card .fi {
  min-height: 36px !important;
  font-size: 13px !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-mail-btn,
#m-backup.backup-centro-modal-serio-v1 .bk-centro-comms-card__acts .bk-serio-btn {
  width: 100% !important;
  min-height: 34px !important;
  font-size: 11px !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-comms-card__acts {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-comms-card__acts .bk-serio-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-wa-estado {
  margin: 0 !important;
  font-size: 10px !important;
}

/* ══════════════════════════════════════════════════════════════
   INFO — barra compacta + changelog colapsable
   ══════════════════════════════════════════════════════════════ */
#m-backup.backup-centro-modal-serio-v1 .bk-centro-info-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  background: var(--gris-0, #ffffff) !important;
  border: var(--borde-fino, 1px solid #cbd5e1) !important;
  border-radius: 12px !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-info-bar__kpis {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px 16px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-info-kpi {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-info-kpi .bk-serio-kpi-val {
  font-size: 12px !important;
  font-weight: 800 !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-info-bar__guia {
  flex: 0 0 auto !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-changelog-details {
  background: var(--gris-50, #f8fafc) !important;
  border: var(--borde-fino, 1px solid #cbd5e1) !important;
  border-radius: 10px !important;
  padding: 0 10px 8px !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-changelog-details__sum {
  padding: 8px 0 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--texto-base, #334155) !important;
  cursor: pointer !important;
  list-style: none !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-changelog-details__sum::-webkit-details-marker {
  display: none !important;
}

#m-backup.backup-centro-modal-serio-v1 .bk-centro-changelog {
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: var(--texto-suave, #64748b) !important;
  max-height: 120px !important;
  overflow-y: auto !important;
}

/* ── Responsive ── */
@media (max-width: 400px) {
  #m-backup.backup-centro-modal-serio-v1 .bk-centro-comms-grid {
    grid-template-columns: 1fr !important;
  }

  #m-backup.backup-centro-modal-serio-v1 .bk-centro-hero__estado {
    flex-wrap: wrap !important;
  }

  #m-backup.backup-centro-modal-serio-v1 .bk-centro-hero__firebase-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 340px) {
  #m-backup.backup-centro-modal-serio-v1 .bk-centro-colecciones-grid,
  #m-backup.backup-centro-modal-serio-v1 #bk-colecciones {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 480px) {
  #m-backup.backup-centro-modal-serio-v1 .bk-centro-colecciones-grid,
  #m-backup.backup-centro-modal-serio-v1 #bk-colecciones {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}